feat: improve local file preload for vite and vitepress

cssninjaStudio · Nov 22, 2023 · 10d7067 · 10d7067
1 parent a17831d
commit 10d7067
Show file tree

Hide file tree

Showing 24 changed files with 2,318 additions and 62 deletions.
diff --git a/examples/astro-3/astro.config.mjs b/examples/astro-3/astro.config.mjs
@@ -0,0 +1,41 @@
+import { defineConfig } from 'astro/config'
+import Unfonts from 'unplugin-fonts/astro'
+
+export default defineConfig({
+  integrations: [
+    Unfonts({
+      google: {
+        families: ['Crimson Pro', 'Open Sans', 'Material+Icons'],
+      },
+
+      custom: {
+        display: 'swap',
+        families: {
+          'Dancing Script': {
+            src: './public/assets/fonts/DancingScript*',
+            transform(font) {
+              if (font.basename === 'DancingScript-Bold')
+                font.weight = 700
+
+              return font
+            },
+          },
+        },
+      },
+
+      fontsource: {
+        families: [
+          {
+            name: 'ABeeZee',
+            weights: [400],
+            styles: ['italic'],
+          },
+          {
+            name: 'Truculenta',
+            weights: [400, 700],
+          },
+        ],
+      },
+    }),
+  ],
+})
diff --git a/examples/astro-3/package.json b/examples/astro-3/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "astro-test",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "devDependencies": {
+    "@fontsource/abeezee": "^4.5.10",
+    "@fontsource/truculenta": "^4.5.12",
+    "astro": "^3.5.5",
+    "unplugin-fonts": "workspace:*"
+  }
+}
diff --git a/examples/astro-3/public/assets/fonts/DancingScript-Bold.ttf b/examples/astro-3/public/assets/fonts/DancingScript-Bold.ttf
diff --git a/examples/astro-3/public/assets/fonts/DancingScript-Medium.ttf b/examples/astro-3/public/assets/fonts/DancingScript-Medium.ttf
diff --git a/examples/astro-3/public/assets/fonts/DancingScript-Regular.ttf b/examples/astro-3/public/assets/fonts/DancingScript-Regular.ttf
diff --git a/examples/astro-3/public/assets/fonts/DancingScript-SemiBold.ttf b/examples/astro-3/public/assets/fonts/DancingScript-SemiBold.ttf
diff --git a/examples/astro-3/src/env.d.ts b/examples/astro-3/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
diff --git a/examples/astro-3/src/pages/index.astro b/examples/astro-3/src/pages/index.astro
@@ -0,0 +1,45 @@
+---
+import Unfont from 'unplugin-fonts/astro/component.astro';
+---
+
+<html>
+  <head>
+    <Unfont />
+  </head>
+  <body>
+    <h1>Hello Astro!</h1>
+    <h2>I'm using a local font !</h2>
+    <div class="fontsource-abeezee">I'm a ABeeZee fontsource</div>
+    <div class="fontsource-truculenta">I'm a Truculenta fontsource</div>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
+  </body>
+</html>
+
+<style>
+  body {
+    font-family: "Crimson Pro", Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+  }
+
+  a {
+    font-family: "Open Sans", Avenir, Helvetica, Arial, sans-serif;
+  }
+
+  h2 {
+    font-family: "Dancing Script", sans-serif;
+    font-size: 3rem;
+    font-weight: 600;
+  }
+
+  .fontsource-abeezee { 
+    font-family: "ABeeZee", sans-serif;
+  }
+
+  .fontsource-truculenta { 
+    font-family: "Truculenta", sans-serif;
+  }
+</style>
diff --git a/examples/astro-3/src/pages/subfolder/index.astro b/examples/astro-3/src/pages/subfolder/index.astro
@@ -0,0 +1,45 @@
+---
+import Unfont from 'unplugin-fonts/astro/component.astro';
+---
+
+<html>
+  <head>
+    <Unfont />
+  </head>
+  <body>
+    <h1>Hello Astro!</h1>
+    <h2>I'm using a local font in a subfolder !</h2>
+    <div class="fontsource-abeezee">I'm a ABeeZee fontsource</div>
+    <div class="fontsource-truculenta">I'm a Truculenta fontsource</div>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
+  </body>
+</html>
+
+<style>
+  body {
+    font-family: "Crimson Pro", Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+  }
+
+  a {
+    font-family: "Open Sans", Avenir, Helvetica, Arial, sans-serif;
+  }
+
+  h2 {
+    font-family: "Dancing Script", sans-serif;
+    font-size: 3rem;
+    font-weight: 600;
+  }
+
+  .fontsource-abeezee { 
+    font-family: "ABeeZee", sans-serif;
+  }
+
+  .fontsource-truculenta { 
+    font-family: "Truculenta", sans-serif;
+  }
+</style>
diff --git a/examples/astro-3/tsconfig.json b/examples/astro-3/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    // Enable top-level await, and other modern ESM features.
+    "target": "ESNext",
+    "module": "ESNext",
+    // Enable node-style module resolution, for things like npm package imports.
+    "moduleResolution": "node",
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    // Enable stricter transpilation for better output.
+    "isolatedModules": true,
+    // Astro will directly run your TypeScript code, no transpilation needed.
+    "noEmit": true
+  }
+}
diff --git a/examples/vite-5/assets/fonts/DancingScript-Bold.ttf b/examples/vite-5/assets/fonts/DancingScript-Bold.ttf
diff --git a/examples/vite-5/assets/fonts/DancingScript-Medium.ttf b/examples/vite-5/assets/fonts/DancingScript-Medium.ttf
diff --git a/examples/vite-5/assets/fonts/DancingScript-Regular.ttf b/examples/vite-5/assets/fonts/DancingScript-Regular.ttf
diff --git a/examples/vite-5/assets/fonts/DancingScript-SemiBold.ttf b/examples/vite-5/assets/fonts/DancingScript-SemiBold.ttf
diff --git a/examples/vite-5/index.html b/examples/vite-5/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite App</title>
+</head>
+<body>
+  <h1>Hello Vite!</h1>
+  <h2>I'm using a local font !</h2>
+  <div class="fontsource-abeezee">I'm a ABeeZee fontsource</div>
+  <div class="fontsource-truculenta">I'm a Truculenta fontsource</div>
+  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
+  <script type="module" src="/main.ts"></script>
+</body>
+</html>
diff --git a/examples/vite-5/main.ts b/examples/vite-5/main.ts
@@ -0,0 +1,2 @@
+import 'unfonts.css'
+import './style.css'
diff --git a/examples/vite-5/package.json b/examples/vite-5/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "vite-test",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@fontsource/abeezee": "^4.5.10",
+    "@fontsource/truculenta": "^4.5.12",
+    "unplugin-fonts": "workspace:*",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/examples/vite-5/style.css b/examples/vite-5/style.css
@@ -0,0 +1,27 @@
+body {
+  font-family: "Crimson Pro", Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+a {
+  font-family: "Open Sans", Avenir, Helvetica, Arial, sans-serif;
+}
+
+h2 {
+  font-family: "Dancing Script", sans-serif;
+  font-size: 3rem;
+  font-weight: 600;
+}
+
+
+.fontsource-abeezee { 
+  font-family: "ABeeZee", sans-serif;
+}
+
+.fontsource-truculenta {
+  font-family: "Truculenta", sans-serif;
+}
diff --git a/examples/vite-5/vite.config.ts b/examples/vite-5/vite.config.ts
@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite'
+import Unfonts from '../../src/vite'
+
+export default defineConfig({
+  plugins: [
+    Unfonts({
+      google: {
+        families: ['Crimson Pro', 'Open Sans', 'Material+Icons'],
+      },
+
+      custom: {
+        display: 'swap',
+        families: {
+          'Dancing Script': {
+            src: './assets/fonts/DancingScript*',
+            transform(font) {
+              if (font.basename === 'DancingScript-Bold')
+                font.weight = 700
+
+              return font
+            },
+          },
+        },
+      },
+
+      fontsource: {
+        families: [
+          {
+            name: 'ABeeZee',
+            weights: [400],
+            styles: ['italic'],
+          },
+          {
+            name: 'Truculenta',
+            weights: [400, 700],
+          },
+        ],
+      },
+    }),
+  ],
+})
diff --git a/examples/vitepress/.vitepress/theme/custom.css b/examples/vitepress/.vitepress/theme/custom.css
@@ -2,5 +2,5 @@
 :root {
   /* --vp-font-family-base: "ABeeZee", sans-serif !important; */
   /* --vp-font-family-base: "Crimson Pro", sans-serif !important; */
-  --vp-font-family-base: "Dancing Script", sans-serif !important;
+  --vp-font-family-base: "Truculenta", sans-serif !important;
 }