From 63aa495d8b27ddb43e97a7586eb8e5ed7104f2d7 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Fri, 17 Jan 2025 02:50:53 +0000
Subject: [PATCH] refactor: update and theme configuration

---
 astro.config.ts                              |  12 +--
 package.json                                 |   8 +-
 pnpm-lock.yaml                               |  18 +---
 src/components/Head.astro                    |  13 +--
 src/config/index.ts                          |  35 +++---
 src/content/config.ts                        |   8 +-
 src/plugins/rehype-component-admonition.mjs  |  33 ++++++
 src/plugins/rehype-component-admonition.ts   |  43 --------
 src/plugins/rehype-component-github-card.mjs | 105 ++++++++++++++++++
 src/plugins/rehype-component-github-card.ts  | 106 -------------------
 src/plugins/remark-directive-rehype.js       |  30 ++++++
 src/plugins/remark-directive-rehype.ts       |  41 -------
 src/plugins/remark-excerpt.js                |  16 +++
 src/plugins/remark-excerpt.ts                |  12 ---
 src/plugins/remark-reading-time.mjs          |  15 +++
 src/plugins/remark-reading-time.ts           |  14 ---
 src/styles/font.css                          |   0
 src/types/index.d.ts                         |   1 +
 src/utils/content.config.ts                  |  99 ++++++++++-------
 19 files changed, 299 insertions(+), 310 deletions(-)
 create mode 100644 src/plugins/rehype-component-admonition.mjs
 delete mode 100644 src/plugins/rehype-component-admonition.ts
 create mode 100644 src/plugins/rehype-component-github-card.mjs
 delete mode 100644 src/plugins/rehype-component-github-card.ts
 create mode 100644 src/plugins/remark-directive-rehype.js
 delete mode 100644 src/plugins/remark-directive-rehype.ts
 create mode 100644 src/plugins/remark-excerpt.js
 delete mode 100644 src/plugins/remark-excerpt.ts
 create mode 100644 src/plugins/remark-reading-time.mjs
 delete mode 100644 src/plugins/remark-reading-time.ts
 create mode 100644 src/styles/font.css

diff --git a/astro.config.ts b/astro.config.ts
index 2622b3c..551fa7e 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -23,11 +23,11 @@ import remarkSectionize from 'remark-sectionize'
 // Markdown Extensions
 import UnoCSS from 'unocss/astro'
 import { themeConfig } from './src/config'
-import { AdmonitionComponent } from './src/plugins/rehype-component-admonition.ts'
-import { GithubCardComponent } from './src/plugins/rehype-component-github-card.ts'
-import { parseDirectiveNode } from './src/plugins/remark-directive-rehype.ts'
-import { remarkExcerpt } from './src/plugins/remark-excerpt.ts'
-import { remarkReadingTime } from './src/plugins/remark-reading-time.ts'
+import { AdmonitionComponent } from './src/plugins/rehype-component-admonition.mjs'
+import { GithubCardComponent } from './src/plugins/rehype-component-github-card.mjs'
+import { parseDirectiveNode } from './src/plugins/remark-directive-rehype.js'
+import { remarkExcerpt } from './src/plugins/remark-excerpt.js'
+import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs'
 
 const { url }: { url: ThemeConfig['site']['url'] } = themeConfig.site
 
@@ -69,9 +69,9 @@ export default defineConfig({
       remarkMath,
       remarkReadingTime,
       remarkExcerpt,
+      remarkSectionize,
       remarkGithubAdmonitionsToDirectives,
       remarkDirective,
-      remarkSectionize,
       parseDirectiveNode,
     ],
     rehypePlugins: [
diff --git a/package.json b/package.json
index 687d392..1dcbb19 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "astro": "^5.1.6",
     "astro-compress": "^2.3.6",
     "astro-robots-txt": "^1.0.0",
+    "hastscript": "^9.0.0",
     "markdown-it": "^14.1.0",
     "overlayscrollbars": "^2.10.1",
     "photoswipe": "^5.4.4",
@@ -46,23 +47,18 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.14.0",
-    "@types/hast": "^3.0.4",
     "@types/markdown-it": "^14.1.2",
-    "@types/mdast": "^4.0.4",
     "@types/node": "^22.10.6",
     "@types/sanitize-html": "^2.13.0",
-    "@types/unist": "^3.0.3",
     "@unocss/eslint-plugin": "^65.4.0",
     "astro-eslint-parser": "^1.1.0",
     "eslint": "^9.18.0",
     "eslint-plugin-astro": "^1.3.1",
-    "hastscript": "^9.0.0",
     "lint-staged": "^15.3.0",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
     "unocss": "^65.4.0",
-    "unocss-preset-theme": "^0.14.1",
-    "vfile": "^6.0.3"
+    "unocss-preset-theme": "^0.14.1"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx,astro}": "eslint --fix"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4fb925d..f8440fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       astro-robots-txt:
         specifier: ^1.0.0
         version: 1.0.0
+      hastscript:
+        specifier: ^9.0.0
+        version: 9.0.0
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
@@ -99,24 +102,15 @@ importers:
       '@antfu/eslint-config':
         specifier: ^3.14.0
         version: 3.14.0(@typescript-eslint/utils@8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.7.3))(@unocss/eslint-plugin@65.4.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.7.3))(@vue/compiler-sfc@3.5.13)(astro-eslint-parser@1.1.0(typescript@5.7.3))(eslint-plugin-astro@1.3.1(eslint@9.18.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.7.3)
-      '@types/hast':
-        specifier: ^3.0.4
-        version: 3.0.4
       '@types/markdown-it':
         specifier: ^14.1.2
         version: 14.1.2
-      '@types/mdast':
-        specifier: ^4.0.4
-        version: 4.0.4
       '@types/node':
         specifier: ^22.10.6
         version: 22.10.6
       '@types/sanitize-html':
         specifier: ^2.13.0
         version: 2.13.0
-      '@types/unist':
-        specifier: ^3.0.3
-        version: 3.0.3
       '@unocss/eslint-plugin':
         specifier: ^65.4.0
         version: 65.4.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.7.3)
@@ -129,9 +123,6 @@ importers:
       eslint-plugin-astro:
         specifier: ^1.3.1
         version: 1.3.1(eslint@9.18.0(jiti@2.4.2))(typescript@5.7.3)
-      hastscript:
-        specifier: ^9.0.0
-        version: 9.0.0
       lint-staged:
         specifier: ^15.3.0
         version: 15.3.0
@@ -147,9 +138,6 @@ importers:
       unocss-preset-theme:
         specifier: ^0.14.1
         version: 0.14.1(@unocss/core@65.4.0)
-      vfile:
-        specifier: ^6.0.3
-        version: 6.0.3
 
 packages:
 
diff --git a/src/components/Head.astro b/src/components/Head.astro
index 681fc23..0388109 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -9,8 +9,8 @@ interface Props {
 
 const { postTitle, postDescription, postImage } = Astro.props
 const { title, subtitle, description, author, url, favicon } = themeConfig.site
-const { language } = themeConfig.global
 const { light: { backgroundStart: lightMode }, dark: { backgroundStart: darkMode } } = themeConfig.color
+const { language } = themeConfig.global
 const { verification = {}, twitterID = '', facebookID = '', facebookLink = '', googleAnalyticsID = '', umamiAnalyticsID = '', siteScreenshot = '' } = themeConfig.seo ?? {}
 const { google = '', bing = '', yandex = '', baidu = '' } = verification
 const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
@@ -35,11 +35,12 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 
 <!-- Preload -->
 <link rel="preconnect" href={cdn} />
-<link rel="preload" href={`${cdn}gh/radishzzz/astro-theme-retypeset@master/src/style/font.css`} as="style" />
+<link rel="preload" href={`${cdn}/gh/radishzzz/astro-theme-retypeset@master/src/style/font.css`} as="style" />
 {commentURL && <link rel="dns-prefetch" href={commentURL} />}
 {imageHostURL && <link rel="dns-prefetch" href={imageHostURL} />}
 {customGoogleAnalyticsURL && <link rel="dns-prefetch" href={customGoogleAnalyticsURL} />}
 {customUmamiAnalyticsURL && <link rel="dns-prefetch" href={customUmamiAnalyticsURL} />}
+<link rel="stylesheet" href={`${cdn}/gh/radishzzz/astro-theme-retypeset@master/src/style/font.css`} />
 
 <!-- Link -->
 <link rel="author" href={url} />
@@ -89,15 +90,11 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
     <>
       <script
         type="text/partytown"
-        async
-        defer
         crossorigin="anonymous"
         src={`${customGoogleAnalyticsURL || 'https://www.googletagmanager.com'}/gtag/js?id=${googleAnalyticsID}`}
       />
       <script
         type="text/partytown"
-        async
-        defer
         define:vars={{ googleAnalyticsID, customGoogleAnalyticsURL }}
       >
         window.dataLayer = window.dataLayer || []
@@ -107,7 +104,7 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
         gtag('js', new Date())
         if (customGoogleAnalyticsURL) {
           gtag('config', googleAnalyticsID, {
-            transport_url: customGoogleAnalyticsURL.replace(/\/$/, ''),
+            transport_url: customGoogleAnalyticsURL,
           })
         }
         else {
@@ -123,8 +120,6 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
   umamiAnalyticsID && (
     <script
       type="text/partytown"
-      async
-      defer
       crossorigin="anonymous"
       data-website-id={umamiAnalyticsID}
       src={customUmamiAnalyticsJS || 'https://analytics.umami.is/script.js'}
diff --git a/src/config/index.ts b/src/config/index.ts
index 5ada020..fb5a757 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -8,7 +8,7 @@ export const themeConfig: ThemeConfig = {
     description: '一个优美的博客主题',
     author: 'radishzz',
     url: 'https://retypeset.netlify.app',
-    favicon: '#', // only support webp, svg, png
+    favicon: '', // support only webp, svg, png
   },
   // SITE INFORMATION >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 
@@ -40,10 +40,10 @@ export const themeConfig: ThemeConfig = {
   // COMMENT SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   comment: {
     waline: {
-      serverURL: '#',
+      serverURL: '',
       emoji: [
-        '#',
-        '#',
+        '',
+        '',
       ],
       search: true,
       imageUploader: true,
@@ -53,25 +53,25 @@ export const themeConfig: ThemeConfig = {
 
   // SEO SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   seo: {
-    twitterID: '#', // @twitter ID
-    facebookID: '#', // @facebook ID
-    facebookLink: '#', // facebook profile link
+    twitterID: '', // @twitter ID
+    facebookID: '', // @facebook ID
+    facebookLink: '', // facebook profile link
     // site verification
     verification: {
-      google: '#',
-      bing: '#',
-      yandex: '#',
-      baidu: '#',
+      google: '',
+      bing: '',
+      yandex: '',
+      baidu: '',
     },
     // site analytics
-    googleAnalyticsID: '#',
-    umamiAnalyticsID: '#',
+    googleAnalyticsID: '',
+    umamiAnalyticsID: '',
     // follow verification
     follow: {
-      feedID: '#',
-      userID: '#',
+      feedID: '',
+      userID: '',
     },
-    siteScreenshot: '#', // Take a screenshot of website homepage to show on twitter card
+    siteScreenshot: '', // Take a screenshot of website homepage to show on twitter card
   },
   // SEO SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 
@@ -94,13 +94,14 @@ export const themeConfig: ThemeConfig = {
 
   // PRELOAD SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   preload: {
-    cdn: 'https://cdn.jsdelivr.net/', // Recommended to keep default, unless you can proxy https://cdn.jsdelivr.net/gh/radishzzz/astro-theme-retypeset@master/src/style/font.css
+    cdn: 'https://cdn.jsdelivr.net', // Recommended to keep default, unless you can proxy https://cdn.jsdelivr.net/gh/radishzzz/astro-theme-retypeset@master/src/style/font.css
     commentURL: '', // https://comment.example.com/
     imageHostURL: '', // https://image.example.com/
     // If you proxy analytics requests to the custom domain, you can fill in below
     customGoogleAnalyticsURL: '', // https://whatever.example.com/
     customUmamiAnalyticsURL: '', // https://whatever.example.com/
     customUmamiAnalyticsJS: '', // https://whatever.example.com/whatever.js
+    lazyload: false,
   },
   // PRELOAD SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 }
diff --git a/src/content/config.ts b/src/content/config.ts
index 95bddd5..068a506 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -5,12 +5,16 @@ const postsCollection = defineCollection({
     title: z.string(),
     published: z.date(),
     updated: z.date().optional(),
-    draft: z.boolean().optional().default(false),
-    description: z.string().optional().default(''),
     tags: z.array(z.string()).optional().default([]),
+    // For Open Graph
+    description: z.string().optional().default(''),
+    image: z.string().optional().default(''),
+    // Custom Settings
     lang: z.string().optional().default(''),
     slug: z.string().optional().default(''),
+    toc: z.boolean().optional().default(false),
     pin: z.boolean().optional().default(false),
+    draft: z.boolean().optional().default(false),
   }),
 })
 export const collections = {
diff --git a/src/plugins/rehype-component-admonition.mjs b/src/plugins/rehype-component-admonition.mjs
new file mode 100644
index 0000000..a2529ca
--- /dev/null
+++ b/src/plugins/rehype-component-admonition.mjs
@@ -0,0 +1,33 @@
+/// <reference types="mdast" />
+import { h } from 'hastscript'
+
+/**
+ * Creates an admonition component.
+ *
+ * param {object} properties - The properties of the component.
+ * param {string} [properties.title] - An optional title.
+ * param {('tip'|'note'|'important'|'caution'|'warning')} type - The admonition type.
+ * param {import('mdast').RootContent[]} children - The children elements of the component.
+ * returns {import('mdast').Parent} The created admonition component.
+ */
+export function AdmonitionComponent(properties, children, type) {
+  if (!Array.isArray(children) || children.length === 0) {
+    return h(
+      'div',
+      { class: 'hidden' },
+      'Invalid admonition directive. (Admonition directives must be of block type ":::note{name="name"} <content> :::")',
+    )
+  }
+
+  let label = null
+  if (properties && properties['has-directive-label']) {
+    label = children[0] // The first child is the label
+    children = children.slice(1)
+    label.tagName = 'div' // Change the tag <p> to <div>
+  }
+
+  return h(`blockquote`, { class: `admonition bdm-${type}` }, [
+    h('span', { class: `bdm-title` }, label || type.toUpperCase()),
+    ...children,
+  ])
+}
diff --git a/src/plugins/rehype-component-admonition.ts b/src/plugins/rehype-component-admonition.ts
deleted file mode 100644
index 80f3a8d..0000000
--- a/src/plugins/rehype-component-admonition.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { Element, Properties as HastProperties, Node } from 'hast'
-import { h } from 'hastscript'
-
-interface AdmonitionProperties extends HastProperties {
-  'title'?: string
-  'has-directive-label'?: boolean
-}
-
-type AdmonitionType = 'tip' | 'note' | 'important' | 'caution' | 'warning'
-
-const ADMONITION_CLASS_PREFIX = 'bdm-'
-const DEFAULT_ERROR_MESSAGE = 'Invalid admonition directive. (Admonition directives must be of block type ":::note{name="name"} <content> :::")'
-
-export function AdmonitionComponent(
-  properties: AdmonitionProperties,
-  type: AdmonitionType,
-  children: Node[],
-): Element {
-  if (!Array.isArray(children) || children.length === 0) {
-    console.warn('Invalid admonition directive: empty or invalid children')
-    return h('div', { class: 'hidden' }, DEFAULT_ERROR_MESSAGE)
-  }
-
-  let label: Element | string | null = null
-
-  if (properties && properties['has-directive-label']) {
-    const [firstChild, ...restChildren] = children
-    children = restChildren
-
-    if (firstChild && firstChild.type === 'element') {
-      label = firstChild as Element
-      label.tagName = 'div'
-    }
-    else {
-      label = ''
-    }
-  }
-
-  return h('blockquote', { class: `${ADMONITION_CLASS_PREFIX}${type}` }, [
-    h('span', { class: 'bdm-title' }, label || type.toUpperCase()),
-    ...(children as Element[]),
-  ] as Element[])
-}
diff --git a/src/plugins/rehype-component-github-card.mjs b/src/plugins/rehype-component-github-card.mjs
new file mode 100644
index 0000000..5684f30
--- /dev/null
+++ b/src/plugins/rehype-component-github-card.mjs
@@ -0,0 +1,105 @@
+/// <reference types="mdast" />
+import { h } from 'hastscript'
+
+/**
+ * Creates a GitHub Card component.
+ *
+ * param {object} properties - The properties of the component.
+ * param {string} properties.repo - The GitHub repository in the format "owner/repo".
+ * param {import('mdast').RootContent[]} children - The children elements of the component.
+ * returns {import('mdast').Parent} The created GitHub Card component.
+ */
+export function GithubCardComponent(properties, children) {
+  if (Array.isArray(children) && children.length !== 0) {
+    return h('div', { class: 'hidden' }, [
+      'Invalid directive. ("github" directive must be leaf type "::github{repo="owner/repo"}")',
+    ])
+  }
+
+  if (!properties.repo || !properties.repo.includes('/')) {
+    return h(
+      'div',
+      { class: 'hidden' },
+      'Invalid repository. ("repo" attribute must be in the format "owner/repo")',
+    )
+  }
+
+  const repo = properties.repo
+  const cardUuid = `GC${Math.random().toString(36).slice(-6)}` // Collisions are not important
+
+  const nAvatar = h(`div#${cardUuid}-avatar`, { class: 'gc-avatar' })
+  const nLanguage = h(
+    `span#${cardUuid}-language`,
+    { class: 'gc-language' },
+    'Waiting...',
+  )
+
+  const nTitle = h(`div`, { class: 'gc-titlebar' }, [
+    h('div', { class: 'gc-titlebar-left' }, [
+      h('div', { class: 'gc-owner' }, [
+        nAvatar,
+        h('div', { class: 'gc-user' }, repo.split('/')[0]),
+      ]),
+      h('div', { class: 'gc-divider' }, '/'),
+      h('div', { class: 'gc-repo' }, repo.split('/')[1]),
+    ]),
+    h('div', { class: 'github-logo' }),
+  ])
+
+  const nDescription = h(
+    `div#${cardUuid}-description`,
+    { class: 'gc-description' },
+    'Waiting for api.github.com...',
+  )
+
+  const nStars = h(`div#${cardUuid}-stars`, { class: 'gc-stars' }, '00K')
+  const nForks = h(`div#${cardUuid}-forks`, { class: 'gc-forks' }, '0K')
+  const nLicense = h(`div#${cardUuid}-license`, { class: 'gc-license' }, '0K')
+
+  const nScript = h(
+    `script#${cardUuid}-script`,
+    { type: 'text/javascript', defer: true },
+    `
+      fetch('https://api.github.com/repos/${repo}', { referrerPolicy: "no-referrer" }).then(response => response.json()).then(data => {
+        if (data.description) {
+          document.getElementById('${cardUuid}-description').innerText = data.description.replace(/:[a-zA-Z0-9_]+:/g, '');
+        } else {
+          document.getElementById('${cardUuid}-description').innerText = "Description not set"
+        }
+        document.getElementById('${cardUuid}-language').innerText = data.language;
+        document.getElementById('${cardUuid}-forks').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.forks).replaceAll("\u202F", '');
+        document.getElementById('${cardUuid}-stars').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.stargazers_count).replaceAll("\u202F", '');
+        const avatarEl = document.getElementById('${cardUuid}-avatar');
+        avatarEl.style.backgroundImage = 'url(' + data.owner.avatar_url + ')';
+        avatarEl.style.backgroundColor = 'transparent';
+        if (data.license?.spdx_id) {
+          document.getElementById('${cardUuid}-license').innerText = data.license?.spdx_id
+        } else {
+          document.getElementById('${cardUuid}-license').innerText = "no-license"
+        };
+          document.getElementById('${cardUuid}-card').classList.remove("fetch-waiting");
+          console.log("[GITHUB-CARD] Loaded card for ${repo} | ${cardUuid}.")
+      }).catch(err => {
+        const c = document.getElementById('${cardUuid}-card');
+        c.classList.add("fetch-error");
+         console.warn("[GITHUB-CARD] (Error) Loading card for ${repo} | ${cardUuid}.")
+      })
+    `,
+  )
+
+  return h(
+    `a#${cardUuid}-card`,
+    {
+      class: 'card-github fetch-waiting no-styling',
+      href: `https://github.com/${repo}`,
+      target: '_blank',
+      repo,
+    },
+    [
+      nTitle,
+      nDescription,
+      h('div', { class: 'gc-infobar' }, [nStars, nForks, nLicense, nLanguage]),
+      nScript,
+    ],
+  )
+}
diff --git a/src/plugins/rehype-component-github-card.ts b/src/plugins/rehype-component-github-card.ts
deleted file mode 100644
index 32f4c15..0000000
--- a/src/plugins/rehype-component-github-card.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-/// <reference types="mdast" />
-import type { RootContent } from 'mdast'
-import { h } from 'hastscript'
-
-export function GithubCardComponent(
-  properties: { repo: string },
-  children: RootContent[],
-): import('mdast').Parent {
-  if (Array.isArray(children) && children.length !== 0) {
-    return h('div', { class: 'hidden' }, [
-      'Invalid directive. ("github" directive must be leaf type "::github{repo="owner/repo"}")',
-    ]) as unknown as import('mdast').Parent
-  }
-
-  if (!properties.repo || !properties.repo.includes('/')) {
-    return h(
-      'div',
-      { class: 'hidden' },
-      'Invalid repository. ("repo" attributte must be in the format "owner/repo")',
-    ) as unknown as import('mdast').Parent
-  }
-
-  const repo = properties.repo
-  const cardUuid = `GC${Math.random().toString(36).slice(-6)}`
-
-  const nAvatar = h(`div#${cardUuid}-avatar`, { class: 'gc-avatar' })
-  const nLanguage = h(
-    `span#${cardUuid}-language`,
-    { class: 'gc-language' },
-    'Waiting...',
-  )
-
-  const nTitle = h(`div`, { class: 'gc-titlebar' }, [
-    h('div', { class: 'gc-titlebar-left' }, [
-      h('div', { class: 'gc-owner' }, [
-        nAvatar,
-        h('div', { class: 'gc-user' }, repo.split('/')[0]),
-      ]),
-      h('div', { class: 'gc-divider' }, '/'),
-      h('div', { class: 'gc-repo' }, repo.split('/')[1]),
-    ]),
-    h('div', { class: 'github-logo' }),
-  ])
-
-  const nDescription = h(
-    `div#${cardUuid}-description`,
-    { class: 'gc-description' },
-    'Waiting for api.github.com...',
-  )
-
-  const nStars = h(`div#${cardUuid}-stars`, { class: 'gc-stars' }, '00K')
-  const nForks = h(`div#${cardUuid}-forks`, { class: 'gc-forks' }, '0K')
-  const nLicense = h(`div#${cardUuid}-license`, { class: 'gc-license' }, '0K')
-
-  const nScript = h(
-    `script#${cardUuid}-script`,
-    { type: 'text/javascript', defer: true },
-    `
-      fetch('https://api.github.com/repos/${repo}', {
-        referrerPolicy: "no-referrer",
-        headers: {
-          'Accept': 'application/vnd.github.v3+json',
-        },
-        signal: AbortSignal.timeout(5000)
-      }).then(response => {
-        if (!response.ok)
-          throw new Error(\`HTTP error! status: \${response.status}\`)
-        return response.json()
-      }).then(data => {
-        const elements = {
-          description: document.getElementById('${cardUuid}-description'),
-          language: document.getElementById('${cardUuid}-language'),
-          stars: document.getElementById('${cardUuid}-stars'),
-        }
-
-        elements.description.innerText = data.description?.replace(/:[a-zA-Z0-9_]+:/g, '') ?? 'Description not set'
-        elements.language.innerText = data.language
-        elements.stars.innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.stargazers_count).replaceAll("\\u202F", '')
-
-        const avatarEl = document.getElementById('${cardUuid}-avatar')
-        avatarEl.style.backgroundImage = 'url(' + data.owner.avatar_url + ')'
-        avatarEl.style.backgroundColor = 'transparent'
-
-        document.getElementById('${cardUuid}-license').innerText = data.license?.spdx_id ?? 'no-license'
-        document.getElementById('${cardUuid}-card').classList.remove("fetch-waiting")
-        console.log("[GITHUB-CARD] Loaded card for ${repo} | ${cardUuid}.")
-      }).catch(err => {
-        const c = document.getElementById('${cardUuid}-card')
-        c.classList.add("fetch-error")
-        document.getElementById('${cardUuid}-description').innerText = "Failed to load repository data"
-        console.warn("[GITHUB-CARD] (Error) Loading card for ${repo} | ${cardUuid}:", err.message)
-      })
-    `,
-  )
-
-  return h(
-    `a#${cardUuid}-card`,
-    {
-      class: 'card-github fetch-waiting no-styling',
-      href: `https://github.com/${repo}`,
-      target: '_blank',
-      repo,
-    },
-    [nTitle, nDescription, h('div', { class: 'gc-infobar' }, [nStars, nForks, nLicense, nLanguage]), nScript],
-  ) as unknown as import('mdast').Parent
-}
diff --git a/src/plugins/remark-directive-rehype.js b/src/plugins/remark-directive-rehype.js
new file mode 100644
index 0000000..996ed59
--- /dev/null
+++ b/src/plugins/remark-directive-rehype.js
@@ -0,0 +1,30 @@
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+
+export function parseDirectiveNode() {
+  return (tree, _data) => {
+    visit(tree, (node) => {
+      if (
+        node.type === 'containerDirective'
+        || node.type === 'leafDirective'
+        || node.type === 'textDirective'
+      ) {
+        const data = node.data || (node.data = {})
+        node.attributes = node.attributes || {}
+        if (
+          node.children.length > 0
+          && node.children[0].data
+          && node.children[0].data.directiveLabel
+        ) {
+          // Add a flag to the node to indicate that it has a directive label
+          node.attributes['has-directive-label'] = true
+        }
+        const hast = h(node.name, node.attributes)
+
+        data.hName = hast.tagName
+        data.hProperties = hast.properties
+      }
+    })
+  }
+}
diff --git a/src/plugins/remark-directive-rehype.ts b/src/plugins/remark-directive-rehype.ts
deleted file mode 100644
index e4c4aee..0000000
--- a/src/plugins/remark-directive-rehype.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { Node } from 'unist'
-import { h } from 'hastscript'
-import { visit } from 'unist-util-visit'
-
-interface DirectiveNode extends Node {
-  type: 'containerDirective' | 'leafDirective' | 'textDirective'
-  name: string
-  attributes?: Record<string, any>
-  children: Array<{
-    data?: {
-      directiveLabel?: boolean
-    }
-  }>
-  data?: {
-    hName?: string
-    hProperties?: Record<string, any>
-  }
-}
-
-export function parseDirectiveNode() {
-  return (tree: Node) => {
-    visit(tree, (node: unknown) => {
-      const directiveNode = node as DirectiveNode
-      if (
-        directiveNode.type === 'containerDirective'
-        || directiveNode.type === 'leafDirective'
-        || directiveNode.type === 'textDirective'
-      ) {
-        const data = directiveNode.data || (directiveNode.data = {})
-        directiveNode.attributes = directiveNode.attributes || {}
-
-        if (directiveNode.children[0]?.data?.directiveLabel)
-          directiveNode.attributes['has-directive-label'] = true
-
-        const hast = h(directiveNode.name, directiveNode.attributes)
-        data.hName = hast.tagName
-        data.hProperties = hast.properties
-      }
-    })
-  }
-}
diff --git a/src/plugins/remark-excerpt.js b/src/plugins/remark-excerpt.js
new file mode 100644
index 0000000..def0bd3
--- /dev/null
+++ b/src/plugins/remark-excerpt.js
@@ -0,0 +1,16 @@
+import { toString } from 'mdast-util-to-string'
+
+/* Use the post's first paragraph as the excerpt */
+export function remarkExcerpt() {
+  return (tree, { data }) => {
+    let excerpt = ''
+    for (const node of tree.children) {
+      if (node.type !== 'paragraph') {
+        continue
+      }
+      excerpt = toString(node)
+      break
+    }
+    data.astro.frontmatter.excerpt = excerpt
+  }
+}
diff --git a/src/plugins/remark-excerpt.ts b/src/plugins/remark-excerpt.ts
deleted file mode 100644
index ea5fd24..0000000
--- a/src/plugins/remark-excerpt.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { Root } from 'mdast'
-import type { VFile } from 'vfile'
-import { toString } from 'mdast-util-to-string'
-
-export function remarkExcerpt() {
-  return function (tree: Root, file: VFile) {
-    const firstParagraph = tree.children.find(node => node.type === 'paragraph')
-    const excerpt = firstParagraph ? toString(firstParagraph) : ''
-    const frontmatter = (file.data.astro ??= {}).frontmatter ??= {}
-    frontmatter.excerpt = excerpt
-  }
-}
diff --git a/src/plugins/remark-reading-time.mjs b/src/plugins/remark-reading-time.mjs
new file mode 100644
index 0000000..fd171a6
--- /dev/null
+++ b/src/plugins/remark-reading-time.mjs
@@ -0,0 +1,15 @@
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+import { toString } from 'mdast-util-to-string'
+import getReadingTime from 'reading-time'
+
+export function remarkReadingTime() {
+  return (tree, { data }) => {
+    const textOnPage = toString(tree)
+    const readingTime = getReadingTime(textOnPage)
+    data.astro.frontmatter.minutes = Math.max(
+      1,
+      Math.round(readingTime.minutes),
+    )
+    data.astro.frontmatter.words = readingTime.words
+  }
+}
diff --git a/src/plugins/remark-reading-time.ts b/src/plugins/remark-reading-time.ts
deleted file mode 100644
index 1d5434b..0000000
--- a/src/plugins/remark-reading-time.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Root } from 'mdast'
-import type { VFile } from 'vfile'
-import { toString } from 'mdast-util-to-string'
-import getReadingTime from 'reading-time'
-
-export function remarkReadingTime() {
-  return function (tree: Root, file: VFile) {
-    const textOnPage = toString(tree)
-    const readingTime = getReadingTime(textOnPage)
-    const frontmatter = (file.data.astro ??= {}).frontmatter ??= {}
-    frontmatter.minutes = Math.max(1, Math.round(readingTime.minutes))
-    frontmatter.words = readingTime.words
-  }
-}
diff --git a/src/styles/font.css b/src/styles/font.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 7adae3a..2e25cbe 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -80,6 +80,7 @@ export interface ThemeConfig {
     customGoogleAnalyticsURL?: string
     customUmamiAnalyticsURL?: string
     customUmamiAnalyticsJS?: string
+    lazyload: boolean
   }
 }
 
diff --git a/src/utils/content.config.ts b/src/utils/content.config.ts
index 556189c..a40ee7c 100644
--- a/src/utils/content.config.ts
+++ b/src/utils/content.config.ts
@@ -9,7 +9,10 @@ export type PostsGroupByYear = Map<number, Post[]>
 export async function getPosts() {
   const posts = await getCollection(
     'posts',
-    ({ data }: Post) => import.meta.env.DEV || !data.draft,
+    ({ data }: Post) => {
+      const shouldInclude = (import.meta.env.DEV || !data.draft) && !data.pin
+      return shouldInclude
+    },
   )
 
   return posts.sort((a: Post, b: Post) =>
@@ -17,46 +20,19 @@ export async function getPosts() {
   )
 }
 
-// Group posts by tags
-export async function sortPostsByTags() {
-  const posts = await getPosts()
-  const tagMap = new Map<string, Post[]>()
-
-  posts.forEach((post: Post) => {
-    if (post.data.tags && post.data.tags.length > 0) {
-      post.data.tags.forEach((tag: string) => {
-        if (!tagMap.has(tag)) {
-          tagMap.set(tag, [])
-        }
-        tagMap.get(tag)?.push(post)
-      })
-    }
-  })
-
-  return tagMap
-}
-
-// Get posts by specific tag
-export async function getPostsByTag(tag: string) {
-  const posts = await getPosts()
-
-  return posts.filter((post: Post) =>
-    post.data.tags?.includes(tag),
+// Get pinned posts
+export async function getPinnedPosts() {
+  const posts = await getCollection(
+    'posts',
+    ({ data }: Post) => {
+      const shouldInclude = (import.meta.env.DEV || !data.draft) && data.pin
+      return shouldInclude
+    },
   )
-}
 
-// Get all tags list
-export async function getAllTags() {
-  const posts = await getPosts()
-  const tags = new Set<string>()
-
-  posts.forEach((post: Post) => {
-    post.data.tags?.forEach((tag: string) =>
-      tags.add(tag),
-    )
-  })
-
-  return Array.from(tags)
+  return posts.sort((a: Post, b: Post) =>
+    b.data.published.valueOf() - a.data.published.valueOf(),
+  )
 }
 
 // Group posts by year and sort
@@ -89,3 +65,48 @@ export async function getPostsByYear(): Promise<PostsGroupByYear> {
 
   return new Map([...yearMap.entries()].sort((a, b) => b[0] - a[0]))
 }
+
+// Group posts by tags
+export async function sortPostsByTags() {
+  const posts = await getPosts()
+  const tagMap = new Map<string, Post[]>()
+
+  posts.forEach((post: Post) => {
+    if (post.data.tags && post.data.tags.length > 0) {
+      post.data.tags.forEach((tag: string) => {
+        if (!tagMap.has(tag)) {
+          tagMap.set(tag, [])
+        }
+        tagMap.get(tag)?.push(post)
+      })
+    }
+  })
+
+  return tagMap
+}
+
+// Get posts by specific tag
+export async function getPostsByTag(tag: string) {
+  const posts = await getPosts()
+
+  return posts.filter((post: Post) =>
+    post.data.tags?.includes(tag),
+  )
+}
+
+// Get all tags list
+export async function getAllTags() {
+  const posts = await getCollection(
+    'posts',
+    ({ data }: Post) => import.meta.env.DEV || !data.draft,
+  )
+  const tags = new Set<string>()
+
+  posts.forEach((post: Post) => {
+    post.data.tags?.forEach((tag: string) =>
+      tags.add(tag),
+    )
+  })
+
+  return Array.from(tags)
+}