First release.

src/components/article/ArticleBody.astro

@@ -0,0 +1,71 @@
+---
+import { getEntry, type CollectionKey } from "astro:content";
+
+interface Props {
+  articleSlug: string;
+  collectionName: CollectionKey;
+}
+const { articleSlug, collectionName } = Astro.props;
+
+const article = await getEntry(collectionName, articleSlug);
+const { Content } = await article!.render();
+const articlePrettyName = article!.id.split("/").pop()!.replace(".md", "");
+---
+
+<div class="article">
+  <div class="article-title">
+    <h1>{articlePrettyName}&nbsp;</h1>
+    {
+      article!.data.lastUpdate && (
+        <span class="last-update">Last Update: {article!.data.lastUpdate}</span>
+      )
+    }
+  </div>
+  <Content />
+</div>
+
+<style>
+  :global(.article img) {
+    max-width: 100%;
+    margin: auto;
+    display: block;
+  }
+  :global(.article p) {
+    margin: 1em 0 1em 0;
+  }
+  :global(.article > h1, h2, h3, h4, h5) {
+    margin: 1em 0 1em 0;
+  }
+  :global(.article-title h1) {
+    margin: 0.5em 0 0 0;
+  }
+  .article .article-title {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+  }
+  /* reduce indent of TOC list */
+  :global(.article-title + ul) {
+    margin: 1em 0 1em 0;
+    padding: 0 0 0 20px;
+  }
+  /* font for all code */
+  :global(.article code) {
+    font-family: "Consolas", "Tahoma", sans-serif;
+  }
+  /* code block */
+  :global(.article pre) {
+    border: 1px solid #eee;
+    border-left: 6px solid #ccc;
+    padding: 6px 6px 4px 6px;
+    border-radius: 6px;
+  }
+  /* inline code in paragraph*/
+  :global(.article p code) {
+    color: #be4750;
+  }
+  /* inline code in list item */
+  :global(.article li > code) {
+    color: #be4750;
+  }
+</style>