Refactor Link imports to use custom Link component and integrate view…

… transitions
IgorKowalczyk · Jan 2, 2025 · 48c9b27 · 48c9b27
1 parent f480195
commit 48c9b27
Show file tree

Hide file tree

Showing 17 changed files with 73 additions and 35 deletions.
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -2,9 +2,9 @@ import { allBlogs } from "contentlayer/generated";
 import "styles/blog.css";
 import { Metadata } from "next";
 import Image from "next/image";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Header1 } from "@/components/Headers";
+import Link from "@/components/Link";
 import { MDXComponent } from "@/components/MDXComponents";
 import { meta } from "@/config";
 import { cn } from "@/lib/utils";

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -1,8 +1,8 @@
 import { allBlogs } from "contentlayer/generated";
 import { pick } from "contentlayer2/client";
-import Link from "next/link";
 import { Icons } from "../../components/Icons";
 import { Description, Header1, Header2 } from "@/components/Headers";
+import Link from "@/components/Link";
 import { parseISO } from "@/lib/utils";
 
 export const metadata = {

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -22,7 +22,8 @@ export default function Page() {
     <div className="mt-4 flex flex-wrap gap-4">
      {contact.links.map((element) => (
       <Button variant="tertiary" href={element.href} key={`contact-link-${element.href}`} className="gap-2">
-       {element.icon} {element.title}
+       <element.icon className="size-5" />
+       {element.title}
       </Button>
      ))}
     </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import { Analytics } from "@vercel/analytics/react";
 import { GeistMono } from "geist/font/mono";
 import Script from "next/script";
 import { ThemeProvider } from "next-themes";
+import { ViewTransitions } from "next-view-transitions";
 import { Nav } from "@/components/client/Nav";
 import { Providers } from "@/components/client/Providers";
 import { Footer } from "@/components/Footer";
@@ -55,11 +56,12 @@ export const viewport = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
-  <html lang="en" suppressHydrationWarning>
-   <head>
-    {process.env.HOTJAR_ID && (
-     <Script strategy="afterInteractive" id="hotjar">
-      {`
+  <ViewTransitions>
+   <html lang="en" suppressHydrationWarning>
+    <head>
+     {process.env.HOTJAR_ID && (
+      <Script strategy="afterInteractive" id="hotjar">
+       {`
     (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:${process.env.HOTJAR_ID},hjsv:6};
@@ -69,21 +71,22 @@ export default function RootLayout({ children }: { children: React.ReactNode })
      a.appendChild(r);
     })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    `}
-     </Script>
-    )}
-   </head>
-   <body className={cn("antialiase relative scroll-smooth px-6 font-mono", GeistMono.variable)}>
-    <ThemeProvider attribute="class" disableTransitionOnChange>
-     <Providers>
-      <Nav />
-      <main className="mx-auto min-h-screen w-full max-w-screen-md">{children}</main>
-      <div className="noise pointer-events-none absolute inset-0" />
-      <div className="color-rays" />
-      <Footer />
-      <Analytics />
-     </Providers>
-    </ThemeProvider>
-   </body>
-  </html>
+      </Script>
+     )}
+    </head>
+    <body className={cn("antialiase relative scroll-smooth px-6 font-mono", GeistMono.variable)}>
+     <ThemeProvider attribute="class" disableTransitionOnChange>
+      <Providers>
+       <Nav />
+       <main className="mx-auto min-h-screen w-full max-w-screen-md">{children}</main>
+       <div className="noise pointer-events-none absolute inset-0" />
+       <div className="color-rays" />
+       <Footer />
+       <Analytics />
+      </Providers>
+     </ThemeProvider>
+    </body>
+   </html>
+  </ViewTransitions>
  );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,9 @@
 import Image from "next/image";
-import Link from "next/link";
 import { Button } from "../components/Button";
 import { Icons } from "../components/Icons";
 import { ContactForm } from "@/components/client/ContactForm";
 import { Description, Header2 } from "@/components/Headers";
+import Link from "@/components/Link";
 import { ProjectCard } from "@/components/ProjectCard";
 import { projects } from "@/config";
 import { header, contact, meta, technologies } from "@/config";

diff --git a/app/photography/components/Grid.tsx b/app/photography/components/Grid.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import Image from "next/image";
-import Link from "next/link";
 import { Masonry } from "react-plock";
+import Link from "@/components/Link";
 import type { Photo } from "@/lib/getPhotography";
 
 export const Grid = ({ photos }: { photos: Photo[] }) => {

diff --git a/app/uses/page.tsx b/app/uses/page.tsx
@@ -1,8 +1,8 @@
 import { allOtherPages } from "contentlayer/generated";
 import Image from "next/image";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Header1 } from "@/components/Headers";
+import Link from "@/components/Link";
 import { MDXComponent } from "@/components/MDXComponents";
 import setup from "@/public/assets/setup.jpg";
 

diff --git a/components/Button.tsx b/components/Button.tsx
@@ -1,7 +1,7 @@
 import { cva, VariantProps } from "class-variance-authority";
-import Link from "next/link";
 import React from "react";
 import { Icons } from "@/components/Icons";
+import Link from "@/components/Link";
 import { cn } from "@/lib/utils";
 
 export const buttonVariants = cva("group flex w-fit items-center rounded-md px-4 py-2 font-medium duration-200 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", {

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Link from "@/components/Link";
 import { footer } from "@/config";
 
 export function Footer() {

diff --git a/components/Icons.tsx b/components/Icons.tsx
@@ -1,6 +1,6 @@
-import { cn } from "@/lib/utils";
 import type { LucideIcon } from "lucide-react";
 import * as LucideIcons from "lucide-react";
+import { cn } from "@/lib/utils";
 
 export type Icon = LucideIcon;
 

diff --git a/components/Link.tsx b/components/Link.tsx
@@ -0,0 +1,17 @@
+import NextLink, { LinkProps as NextLinkProps } from "next/link";
+import { Link as TransitionLink } from "next-view-transitions";
+import { forwardRef } from "react";
+
+type LinkProps = NextLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {
+ const { href, ...rest } = props;
+
+ if (typeof href === "string" && href.startsWith("#")) {
+  return <NextLink {...rest} href={href} ref={ref} />;
+ }
+
+ return <TransitionLink {...rest} href={href} ref={ref} />;
+});
+
+export default Link;
diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
@@ -1,8 +1,8 @@
 import Image from "next/image";
-import Link from "next/link";
 import { Icons } from "./Icons";
 import { Button } from "@/components/Button";
-import { type Project } from "@/config";
+import Link from "@/components/Link";
+import type { Project } from "@/lib/types";
 import { parseISO } from "@/lib/utils";
 
 export interface ProjectCardProps extends React.HTMLAttributes<HTMLDivElement> {

diff --git a/components/client/Nav.tsx b/components/client/Nav.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import MobileNav from "@/components/client/MobileNav";
 import Popover from "@/components/client/NavPopover";
 import Settings from "@/components/client/Settings";
+import Link from "@/components/Link";
 import { nav } from "@/config";
 import { cn } from "@/lib/utils";
 

diff --git a/components/client/NavPopover.tsx b/components/client/NavPopover.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { Transition, Popover, PopoverButton, PopoverPanel, PopoverProps } from "@headlessui/react";
-import Link from "next/link";
 import { Icons } from "../Icons";
+import Link from "@/components/Link";
 import { meta } from "@/config";
 
 export default function NavPopover(props: PopoverProps) {

diff --git a/components/client/Settings.tsx b/components/client/Settings.tsx
@@ -1,14 +1,14 @@
 "use client";
 
 import { Dialog, DialogPanel, DialogTitle, DialogBackdrop, Description } from "@headlessui/react";
-import Link from "next/link";
 import { useTheme } from "next-themes";
 import { useState } from "react";
 import { useEffect } from "react";
 import { Icons } from "../Icons";
 import { Button } from "@/components/Button";
 import Select from "@/components/client/Select";
 import Switch from "@/components/client/Switch";
+import Link from "@/components/Link";
 import { meta } from "@/config";
 import { cn } from "@/lib/utils";
 

diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "next-contentlayer2": "0.5.3",
     "next-nprogress-bar": "2.4.3",
     "next-themes": "0.4.4",
+    "next-view-transitions": "0.3.4",
     "nprogress": "0.2.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml