First release.

src/components/Footer.astro

@@ -0,0 +1,29 @@
+---
+---
+
+<div class="footer">
+  <hr />
+  <div>
+    <small class="contact">Contact: lsz.sino@outlook.com</small>
+    &nbsp;&nbsp;
+  </div>
+  <div>
+    <small class="licence">若正文中无特殊说明，本站内容遵循:</small>
+    <small class="licence">
+      <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
+        署名-非商业使用-相同方式共享 4.0 国际许可协议
+      </a>
+    </small>
+  </div>
+</div>
+
+<style>
+  .footer {
+    margin-top: auto;
+    margin-bottom: 6px;
+  }
+  .contact,
+  .licence {
+    display: inline-block;
+  }
+</style>

src/components/HTMLCommonHead.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  title: string;
+}
+const { title } = Astro.props;
+---
+
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width" />
+<link rel="icon" href="/favicon.ico" type="image/x-icon">
+<meta name="generator" content={Astro.generator} />
+<link rel="sitemap" href="/sitemap-index.xml" />
+<title>{title}</title>

src/components/Nav.astro

@@ -0,0 +1,51 @@
+---
+---
+
+<div class="nav" id="nav">
+  <span class="nav-item site-title" id="site-title">
+    <a class="nav-link" href="/">李守中</a>
+  </span>
+  <span class="nav-item" id="category">
+    <ul class="nav-list">
+      <li class="nav-list-item">
+        <a class="nav-link" href="/article/blog/">博客</a>
+      </li>
+      <li class="nav-list-item">
+        <a class="nav-link" href="/article/note/">笔记</a>
+      </li>
+      <li class="nav-list-item">
+        <a class="nav-link" href="/article/translation/">翻译</a>
+      </li>
+    </ul>
+  </span>
+</div>
+
+<style>
+  .nav {
+    font-size: 1em;
+    margin: 10px 0 0 0;
+    display: flex;
+    align-items: flex-end;
+  }
+  #site-title {
+    font-size: 1.8em;
+    margin: 0 20px 0 0;
+    padding: 0 0 2px 0;
+    line-height: 100%;
+  }
+  .nav-list {
+    padding: 0;
+    margin: 0px;
+  }
+  .nav-list .nav-list-item {
+    float: left;
+    list-style-type: none;
+    margin: 0 20px 0 0;
+  }
+  .nav-list .nav-list-item:last-child {
+    margin: 0;
+  }
+  .nav-link {
+    color: black;
+  }
+</style>

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>

src/components/article/CategorySummary.astro

@@ -0,0 +1,33 @@
+---
+import type { CollectionEntry, CollectionKey } from "astro:content";
+
+interface Props {
+  collectionName: CollectionKey;
+  categoryName: string;
+  posts: Array<CollectionEntry<CollectionKey>>;
+}
+const { collectionName, categoryName, posts } = Astro.props;
+---
+
+<h1>{categoryName}</h1>
+<ul>
+  {
+    posts.map((post) => (
+      <li>
+        <a href={`/article/${collectionName}/${post.slug}`} target="_blank">
+          {post.data.title}
+        </a>
+      </li>
+    ))
+  }
+</ul>
+
+<style>
+  ul {
+    padding: 0;
+    list-style-type: none;
+  }
+  h1 {
+    margin: 0.5em 0 0 0;
+  }
+</style>

src/components/article/CollectionSummary.astro

@@ -0,0 +1,94 @@
+---
+import type { CollectionEntry } from "astro:content";
+import { getCollection, type CollectionKey } from "astro:content";
+import CategorySummary from "./CategorySummary.astro";
+
+interface Props {
+  collectionName: CollectionKey;
+  sortedByTimeline: boolean;
+}
+const { collectionName, sortedByTimeline } = Astro.props;
+
+type CategoriedPosts = {
+  [categoryName: string]: Array<CollectionEntry<CollectionKey>>;
+};
+
+const allPosts: CollectionEntry<CollectionKey>[] =
+  await getCollection(collectionName);
+
+const allCategories: Array<string> = Array.from(
+  new Set(
+    allPosts.map((entry) => {
+      return entry.data.category;
+    })
+  )
+);
+
+const categoriedPostList: Array<CategoriedPosts> = allCategories.map((key) => {
+  let object: CategoriedPosts = {};
+  object[key] = allPosts.filter((post) => post.data.category === key);
+  sortedByTimeline
+    ? object[key].sort(
+        (
+          postA: CollectionEntry<CollectionKey>,
+          postB: CollectionEntry<CollectionKey>
+        ) => {
+          if (postA.data.lastUpdate !== postB.data.lastUpdate) {
+            return postA.data.lastUpdate < postB.data.lastUpdate ? 1 : -1;
+          }
+          return postA.id.localeCompare(postB.id);
+        }
+      )
+    : object[key].sort(
+        (
+          postA: CollectionEntry<CollectionKey>,
+          postB: CollectionEntry<CollectionKey>
+        ) => {
+          return postA.id.localeCompare(postB.id);
+        }
+      );
+  return object;
+});
+
+const categoriedPostListSortedByArticleAmount: Array<CategoriedPosts> =
+  JSON.parse(JSON.stringify(categoriedPostList)).sort(
+    (a: CategoriedPosts, b: CategoriedPosts) => {
+      const aKey: string = Object.keys(a)[0];
+      const bKey: string = Object.keys(b)[0];
+      return b[bKey].length - a[aKey].length;
+    }
+  );
+---
+
+<div class="collection-desc">
+  {
+    categoriedPostListSortedByArticleAmount.map((obj) => (
+      <div class="collection-desc-item">
+        <CategorySummary
+          collectionName={collectionName}
+          categoryName={Object.keys(obj)[0]}
+          posts={obj[Object.keys(obj)[0]]}
+        />
+      </div>
+    ))
+  }
+</div>
+
+<style>
+  @media screen and (max-width: 125ex) {
+    .collection-desc-item {
+      width: 100%;
+    }
+  }
+  @media screen and (min-width: 125ex) {
+    .collection-desc-item {
+      width: 50%;
+      float: left;
+    }
+  }
+  .collection-desc::after {
+    display: block;
+    content: "";
+    clear: both;
+  }
+</style>