5 add tags option to snippets (#7)

* chore: added intelliJ project files to gitignore

* feat: added tags and tag handling
added tags to fontmatter metadata
and displaying in a list on BlogCart while checking if prop has values.

* refactor: logic only used in BlogCard

simplified interface, refactored to models file for better reusability.

* refactor: treat tags as string[]

* feat: added tags to snippet page

adjusted CSS, cleanup

* refactor: tags is mandatory, so added tags to all snippets

* refactor: moved tags to own component and display below date

Author: olierxleben

.gitignore

@@ -25,3 +25,4 @@ yarn.lock
 # other folders
 .vercel
 .netlify
+.idea

src/components/BlogCard.astro

@@ -1,23 +1,35 @@
 ---
+import TagsLine from "./TagsLine.astro";
+
 export interface Props {
   title: string;
   description: string;
   pubDate: string;
   url: string | undefined;
   contributedBy: string;
+  tags: string[];
 }
-let { title, description, pubDate, url, contributedBy } = Astro.props;
+let { title, description, pubDate, url, contributedBy, tags } = Astro.props;
 const shortDate = new Date(pubDate).toLocaleDateString("en", {
   dateStyle: "short",
 });
 url = url + "/";
 ---
 
-<li class="flex flex-col gap-2 sm:grid-cols-4 leading-relaxed rounded-2xl border-zinc-700 dark:text-zinc-400">
-  <a class="col-span-3 flex flex-col gap-2 sm:gap-4 p-5 my-2 hover:dark:bg-zinc-800 hover:bg-zinc-200 rounded-lg transition-colors shadow-md" href={url}>
+<li
+  class="flex flex-col gap-2 sm:grid-cols-4 leading-relaxed rounded-2xl border-zinc-700 dark:text-zinc-400"
+>
+  <a
+    class="col-span-3 flex flex-col gap-2 sm:gap-4 p-5 my-2 hover:dark:bg-zinc-800 hover:bg-zinc-200 rounded-lg transition-colors shadow-md"
+    href={url}
+  >
     <time class="shrink-0 text-base sm:hidden">{shortDate}</time>
-    <span class="flex items-center justify-between mb-1"><h2 class="text-xl text-black dark:text-white">{title}</h2><time class="shrink-0 text-base hidden sm:block">{shortDate}</time></span>
+    <span class="flex items-center justify-between mb-1">
+      <h2 class="text-xl text-black dark:text-white">{title}</h2>
+      <time class="shrink-0 text-base hidden sm:block">{shortDate}</time>
+    </span>
+    <TagsLine tags={tags} />
     <!-- You want a description? Just uncomment the code down below -->
     <!-- <p class="text-base text-black dark:text-zinc-300">{description}</p> -->
   </a>
-</li>
+</li>

src/components/TagsLine.astro

@@ -0,0 +1,13 @@
+---
+const { tags } = Astro.props;
+---
+
+<div class="flex text-sm gap-2">
+  {
+    tags.map((tag) => (
+      <span class="bg-slate-800 px-2 py-1 rounded text-white dark:bg-slate-400 ">
+        {tag}
+      </span>
+    ))
+  }
+</div>

src/layouts/BlogLayout.astro

@@ -2,6 +2,7 @@
 import "@fontsource/inter/variable.css";
 import "@fontsource/fira-code";
 import Header from "@components/Header.astro";
+import TagsLine from "@components/TagsLine.astro";
 
 let { pubDate } = Astro.props.content;
 const { frontmatter } = Astro.props;
@@ -97,6 +98,9 @@ const canonicalURL = new URL(Astro.url).href;
               {frontmatter.contributedBy}
             </span>
           </nav>
+          <div class="mys-2">
+            <TagsLine tags={frontmatter.tags} />
+          </div>
         </header>
         <article>
           <slot />

src/pages/index.astro

@@ -2,12 +2,7 @@
 import Layout from "@layouts/Layout.astro";
 import BlogCard from "@components/BlogCard.astro";
 import { Icon } from "astro-icon";
-interface Frontmatter {
-  title: string;
-  pubDate: string;
-  description: string;
-  contributedBy: string;
-}
+import { Frontmatter } from "./models";
 
 const metadata = {
   title: "Angular Snippets",
@@ -25,7 +20,7 @@ blogs = blogs.sort(
 <Layout {...metadata}>
   <section class="flex flex-col sm:flex-row justify-evenly items-center py-14">
     <div class="w-32 m-5 md:m-10 my-10">
-         <Icon class="h-8 md:h-12" name="simple-icons:angular" />
+      <Icon class="h-8 md:h-12" name="simple-icons:angular" />
     </div>
     <header class="max-w-xl sm:order-first">
       <h1
@@ -61,6 +56,7 @@ blogs = blogs.sort(
                 pubDate={post.frontmatter.pubDate}
                 url={post.url}
                 contributedBy={post.frontmatter.contributedBy}
+                tags={post.frontmatter.tags}
               />
             ))
       }

src/pages/models.ts

@@ -0,0 +1,7 @@
+export interface Frontmatter {
+  title: string;
+  pubDate: string;
+  description: string;
+  contributedBy: string;
+  tags?: string[];
+}

src/pages/snippets.astro

@@ -1,13 +1,7 @@
 ---
 import Layout from "@layouts/Layout.astro";
 import BlogCard from "@components/BlogCard.astro";
-
-interface Frontmatter {
-  title: string;
-  pubDate: string;
-  description: string;
-  contributedBy: string;
-}
+import { Frontmatter } from "./models";
 
 let blogs = await Astro.glob<Frontmatter>("./snippets/*.mdx");
 blogs = blogs.sort(
@@ -28,15 +22,18 @@ blogs = blogs.sort(
   <section>
     <ul class="flex flex-col justify-center mb-8">
       {
-        blogs.map((post) => (
-          <BlogCard
-            title={post.frontmatter.title}
-            description={post.frontmatter.description}
-            pubDate={post.frontmatter.pubDate}
-            url={post.url}
-            contributedBy={post.frontmatter.contributedBy}
-          />
-        ))
+        blogs.map((post) => {
+          return (
+            <BlogCard
+              title={post.frontmatter.title}
+              description={post.frontmatter.description}
+              pubDate={post.frontmatter.pubDate}
+              url={post.url}
+              contributedBy={post.frontmatter.contributedBy}
+              tags={post.frontmatter.tags}
+            />
+          );
+        })
       }
     </ul>
   </section>

src/pages/snippets/source-map.mdx

@@ -1,18 +1,20 @@
 ---
 title: Make source maps available for reporting tools
 description: "Make source maps available for reporting tools"
+tags: [json, sourceMaps]
 pubDate: Feb 20, 2022
 contributedBy: "@SantoshYadavDev"
 ---
-import BlogImage from "@components/BlogImage.astro"
-import SourceMap from "@images/source-map.jpg"
 
-Do you want to upload source-map to an reporting tool like 
+import BlogImage from "@components/BlogImage.astro";
+import SourceMap from "@images/source-map.jpg";
+
+Do you want to upload source-map to an reporting tool like
 @datadoghq
 , but want to make sure no one can debug the code due to sourceMap
 
-
 ---
+
 Set below property in build options, the source-map will not be mapped to the bundle, but you will get a source map.
 
 ```json
@@ -21,5 +23,4 @@ Set below property in build options, the source-map will not be mapped to the bu
 }
 ```
 
-
 <BlogImage src={SourceMap} alt="hidden source map for production" />

src/pages/snippets/v15-standalone.mdx

@@ -1,6 +1,7 @@
 ---
 title: Angular 15 Standalone Components
 description: "Easy example of Angular 15 standalone components in existing projects"
+tags: ["angular15", "standalone components"] # comma separated list which gets trimmed
 pubDate: Feb 22, 2022
 contributedBy: "@olierxleben"
 ---
@@ -9,22 +10,25 @@ Here is a quick example of how to use a standalone component in an existing NgMo
 Let`s start with the component itself.
 
 ```typescript
-import {Component} from '@angular/core';
+import { Component } from "@angular/core";
 
 @Component({
-  selector: 'fancy-button',
+  selector: "fancy-button",
   standalone: true, // magic lies here
 
   template: `
-    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+    <button
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+    >
       <ng-content></ng-content>
     </button>
   `,
 })
-export class ButtonComponent {
-}
+export class ButtonComponent {}
 ```
+
 ---
+
 And for the integration in an NgModule, you can just do the following:
 
 ```typescript