feat: add hrefRel property to Card component and projectsData for imp…

…roved link handling
geekskai · Sep 16, 2024 · d2b1d71 · d2b1d71
1 parent 3f122a9
commit d2b1d71
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -21,6 +21,7 @@ export default function Projects() {
             {projectsData.map((d) => (
               <Card
                 key={d.title}
+                hrefRel={d.hrefRel}
                 title={d.title}
                 description={d.description}
                 imgSrc={d.imgSrc}

diff --git a/components/Card.tsx b/components/Card.tsx
@@ -1,7 +1,7 @@
 import Image from './Image'
 import Link from './Link'
 
-const Card = ({ title, description, imgSrc, href }) => (
+const Card = ({ title, description, imgSrc, href, hrefRel }) => (
   <div className="md max-w-[544px] p-4 md:w-1/2">
     <div
       className={`${
@@ -10,7 +10,7 @@ const Card = ({ title, description, imgSrc, href }) => (
     >
       {imgSrc &&
         (href ? (
-          <Link href={href} aria-label={`Link to ${title}`}>
+          <Link href={href} rel={hrefRel} aria-label={`Link to ${title}`}>
             <Image
               alt={title}
               src={imgSrc}
@@ -31,7 +31,7 @@ const Card = ({ title, description, imgSrc, href }) => (
       <div className="p-6">
         <h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
           {href ? (
-            <Link href={href} aria-label={`Link to ${title}`}>
+            <Link href={href} rel={hrefRel} aria-label={`Link to ${title}`}>
               {title}
             </Link>
           ) : (
@@ -42,6 +42,7 @@ const Card = ({ title, description, imgSrc, href }) => (
         {href && (
           <Link
             href={href}
+            rel={hrefRel}
             className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
             aria-label={`Link to ${title}`}
           >

diff --git a/data/projectsData.ts b/data/projectsData.ts
@@ -1,6 +1,7 @@
 interface Project {
   title: string
   description: string
+  hrefRel?: string | undefined
   href?: string
   imgSrc?: string
 }
@@ -10,6 +11,7 @@ const projectsData: Project[] = [
     title: 'vue3-jd-h5 is an e-commerce H5 page front-end project',
     description: `Based on vue3.x,vite5.x, vant3.0.0, vue-router v4.0.0-0, vuex^4.0.0-0, vue-cli3, mockjs, imitating Jingdong Taobao, mobile H5 e-commerce platform`,
     imgSrc: '/static/images/vue-jd-h5.png',
+    hrefRel: 'nofollow',
     href: 'https://github.com/geekskai/vue3-jd-h5',
   },
 ]