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/pages/index.tsx

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