From 14a1411056f2743f6eb5e4839f32409145dc99ce Mon Sep 17 00:00:00 2001
From: Norbert Melzer <timmelzer@gmail.com>
Date: Thu, 22 Jun 2023 23:21:09 +0200
Subject: [PATCH] feature: tag in index

---
 src/components/articlepreview.tsx | 15 ++++++++++++++-
 src/gatsby-types.d.ts             |  4 ++--
 src/pages/index.tsx               |  1 +
 src/templates/tags.tsx            |  1 +
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/articlepreview.tsx b/src/components/articlepreview.tsx
index b047087..24d84f8 100644
--- a/src/components/articlepreview.tsx
+++ b/src/components/articlepreview.tsx
@@ -3,6 +3,8 @@ import * as React from "react";
 import { Link } from "gatsby";
 import { GatsbyImage, ImageDataLike, getImage } from "gatsby-plugin-image";
 
+import { Tag } from "../templates/tags";
+
 type BlogPostNode = Queries.BlogPostsQuery["allMdx"]["nodes"][0];
 interface PreviewProps {
   node: BlogPostNode;
@@ -27,16 +29,27 @@ export const Preview = ({ node }: PreviewProps) => {
     <div className="w-[140px] p-[5px] shrink-0"></div>
   );
 
+  const tags = node.frontmatter.tags?.map((tag) =>
+    tag ? (
+      <li>
+        <Tag key={tag} name={tag} />
+      </li>
+    ) : undefined
+  );
+
   return (
     <article style={{ display: "flex", alignItems: "center" }}>
       {teaser}
-      <div>
+      <div className="grow-1 w-full">
         <h2 className="text-base sm:text-lg md:text-xl">
           <Link to={to}>{node.frontmatter.title}</Link>
         </h2>
         <p className="text-xs md:text-sm">Posted: {node.frontmatter.date}</p>
         <p className="hidden md:block md:text-sm">{node.excerpt}</p>
       </div>
+      <div className="w-[100px] shrink-0 text-right">
+        <ul>{tags}</ul>
+      </div>
     </article>
   );
 };
diff --git a/src/gatsby-types.d.ts b/src/gatsby-types.d.ts
index 6d1b1fd..6ad22c2 100644
--- a/src/gatsby-types.d.ts
+++ b/src/gatsby-types.d.ts
@@ -2595,7 +2595,7 @@ type BlogPostByIdQuery = { readonly mdx: { readonly frontmatter: { readonly titl
 type BlogPostsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-type BlogPostsQuery = { readonly allMdx: { readonly nodes: ReadonlyArray<{ readonly id: string, readonly excerpt: string | null, readonly frontmatter: { readonly date: string, readonly title: string, readonly slug: string, readonly hero_image_alt: string, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } }> } };
+type BlogPostsQuery = { readonly allMdx: { readonly nodes: ReadonlyArray<{ readonly id: string, readonly excerpt: string | null, readonly frontmatter: { readonly date: string, readonly title: string, readonly slug: string, readonly tags: ReadonlyArray<string | null> | null, readonly hero_image_alt: string, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } }> } };
 
 type FetchTitleQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -2643,7 +2643,7 @@ type TagInfoQueryVariables = Exact<{
 }>;
 
 
-type TagInfoQuery = { readonly allMdx: { readonly totalCount: number, readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly excerpt: string | null, readonly frontmatter: { readonly hero_image_alt: string, readonly title: string, readonly slug: string, readonly date: string, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } } }> } };
+type TagInfoQuery = { readonly allMdx: { readonly totalCount: number, readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly excerpt: string | null, readonly frontmatter: { readonly hero_image_alt: string, readonly title: string, readonly slug: string, readonly date: string, readonly tags: ReadonlyArray<string | null> | null, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } } }> } };
 
 type TagListQueryVariables = Exact<{ [key: string]: never; }>;
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b8f9095..503ef72 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -26,6 +26,7 @@ export const query = graphql`
           date
           title
           slug
+          tags
           hero_image_alt
           hero_image {
             childImageSharp {
diff --git a/src/templates/tags.tsx b/src/templates/tags.tsx
index 7b42409..98b08d5 100644
--- a/src/templates/tags.tsx
+++ b/src/templates/tags.tsx
@@ -108,6 +108,7 @@ export const pageQuery = graphql`
             title
             slug
             date
+            tags
           }
         }
       }