Merge pull request #17 from rishi-raj-jain/main

feat: astro-font - optimize fonts & prevent CLS

pnpm-lock.yaml

@@ -16,7 +16,7 @@ importers:
         version: 2.27.1
       vitest:
         specifier: ^1.1.0
-        version: 1.2.1
+        version: 1.2.1(@types/node@20.11.6)
       vitest-fetch-mock:
         specifier: ^0.2.2
         version: 0.2.2(vitest@1.2.1)
@@ -31,7 +31,7 @@ importers:
         version: 0.1.3(astro@4.2.4)(typescript@5.3.3)
       astro:
         specifier: ^4.2.4
-        version: 4.2.4(sass@1.70.0)(typescript@5.3.3)
+        version: 4.2.4(@types/node@20.11.6)(typescript@5.3.3)
     devDependencies:
       '@astrojs/check':
         specifier: ^0.4.1
@@ -147,7 +147,7 @@ importers:
         version: link:../packages/astro-ghostcms-theme-default
       astro:
         specifier: ^4.2.4
-        version: 4.2.4(sass@1.70.0)(typescript@5.3.3)
+        version: 4.2.4(@types/node@20.11.6)(typescript@5.3.3)
     devDependencies:
       '@astrojs/check':
         specifier: ^0.4.1
@@ -167,6 +167,9 @@ importers:
       astro:
         specifier: ^4.2.4
         version: 4.2.4(sass@1.70.0)(typescript@5.3.3)
+      astro-font:
+        specifier: ^0.0.77
+        version: 0.0.77
       sass:
         specifier: ^1.69.5
         version: 1.70.0
@@ -1414,7 +1417,7 @@ packages:
       astro: ^4.2.1
     dependencies:
       '@matthiesenxyz/astro-ghostcms': 3.1.4(astro@4.2.4)(typescript@5.3.3)
-      astro: 4.2.4(sass@1.70.0)(typescript@5.3.3)
+      astro: 4.2.4(@types/node@20.11.6)(typescript@5.3.3)
       astro-font: 0.0.77
     transitivePeerDependencies:
       - '@types/node'
@@ -1437,9 +1440,9 @@ packages:
       '@astrojs/sitemap': 3.0.5
       '@matthiesenxyz/astro-ghostcms-theme-default': 0.1.3(astro@4.2.4)(typescript@5.3.3)
       '@ts-ghost/core-api': 5.1.2
-      astro: 4.2.4(sass@1.70.0)(typescript@5.3.3)
+      astro: 4.2.4(@types/node@20.11.6)(typescript@5.3.3)
       astro-robots-txt: 1.0.0
-      vite: 5.0.12(sass@1.70.0)
+      vite: 5.0.12(@types/node@20.11.6)
       vite-tsconfig-paths: 4.3.1(typescript@5.3.3)(vite@5.0.12)
       zod: 3.22.4
       zod-validation-error: 3.0.0(zod@3.22.4)
@@ -7065,27 +7068,6 @@ packages:
       vfile-message: 4.0.2
     dev: false
 
-  /vite-node@1.2.1:
-    resolution: {integrity: sha512-fNzHmQUSOY+y30naohBvSW7pPn/xn3Ib/uqm+5wAJQJiqQsU0NBR78XdRJb04l4bOFKjpTWld0XAfkKlrDbySg==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-    dependencies:
-      cac: 6.7.14
-      debug: 4.3.4
-      pathe: 1.1.2
-      picocolors: 1.0.0
-      vite: 5.0.12(sass@1.70.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /vite-node@1.2.1(@types/node@20.11.6):
     resolution: {integrity: sha512-fNzHmQUSOY+y30naohBvSW7pPn/xn3Ib/uqm+5wAJQJiqQsU0NBR78XdRJb04l4bOFKjpTWld0XAfkKlrDbySg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -7193,6 +7175,7 @@ packages:
       sass: 1.70.0
     optionalDependencies:
       fsevents: 2.3.3
+    dev: false
 
   /vitefu@0.2.5(vite@5.0.12):
     resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
@@ -7212,67 +7195,11 @@ packages:
       vitest: '>=0.16.0'
     dependencies:
       cross-fetch: 3.1.8
-      vitest: 1.2.1
+      vitest: 1.2.1(@types/node@20.11.6)
     transitivePeerDependencies:
       - encoding
     dev: true
 
-  /vitest@1.2.1:
-    resolution: {integrity: sha512-TRph8N8rnSDa5M2wKWJCMnztCZS9cDcgVTQ6tsTFTG/odHJ4l5yNVqvbeDJYJRZ6is3uxaEpFs8LL6QM+YFSdA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': ^1.0.0
-      '@vitest/ui': ^1.0.0
-      happy-dom: '*'
-      jsdom: '*'
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@types/node':
-        optional: true
-      '@vitest/browser':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-    dependencies:
-      '@vitest/expect': 1.2.1
-      '@vitest/runner': 1.2.1
-      '@vitest/snapshot': 1.2.1
-      '@vitest/spy': 1.2.1
-      '@vitest/utils': 1.2.1
-      acorn-walk: 8.3.2
-      cac: 6.7.14
-      chai: 4.4.1
-      debug: 4.3.4
-      execa: 8.0.1
-      local-pkg: 0.5.0
-      magic-string: 0.30.5
-      pathe: 1.1.2
-      picocolors: 1.0.0
-      std-env: 3.7.0
-      strip-literal: 1.3.0
-      tinybench: 2.6.0
-      tinypool: 0.8.2
-      vite: 5.0.12(sass@1.70.0)
-      vite-node: 1.2.1
-      why-is-node-running: 2.2.2
-    transitivePeerDependencies:
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /vitest@1.2.1(@types/node@20.11.6):
     resolution: {integrity: sha512-TRph8N8rnSDa5M2wKWJCMnztCZS9cDcgVTQ6tsTFTG/odHJ4l5yNVqvbeDJYJRZ6is3uxaEpFs8LL6QM+YFSdA==}
     engines: {node: ^18.0.0 || >=20.0.0}

www/package.json

@@ -13,6 +13,7 @@
     "@astrojs/check": "^0.4.1",
     "@astrojs/starlight": "^0.16.0",
     "astro": "^4.2.4",
+    "astro-font": "^0.0.77",
     "sass": "^1.69.5",
     "sharp": "^0.33.2",
     "typescript": "^5.3.3"

www/src/components/BaseHead.astro

@@ -1,4 +1,5 @@
 ---
+import { AstroFont } from 'astro-font';
 import { ViewTransitions } from 'astro:transitions';
 import SEO, { type Props as SEOProps } from './SEO.astro';
 import { SiteTitle, SiteDescription } from '../consts';
@@ -11,11 +12,27 @@ const { title = SiteTitle, name = SiteTitle, description = SiteDescription, ...s
 <SEO {title} {description} {name} {...seo} />
 <link rel="icon" type="image/svg" href={favicon.src} />
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
-<link rel="preconnect" href="https://fonts.googleapis.com" />
+<AstroFont
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  config={[
-<link
+	{
-	href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Source+Code+Pro&display=swap"
+	  src: [],
-	rel="stylesheet"
+	  name: "Lato",
+	  preload: true,
+	  display: "swap",
+	  selector: "body",
+	  fallback: "sans-serif",
+	  googleFontsURL: 'https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap',
+	},
+	{
+	  src: [],
+	  preload: false,
+	  display: "swap",
+	  fallback: "sans-serif",
+	  name: "Source Code Pro",
+	  cssVariable: "font-source-code",
+	  googleFontsURL: 'https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap',
+	},
+  ]}
 />
 
 <ViewTransitions />

www/src/styles/layout.scss

@@ -212,7 +212,7 @@ nav {
 
 .version_number {
 	display: inline-block;
-	font-family: $codeFont;
+	font-family: var(--font-source-code);
 	line-height: 1;
 	margin-bottom: 8px;
 	padding: 4px 12px;
@@ -237,7 +237,7 @@ nav {
 	@media (prefers-color-scheme: dark) {
 		color: color(gray, 200);
 	}
-	font-family: $codeFont;
+	font-family: var(--font-source-code);
 	font-size: $fontSizeSmall;
 }
 

www/src/styles/type.scss

@@ -1,9 +1,6 @@
-$baseFont: 'Lato', sans-serif;
-$codeFont: 'Source Code Pro', monospace;
 $fontSizeSmall: 15px;
 
 body {
-	font-family: $baseFont;
 	font-size: 18px;
 	line-height: 1.65;
 	font-weight: 400;
@@ -51,7 +48,7 @@ p {
 }
 
 code {
-	font-family: $codeFont;
+	font-family: var(--font-source-code);
 	font-weight: bold;
 	color:rgb(0, 114, 114);
 	@media (prefers-color-scheme: dark) {
@@ -80,7 +77,7 @@ code {
 }
 
 .qstart {
-	font-family: $codeFont;
+	font-family: var(--font-source-code);
 	font-weight: bold;
 	margin-top: 4px;
 	color:rgb(165, 0, 115);
@@ -92,7 +89,7 @@ code {
 }
 
 .install {
-	font-family: $codeFont;
+	font-family: var(--font-source-code);
 	font-weight: bold;
 	margin-top: 4px;
 	color:rgb(0, 161, 161);
@@ -109,7 +106,7 @@ code {
 }
 
 .comment {
-	font-family: $codeFont;
+	font-family: var(--font-source-code);
 	font-weight: bold;
 	margin-top: 4px;
 	color:rgb(102, 102, 102);