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>

src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

src/layouts/DefaultLayout.astro

@@ -0,0 +1,19 @@
+---
+import HTMLCommonHead from "../components/HTMLCommonHead.astro";
+import "../styles/global.css"
+
+interface Props {
+  title: string;
+}
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="zh">
+  <head>
+    <HTMLCommonHead title={title}/>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

src/pages/404.astro

@@ -0,0 +1,12 @@
+---
+import DefaultLayout from "../layouts/DefaultLayout.astro";
+import Nav from "../components/Nav.astro";
+import Footer from "../components/Footer.astro";
+import ArticleBody from "../components/article/ArticleBody.astro";
+---
+
+<DefaultLayout title="404">
+  <Nav />
+  <ArticleBody collectionName="site" articleSlug="404" />
+  <Footer />
+</DefaultLayout>

src/pages/article/blog/[...blog].astro

@@ -0,0 +1,34 @@
+---
+import { getCollection } from "astro:content";
+import type {
+  CollectionEntry,
+  CollectionKey,
+  ContentEntryMap,
+} from "astro:content";
+import Footer from "../../../components/Footer.astro";
+import Nav from "../../../components/Nav.astro";
+import ArticleBody from "../../../components/article/ArticleBody.astro";
+import DefaultLayout from "../../../layouts/DefaultLayout.astro";
+
+export async function getStaticPaths() {
+  const collectionName: CollectionKey = "blog";
+  const blogEntries = await getCollection(collectionName);
+  return blogEntries.map((entry) => ({
+    params: { blog: entry.slug },
+    props: { entry },
+  }));
+}
+
+interface Props {
+  entry: CollectionEntry<keyof ContentEntryMap>;
+}
+const { entry } = Astro.props;
+
+const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
+---
+
+<DefaultLayout title=`${articlePrettyName} - 李守中`>
+  <Nav />
+  <ArticleBody collectionName="blog" articleSlug={entry.slug} />
+  <Footer />
+</DefaultLayout>

src/pages/article/blog/index.astro

@@ -0,0 +1,21 @@
+---
+import Footer from '../../../components/Footer.astro';
+import Nav from '../../../components/Nav.astro';
+import CollectionSummary from '../../../components/article/CollectionSummary.astro';
+import DefaultLayout from '../../../layouts/DefaultLayout.astro';
+---
+
+<DefaultLayout title="博客 - 李守中">
+  <Nav />
+  <div class="options">
+    <span>当前: [按日期降序] <a href="/article/blog/sort_by_name">按名字排序</a></span>
+  </div>
+  <CollectionSummary collectionName="blog" sortedByTimeline={true}/>
+  <Footer />
+</DefaultLayout>
+
+<style>
+  .options {
+    margin: 1em 0 0 0;
+  }
+</style>

src/pages/article/blog/sort_by_name.astro

@@ -0,0 +1,21 @@
+---
+import Footer from '../../../components/Footer.astro';
+import Nav from '../../../components/Nav.astro';
+import CollectionSummary from '../../../components/article/CollectionSummary.astro';
+import DefaultLayout from '../../../layouts/DefaultLayout.astro';
+---
+
+<DefaultLayout title="博客 - 李守中">
+  <Nav />
+  <div class="options">
+    <span>当前: [按名字排序] <a href="/article/blog/">按日期降序</a></span>
+  </div>
+  <CollectionSummary collectionName="blog" sortedByTimeline={false}/>
+  <Footer />
+</DefaultLayout>
+
+<style>
+  .options {
+    margin: 1em 0 0 0;
+  }
+</style>

src/pages/article/note/[...note].astro

@@ -0,0 +1,34 @@
+---
+import { getCollection } from "astro:content";
+import type {
+  CollectionEntry,
+  CollectionKey,
+  ContentEntryMap,
+} from "astro:content";
+import Footer from "../../../components/Footer.astro";
+import Nav from "../../../components/Nav.astro";
+import ArticleBody from "../../../components/article/ArticleBody.astro";
+import DefaultLayout from "../../../layouts/DefaultLayout.astro";
+
+export async function getStaticPaths() {
+  const collectionName: CollectionKey = "note";
+  const blogEntries = await getCollection(collectionName);
+  return blogEntries.map((entry) => ({
+    params: { note: entry.slug },
+    props: { entry },
+  }));
+}
+
+interface Props {
+  entry: CollectionEntry<keyof ContentEntryMap>;
+}
+const { entry } = Astro.props;
+
+const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
+---
+
+<DefaultLayout title=`${articlePrettyName} - 李守中`>
+  <Nav />
+  <ArticleBody collectionName="note" articleSlug={entry.slug} />
+  <Footer />
+</DefaultLayout>

src/pages/article/note/index.astro

@@ -0,0 +1,21 @@
+---
+import Footer from '../../../components/Footer.astro';
+import Nav from '../../../components/Nav.astro';
+import CollectionSummary from '../../../components/article/CollectionSummary.astro';
+import DefaultLayout from '../../../layouts/DefaultLayout.astro';
+---
+
+<DefaultLayout title="笔记 - 李守中">
+  <Nav />
+  <div class="options">
+    <span>当前: [按名字排序] <a href="/article/note/sort_by_timeline">按日期降序</a></span>
+  </div>
+  <CollectionSummary collectionName="note" sortedByTimeline={false}/>
+  <Footer />
+</DefaultLayout>
+
+<style>
+  .options {
+    margin: 1em 0 0 0;
+  }
+</style>

src/pages/article/note/sort_by_timeline.astro

@@ -0,0 +1,21 @@
+---
+import Footer from '../../../components/Footer.astro';
+import Nav from '../../../components/Nav.astro';
+import CollectionSummary from '../../../components/article/CollectionSummary.astro';
+import DefaultLayout from '../../../layouts/DefaultLayout.astro';
+---
+
+<DefaultLayout title="笔记 - 李守中">
+  <Nav />
+  <div class="options">
+    <span>当前: [按日期降序] <a href="/article/note/">按名字排序</a></span>
+  </div>
+  <CollectionSummary collectionName="note" sortedByTimeline={true}/>
+  <Footer />
+</DefaultLayout>
+
+<style>
+  .options {
+    margin: 1em 0 0 0;
+  }
+</style>

src/pages/article/translation/[...translation].astro

@@ -0,0 +1,34 @@
+---
+import { getCollection } from "astro:content";
+import type {
+  CollectionEntry,
+  CollectionKey,
+  ContentEntryMap,
+} from "astro:content";
+import Footer from "../../../components/Footer.astro";
+import Nav from "../../../components/Nav.astro";
+import ArticleBody from "../../../components/article/ArticleBody.astro";
+import DefaultLayout from "../../../layouts/DefaultLayout.astro";
+
+export async function getStaticPaths() {
+  const collectionName: CollectionKey = "translation";
+  const blogEntries = await getCollection(collectionName);
+  return blogEntries.map((entry) => ({
+    params: { translation: entry.slug },
+    props: { entry },
+  }));
+}
+
+interface Props {
+  entry: CollectionEntry<keyof ContentEntryMap>;
+}
+const { entry } = Astro.props;
+
+const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
+---
+
+<DefaultLayout title=`${articlePrettyName} - 李守中`>
+  <Nav />
+  <ArticleBody collectionName="translation" articleSlug={entry.slug} />
+  <Footer />
+</DefaultLayout>

src/pages/article/translation/index.astro

@@ -0,0 +1,21 @@
+---
+import Footer from '../../../components/Footer.astro';
+import Nav from '../../../components/Nav.astro';
+import CollectionSummary from '../../../components/article/CollectionSummary.astro';
+import DefaultLayout from '../../../layouts/DefaultLayout.astro';
+---
+
+<DefaultLayout title="翻译 - 李守中">
+  <Nav />
+  <div class="options">
+    <span>当前: [按名字排序] <a href="/article/translation/sort_by_timeline">按日期降序</a></span>
+  </div>
+  <CollectionSummary collectionName="translation" sortedByTimeline={false}/>
+  <Footer />
+</DefaultLayout>
+
+<style>
+  .options {
+    margin: 1em 0 0 0;
+  }
+</style>

src/pages/article/translation/sort_by_timeline.astro

@@ -0,0 +1,21 @@
+---
+import Footer from '../../../components/Footer.astro';
+import Nav from '../../../components/Nav.astro';
+import CollectionSummary from '../../../components/article/CollectionSummary.astro';
+import DefaultLayout from '../../../layouts/DefaultLayout.astro';
+---
+
+<DefaultLayout title="翻译 - 李守中">
+  <Nav />
+  <div class="options">
+    <span>当前: [按日期降序] <a href="/article/translation/">按名字排序</a></span>
+  </div>
+  <CollectionSummary collectionName="translation" sortedByTimeline={true}/>
+  <Footer />
+</DefaultLayout>
+
+<style>
+  .options {
+    margin: 1em 0 0 0;
+  }
+</style>

src/pages/index.astro

@@ -0,0 +1,12 @@
+---
+import DefaultLayout from "../layouts/DefaultLayout.astro";
+import Nav from "../components/Nav.astro";
+import Footer from "../components/Footer.astro";
+import ArticleBody from "../components/article/ArticleBody.astro";
+---
+
+<DefaultLayout title="李守中">
+  <Nav />
+  <ArticleBody collectionName="site" articleSlug="关于本站" />
+  <Footer />
+</DefaultLayout>

src/styles/global.css

@@ -0,0 +1,99 @@
+@media screen and (max-width: 125ex) {
+  body {
+    width: 95%;
+  }
+}
+
+@media screen and (min-width: 125ex) {
+  body {
+    width: 125ex;
+  }
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  font-family: "Consolas", "Hack", -apple-system,
+    BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei",
+    "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1em;
+  margin: auto;
+  overflow-y: scroll;
+  min-height: 100%;
+  line-height: 1.5;
+}
+
+a {
+  text-decoration: none;
+  color: #275d93;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+hr {
+  width: 100%;
+  height: 1px;
+  background: #ccc;
+  color: #ccc;
+  margin: 1em 0;
+  border: none;
+  padding: 0;
+}
+
+/* table start */
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+}
+
+table tr th,
+table tr td {
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  padding: 5px;
+}
+
+table tr th:first-child,
+table tr td:first-child {
+  border-left: 1px solid #ccc;
+}
+
+table tr th:first-child,
+table tr td:first-child {
+  border-left: 1px solid #ccc;
+}
+
+table tr th {
+  background: #eee;
+  border-top: solid 1px #ccc;
+}
+
+/* top-left border-radius */
+table tr:first-child th:first-child {
+  border-top-left-radius: 6px;
+}
+
+/* top-right border-radius */
+table tr:first-child th:last-child {
+  border-top-right-radius: 6px;
+}
+
+/* bottom-left border-radius */
+table tr:last-child td:first-child {
+  border-bottom-left-radius: 6px;
+}
+
+/* bottom-right border-radius */
+table tr:last-child td:last-child {
+  border-bottom-right-radius: 6px;
+}
+
+/* table end */