Add font family configuration option in admin panel and apply it site-wide

* Introduce a new font family selection feature in the AdminConfigPage for customizing typography.
* Update the GitHub data generation script to include the selected font family.
* Modify App component to apply the chosen font family dynamically.
* Ensure CSS styles reflect the selected font family across the application.

Author: amide-init

gitforge.config.example.json

@@ -13,6 +13,7 @@
     "eyebrow": "Open-source, developer-first profile",
     "minorInfo": "Brief tagline or quick intro that appears in the hero section."
   },
+  "fontFamily": "system",
   "showVideosSection": true,
   "showBlogsSection": true,
   "showProjectsSection": true,

gitforge.config.json

@@ -19,6 +19,7 @@
       "url": "https://www.linkedin.com/in/aaminu/"
     }
   ],
+  "fontFamily": "comic-sans",
   "showVideosSection": true,
   "showBlogsSection": true,
   "showProjectsSection": true,

scripts/generate-github-data.js

@@ -510,6 +510,7 @@ async function main() {
       count: listedRepoCount,
       sort: listedRepoSort,
     },
+    fontFamily: fileConfig.fontFamily || 'system',
     // Section visibility flags for the client (default true when omitted in config)
     showVideosSection: fileConfig.showVideosSection !== false,
     showBlogsSection: fileConfig.showBlogsSection !== false,

src/App.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom'
 import siteContent from './siteContent.json'
+import { githubConfig } from './generated/githubData'
 
 type Theme = 'dark' | 'light'
 
@@ -37,6 +38,52 @@ function App() {
     window.localStorage.setItem('gitforge-theme', theme)
   }, [theme])
 
+  // Apply font family from generated GitHub config
+  useEffect(() => {
+    const font = (githubConfig as {
+      fontFamily?: 'system' | 'ubuntu' | 'comic-sans' | 'inter' | 'roboto'
+    }).fontFamily || 'system'
+    let value =
+      "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+    if (font === 'ubuntu') {
+      value = "'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+      // Inject Google Fonts stylesheet for Ubuntu if not already present
+      if (!document.getElementById('gf-font-ubuntu')) {
+        const link = document.createElement('link')
+        link.id = 'gf-font-ubuntu'
+        link.rel = 'stylesheet'
+        link.href =
+          'https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap'
+        document.head.appendChild(link)
+      }
+    } else if (font === 'inter') {
+      value =
+        "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+      if (!document.getElementById('gf-font-inter')) {
+        const link = document.createElement('link')
+        link.id = 'gf-font-inter'
+        link.rel = 'stylesheet'
+        link.href =
+          'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'
+        document.head.appendChild(link)
+      }
+    } else if (font === 'roboto') {
+      value =
+        "'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+      if (!document.getElementById('gf-font-roboto')) {
+        const link = document.createElement('link')
+        link.id = 'gf-font-roboto'
+        link.rel = 'stylesheet'
+        link.href =
+          'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'
+        document.head.appendChild(link)
+      }
+    } else if (font === 'comic-sans') {
+      value = "'Comic Sans MS', 'Comic Sans', cursive"
+    }
+    document.documentElement.style.setProperty('--gf-font-family', value)
+  }, [])
+
   // GitHub Pages 404 redirect: ?/path -> /path
   useEffect(() => {
     const q = location.search
@@ -75,7 +122,7 @@ function App() {
   }, [hero.title])
 
   const rootClasses =
-    'min-h-screen font-sans bg-slate-50 text-slate-900 dark:bg-[#050509] dark:text-slate-50'
+    'min-h-screen bg-slate-50 text-slate-900 dark:bg-[#050509] dark:text-slate-50'
   const headerClasses =
     theme === 'dark'
       ? 'sticky top-0 z-20 border-b border-white/5 bg-[#050509]/90 backdrop-blur'

src/admin/pages/AdminConfigPage.tsx

@@ -19,6 +19,7 @@ export function AdminConfigPage() {
   } = useAdminAuthContext()
 
   const {
+    updateConfigField,
     handleFeaturedReposChange,
     updateHero,
     updateCustomLink,
@@ -52,6 +53,39 @@ export function AdminConfigPage() {
         onMinorInfoChange={(v) => updateHero('minorInfo', v)}
       />
 
+      <section className="space-y-3 rounded-xl border border-slate-800 bg-slate-900/40 p-4">
+        <h3 className="text-sm font-semibold text-slate-200">Typography</h3>
+        <p className="text-xs text-slate-400">
+          Choose the primary font used across the portfolio.
+        </p>
+        <div className="mt-2">
+          <label className="block text-[11px] font-medium uppercase tracking-[0.18em] text-slate-500">
+            Font family
+          </label>
+          <select
+            className="mt-1 w-full rounded-md border border-slate-700 bg-slate-950 px-3 py-2 text-sm text-slate-100 focus:border-emerald-500 focus:outline-none"
+            value={config.fontFamily ?? 'system'}
+            onChange={(e) =>
+              updateConfigField(
+                'fontFamily',
+                e.target.value as
+                  | 'system'
+                  | 'ubuntu'
+                  | 'comic-sans'
+                  | 'inter'
+                  | 'roboto',
+              )
+            }
+          >
+            <option value="system">System default</option>
+            <option value="ubuntu">Ubuntu</option>
+            <option value="comic-sans">Comic Sans</option>
+            <option value="inter">Inter</option>
+            <option value="roboto">Roboto</option>
+          </select>
+        </div>
+      </section>
+
       <AdminFeaturedReposForm
         value={config.featuredRepos ?? []}
         onChange={handleFeaturedReposChange}

src/index.css

@@ -5,6 +5,14 @@
 @layer base {
   body {
     @apply min-h-screen bg-slate-50 text-slate-900 antialiased;
+    font-family: var(
+      --gf-font-family,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      sans-serif
+    );
   }
 
   .dark body {

src/types/gitforgeConfig.ts

@@ -31,6 +31,8 @@ export interface GitforgeConfig {
   githubToken?: string | null
   featuredRepos?: string[]
   listedRepo?: ListedRepoConfig
+  /** Global font family for the site (optional, defaults to system). */
+  fontFamily?: 'system' | 'ubuntu' | 'comic-sans' | 'inter' | 'roboto'
   hero?: HeroConfig
   customLinks?: CustomLink[]
   // Section visibility toggles (all default to true when omitted)