Support per-post custom font and change global font to Ubuntu

frontmatter.json

@@ -55,6 +55,11 @@
           "title": "draft",
           "name": "draft",
           "type": "boolean"
+        },
+        {
+            "title": "font",
+            "name": "font",
+            "type": "string"
         }
       ]
     }

src/components/PostCard.astro

@@ -19,6 +19,7 @@ interface Props {
     description: string;
     words: number;
     draft: boolean;
+    font: string;
     style: string;
 }
 const { entry, title, url, published, tags, category, image, description, words, style } = Astro.props;

src/components/PostPage.astro

@@ -8,7 +8,7 @@ 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 +20,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/content/config.ts

@@ -9,6 +9,7 @@ const postsCollection = defineCollection({
     image: z.string().optional(),
     tags: z.array(z.string()).optional(),
     category: z.string().optional(),
+    font: z.string().optional(),
   }),
 })
 export const collections = {

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

@@ -6,7 +6,8 @@ description: |
 image: './cover.png'
 tags: [ "Leadership" ]
 category: 'Leadership'
-draft: false 
+draft: false
+font: USDeclaration
 ---
 
 ![Error loading declaration-of-independence.png](./declaration-of-independence.png)

src/pages/posts/[...slug].astro

@@ -97,10 +97,23 @@ const jsonLd = {
                 <ImageWrapper src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
             }
 
+            {entry.data.font == "USDeclaration" &&
+                    <Markdown class="mb-6 markdown-content onload-animation font-USDeclaration">
+                        <Content />
+                    </Markdown>
+            }
+
+            {entry.data.font == "Ubuntu" &&
+                    <Markdown class="mb-6 markdown-content onload-animation font-Ubuntu">
+                        <Content />
+                    </Markdown>
+            }
 
-            <Markdown class="mb-6 markdown-content onload-animation">
-                <Content />
-            </Markdown>
+            {entry.data.font == null &&
+                    <Markdown class="mb-6 markdown-content onload-animation font-Ubuntu">
+                        <Content />
+                    </Markdown>
+            }
 
             {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
 

tailwind.config.cjs

@@ -6,7 +6,9 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["Roboto", "sans-serif", ...defaultTheme.fontFamily.sans],
+        sans: ["Ubuntu", "sans-serif", ...defaultTheme.fontFamily.sans],
+        Ubuntu: ["Ubuntu", "sans-serif", ...defaultTheme.fontFamily.sans],
+        USDeclaration: ["USDeclaration", "sans-serif", ...defaultTheme.fontFamily.sans],
       },
     },
   },