updates for article footer

Signed-off-by: Ji Bin <[email protected]>

astro.config.mts

@@ -52,6 +52,15 @@ function defaultPicPlugin() {
   };
 }
 
+function defaultDatePlugin() {
+  return function (tree: any, file: any) {
+    const { frontmatter } = file.data.astro;
+    if (!frontmatter.date) {
+      frontmatter.date = new Date().toISOString();
+    }
+  };
+}
+
 function defaultSummaryPlugin() {
   return function (tree: any, file: any) {
     const { frontmatter } = file.data.astro;

src/components/ArticleFooter.astro

@@ -0,0 +1,64 @@
+---
+const { prev, next, date } = Astro.props;
+
+import { config } from "@/config";
+
+const { twitter, github } = config.site;
+
+const menus = [
+  {
+    name: "首页",
+    url: '/',
+  },
+];
+
+if (prev) {
+  menus.push({
+    name: "上一篇",
+    url: prev.url,
+  });
+}
+
+if (next) {
+  menus.push({
+    name: "下一篇",
+    url: next.url,
+  });
+}
+
+if (github) {
+  menus.push({
+    name: "Github",
+    url: github,
+  });
+}
+
+if (twitter) {
+  menus.push({
+    name: "Twitter",
+    url: twitter,
+  });
+}
+---
+
+<div class="flex justify-between pt-4">
+  <div>发布于 {date}</div>
+  <div id="article-footer">
+    <ul class="list-none flex">
+      {
+        menus.map((menu, index) => (
+          index === 0 ? (
+            <li class="mr-2">
+              <a href={menu.url} class="title-link">{menu.name}</a>
+            </li>
+          ) : (
+            <span class="mr-2">|</span>
+            <li class="mr-2">
+              <a href={menu.url} class="title-link">{menu.name}</a>
+            </li>
+          )
+        ))
+      }
+    </ul>
+  </div>
+</div>

src/components/Card.astro

@@ -1,14 +1,10 @@
 ---
 const { post } = Astro.props;
 
-import {
-getYmdFormNumber,
-parseArticleSummary,
-parseArticleTitle
-} from "@/util";
+import { getYmdFormPost, parseArticleSummary, parseArticleTitle } from "@/util";
 
 const title = parseArticleTitle(post);
-const dateText = getYmdFormNumber(post);
+const dateText = getYmdFormPost(post);
 const summary = parseArticleSummary(post);
 ---
 

src/components/Container.astro

@@ -3,8 +3,9 @@
 ---
 
 <div class="flex justify-center items-center pt-1">
-  <div class="mx-auto mb-1 xl:max-w-[1340px] w-full lg:max-w-[1000px] md:max-w-[670px] max-w-[400px] md:box-border box-content md:px-0 px-3">
+  <div
+    class="mx-auto mb-1 xl:max-w-[1340px] w-full lg:max-w-[1000px] md:max-w-[670px] max-w-[400px] md:box-border box-content md:px-0 px-3"
+  >
     <slot />
   </div>
 </div>
-

src/components/IndexHeader.astro

@@ -2,7 +2,36 @@
 import { config } from "@/config";
 import Logo from "./Logo.astro";
 
-const siteTitle = config.site.title;
+const { twitter, github } = config.site;
+
+const menus = [];
+if (github) {
+  menus.push({
+    name: "Github",
+    url: github,
+  });
+}
+if (twitter) {
+  menus.push({
+    name: "Twitter",
+    url: twitter,
+  });
+}
 ---
 
-<Logo />
+<div class="flex justify-between items-center">
+  <Logo />
+  <div>
+    <ul class="list-none flex">
+      {
+        menus.map((menu) => (
+          <li class="mr-4">
+            <a href={menu.url} class="title-link font-bold">
+              {menu.name}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</div>

src/config.ts

@@ -5,5 +5,7 @@ export const config = {
         logo: "/favicon.png",
         description: "BIN周刊: 一周一次，分享所见所闻、所思所想",
         url: "https://w.jibin.net",
+        github: "https://github.com/matrixji/bin-weekly",
+        twitter: "https://twitter.com/matrixji",
     }
 }

src/layouts/post.astro

@@ -1,9 +1,10 @@
 ---
-import { parseArticleTitle, sortPosts } from "@/util";
+import { parseArticleTitle, getYmdFormPost, sortPosts } from "@/util";
 import type { MarkdownLayoutProps } from "astro";
 import Head from "../components/Head.astro";
 import LeftSidebar from "../components/LeftSidebar.astro";
 import ThemeSwitch from "../components/ThemeSwitch.astro";
+import ArticleFooter from "../components/ArticleFooter.astro";
 
 // css for post
 import "../styles/post.css";
@@ -17,7 +18,13 @@ const { frontmatter } = Astro.props;
 const posts = sortPosts(await Astro.glob("../pages/posts/*.md"));
 const post = posts.find((post) => post.url === frontmatter.url);
 
+const index = post ? posts.indexOf(post) : -1;
+const prevPost = index === posts.length - 1 ? null : posts[index + 1];
+const nextPost = index === 0 ? null : posts[index - 1];
+
 const articleTitle = parseArticleTitle(post);
+const articleDate = getYmdFormPost(post);
+
 ---
 
 <html lang="zh">
@@ -35,14 +42,15 @@ const articleTitle = parseArticleTitle(post);
         <div class="flex pt-3">
           <h1 class="text-3xl font-bold">{articleTitle}</h1>
         </div>
-        <article
-          id="mdx"
-          class="pt-3 prose dark:prose-invert">
-          <slot />
-        </article>
+        <div id="mdx" class="pt-3">
+          <article class="prose dark:prose-invert">
+            <slot />
+          </article>
+          <ArticleFooter prev={prevPost} next={nextPost} date={articleDate} />
+        </div>
       </div>
+      <ThemeSwitch />
     </div>
-    <ThemeSwitch />
   </body>
 </html>
 

src/styles/post.css

@@ -16,9 +16,15 @@
   width: 100%;
 }
 
+article {
+  padding-bottom: 2rem;
+  border-bottom: 2px double var(--split-line-color);
+  max-width: 100% !important
+}
+
 #mdx img {
   cursor: zoom-in;
-  max-height: 75vh;
+  max-height: 65vh;
   margin-left: auto;
   margin-right: auto;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

src/util.ts

@@ -48,7 +48,10 @@ export const parsePostNumber = (post: MarkdownInstance<Record<string, any>>) =>
     return "9999";
 }
 
-export const getYmdFormNumber = (post: MarkdownInstance<Record<string, any>>) => {
+export const getYmdFormPost = (post: MarkdownInstance<Record<string, any>> | undefined) => {
+    if (post === undefined) {
+        return moment().format("YYYY/MM/DD");
+    }
     if (post.frontmatter && post.frontmatter.date) {
         return moment(post.frontmatter.date).utc().format("YYYY/MM/DD");
     }
@@ -79,4 +82,4 @@ export const parseArticleSummary = (post: MarkdownInstance<Record<string, any>>
         return post.frontmatter.summary;
     }
     return "No summary";
-}
+}