Customization

.github/workflows/ci-cd.yml

@@ -0,0 +1,31 @@
+# Copyright Jiaqi Wang
+---
+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

@@ -10,7 +10,7 @@ A static blog template built with [Astro](https://astro.build).
 
 > README version: `2024-04-07`
 
-![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
+![Preview Image](./blog-home-page.png)
 
 ## ✨ Features
 
@@ -22,6 +22,20 @@ A static blog template built with [Astro](https://astro.build).
 - [ ] Comments
 - [x] Search
 - [ ] TOC
+- [x] ([This fork]()) Support per-post font customization:
+
+  - [x] [庞中华行楷 for Chinese](https://www.fonts101.com/fonts/view/Script/62094/US_Declaration) ([example post](https://leadership.qubitpi.org/posts/declaration-of-independence/))
+  - [x] [DX Red Mailbox Bold for Korean](https://www.fonts101.com/fonts/view/Script/62094/US_Declaration) ([example post](https://leadership.qubitpi.org/posts/declaration-of-independence/))
+  - [x] [US Declaration](https://www.fonts101.com/fonts/view/Script/62094/US_Declaration) ([example post](https://leadership.qubitpi.org/posts/declaration-of-independence/))
+  - [x] [Blackletter for Latin Manuscript](https://www.fontsquirrel.com/fonts/chomsky) ([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/))
+
+> [!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)
 
 ## 🚀 How to Use
 

astro.config.mjs

@@ -31,7 +31,7 @@ const oklchToHex = (str) => {
 
 // https://astro.build/config
 export default defineConfig({
-  site: "https://fuwari.vercel.app/",
+  site: "https://leadership.qubitpi.org/",
   base: "/",
   trailingSlash: "always",
   integrations: [

frontmatter.json

@@ -55,6 +55,11 @@
           "title": "draft",
           "name": "draft",
           "type": "boolean"
+        },
+        {
+            "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-Chomsky': entry.data.font == 'Chomsky',
+    '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 lang="stylus" 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

@@ -8,7 +8,19 @@ 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;
+    }) => {
         return (
             <PostCard
                     entry={entry}
@@ -20,6 +32,7 @@ const interval = 50
                     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/config.ts

@@ -7,16 +7,16 @@ 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: 'Jack\'s Leadership Blog',
+  subtitle: 'Leadership is, at root, about Influencing Others',
+  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-1.png',   // Relative to the /src directory. Relative to the /public directory if it starts with '/'
     position: 'center', // Equivalent to object-position, defaults center
     credit: {
       enable: false,         // Display the credit text of the banner image
@@ -40,33 +40,33 @@ 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: 'Jiaqi Wang',
+  bio: 'Leadership is, at root, about Influencing Others.',
   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',
+      url: 'https://github.com/paion-data',
     },
     {
-      name: 'Steam',
-      icon: 'fa6-brands:steam',
-      url: 'https://store.steampowered.com',
+      name: 'Nexus Graph',
+      icon: 'fa6-brands:ubuntu',
+      url: 'https://nexusgraph.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

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

src/content/posts/declaration-of-independence/index.md

@@ -0,0 +1,48 @@
+---
+title: Infinite Game - Declaration of Independence
+published: 2024-08-04
+description: |
+  A Just Cause means For Something, which should be affirmative and optimistic
+image: './cover.png'
+tags: [ "English" ]
+category: 'Leadership'
+draft: false
+font: USDeclaration
+---
+
+![Error loading declaration-of-independence.png](./declaration-of-independence.png)
+
+:::tip[Source]
+[_The Infinite Game_](https://trello.com/c/cj3d6g2A). New York: Portfolio/Penguin, 2019. ISBN 9780735213500, Chapter 
+2 - What a Just Cause Is - For something -- affirmative and optimistic
+:::
+
+A Just Cause is something we stand for and believe in, not something we oppose. Leaders can rally people _against_
+something quite easily. They can whip them into a frenzy, even. For our emotions can run hot when we are angry or
+afraid. Being _for_ something, in contrast, is about feeling inspired. Being _for_ ignites the human spirit and fills us
+with hope and optimism. Being against is about vilifying, demonizing or rejecting. Being _for_ is about inviting all to
+join in common cause. Being _against_ focuses our attention on the things we can see in order to elicit reactions. Being
+for focuses our attention on the unbuilt future in order to spark our imaginations.
+
+Imagine if instead of fighting _against_ poverty, for example, we fought _for_ the right of every human to provide for
+their own family. The first creates a common enemy, something we are against. It sets up the Cause as if it is
+"winnable," i.e., a finite game. It leads us to believe that we can defeat poverty once and for all. The second gives us
+a cause to advance. The impact of the two perspectives is more than semantics. It affects how we view the problem/vision
+that affects our ideas on how we can contribute. Where the first offers us a problem to solve, the second offers a
+vision of possibility, dignity and empowerment. We are not inspired to "reduce" poverty, we are inspired to "grow" the
+number of people who are able to provide for themselves and their families. Being for or being against is a subtle but
+profound difference that the writers of the Declaration of Independence intuitively understood.
+
+Those who led America toward independence stood _against_ Great Britain in the short term. Indeed the American colonists
+were deeply offended by how they were treated by England. Over 60 percent of the Declaration of Independence is spent
+laying out specific grievances against the king. However, the Cause they were fighting _for_ was the true source of
+lasting inspiration, and in the Declaration of Independence it came before anything else. It is the first idea we read
+in the document. It sets the context for the rest of the Declaration and the direction for moving forward. It is the
+ideal to which we personally relate and that we have easily committed to memory. Few Americans, except for scholars and
+the most zealous of history buffs, can rattle off even one of the complaints listed later in the document, things like:
+"He has endeavored to prevent the Population of these States; for that purpose obstructing the Laws for naturalization
+of foreigners; refusing to pass others to encourage their Migrations hither, and raising the Conditions of new
+Appropriations of Lands." In contrast, most Americans can recite with ease "all men are created equal" and can usually
+rattle off the three tenets of "Life, Liberty and the pursuit of Happiness." These words are indelibly marked on the
+cultural psyche. Invoked by patriots and politicians alike, they remind Americans of who we strive to be and the ideals
+upon which our nation was founded. They tell us what we stand _for_.