jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-05 19:15:30 -04:00
Code Issues Activity

refactor: simplify next link component usage

Browse Source
This commit is contained in:
Jake Jarvis
2026-01-28 12:40:59 -05:00
parent 0d6e489cc8
commit 29487e6d5f
21 changed files with 221 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -34,3 +34,4 @@ yarn.lock
# vercel
.vercel
.env*.local
app/contact/page.tsx
+9 -8
View File
@@ -1,5 +1,4 @@
import PageTitle from "@/components/layout/page-title";
import Link from "@/components/link";
import ContactForm from "@/components/contact-form";
import { createMetadata } from "@/lib/metadata";
@@ -18,25 +17,27 @@ const Page = () => {
<div className="prose prose-sm prose-neutral dark:prose-invert max-w-none">
<p>
Fill out this quick form and I&rsquo;ll get back to you as soon as I can! You can also{" "}
<Link href="mailto:jake@jarv.is">email me directly</Link> or send me a direct message on{" "}
<Link href="https://bsky.app/profile/jarv.is" className="text-nowrap">
<a href="mailto:jake@jarv.is">email me directly</a> or send me a direct message on{" "}
<a href="https://bsky.app/profile/jarv.is" target="_blank" rel="noopener noreferrer">
Bluesky
</Link>{" "}
</a>{" "}
or{" "}
<Link href="https://fediverse.jarv.is/@jake" className="text-nowrap">
<a href="https://fediverse.jarv.is/@jake" target="_blank" rel="noopener noreferrer">
Mastodon
</Link>
</a>
.
</p>
<p>
You can grab my public key here:{" "}
<Link
<a
href="https://jrvs.io/pgp"
target="_blank"
rel="noopener"
title="3BC6 E577 6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39"
className="bg-muted relative rounded-sm px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium tracking-wider [word-spacing:-0.25em]"
>
2B0C 9CF2 51E6 9A39
</Link>
</a>
.
</p>
</div>
app/hillary/page.tsx
+6 -7
View File
@@ -1,7 +1,6 @@
import { env } from "@/lib/env";
import { JsonLd } from "react-schemaorg";
import PageTitle from "@/components/layout/page-title";
import Link from "@/components/link";
import Video from "@/components/video";
import { createMetadata } from "@/lib/metadata";
import type { VideoObject } from "schema-dts";
@@ -53,17 +52,17 @@ const Page = () => {
<p className="text-muted-foreground mx-4 mt-5 mb-0 text-center text-sm leading-relaxed">
Video is property of{" "}
<Link href="https://www.hillaryclinton.com/" className="font-bold">
<a href="https://www.hillaryclinton.com/" target="_blank" rel="noopener noreferrer" className="font-bold">
Hillary for America
</Link>
</a>
, the{" "}
<Link href="https://democrats.org/" className="font-bold">
<a href="https://democrats.org/" target="_blank" rel="noopener noreferrer" className="font-bold">
Democratic National Committee
</Link>
</a>
, and{" "}
<Link href="https://cnnpressroom.blogs.cnn.com/" className="font-bold">
<a href="https://cnnpressroom.blogs.cnn.com/" target="_blank" rel="noopener noreferrer" className="font-bold">
CNN / WarnerMedia
</Link>
</a>
. &copy; 2016.
</p>
</>
app/leo/page.tsx
+9 -5
View File
@@ -1,7 +1,6 @@
import { env } from "@/lib/env";
import { JsonLd } from "react-schemaorg";
import PageTitle from "@/components/layout/page-title";
import Link from "@/components/link";
import Video from "@/components/video";
import { createMetadata } from "@/lib/metadata";
import type { VideoObject } from "schema-dts";
@@ -52,13 +51,18 @@ const Page = () => {
<p className="text-muted-foreground mx-4 mt-5 mb-0 text-center text-sm leading-relaxed">
Video is property of{" "}
<Link href="https://web.archive.org/web/20070511004304/www.g4techtv.ca" className="font-bold">
<a
href="https://web.archive.org/web/20070511004304/www.g4techtv.ca"
target="_blank"
rel="noopener noreferrer"
className="font-bold"
>
G4techTV Canada
</Link>{" "}
</a>{" "}
&amp;{" "}
<Link href="https://leo.fm/" className="font-bold">
<a href="https://leo.fm/" target="_blank" rel="noopener noreferrer" className="font-bold">
Leo Laporte
</Link>
</a>
. &copy; 2007 G4 Media, Inc.
</p>
</>
app/not-found.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import Button from "@/components/ui/button";
import Video from "@/components/video";
import Link from "@/components/link";
import Link from "next/link";
import type { Metadata } from "next";
export const metadata: Metadata = {
app/notes/[slug]/page.tsx
+9 -9
View File
@@ -1,11 +1,12 @@
import { env } from "@/lib/env";
import { Suspense } from "react";
import { cacheLife } from "next/cache";
import Link from "next/link";
import { JsonLd } from "react-schemaorg";
import { formatDate, formatDateISO } from "@/lib/date";
import { CalendarDaysIcon, TagIcon, SquarePenIcon, EyeIcon, MessagesSquareIcon } from "lucide-react";
import Link from "@/components/link";
import ViewCounter from "@/components/view-counter";
import CommentCount from "@/components/comment-count";
import Comments from "@/components/comments/comments";
import CommentsSkeleton from "@/components/comments/comments-skeleton";
import { getSlugs, getFrontMatter, POSTS_DIR } from "@/lib/posts";
@@ -13,7 +14,6 @@ import { createMetadata } from "@/lib/metadata";
import siteConfig from "@/lib/config/site";
import authorConfig from "@/lib/config/author";
import { size as ogImageSize } from "./opengraph-image";
import { getCommentCounts } from "@/lib/server/comments";
import type { Metadata } from "next";
import type { BlogPosting } from "schema-dts";
@@ -61,10 +61,7 @@ const getFormattedDates = async (date: string) => {
const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
const { slug } = await params;
const [frontmatter, commentCount] = await Promise.all([
getFrontMatter(slug),
getCommentCounts(`${POSTS_DIR}/${slug}`),
]);
const frontmatter = await getFrontMatter(slug);
const formattedDates = await getFormattedDates(frontmatter!.date);
const { default: MDXContent } = await import(`../../../${POSTS_DIR}/${slug}/index.mdx`);
@@ -134,16 +131,19 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
<Link
href={`/${POSTS_DIR}/${frontmatter!.slug}#comments`}
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(commentCount || 0)} ${commentCount === 1 ? "comment" : "comments"}`}
className="text-foreground/70 flex flex-nowrap items-center gap-1.5 whitespace-nowrap hover:no-underline"
>
<MessagesSquareIcon className="inline size-3 shrink-0" aria-hidden="true" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(commentCount || 0)}</span>
<Suspense fallback={<span className="motion-safe:animate-pulse">0</span>}>
<CommentCount slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
</Suspense>
</Link>
<div className="flex min-w-14 flex-nowrap items-center gap-1.5 whitespace-nowrap">
<EyeIcon className="inline size-3 shrink-0" aria-hidden="true" />
<ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
<Suspense fallback={<span className="motion-safe:animate-pulse">0</span>}>
<ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
</Suspense>
</div>
</div>
app/notes/page.tsx
+14 -20
View File
@@ -1,7 +1,8 @@
import { env } from "@/lib/env";
import { Suspense } from "react";
import { cacheLife } from "next/cache";
import Link from "next/link";
import { EyeIcon, MessagesSquareIcon } from "lucide-react";
import Link from "@/components/link";
import PageTitle from "@/components/layout/page-title";
import { getFrontMatter, POSTS_DIR, type FrontMatter } from "@/lib/posts";
import { createMetadata } from "@/lib/metadata";
@@ -19,8 +20,10 @@ export const metadata = createMetadata({
// Hoist number formatter to avoid re-creating on every render
const numberFormatter = new Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE);
// Non-async component for displaying stats (receives data as props)
const PostStats = ({ views, comments, slug }: { views: number; comments: number; slug: string }) => {
// Async component that fetches and displays stats for a single post
const PostStats = async ({ slug }: { slug: string }) => {
const [views, comments] = await Promise.all([getViewCounts(slug), getCommentCounts(slug)]);
return (
<>
{views > 0 && (
@@ -32,8 +35,7 @@ const PostStats = ({ views, comments, slug }: { views: number; comments: number;
{comments > 0 && (
<Link
href={`/${POSTS_DIR}/${slug}#comments`}
prefetch={false}
href={`/${slug}#comments`}
title={`${numberFormatter.format(comments)} ${comments === 1 ? "comment" : "comments"}`}
className="inline-flex hover:no-underline"
>
@@ -64,11 +66,9 @@ const getFormattedPostDates = async (posts: FrontMatter[]) => {
});
};
// Async component that fetches all stats once and renders the full page
// Renders the posts list with static content, deferring stats to runtime via Suspense
const PostsList = async () => {
// Fetch posts and stats in parallel (only once per page load)
// These functions are cached with "use cache", so they can complete during prerendering
const [posts, views, comments] = await Promise.all([getFrontMatter(), getViewCounts(), getCommentCounts()]);
const posts = await getFrontMatter();
// Format dates in a cached function to avoid date-fns using new Date() during render
const formattedPosts = await getFormattedPostDates(posts);
@@ -79,18 +79,11 @@ const PostsList = async () => {
dateISO: string;
dateTitle: string;
dateDisplay: string;
views: number;
comments: number;
})[];
} = {};
formattedPosts.forEach((post) => {
(postsByYear[post.year] || (postsByYear[post.year] = [])).push({
...post,
// Include pre-fetched stats
views: views[`${POSTS_DIR}/${post.slug}`] || 0,
comments: comments[`${POSTS_DIR}/${post.slug}`] || 0,
});
(postsByYear[post.year] || (postsByYear[post.year] = [])).push(post);
});
const sections: React.ReactNode[] = [];
@@ -102,7 +95,7 @@ const PostsList = async () => {
{year}
</h2>
<ul className="space-y-4">
{posts.map(({ slug, dateISO, dateTitle, dateDisplay, title, htmlTitle, views, comments }) => (
{posts.map(({ slug, dateISO, dateTitle, dateDisplay, title, htmlTitle }) => (
<li className="flex text-base leading-relaxed" key={slug}>
<span className="text-muted-foreground w-18 shrink-0 md:w-22">
<time dateTime={dateISO} title={dateTitle}>
@@ -113,13 +106,14 @@ const PostsList = async () => {
{/* htmlTitle is sanitized by rehypeSanitize in lib/posts.ts with strict allowlist: only code, em, strong tags */}
<Link
href={`/${POSTS_DIR}/${slug}`}
prefetch={false}
dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
className="underline-offset-4 hover:underline"
style={{ viewTransitionName: `note-title-${slug}` }}
/>
<PostStats slug={slug} views={views} comments={comments} />
<Suspense>
<PostStats slug={`${POSTS_DIR}/${slug}`} />
</Suspense>
</div>
</li>
))}
app/page.tsx
+35 -20
View File
@@ -1,4 +1,4 @@
import Link from "@/components/link";
import Link from "next/link";
import { LockIcon } from "lucide-react";
const Page = () => {
@@ -27,32 +27,38 @@ const Page = () => {
<p>
Whenever possible, I also apply my experience in{" "}
<Link href="https://bugcrowd.com/jakejarvis" title="Jake Jarvis on Bugcrowd">
<a
href="https://bugcrowd.com/jakejarvis"
title="Jake Jarvis on Bugcrowd"
target="_blank"
rel="noopener noreferrer"
>
information security
</Link>{" "}
</a>{" "}
and{" "}
<Link
<a
href="https://github.com/jakejarvis?tab=repositories&q=github-actions&type=&language=&sort=stargazers"
title='My repositories tagged with "github-actions" on GitHub'
target="_blank"
rel="noopener noreferrer"
>
devops
</Link>
</a>
.
</p>
<p>
I fell in love with{" "}
<Link href="/previously" prefetch={false} title="My Terrible, Horrible, No Good, Very Bad First Websites">
<Link href="/previously" title="My Terrible, Horrible, No Good, Very Bad First Websites">
frontend web design
</Link>{" "}
and{" "}
<Link href="/notes/my-first-code" prefetch={false} title="Jake's Bulletin Board, circa 2003">
<Link href="/notes/my-first-code" title="Jake's Bulletin Board, circa 2003">
backend coding
</Link>{" "}
when my only source of income was{" "}
<Link
href="/birthday"
prefetch={false}
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
style={{
cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
@@ -66,37 +72,46 @@ const Page = () => {
<p>
I&rsquo;m currently building{" "}
<Link href="https://domainstack.io" title="Domainstack: Domain intelligence made easy" className="font-medium">
<a
href="https://domainstack.io"
title="Domainstack: Domain intelligence made easy"
className="font-medium"
target="_blank"
rel="noopener noreferrer"
>
Domainstack
</Link>
</a>
, a beautiful all-in-one domain name intelligence tool, and{" "}
<Link
<a
href="https://snoozle.ai"
title="Snoozle: AI-powered bedtime stories for children"
className="font-medium"
target="_blank"
rel="noopener noreferrer"
>
Snoozle
</Link>
</a>
, an AI-powered bedtime story generator.
</p>
<p className="mt-2 mb-0 text-sm leading-normal">
You can find my work on{" "}
<Link href="https://github.com/jakejarvis" rel="me">
<a href="https://github.com/jakejarvis" target="_blank" rel="noopener noreferrer me">
GitHub
</Link>{" "}
</a>{" "}
and{" "}
<Link href="https://www.linkedin.com/in/jakejarvis/" rel="me">
<a href="https://www.linkedin.com/in/jakejarvis/" target="_blank" rel="noopener noreferrer me">
LinkedIn
</Link>
</a>
. I&rsquo;m always available to connect over{" "}
<Link href="/contact" prefetch={false} title="Send an email">
<Link href="/contact" title="Send an email">
email
</Link>{" "}
<sup className="">
<Link
<a
href="https://jrvs.io/pgp"
rel="pgpkey"
target="_blank"
rel="noopener pgpkey"
title="Download my PGP key"
className="not-prose text-muted-foreground hover:text-primary space-x-1 px-0.5 text-nowrap no-underline hover:no-underline"
>
@@ -104,7 +119,7 @@ const Page = () => {
<code className="text-[9px] leading-none tracking-wider text-wrap [word-spacing:-3px]">
2B0C 9CF2 51E6 9A39
</code>
</Link>
</a>
</sup>{" "}
as well.
</p>
app/projects/page.tsx
+27 -13
View File
@@ -4,7 +4,6 @@ import { notFound } from "next/navigation";
import { GitForkIcon, StarIcon } from "lucide-react";
import Skeleton from "@/components/ui/skeleton";
import PageTitle from "@/components/layout/page-title";
import Link from "@/components/link";
import RelativeTime from "@/components/relative-time";
import ActivityCalendar from "@/components/activity-calendar";
import { GitHubIcon } from "@/components/icons";
@@ -35,12 +34,14 @@ const Page = async () => {
<PageTitle canonical="/projects">Projects</PageTitle>
<h2 className="my-3.5 text-xl font-medium">
<Link
<a
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}`}
target="_blank"
rel="noopener noreferrer"
className="text-secondary-foreground hover:no-underline"
>
Contribution activity
</Link>
</a>
</h2>
<Suspense fallback={<Skeleton className="h-40 w-full" />}>
@@ -54,21 +55,28 @@ const Page = async () => {
</Suspense>
<h2 className="my-3.5 text-xl font-medium">
<Link
<a
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}?tab=repositories&sort=stargazers`}
target="_blank"
rel="noopener noreferrer"
className="text-secondary-foreground hover:no-underline"
>
Popular repositories
</Link>
</a>
</h2>
{repos && repos.length > 0 ? (
<div className="row-auto grid w-full grid-cols-none gap-4 md:grid-cols-2">
{repos.map((repo) => (
<div key={repo!.name} className="border-ring/30 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3 shadow-xs">
<Link href={repo!.url} className="inline-block text-base leading-relaxed font-semibold">
<a
href={repo!.url}
target="_blank"
rel="noopener noreferrer"
className="inline-block text-base leading-relaxed font-semibold"
>
{repo!.name}
</Link>
</a>
{repo!.description && <p className="text-foreground/85 text-sm leading-relaxed">{repo!.description}</p>}
@@ -86,25 +94,29 @@ const Page = async () => {
)}
{repo!.stargazerCount > 0 && (
<Link
<a
href={`${repo!.url}/stargazers`}
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
>
<StarIcon className="inline-block size-4 shrink-0" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
</Link>
</a>
)}
{repo!.forkCount > 0 && (
<Link
<a
href={`${repo!.url}/network/members`}
target="_blank"
rel="noopener noreferrer"
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
>
<GitForkIcon className="inline-block size-4" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>
</Link>
</a>
)}
<div className="text-muted-foreground whitespace-nowrap">
@@ -124,12 +136,14 @@ const Page = async () => {
<p className="mt-6 mb-0 text-center text-base font-medium">
<Button variant="secondary" asChild>
<Link
<a
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}?tab=repositories&type=source&sort=stargazers`}
target="_blank"
rel="noopener noreferrer"
>
<GitHubIcon />
<span className="leading-none">Show All…</span>
</Link>
</a>
</Button>
</p>
</>
components/comment-count.tsx
+16
View File
@@ -0,0 +1,16 @@
import { env } from "@/lib/env";
import { getCommentCounts } from "@/lib/server/comments";
const CommentCount = async ({ slug }: { slug: string }) => {
const count = await getCommentCounts(slug);
return (
<span
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(count)} ${count === 1 ? "comment" : "comments"}`}
>
{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(count)}
</span>
);
};
export default CommentCount;
components/comments/comment-form.tsx
+8 -5
View File
@@ -7,7 +7,6 @@ import { InfoIcon, Loader2Icon } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import Button from "@/components/ui/button";
import Textarea from "@/components/ui/textarea";
import Link from "@/components/link";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { MarkdownIcon } from "@/components/icons";
import { useSession } from "@/lib/auth-client";
@@ -132,9 +131,9 @@ const CommentForm = ({
</li>
<li>
[
<Link href="https://jarv.is" className="hover:no-underline">
<a href="https://jarv.is" target="_blank" rel="noopener" className="hover:no-underline">
links
</Link>
</a>
](https://jarv.is)
</li>
<li>
@@ -148,9 +147,13 @@ const CommentForm = ({
</ul>
<p className="text-sm leading-loose">
<Link href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">
<a
href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax"
target="_blank"
rel="noopener noreferrer"
>
Learn more.
</Link>
</a>
</p>
</PopoverContent>
</Popover>
components/comments/comment-single.tsx
+8 -3
View File
@@ -1,7 +1,7 @@
import { getImageProps } from "next/image";
import Link from "next/link";
import Markdown from "react-markdown";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import Link from "@/components/link";
import RelativeTime from "@/components/relative-time";
import Actions from "./comment-actions";
import { remarkGfm, remarkSmartypants } from "@/lib/remark";
@@ -35,9 +35,14 @@ const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
<div className="min-w-0 flex-1">
<div className="mb-1 flex items-center gap-2">
<Link href={`https://github.com/${comment.user.name}`} className="font-medium hover:no-underline">
<a
href={`https://github.com/${comment.user.name}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium hover:no-underline"
>
@{comment.user.name}
</Link>
</a>
<Link href={`#${divId}`} className="text-muted-foreground text-xs leading-none hover:no-underline">
<RelativeTime date={comment.createdAt} />
</Link>
components/contact-form.tsx
+11 -6
View File
@@ -4,7 +4,6 @@ import { useActionState, useState } from "react";
import { useDebounce } from "react-use";
import { SendIcon, Loader2Icon, CheckIcon, XIcon } from "lucide-react";
import Form from "next/form";
import Link from "@/components/link";
import Input from "@/components/ui/input";
import Textarea from "@/components/ui/textarea";
import Button from "@/components/ui/button";
@@ -113,13 +112,19 @@ const ContactForm = () => {
<div className="text-foreground/85 my-2 text-[0.8rem] leading-relaxed">
<MarkdownIcon className="mr-1.5 inline-block size-4 align-text-top" /> Basic{" "}
<Link href="https://commonmark.org/help/" title="Markdown reference sheet" className="font-semibold">
<a
href="https://commonmark.org/help/"
target="_blank"
rel="noopener noreferrer"
title="Markdown reference sheet"
className="font-semibold"
>
Markdown syntax
</Link>{" "}
</a>{" "}
is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [
<Link href="https://jarv.is" className="hover:no-underline">
<a href="https://jarv.is" target="_blank" rel="noopener" className="hover:no-underline">
links
</Link>
</a>
](https://jarv.is), and <code>`code`</code>.
</div>
</div>
@@ -145,7 +150,7 @@ const ContactForm = () => {
<div
className={cn(
"space-x-0.5 text-[0.9rem] font-semibold",
formState.success ? "text-success" : "text-destructive"
formState.success ? "text-green-600 dark:text-green-400" : "text-destructive"
)}
>
{formState.success ? <CheckIcon className="inline size-4" /> : <XIcon className="inline size-4" />}{" "}
components/copy-button.tsx
+29 -24
View File
@@ -2,20 +2,18 @@
import * as React from "react";
import copy from "copy-to-clipboard";
import { CheckIcon, CopyIcon } from "lucide-react";
import { CheckIcon, ClipboardCheckIcon, CopyIcon } from "lucide-react";
import Button from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
function CopyButton({
value,
className,
variant = "ghost",
tooltip = "Copy to Clipboard",
...props
}: React.ComponentProps<typeof Button> & {
value: string;
tooltip?: string;
}) {
const [hasCopied, setHasCopied] = React.useState(false);
const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
@@ -29,8 +27,15 @@ function CopyButton({
}, []);
const handleCopy = () => {
if (hasCopied) return;
copy(value);
setHasCopied(true);
toast.success("Copied!", {
icon: <ClipboardCheckIcon className="text-foreground/85 size-4" aria-hidden="true" />,
duration: 2000,
id: "copy-button-toast-success",
});
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
@@ -39,26 +44,26 @@ function CopyButton({
};
return (
<Tooltip>
<TooltipTrigger asChild>
<Button
data-slot="copy-button"
data-copied={hasCopied}
size="icon"
variant={variant}
className={cn(
"bg-code absolute top-3 right-2 z-10 size-7 hover:opacity-100 focus-visible:opacity-100",
className
)}
onClick={handleCopy}
aria-label={hasCopied ? "Copied" : tooltip}
{...props}
>
{hasCopied ? <CheckIcon aria-hidden="true" /> : <CopyIcon aria-hidden="true" />}
</Button>
</TooltipTrigger>
<TooltipContent>{hasCopied ? "Copied" : tooltip}</TooltipContent>
</Tooltip>
<Button
data-slot="copy-button"
data-copied={hasCopied}
size="icon"
variant={variant}
className={cn(
"bg-code hover:bg-accent dark:hover:bg-accent absolute top-3 right-2 z-10 size-7.5 hover:opacity-100 focus-visible:opacity-100",
hasCopied ? "cursor-default" : "cursor-pointer",
className
)}
onClick={handleCopy}
aria-label={hasCopied ? "Copied" : "Copy to clipboard"}
{...props}
>
{hasCopied ? (
<CheckIcon className="text-green-600 dark:text-green-400" aria-hidden="true" />
) : (
<CopyIcon aria-hidden="true" />
)}
</Button>
);
}
components/layout/footer.tsx
+7 -9
View File
@@ -1,26 +1,24 @@
import { env } from "@/lib/env";
import Link from "@/components/link";
import Link from "next/link";
import siteConfig from "@/lib/config/site";
const Footer = () => {
return (
<footer className="text-muted-foreground mt-8 w-full py-6 text-center text-[13px] leading-loose">
Content{" "}
<Link href="/license" prefetch={false}>
licensed under {siteConfig.license}
</Link>
,{" "}
<Link href="/previously" prefetch={false} title="Previously on...">
Content <Link href="/license">licensed under {siteConfig.license}</Link>,{" "}
<Link href="/previously" title="Previously on...">
{siteConfig.copyrightYearStart}
</Link>{" "}
– 2026.{" "}
<Link
<a
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
target="_blank"
rel="noopener noreferrer"
title="View Source on GitHub"
className="font-medium underline underline-offset-4"
>
View source.
</Link>
</a>
</footer>
);
};
components/layout/header.tsx
+6 -4
View File
@@ -3,7 +3,7 @@
import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import Image from "next/image";
import Link from "@/components/link";
import Link from "next/link";
import Button from "@/components/ui/button";
import Separator from "@/components/ui/separator";
import Menu from "@/components/layout/menu";
@@ -60,7 +60,9 @@ const Header = ({ className }: { className?: string }) => {
quality={75}
priority
/>
<span className="text-[17px] font-medium whitespace-nowrap max-md:sr-only">{siteConfig.name}</span>
<span className="text-[17.5px] font-medium tracking-tight whitespace-nowrap max-md:sr-only">
{siteConfig.name}
</span>
</Link>
<Separator orientation="vertical" className="!h-6" />
<Menu />
@@ -68,9 +70,9 @@ const Header = ({ className }: { className?: string }) => {
<div className="flex items-center gap-2">
<Button variant="ghost" size="sm" aria-label="Open GitHub profile" asChild>
<Link href={`https://github.com/${authorConfig.social.github}`}>
<a href={`https://github.com/${authorConfig.social.github}`} target="_blank" rel="noopener noreferrer">
<GitHubIcon />
</Link>
</a>
</Button>
<Button
variant="ghost"
components/layout/menu.tsx
+5 -17
View File
@@ -3,7 +3,7 @@
import { useSelectedLayoutSegment } from "next/navigation";
import { ChevronDownIcon } from "lucide-react";
import Button from "@/components/ui/button";
import Link from "@/components/link";
import Link from "next/link";
import {
DropdownMenu,
DropdownMenuTrigger,
@@ -49,9 +49,7 @@ const Menu = () => {
data-current={isCurrent || undefined}
className="data-current:bg-accent/60 data-current:text-accent-foreground"
>
<Link href={item.href} prefetch={false}>
{item.text}
</Link>
<Link href={item.href}>{item.text}</Link>
</Button>
);
})}
@@ -66,15 +64,8 @@ const Menu = () => {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="min-w-[140px]">
<DropdownMenuItem asChild>
<Link
href="/"
prefetch={false}
data-current={segment === ""}
aria-current={segment === "" ? "page" : undefined}
>
Home
</Link>
<DropdownMenuItem asChild data-current={segment === ""} aria-current={segment === "" ? "page" : undefined}>
<Link href="/">Home</Link>
</DropdownMenuItem>
{menuItems.map((item, index) => {
const isCurrent = item.href?.split("/")[1] === segment;
@@ -83,13 +74,10 @@ const Menu = () => {
<DropdownMenuItem
asChild
key={index}
className="data-current:bg-accent/40 data-current:text-accent-foreground data-current:font-medium"
data-current={isCurrent || undefined}
aria-current={isCurrent ? "page" : undefined}
>
<Link href={item.href} prefetch={false}>
{item.text}
</Link>
<Link href={item.href}>{item.text}</Link>
</DropdownMenuItem>
);
})}
components/layout/page-title.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import Link from "@/components/link";
import Link from "next/link";
import { cn } from "@/lib/utils";
const PageTitle = ({
components/link.tsx
-23
View File
@@ -1,23 +0,0 @@
import NextLink from "next/link";
const Link = ({ href, rel, target, ...rest }: React.ComponentProps<typeof NextLink>) => {
// This component auto-detects whether or not this link should open in the same window (the default for internal
// links) or a new tab (the default for external links). Defaults can be overridden with `target="_blank"`.
const isExternal = typeof href === "string" && !["/", "#"].includes(href[0]);
const linkProps = {
href,
target: target || (isExternal ? "_blank" : undefined),
rel: `${rel ? `${rel} ` : ""}${target === "_blank" || isExternal ? "noopener noreferrer" : ""}`.trim() || undefined,
...rest,
};
// don't waste time with next's component if it's just an external link
if (isExternal) {
return <a {...(linkProps as unknown as React.ComponentProps<"a">)} />;
}
return <NextLink {...linkProps} />;
};
export default Link;
components/third-party/gist.tsx
Vendored
+7 -2
View File
@@ -1,4 +1,3 @@
import Link from "@/components/link";
import { cn } from "@/lib/utils";
const Gist = async ({
@@ -24,7 +23,13 @@ const Gist = async ({
return (
<p className="text-center">
Failed to load gist.{" "}
<Link href={`https://gist.github.com/${id}${file ? `?file=${file}` : ""}`}>Try opening it manually?</Link>
<a
href={`https://gist.github.com/${id}${file ? `?file=${file}` : ""}`}
target="_blank"
rel="noopener noreferrer"
>
Try opening it manually?
</a>
</p>
);
}
mdx-components.tsx
+12 -5
View File
@@ -1,5 +1,5 @@
import NextImage from "next/image";
import Link from "@/components/link";
import Image from "next/image";
import Link from "next/link";
import CodeBlock from "@/components/code-block";
import Video from "@/components/video";
import ImageDiff from "@/components/image-diff";
@@ -13,9 +13,15 @@ import type { MDXComponents } from "mdx/types";
export const useMDXComponents = (components: MDXComponents): MDXComponents => {
return {
...components,
a: Link,
a: ({ href, rel, target, ...rest }: React.ComponentProps<typeof Link>) => {
const isExternal = typeof href === "string" && !["/", "#"].includes(href[0]);
if (isExternal) {
return <a href={href} rel={rel || "noopener noreferrer"} target={target || "_blank"} {...rest} />;
}
return <Link href={href} rel={rel} target={target} {...rest} />;
},
pre: CodeBlock,
img: ({ src, className, ...rest }) => {
img: ({ src, alt, className, ...rest }: React.ComponentProps<typeof Image>) => {
const imageWidth = typeof src === "object" && "width" in src && src.width > 896 ? 896 : undefined;
const imageHeight =
imageWidth && typeof src === "object" && "width" in src && "height" in src
@@ -23,8 +29,9 @@ export const useMDXComponents = (components: MDXComponents): MDXComponents => {
: undefined;
return (
<NextImage
<Image
src={src}
alt={alt}
width={imageWidth}
height={imageHeight}
className={cn(