1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-05 19:15:30 -04:00

refactor: replace react-countup with @number-flow/react

This commit is contained in:
2026-04-30 10:36:33 -04:00
parent b2416ff0db
commit 62d632f909
26 changed files with 419 additions and 450 deletions
+2 -2
View File
@@ -1,4 +1,4 @@
import { ArrowUpRight } from "lucide-react";
import { IconArrowUpRight } from "@tabler/icons-react";
import Image, { type StaticImageData } from "next/image";
import Link from "next/link";
@@ -97,7 +97,7 @@ const Page = () => (
</div>
<span className="text-muted-foreground ml-9 text-xs text-pretty sm:ml-auto">
{project.tagline}
<ArrowUpRight
<IconArrowUpRight
className="group-hover:text-primary ml-1 inline size-3.5 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
aria-hidden="true"
/>
+10 -16
View File
@@ -1,10 +1,4 @@
import {
CalendarDaysIcon,
EyeIcon,
MessagesSquareIcon,
SquarePenIcon,
TagIcon,
} from "lucide-react";
import { IconCalendarEvent, IconEdit, IconEye, IconMessages, IconTag } from "@tabler/icons-react";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
@@ -110,14 +104,14 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
}}
/>
<div className="text-foreground/70 flex flex-wrap justify-items-start space-y-2.5 space-x-4 text-[13px] tracking-wide">
<div className="text-foreground/70 flex flex-wrap items-center gap-x-4 gap-y-2.5 text-[13px] tracking-wide">
<Link
href={`/${POSTS_DIR}/${frontmatter?.slug}`}
className={
"text-foreground/70 flex flex-nowrap items-center gap-1.5 whitespace-nowrap hover:no-underline"
"flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-inherit hover:no-underline"
}
>
<CalendarDaysIcon className="inline size-3 shrink-0" aria-hidden="true" />
<IconCalendarEvent className="inline size-3.5 shrink-0" aria-hidden="true" />
<time
dateTime={formattedDates.dateISO}
title={formattedDates.dateTitle}
@@ -129,7 +123,7 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
{frontmatter?.tags && (
<div className="flex flex-wrap items-center gap-1.5">
<TagIcon className="inline size-3 shrink-0" aria-hidden="true" />
<IconTag className="inline size-3.5 shrink-0" aria-hidden="true" />
{frontmatter?.tags.map((tag) => (
<span
key={tag}
@@ -146,23 +140,23 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
href={`https://github.com/${process.env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${frontmatter?.slug}/index.mdx`}
title={`Edit "${frontmatter?.title}" on GitHub`}
className={
"text-foreground/70 flex flex-nowrap items-center gap-1.5 whitespace-nowrap hover:no-underline"
"flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-inherit hover:no-underline"
}
>
<SquarePenIcon className="inline size-3 shrink-0" aria-hidden="true" />
<IconEdit className="inline size-3.5 shrink-0" aria-hidden="true" />
<span>Improve This Post</span>
</Link>
<Link
href={`/${POSTS_DIR}/${frontmatter?.slug}#comments`}
className="text-foreground/70 flex flex-nowrap items-center gap-1.5 whitespace-nowrap hover:no-underline"
className="flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-inherit hover:no-underline"
>
<MessagesSquareIcon className="inline size-3 shrink-0" aria-hidden="true" />
<IconMessages className="inline size-3.5 shrink-0" aria-hidden="true" />
<CommentCount slug={`${POSTS_DIR}/${frontmatter?.slug}`} />
</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" />
<IconEye className="inline size-3.5 shrink-0" aria-hidden="true" />
<ViewCounter slug={`${POSTS_DIR}/${frontmatter?.slug}`} />
</div>
</div>
+4 -4
View File
@@ -1,4 +1,4 @@
import { ExternalLinkIcon, GitForkIcon, StarIcon } from "lucide-react";
import { IconExternalLink, IconGitFork, IconStar } from "@tabler/icons-react";
import { notFound } from "next/navigation";
import { Suspense } from "react";
@@ -113,7 +113,7 @@ const Page = async () => {
rel="noopener noreferrer"
className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-1.5 hover:no-underline"
>
<StarIcon className="inline-block size-3.5 shrink-0" aria-hidden="true" />
<IconStar className="inline-block size-3.5 shrink-0" aria-hidden="true" />
<span>
{Intl.NumberFormat(process.env.NEXT_PUBLIC_SITE_LOCALE).format(
repo?.stargazerCount,
@@ -130,7 +130,7 @@ const Page = async () => {
title={`${Intl.NumberFormat(process.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-1.5 hover:no-underline"
>
<GitForkIcon className="inline-block size-3.5 shrink-0" aria-hidden="true" />
<IconGitFork className="inline-block size-3.5 shrink-0" aria-hidden="true" />
<span>
{Intl.NumberFormat(process.env.NEXT_PUBLIC_SITE_LOCALE).format(
repo?.forkCount,
@@ -169,7 +169,7 @@ const Page = async () => {
}
>
View all
<ExternalLinkIcon className="inline-block size-3.5 shrink-0" aria-hidden="true" />
<IconExternalLink className="inline-block size-3.5 shrink-0" aria-hidden="true" />
</Button>
</p>
</FadeTransition>