Use repository link for projects

src/content.config.ts

@@ -17,6 +17,7 @@ const portfolioCollection = defineCollection({
     summary: z.string(),
     tags: z.array(z.string()).optional(),
     pubDate: z.date(),
+    repository: z.url().regex(/git/).optional(),
   }),
 });
 

src/pages/portfolio/[...slug].astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection, render } from 'astro:content';
+import { Icon } from "astro-icon/components";
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import "katex/dist/katex.min.css";
 import "rehype-callouts/theme/obsidian"
@@ -18,12 +19,24 @@ const { Content } = await render(entry);
   <div class="glass-container header" style={`view-transition-name: project-header-${entry.id};`}>
     <h1 style={`view-transition-name: project-headline-${entry.id};`}>{entry.data.title}</h1>
     <p>{entry.data.summary}</p>
+    {(entry.data.tags || entry.data.repository) &&
+        (<div class="additional-meta">
+          <div class="meta-tags">
             {entry.data.tags && (
               <div class="tags">
-        {entry.data.tags.map(tech => <span class="tag">{tech}</span>)}
+                {entry.data.tags?.map(tech => <span class="tag">{tech}</span>)}
               </div>
             )}
           </div>
+          <div class="meta-repository">
+            { entry.data.repository && (
+                <a href={entry.data.repository} referrerpolicy="no-referrer">
+                  <Icon name="simple-icons:git" style={`view-transition-name: project-git-${entry.id};`} />
+                </a>
+            )}
+          </div>
+        </div>)}
+  </div>
   
   <div class="glass-container content prose">
     <Content />
@@ -39,6 +52,7 @@ const { Content } = await render(entry);
     gap: 0.5rem;
     margin-top: 1rem;
     flex-wrap: wrap;
+    align-items: center;
   }
   .tag {
     font-size: 0.8rem;
@@ -49,4 +63,23 @@ const { Content } = await render(entry);
   .content {
     line-height: 1.8;
   }
+  .additional-meta {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 1rem;
+    align-items: center;
+  }
+  .meta-repository {
+    flex-shrink: 1;
+    font-size: 1.2rem;
+    color: rgb(var(--accent-base));
+  }
+  .meta-repository a {
+    display: flex;
+    align-items: center;
+  }
 </style>

src/pages/portfolio/index.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
+import { Icon } from "astro-icon/components";
 import BaseLayout from '../../layouts/BaseLayout.astro';
 
 const projects = await getCollection('portfolio');
@@ -16,11 +17,21 @@ projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
       <a href={`/portfolio/${project.id}`} class="glass-container link-card" style={`view-transition-name: project-header-${project.id};`}>
         <h2 style={`view-transition-name: project-headline-${project.id};`}>{project.data.title}</h2>
         <p>{project.data.summary}</p>
+        {(project.data.tags || project.data.repository) &&
+        (<div class="additional-meta">
+          <div class="meta-tags">
             {project.data.tags && (
               <div class="tags">
                 {project.data.tags?.map(tech => <span class="tag">{tech}</span>)}
               </div>
             )}
+          </div>
+          <div class="meta-repository">
+            { project.data.repository && (
+                <Icon name="simple-icons:git" style={`view-transition-name: project-git-${project.id};`} />
+            )}
+          </div>
+        </div>)}
       </a>
     ))}
   </div>
@@ -40,11 +51,22 @@ projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
   .link-card h2 {
     margin-top: 0;
   }
+  .additional-meta {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 1rem;
+    align-items: center;
+  }
   .tags {
     display: flex;
     gap: 0.5rem;
-    margin-top: 1rem;
     flex-wrap: wrap;
+    flex-grow: 1;
+    align-items: center;
   }
   .tag {
     font-size: 0.8rem;
@@ -52,4 +74,11 @@ projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
   }
+  .meta-repository {
+    flex-shrink: 1;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    color: rgb(var(--accent-base));
+  }
 </style>