Customization

.github/workflows/ci-cd.yml

@@ -0,0 +1,31 @@
+# Copyright Jiaqi Liu
+---
+name: CI/CD
+
+"on":
+  push:
+    branches:
+      - master
+
+jobs:
+  deploy-to-github-pages:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: |
+          npm install -g pnpm
+          pnpm install
+          pnpm add sharp
+          pnpm build
+      - name: Deploy blogs to GitHub Pages
+        if: github.ref == 'refs/heads/master'
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: dist
+          enable_jekyll: false
+          user_name: QubitPi
+          user_email: [email protected]

.gitignore

@@ -25,3 +25,5 @@ pnpm-debug.log*
 package-lock.json
 bun.lockb
 yarn.lock
+
+.idea

README.md

@@ -11,7 +11,7 @@ A static blog template built with [Astro](https://astro.build).
 
 > README version: `2024-09-10`
 
-![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
+![Preview Image](./blog-home-page.png)
 
 ## ✨ Features
 
@@ -23,6 +23,28 @@ A static blog template built with [Astro](https://astro.build).
 - [ ] Comments
 - [x] Search
 - [ ] TOC
+- [x] ([This fork]()) Per-post font customization:
+
+  - [x] [庞中华行楷 for Chinese](https://www.fonts101.com/fonts/view/Script/62094/US_Declaration) ([example post](https://leadership.qubitpi.org/posts/%E5%AD%99%E5%AD%90%E5%85%B5%E6%B3%95%E8%AE%A1%E7%AF%87%E7%AC%AC%E4%B8%80/))
+  - [x] [DX Red Mailbox Bold for Korean](https://www.fonts101.com/fonts/view/Script/62094/US_Declaration) ([example post](https://leadership.qubitpi.org/posts/%EB%82%98%EC%9D%98-%EC%95%84%EC%A0%80%EC%94%A8/))
+  - [x] [US Declaration](https://www.fonts101.com/fonts/view/Script/62094/US_Declaration) ([example post](https://leadership.qubitpi.org/posts/declaration-of-independence/))
+  - [x] [Latin font](https://www.1001fonts.com/sweynheim-pannartz-font.html)[^1] ([example post](https://leadership.qubitpi.org/posts/pro-lege-manilia/))
+  - [x] [GFS Porson for Ancient Greek](https://www.oocities.org/greekfonts/) ([example post](https://leadership.qubitpi.org/posts/reading-notes-de-administrando-imperio/))
+
+[^1]: https://ilovetypography.com/2016/04/18/the-first-roman-fonts/
+
+> [!NOTE]
+>
+> I was actually going to pick up the [ZephGreek](https://www.loebclassics.com/page/logo) but realized that the
+> [Loeb never publishes the font](https://tex.stackexchange.com/a/163342/277953)
+
+  - [x] Ubuntu (Default global font)
+
+### Top Blog
+
+One blog, such as [this one](https://leadership.qubitpi.org/posts/infinite-game/), can be set to always comes as the
+first blog on the first page. To do so, set the `topBlog` to the title of the desired top blog in
+[config](./src/config.ts)
 
 ## 🚀 How to Use
 

astro.config.mjs

@@ -20,7 +20,7 @@ import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
 
 // https://astro.build/config
 export default defineConfig({
-  site: "https://fuwari.vercel.app/",
+  site: "https://leadership.qubitpi.org/",
   base: "/",
   trailingSlash: "always",
   integrations: [

frontmatter.json

@@ -60,6 +60,11 @@
           "title": "language",
           "name": "language",
           "type": "string"
+        },
+        {
+            "title": "font",
+            "name": "font",
+            "type": "string"
         }
       ]
     }

public/CNAME

@@ -0,0 +1 @@
+leadership.qubitpi.org

src/components/PostCard.astro

@@ -18,6 +18,7 @@ interface Props {
   image: string
   description: string
   draft: boolean
+  font: string
   style: string
 }
 const {
@@ -29,6 +30,7 @@ const {
   category,
   image,
   description,
+  font,
   style,
 } = Astro.props
 const className = Astro.props.class
@@ -38,16 +40,25 @@ const hasCover = image !== undefined && image !== null && image !== ''
 const coverWidth = '28%'
 
 const { remarkPluginFrontmatter } = await entry.render()
+
+const fontSwitch = {
+    'font-USDeclaration': entry.data.font == 'USDeclaration',
+    'font-SweynheimPannartz': entry.data.font == 'SweynheimPannartz',
+    'font-PangZhonghuaXingKai': entry.data.font == 'PangZhonghuaXingKai',
+    'font-DXRedMailboxBold': entry.data.font == 'DXRedMailboxBold',
+    'font-Porson': entry.data.font == 'Porson',
+    'font-Ubuntu': entry.data.font == 'Ubuntu' || entry.data.font == null
+}
 ---
 <div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
     <div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
         <a href={url}
-           class="transition group w-full block font-bold mb-3 text-3xl text-90
+           class=`transition group w-full block font-bold font-${font} mb-3 text-3xl text-90
         hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
         active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
         before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
         before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
-        ">
+        `>
             {title}
             <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" ></Icon>
             <Icon class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded"></Icon>
@@ -57,7 +68,7 @@ const { remarkPluginFrontmatter } = await entry.render()
         <PostMetadata published={published} tags={tags} category={category} hideTagsForMobile={true} class="mb-4"></PostMetadata>
 
         <!-- description -->
-        <div class:list={["transition text-75 mb-3.5 pr-4", {"line-clamp-2 md:line-clamp-1": !description}]}>
+        <div class:list={["transition text-75 mb-3.5 pr-4", {"line-clamp-2 md:line-clamp-1": !description}, fontSwitch]}>
             { description || remarkPluginFrontmatter.excerpt }
         </div>
 
@@ -101,3 +112,21 @@ const { remarkPluginFrontmatter } = await entry.render()
 
 <style define:vars={{coverWidth}}>
 </style>
+
+<style is:global>
+    @font-face {
+        font-family: 'DXRedMailboxBold';
+        src: url('/fonts/DXRedMailboxBold.ttf') format('truetype');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'PangZhonghuaXingKai';
+        src: url('/fonts/PangZhonghuaXingKai.ttf') format('truetype');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+    }
+</style>

src/components/PostPage.astro

@@ -1,25 +1,40 @@
 ---
 import { getPostUrlBySlug } from '@utils/url-utils'
 import PostCard from './PostCard.astro'
+import { siteConfig } from '../config'
 
 const { page } = Astro.props
 
 let delay = 0
 const interval = 50
+
 ---
 <div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
-    {page.data.map((entry: { data: { draft: boolean; title: string; tags: string[]; category: string; published: Date; image: string; description: string; }; slug: string; }) => {
+    {page.data.map((entry: {
+        data: {
+            draft: boolean;
+            title: string;
+            tags: string[];
+            category: string;
+            published: Date;
+            image: string;
+            description: string;
+            font: string
+        };
+        slug: string;
+    }, idx) => {
         return (
             <PostCard
                     entry={entry}
-                    title={entry.data.title}
+                    title={siteConfig.topBlog == entry.data.title ? "📌 " + entry.data.title : entry.data.title}
                     tags={entry.data.tags}
                     category={entry.data.category}
                     published={entry.data.published}
                     url={getPostUrlBySlug(entry.slug)}
                     image={entry.data.image}
                     description={entry.data.description}
                     draft={entry.data.draft}
+                    font={entry.data.font}
                     class:list="onload-animation"
                     style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
             ></PostCard>

src/components/widget/SideBar.astro

@@ -3,7 +3,6 @@ import Profile from './Profile.astro'
 import Tag from './Tags.astro'
 import Categories from './Categories.astro'
 import type { MarkdownHeading } from 'astro'
-import TOC from './TOC.astro'
 
 interface Props {
     class? : string

src/config.ts

@@ -7,26 +7,27 @@ import type {
 import { LinkPreset } from './types/config'
 
 export const siteConfig: SiteConfig = {
-  title: 'Fuwari',
-  subtitle: 'Demo Site',
-  lang: 'en',         // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
+  title: 'Jiaqi\'s Leadership Blog',
+  subtitle: 'Leadership is an infinite game.',
+  lang: 'en',         // 'en', 'zh_CN', 'zh_TW', 'ja'
   themeColor: {
     hue: 250,         // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
     fixed: false,     // Hide the theme color picker for visitors
   },
   banner: {
-    enable: false,
-    src: 'assets/images/demo-banner.png',   // Relative to the /src directory. Relative to the /public directory if it starts with '/'
+    enable: true,
+    src: 'assets/images/banner-4.png',   // Relative to the /src directory. Relative to the /public directory if it starts with '/'
     position: 'center',      // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
     credit: {
-      enable: false,         // Display the credit text of the banner image
-      text: '',              // Credit text to be displayed
-      url: ''                // (Optional) URL link to the original artwork or artist's page
+      enable: true,         // Display the credit text of the banner image
+      text: 'Ardeth Bay (The Mummy Returns)',              // Credit text to be displayed
+      url: 'https://youtu.be/DtKDPBqMu3o?t=7239'                // (Optional) URL link to the original artwork or artist's page
     }
   },
+  topBlog: "Ardeth Bay - Leadership is an Infinite Game",
   toc: {
     enable: true,           // Display the table of contents on the right side of the post
-    depth: 2                // Maximum heading depth to show in the table, from 1 to 3
+    depth: 3                // Maximum heading depth to show in the table, from 1 to 3
   },
   favicon: [    // Leave this array empty to use the default favicon
     // {
@@ -44,33 +45,28 @@ export const navBarConfig: NavBarConfig = {
     LinkPreset.About,
     {
       name: 'GitHub',
-      url: 'https://github.com/saicaca/fuwari',     // Internal links should not include the base path, as it is automatically added
-      external: true,                               // Show an external link icon and will open in a new tab
+      url: 'https://github.com/Qubitpi',     // Internal links should not include the base path, as it is automatically added
+      external: true,                        // Show an external link icon and will open in a new tab
     },
   ],
 }
 
 export const profileConfig: ProfileConfig = {
-  avatar: 'assets/images/demo-avatar.png',  // Relative to the /src directory. Relative to the /public directory if it starts with '/'
-  name: 'Lorem Ipsum',
-  bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  avatar: 'assets/images/avatar.png',  // Relative to the /src directory. Relative to the /public directory if it starts with '/'
+  name: '【烬火】胡桃',
+  bio: 'Leadership is an infinite game.',
   links: [
     {
-      name: 'Twitter',
-      icon: 'fa6-brands:twitter',       // Visit https://icones.js.org/ for icon codes
+      name: 'Paion Data',
+      icon: 'fa6-brands:bluesky',       // Visit https://icones.js.org/ for icon codes
                                         // You will need to install the corresponding icon set if it's not already included
                                         // `pnpm add @iconify-json/<icon-set-name>`
-      url: 'https://twitter.com',
-    },
-    {
-      name: 'Steam',
-      icon: 'fa6-brands:steam',
-      url: 'https://store.steampowered.com',
+      url: 'https://paion-data.com',
     },
     {
       name: 'GitHub',
-      icon: 'fa6-brands:github',
-      url: 'https://github.com/saicaca/fuwari',
+      icon: 'fa6-brands:github-alt',
+      url: 'https://github.com/Qubitpi',
     },
   ],
 }

src/content/config.ts

@@ -10,6 +10,7 @@ const postsCollection = defineCollection({
     tags: z.array(z.string()).optional().default([]),
     category: z.string().optional().default(''),
     lang: z.string().optional().default(''),
+    font: z.string().optional(),
 
     /* For internal use */
     prevTitle: z.string().default(''),

src/content/posts/Bande-der-Brüder/index.md

@@ -0,0 +1,27 @@
+---
+title: "Band of Brothers, Ep. 10, Deutscher General spricht zu seinen Männern"
+published: 2024-08-13
+description: "Band of Brothers, Ep. 10, Deutscher General spricht zu seinen Männern"
+image: cover.png
+tags: [Leadership, Public Speech]
+category: German
+draft: false 
+---
+
+Ursprüngliche Rede
+------------------
+
+<iframe width="100%" height="468" src="https://www.youtube.com/embed/SSlp1_9gJ4M" title="Band of Brothers, Ep. 10, deutscher General spricht zu seinen Männern" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+:::tip[Transkript]
+Männer, es war ein langer Krieg, es war ein harter Krieg. Ihr habt tapfer und stolz für Euer Vaterland gekämpft. Ihr
+seid eine spezielle Gruppe, die ineinander einen Zusammenhalt gefunden habt, wie er nur im Kampf existiert.
+
+…unter Brüdern, die Fuchshöhlen geteilt haben, die sich in schrechklichen Momenten gegenseitig gehalten, die den Tod
+zusammen gesehen und miteinander gelitten haben. Ich bin stolz mit Euch gedient zu haben. Sie verdienen ein glückliches
+und langes Leben.
+:::
+
+Einer nach dem anderen beginnen die fünf Amerikaner, diese Worte zu hören Sie werden auch mit ihnen gesprochen. Als
+solche erleben sie einige der gleichen Gefühle wie die besiegten Truppen vor ihnen, die von der Rede ihres Kommandanten
+sicherlich berührt sind.