Add source link to footer

src/app/sections/footer/index.tsx

@@ -1,8 +1,17 @@
 import { GeometricElement } from "@/app/sections/landing/geometric-element";
+import { ExternalLink } from "@/components/external-link";
 import { footer } from "@/content/footer";
+import { person } from "@/content/person";
+import { SITE_CREATED, SITE_REPO } from "@/content/site";
 import { Counter } from "./counter";
 import { SocialLinks } from "./social-links";
 
+const yearLabel = () => {
+  const created = new Date(SITE_CREATED).getUTCFullYear();
+  const current = new Date().getUTCFullYear();
+  return current > created ? `${created}-${current}` : `${created}`;
+};
+
 export const Footer = () => {
   return (
     <footer
@@ -14,6 +23,13 @@ export const Footer = () => {
         <p className="font-heading text-foreground/70 text-xl">{footer.contactPrompt}</p>
         <SocialLinks links={footer.socialLinks} />
       </div>
+      <p className="font-body text-foreground/40 text-xs tracking-wide">
+        {"🄯"} {yearLabel()} {person.name}
+        <span className="mx-1.5 text-foreground/25">·</span>
+        <ExternalLink href={SITE_REPO}>
+          <span>Source</span>
+        </ExternalLink>
+      </p>
       <div className="-translate-y-1/2 pointer-events-none absolute inset-x-0 top-1/2 opacity-30">
         <GeometricElement wrapperHeight="80px" canvasHeight="35vh" />
       </div>

src/app/sections/photography/photo-modal.tsx

@@ -4,8 +4,8 @@ import { AnimatePresence, m } from "motion/react";
 import { useEffect, useRef } from "react";
 import ArrowLeftIcon from "@/components/icons/arrow-left.svg";
 import ArrowRightIcon from "@/components/icons/arrow-right.svg";
-import ArrowUpRightIcon from "@/components/icons/arrow-up-right.svg";
 import CloseIcon from "@/components/icons/close.svg";
+import { ExternalLink } from "@/components/external-link";
 import { formatExifLine } from "./exif";
 import type { PhotoItem } from "./types";
 
@@ -188,16 +188,13 @@ export const PhotoModal = ({
               {lensName && <p className="font-mono text-foreground/80 text-xs">{lensName}</p>}
               {exifLine && <p className="font-mono text-foreground/55 text-xs">{exifLine}</p>}
             </div>
-            <a
+            <ExternalLink
               href={`${apiUrl}/assets/${photo.id}`}
-              target="_blank"
-              rel="noreferrer noopener"
               onClick={(e) => e.stopPropagation()}
-              className="group inline-flex items-center gap-1.5 font-body text-foreground/70 text-sm transition-colors hover:text-accent-cyan"
+              className="font-body text-foreground/70 text-sm"
             >
               <span>Details</span>
-              <ArrowUpRightIcon className="group-hover:-translate-y-0.5 size-3.5 transition-transform duration-200 group-hover:translate-x-0.5" />
-            </a>
+            </ExternalLink>
           </div>
         </m.div>
       ) : null}

src/components/external-link.tsx

@@ -0,0 +1,23 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import ArrowUpRight from "@/components/icons/arrow-up-right.svg";
+
+type ExternalLinkProps = {
+  href: string;
+  children: ReactNode;
+  className?: string;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick">;
+
+export const ExternalLink = ({ href, children, className, onClick }: ExternalLinkProps) => (
+  <a
+    href={href}
+    target="_blank"
+    rel="noreferrer noopener"
+    onClick={onClick}
+    className={`group inline-flex items-center gap-1.5 transition-colors hover:text-accent-cyan${
+      className ? ` ${className}` : ""
+    }`}
+  >
+    {children}
+    <ArrowUpRight className="group-hover:-translate-y-0.5 size-3.5 shrink-0 transition-transform duration-200 group-hover:translate-x-0.5" />
+  </a>
+);

src/content/site.ts

@@ -1,4 +1,5 @@
 export const SITE_URL = "https://luisdralves.dev";
+export const SITE_REPO = "https://gitea.luisdralves.dev/luis/website";
 export const SITE_TITLE = "luisdralves";
 export const SITE_DESCRIPTION =
   "Hi, Luís here. Welcome to my personal website. I'm a senior frontend engineer, six years in. I build tactile, slightly obsessive web experiments as well as practical solutions, and enjoy self-hosting anything that's critical to me, or just convenient.";