Merge pull request #4 from nicosalm/dev

enh: Tags in blog posts
nicosalm · Oct 3, 2024 · 8b26e79 · 8b26e79
2 parents 3ea8399 + ae60cb5
commit 8b26e79
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 9 deletions.
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
@@ -4,13 +4,14 @@ import Layout from '../layouts/Layout.astro';
 import '../styles/blog.css';
 
 export interface Props {
-  content: {
-    title: string;
-    url: string;
-    description: string;
-    pubDate: string;
-    minutesRead: string;
-   }
+    content: {
+        title: string;
+        url: string;
+        description: string;
+        pubDate: string;
+        minutesRead: string;
+        tags: string[];
+    }
 }
 const { content } = Astro.props as Props;
 const heroes = (await import.meta.glob("../pages/blog/**/hero.png"));
@@ -32,11 +33,26 @@ export {content};
             <span class="divider divider-horizontal"/>
             <span class="badge badge-outline">{content.minutesRead} min read</span>
         </div>
+
         <article>
             <slot />
         </article>
+
+        <!-- render tags section if there are tags -->
+        {content.tags && content.tags.length > 0 && (
+            <div class="mt-8">
+                <h3 class="text-lg font-semibold">Tags:</h3> <!-- label at bottom -->
+                <div class="flex flex-wrap gap-2 mt-2">
+                    {content.tags.map(tag => (
+                    <span class="badge badge-ghost text-sm rounded-md">{tag}</span>
+                    ))}
+                </div>
+            </div>
+        )}
     </main>
-    <!-- Footer & Copyright -->
+</Layout>
+
+    <!-- footer -->
     <style is:global>
     article .heading-group {
         position: relative;
@@ -68,3 +84,4 @@ export {content};
     }
     </style>
 </Layout>
+
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -21,6 +21,10 @@ const { title, description, blog } = Astro.props as Props;
 
 	<title>{title}</title>
 	<meta name="description" content={description} />
+
+	<!-- font awesome CDN -->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+
 	<style>
 		@font-face {
 			font-family: "LatoBold";
@@ -58,3 +62,4 @@ const { title, description, blog } = Astro.props as Props;
     <Footer />
 </body>
 </html>
+
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -1,7 +1,7 @@
 ---
 import { Picture } from '@astrojs/image/components';
 import Layout from '../layouts/Layout.astro';
-import {content} from '../layouts/BlogLayout.astro';
+import { content } from '../layouts/BlogLayout.astro';
 
 let allPosts = await Astro.glob('./blog/**/index.mdx');
 allPosts.sort((a, b) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf());
@@ -12,6 +12,7 @@ await Promise.all(allPosts.map(async (post) => {
     post.frontmatter.hero = (await heroes[`.${post.url}/hero.png`]()).default;
 }));
 ---
+
 <Layout title="Nico Salm | Blog" description="Nico's Blog">
     <main class="container max-w-screen-xl mx-auto">
         <h1 class="text-5xl text-center pb-2 font-display">Blog</h1>
@@ -29,10 +30,23 @@ await Promise.all(allPosts.map(async (post) => {
                             <span class="badge badge-outline">{post.frontmatter.minutesRead} min read</span>
                         </div>
                         <p>{post.frontmatter.description}</p>
+                        <!-- only render tags if they exist -->
+                        {post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
+                        <div class="flex flex-wrap gap-2 mt-4 items-center">
+                            <!-- FA tag icon -->
+                            <i class="fas fa-tag text-gray-600"></i>
+                            <!-- tags -->
+                            <span class="text-sm font-semibold">Tags:</span> 
+                            {post.frontmatter.tags.map(tag => (
+                                <span class="badge badge-ghost text-sm rounded-md ml-1">{tag}</span>
+                            ))}
+                        </div>
+                        )}
                     </div>
                 </a>
             </li>
             ))}
         </ul>
     </main>
 </Layout>
+