Add tags in post detail

This commit is contained in:
Sat Naing
2022-09-11 03:04:55 +06:30
parent f78d956bfd
commit 9e881a0355
+9 -1
View File
@@ -1,11 +1,13 @@
--- ---
import Datetime from "@components/Datetime.astro"; import Datetime from "@components/Datetime.astro";
import Header from "@components/Header.astro"; import Header from "@components/Header.astro";
import Tag from "@components/Tag.astro";
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import type { MarkdownInstance } from "astro"; import type { MarkdownInstance } from "astro";
import type { Frontmatter } from "../index.astro";
export interface Props { export interface Props {
post: MarkdownInstance<Record<string, any>>; post: MarkdownInstance<Frontmatter>;
} }
export async function getStaticPaths() { export async function getStaticPaths() {
@@ -32,6 +34,9 @@ const { Content, frontmatter } = Astro.props.post;
<main> <main>
<h1 class="post-title">{frontmatter.title}</h1> <h1 class="post-title">{frontmatter.title}</h1>
<Datetime datetime={frontmatter.datetime} size="lg" className="my-2" /> <Datetime datetime={frontmatter.datetime} size="lg" className="my-2" />
<ul class="tags-container">
{frontmatter.tags.map((tag) => <Tag name={tag} />)}
</ul>
<article <article
id="article" id="article"
role="article" role="article"
@@ -49,4 +54,7 @@ const { Content, frontmatter } = Astro.props.post;
.post-title { .post-title {
@apply font-semibold text-2xl text-skin-accent; @apply font-semibold text-2xl text-skin-accent;
} }
.tags-container {
@apply mb-8;
}
</style> </style>