feat: dual mode for cdn fonts

Zephyruso · Dec 24, 2024 · ba0fdc7 · ba0fdc7
1 parent 756f99f
commit ba0fdc7
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 78 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -31,12 +31,12 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
       - uses: pnpm/action-setup@v4
- 
+
       - name: Install and Build 🔧
         run: |
           pnpm i
           pnpm run build
- 
+
       - name: Deploy 🚀
         uses: peaceiris/actions-gh-pages@v4
         with:
@@ -51,11 +51,11 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
       - uses: pnpm/action-setup@v4
- 
+
       - name: Install and Build 🔧
         run: |
           pnpm i
-          pnpm run build 
+          pnpm run build
       - name: Zip the dist folder
         run: |
           zip -r dist.zip dist
@@ -66,6 +66,20 @@ jobs:
           files: dist.zip
           tag_name: ${{ needs.release-please.outputs.tag_name }}
 
+      - name: Install and Build cdn-fonts 🔧
+        run: |
+          pnpm i
+          pnpm run build:cdn-fonts
+      - name: Zip the dist-cdn-fonts folder
+        run: |
+          zip -r dist-cdn-fonts.zip dist
+
+      - name: Upload dist-cdn-fonts.zip to GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: dist-cdn-fonts.zip
+          tag_name: ${{ needs.release-please.outputs.tag_name }}
+
   release-image:
     needs: release-please
     runs-on: ubuntu-latest
@@ -99,4 +113,4 @@ jobs:
             ghcr.io/zephyruso/zashboard:latest
             ghcr.io/zephyruso/zashboard:${{ needs.release-please.outputs.tag_name }}
           cache-from: type=gha
-          cache-to: type=gha,mode=max
+          cache-to: type=gha,mode=max
diff --git a/index.html b/index.html
@@ -30,30 +30,6 @@
       name="theme-color"
       content="#FFFFFF"
     />
-    <link
-      rel="stylesheet"
-      media="print"
-      onload="this.media='all'"
-      href="https://unpkg.com/subsetted-fonts@latest/MiSans-VF/MiSans-VF.css"
-    />
-    <link
-      rel="stylesheet"
-      media="print"
-      onload="this.media='all'"
-      href="https://unpkg.com/subsetted-fonts@latest/SarasaUiSC-Regular/SarasaUiSC-Regular.css"
-    />
-    <link
-      rel="stylesheet"
-      media="print"
-      onload="this.media='all'"
-      href="https://unpkg.com/subsetted-fonts@latest/PingFangSC-Regular/PingFangSC-Regular.css"
-    />
-    <link
-      rel="stylesheet"
-      media="print"
-      onload="this.media='all'"
-      href="https://unpkg.com/@fontsource/fira-sans"
-    />
   </head>
   <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -6,9 +6,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
-    "build-only": "vite build",
+    "build": "vite build",
+    "build:cdn-fonts": "vite build --mode cdn-fonts",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --fix",
     "format": "prettier --write src/",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main.ts b/src/main.ts
@@ -6,6 +6,30 @@ import App from './App.vue'
 import './assets/main.css'
 import { i18n } from './i18n'
 import router from './router'
+
+if (import.meta.env.MODE === 'cdn-fonts') {
+  const createLink = (href: string) => {
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = href
+    link.media = 'print'
+    link.onload = () => {
+      link.media = 'all'
+    }
+    document.head.appendChild(link)
+  }
+
+  createLink('https://unpkg.com/subsetted-fonts@latest/MiSans-VF/MiSans-VF.css')
+  createLink('https://unpkg.com/subsetted-fonts@latest/SarasaUiSC-Regular/SarasaUiSC-Regular.css')
+  createLink('https://unpkg.com/subsetted-fonts@latest/PingFangSC-Regular/PingFangSC-Regular.css')
+  createLink('https://unpkg.com/@fontsource/fira-sans')
+} else {
+  import('@fontsource/fira-sans/index.css')
+  import('subsetted-fonts/MiSans-VF/MiSans-VF.css')
+  import('subsetted-fonts/SarasaUiSC-Regular/SarasaUiSC-Regular.css')
+  import('subsetted-fonts/PingFangSC-Regular/PingFangSC-Regular.css')
+}
+
 const app = createApp(App)
 
 dayjs.extend(relativeTime)