feat: unify link colors and interactions

chengpeiquan · Dec 16, 2024 · 69d502b · 69d502b
1 parent ebb5b8a
commit 69d502b
Show file tree

Hide file tree

Showing 19 changed files with 148 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "@types/node": "^20.17.10",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "eslint": "^8.57.1",
     "eslint-config-next": "^15.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/[locale]/articles/[...args]/page.tsx b/src/app/[locale]/articles/[...args]/page.tsx
@@ -54,7 +54,7 @@ const ArticleCard: React.FC<{
 
       <div className="flex flex-col md:flex-row gap-4">
         {cover && (
-          <Link href={link}>
+          <Link href={link} variant="image">
             <div className="relative flex flex-shrink-0 w-full xs:w-[160px] aspect-[500/400] rounded-lg overflow-hidden">
               <Image
                 src={cover}

diff --git a/src/app/[locale]/cookbooks/[...args]/page.tsx b/src/app/[locale]/cookbooks/[...args]/page.tsx
@@ -37,7 +37,7 @@ const CookbookCard: React.FC<{
   return (
     <li className="flex flex-col gap-2 w-full">
       {cover && (
-        <Link href={link}>
+        <Link href={link} variant="image">
           <div className="relative flex flex-shrink-0 w-full aspect-[500/400] rounded-lg overflow-hidden">
             <Image
               src={cover}

diff --git a/src/app/[locale]/projects/[[...args]]/components/data-description.tsx b/src/app/[locale]/projects/[[...args]]/components/data-description.tsx
@@ -10,13 +10,13 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
   Button,
-  ExternalLink,
   Separator,
 } from 'blackwork'
 import { Help } from 'blackwork/icons'
 import { cn } from '@/utils'
 import { isMobileDevice } from '@/config/middleware-config'
 import { type PropsWithLocale } from '@/config/route-config'
+import { ExternalLink } from '@/navigation'
 
 export const DataDescription = async ({ locale }: PropsWithLocale) => {
   const isMobile = await isMobileDevice()
@@ -52,7 +52,8 @@ export const DataDescription = async ({ locale }: PropsWithLocale) => {
                       return t.rich('list.1', {
                         more: (chunks) => (
                           <ExternalLink
-                            className="underline"
+                            variant="secondary"
+                            underline
                             href="https://blog.npmjs.org/post/92574016600/numeric-precision-matters-how-npm-download-counts-work.html"
                           >
                             {chunks}

diff --git a/src/app/[locale]/projects/[[...args]]/components/project-card.tsx b/src/app/[locale]/projects/[[...args]]/components/project-card.tsx
@@ -7,7 +7,6 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  ExternalLink,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -33,6 +32,7 @@ import {
 import { cn } from '@/utils'
 import { type GitHubRepoDataItem, type NpmDownloadDataItem } from '@/fetcher'
 import { LinkIconButton } from '@/components/shared/link-icon-button'
+import { ExternalLink } from '@/navigation'
 
 // e.g. `1000` -> `1,000`
 const withCommasNumber = (val: string | number) => {
@@ -197,10 +197,7 @@ export const ProjectCard = async ({ locale, item }: ProjectCardProps) => {
     <Card className="flex flex-col w-full">
       <CardHeader className="gap-2">
         <CardTitle className="truncate">
-          <ExternalLink
-            className="leading-[1.2] hover:underline"
-            href={homepage || repoUrl}
-          >
+          <ExternalLink className="leading-[1.2]" href={homepage || repoUrl}>
             {name}
           </ExternalLink>
         </CardTitle>

diff --git a/src/app/[locale]/projects/[[...args]]/page.tsx b/src/app/[locale]/projects/[[...args]]/page.tsx
@@ -9,9 +9,11 @@ import {
 } from '@/fetcher'
 import { type ListPageProps } from '@/config/route-config'
 import { ExtraTag, type ProjectTag } from '@/config/project-config'
+import { isMobileDevice } from '@/config/middleware-config'
 import { ProjectList } from './components/project-list'
 import { DataAnalysis } from './components/project-card'
 import { DataDescription } from './components/data-description'
+import { cn } from '@/utils'
 
 export const generateMetadata = async ({
   params: promiseParams,
@@ -55,10 +57,18 @@ export default async function ProjectsPage({
     { stars: 0, forks: 0, downloads: 0 },
   )
 
+  const isMobile = await isMobileDevice()
+
   return (
     <LayoutMain className="gap-12">
       <div className="flex flex-col items-center w-full">
-        <Heading className="text-6xl">{t('title')}</Heading>
+        <Heading
+          className={cn('text-6xl text-center', {
+            'my-8': isMobile,
+          })}
+        >
+          {t('title')}
+        </Heading>
 
         <Paragraph className="text-xl text-muted-foreground">
           {t('description')}

diff --git a/src/components/layouts/category-links.tsx b/src/components/layouts/category-links.tsx
@@ -32,11 +32,17 @@ const Links: React.FC<{
       {links.map((i) => {
         const cls = cn(
           'scroll-m-20 tracking-tight',
-          i.active ? 'text-xl font-semibold' : 'text-base',
+          i.active ? 'text-xl' : 'text-base',
         )
 
         return (
-          <Link key={i.href} href={i.href} className={cls}>
+          <Link
+            key={i.href}
+            href={i.href}
+            className={cls}
+            variant={i.active ? 'default' : 'secondary'}
+            strong={i.active}
+          >
             {i.label[locale]}
           </Link>
         )

diff --git a/src/components/layouts/layout-container.tsx b/src/components/layouts/layout-container.tsx
@@ -4,7 +4,6 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-  ExternalLink,
   LayoutFooter,
   LayoutHeader,
   ScrollToTop,
@@ -17,6 +16,7 @@ import { LanguageToggle } from '@/components/layouts/language-toggle'
 import { ThemeToggle } from '@/components/layouts/theme-toggle'
 import { NavigationDrawer } from '@/components/layouts/navigation-drawer'
 import { SearchBox } from '@/components/layouts/search-box'
+import { ExternalLink } from '@/navigation'
 
 type LayoutContainerProps = React.PropsWithChildren & PropsWithLocale
 
@@ -89,10 +89,7 @@ export const LayoutContainer = async ({
           © 2014-{new Date().getFullYear()} {t('name')}
         </span>
 
-        <ExternalLink
-          href="https://beian.miit.gov.cn/"
-          className="transition-colors hover:text-foreground text-muted-foreground"
-        >
+        <ExternalLink href="https://beian.miit.gov.cn/" variant="secondary">
           {t('icp')}
         </ExternalLink>
       </LayoutFooter>

diff --git a/src/components/layouts/navigation-links.tsx b/src/components/layouts/navigation-links.tsx
@@ -56,11 +56,6 @@ const NavigationLink: React.FC<NavigationLinkProps> = ({
     return pathname === `/${slug}`
   }, [pathname, slug])
 
-  const cls = cn(
-    'text-base transition-colors hover:text-foreground',
-    active ? 'text-foreground' : 'text-muted-foreground',
-  )
-
   const href = useMemo(() => {
     if (isListFolder(slug)) {
       return `/${listFolderMapping[slug]}/1`
@@ -78,12 +73,19 @@ const NavigationLink: React.FC<NavigationLinkProps> = ({
     const icon = asButton ? <IconComp className="w-4 h-4 mr-2" /> : null
 
     return (
-      <Link href={href} className={cls} title={label} aria-label={ariaLabel}>
+      <Link
+        href={href}
+        className="text-base"
+        title={label}
+        aria-label={ariaLabel}
+        variant={active ? (asButton ? 'inherit' : 'default') : 'secondary'}
+        strong={active}
+      >
         {icon}
         {label}
       </Link>
     )
-  }, [ariaLabel, asButton, cls, href, label, slug])
+  }, [active, ariaLabel, asButton, href, label, slug])
 
   if (asButton) {
     return (
@@ -129,7 +131,7 @@ export const NavigationLinks: React.FC<NavigationLinksProps> = ({
   }, [forceVisible, isLg])
 
   const cls = cn(
-    'flex-row gap-4 text-lg font-medium md:items-center md:gap-5 md:text-sm lg:gap-6',
+    'flex-row gap-4 text-lg md:items-center md:gap-5 md:text-sm lg:gap-6',
     {
       'hidden lg:flex': !visible,
       flex: visible,

diff --git a/src/components/layouts/not-found-guide.tsx b/src/components/layouts/not-found-guide.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Image from 'next/image'
 import { getLocale, getTranslations } from 'next-intl/server'
 import { Button, Heading, LayoutMain, Paragraph } from 'blackwork'
-import { Link } from '@/navigation'
+import { ExternalLink, Link } from '@/navigation'
 import { siteConfig } from '@/config/site-config'
 import { cn } from '@/utils'
 import { isMobileDevice } from '@/config/middleware-config'
@@ -50,14 +50,9 @@ export const NotFoundGuide = async () => {
             <Paragraph>
               {t.rich('feedback', {
                 issue: () => (
-                  <Link
-                    href={siteConfig.feedbackLink}
-                    target="_blank"
-                    rel="nofollow noopener noreferrer"
-                    className="transition-colors text-foreground underline"
-                  >
+                  <ExternalLink href={siteConfig.feedbackLink} underline>
                     issue
-                  </Link>
+                  </ExternalLink>
                 ),
               })}
             </Paragraph>

diff --git a/src/components/markup/renderer.tsx b/src/components/markup/renderer.tsx
@@ -9,7 +9,7 @@ import {
   type PropsWithLocale,
 } from '@/config/route-config'
 import { isMobileDevice } from '@/config/middleware-config'
-import { Link } from '@/navigation'
+import { ExternalLink } from '@/navigation'
 import { LegacyTips } from './legacy-tips'
 
 interface StarOnGitHubProps extends PropsWithLocale {
@@ -27,17 +27,17 @@ const StarOnGitHub = async ({ locale, repo }: StarOnGitHubProps) => {
 
   if (!isString(repo)) return null
   return (
-    <Link
+    <ExternalLink
       title={title}
       aria-label={title}
       href={repo!}
-      className="flex items-center text-sm no-underline font-normal transition-colors hover:text-foreground text-gray-400 dark:text-gray-500"
-      target="_blank"
-      rel="nofollow noopener noreferrer"
+      className="flex items-center text-sm"
+      variant="secondary"
+      underline={false}
     >
       <MiniGitHub />
       <span className="ml-1">{label}</span>
-    </Link>
+    </ExternalLink>
   )
 }
 

diff --git a/src/components/sidebar/cat-huffing.tsx b/src/components/sidebar/cat-huffing.tsx
@@ -1,17 +1,16 @@
 import React from 'react'
 import Image from 'next/image'
-import { Link } from '@/navigation'
+import { ExternalLink } from '@/navigation'
 import { SidebarBlock } from '../shared/sidebar-block'
 
 const title = '在线吸猫'
 
 export const CatHuffing: React.FC = () => {
   return (
     <SidebarBlock title={title}>
-      <Link
+      <ExternalLink
+        variant="image"
         href="https://www.douyin.com/user/MS4wLjABAAAAlqB3LfiKgR6zx48L4rLWzhwE1A9j6QcjzW7V0J0VR74"
-        target="_blank"
-        rel="noopener noreferrer"
       >
         <div className="relative w-full aspect-[500/509] rounded-lg overflow-hidden">
           <Image
@@ -22,7 +21,7 @@ export const CatHuffing: React.FC = () => {
             style={{ objectFit: 'cover' }}
           />
         </div>
-      </Link>
+      </ExternalLink>
     </SidebarBlock>
   )
 }
diff --git a/src/components/sidebar/cookbook-widgets.tsx b/src/components/sidebar/cookbook-widgets.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Image from 'next/image'
-import { Link } from '@/navigation'
+import { ExternalLink } from '@/navigation'
 import { SidebarBlock } from '../shared/sidebar-block'
 
 const qrCodeTitle = '菜谱专栏 · 小程序版本'
@@ -26,10 +26,9 @@ const onlineTitle = '在线互动'
 export const CookbookOnline: React.FC = () => {
   return (
     <SidebarBlock title={onlineTitle}>
-      <Link
+      <ExternalLink
+        variant="image"
         href="https://www.xiaohongshu.com/user/profile/5c6cf700000000001003f7f6"
-        target="_blank"
-        rel="nofollow noopener noreferrer"
       >
         <div className="relative w-full aspect-[500/797] rounded-lg overflow-hidden">
           <Image
@@ -40,7 +39,7 @@ export const CookbookOnline: React.FC = () => {
             style={{ objectFit: 'cover' }}
           />
         </div>
-      </Link>
+      </ExternalLink>
     </SidebarBlock>
   )
 }
diff --git a/src/components/sidebar/friendly-links.tsx b/src/components/sidebar/friendly-links.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Separator } from 'blackwork'
-import { Link } from '@/navigation'
+import { ExternalLink } from '@/navigation'
 import { SidebarBlock } from '../shared/sidebar-block'
 import { friendlyLinks } from '@/config/external-config'
 
@@ -18,14 +18,13 @@ export const FriendlyLinks: React.FC = () => {
                 />
               )}
 
-              <Link
+              <ExternalLink
                 href={i.href}
-                target="_blank"
-                rel="nofollow noopener noreferrer"
                 className="text-sm"
+                variant="secondary"
               >
                 {i.title}
-              </Link>
+              </ExternalLink>
             </React.Fragment>
           )
         })}

diff --git a/src/components/sidebar/published-books.tsx b/src/components/sidebar/published-books.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Image from 'next/image'
 import { Button } from 'blackwork'
-import { Link } from '@/navigation'
+import { ExternalLink, Link } from '@/navigation'
 import { type linkItem } from '@/config/route-config'
 import { SidebarBlock } from '../shared/sidebar-block'
 
@@ -25,6 +25,7 @@ export const PublishedBooks: React.FC = () => {
         <Link
           href="/article/the-story-of-the-book-learning-vue3"
           target="_blank"
+          variant="image"
         >
           <div className="relative w-full aspect-[500/740] rounded-lg overflow-hidden">
             <Image
@@ -41,9 +42,7 @@ export const PublishedBooks: React.FC = () => {
           {links.map((i) => {
             return (
               <Button key={i.href} variant="link">
-                <Link href={i.href} target="_blank">
-                  {i.title}购买
-                </Link>
+                <ExternalLink href={i.href}>{i.title}购买</ExternalLink>
               </Button>
             )
           })}

diff --git a/src/navigation.ts b/src/navigation.ts