feat: internal links in tech stack section

bitbetterde · Feb 26, 2024 · 2eb10e4 · 2eb10e4
1 parent 119273c
commit 2eb10e4
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/src/components/ServicesSection.tsx b/src/components/ServicesSection.tsx
@@ -14,6 +14,7 @@ interface TechItem {
   image: string
   link: string
   order?: number
+  internal?: boolean
 }
 
 interface Props {
@@ -76,7 +77,14 @@ const ServicesSection: React.FC<Props> = ({ consultingTechItems, developmentTech
           </h4>
           <div className='px-8 pt-4 pb-8 inline-grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-5'>
             {developmentTechItems?.map((item, i) => (
-              <TechStackItem key={i} light title={item.title} link={item.link} image={item.image} />
+              <TechStackItem
+                key={i}
+                light
+                title={item.title}
+                link={item.link}
+                image={item.image}
+                internal={item.internal}
+              />
             ))}
           </div>
         </div>
@@ -116,7 +124,13 @@ const ServicesSection: React.FC<Props> = ({ consultingTechItems, developmentTech
           </h4>
           <div className='px-8 py-4 inline-grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-5'>
             {consultingTechItems?.map((item, i) => (
-              <TechStackItem key={i} title={item.title} link={item.link} image={item.image} />
+              <TechStackItem
+                key={i}
+                title={item.title}
+                link={item.link}
+                image={item.image}
+                internal={item.internal}
+              />
             ))}
           </div>
         </div>

diff --git a/src/components/TechStackItem.tsx b/src/components/TechStackItem.tsx
@@ -3,12 +3,13 @@ interface Props {
   link: string
   image: string
   light?: boolean
+  internal?: boolean
 }
 
-const TechStackItem: React.FC<Props> = ({ image, title, link, light }: Props) => (
+const TechStackItem: React.FC<Props> = ({ image, title, link, light, internal }: Props) => (
   <a
     href={link}
-    target='_blank'
+    {...(internal ? {} : { target: '_blank' })}
     className={`flex items-center gap-2 ${light ? 'text-white' : 'text-black'}
   `}
   >

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -6,6 +6,7 @@ const techStackCollection = defineCollection({
     title: z.string(),
     image: z.string(),
     link: z.string(),
+    internal: z.boolean().optional(),
     order: z.number().optional(),
   }),
 })

diff --git a/src/content/stack_consulting/paperless-ngx.json b/src/content/stack_consulting/paperless-ngx.json
@@ -1,6 +1,7 @@
 {
   "title": "Paperless-ngx",
   "link": "/leistungen/paperless-ngx",
+  "internal": true,
   "order": 8,
   "image": "<svg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-miterlimit='10' clip-rule='evenodd' viewBox='0 0 456 547'><path fill='currentColor' fill-rule='nonzero' stroke='#000' stroke-width='.7598' d='M100.495 521.09c-2.66-12.538-7.902-37.687-8.586-37.687-111.766-66.862-98.546-182.58-61.544-248.758 7.902 83.35 155.455 140.867 69.446 242.756-.684 1.291 3.951 17.171 7.902 31.76 17.171-29.101 43.005-64.128 41.637-67.47C43.51 183.737 374.25 163.907 443.012 3.817c31.076 154.771-15.88 394.26-281.733 455.12-1.292.683-48.247 83.35-50.299 84.033 0-1.291-19.83-.684-17.171-7.294 1.443-4.027 4.027-9.27 6.686-14.588Zm-3.267-62.152c33.735-39.054-5.927-105.84-29.784-127.647 40.345 69.37 37.686 109.715 29.784 127.647Z'/></svg>"
 }