feature: tag in index

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>
   );
 };

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; }>;
 

src/pages/index.tsx

@@ -26,6 +26,7 @@ export const query = graphql`
           date
           title
           slug
+          tags
           hero_image_alt
           hero_image {
             childImageSharp {

src/templates/tags.tsx

@@ -108,6 +108,7 @@ export const pageQuery = graphql`
             title
             slug
             date
+            tags
           }
         }
       }