From 65f9d683f1dcc15bbc39665bacad03e6c0259b02 Mon Sep 17 00:00:00 2001 From: Rishi Raj Jain Date: Fri, 26 Jan 2024 18:16:37 +0530 Subject: [PATCH] feat: astro-font - optimize fonts & prevent CLS --- pnpm-lock.yaml | 95 ++++--------------------------- www/package.json | 1 + www/src/components/BaseHead.astro | 27 +++++++-- www/src/styles/layout.scss | 4 +- www/src/styles/type.scss | 11 ++-- 5 files changed, 40 insertions(+), 98 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 678d6d4e..460316a3 100644 --- a/pnpm-lock.yaml +++ b/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} diff --git a/www/package.json b/www/package.json index 43c8993b..f940fd7b 100644 --- a/www/package.json +++ b/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" diff --git a/www/src/components/BaseHead.astro b/www/src/components/BaseHead.astro index 4f9aba05..9cf7f58e 100644 --- a/www/src/components/BaseHead.astro +++ b/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 - - - diff --git a/www/src/styles/layout.scss b/www/src/styles/layout.scss index f36c223a..91921456 100644 --- a/www/src/styles/layout.scss +++ b/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; } diff --git a/www/src/styles/type.scss b/www/src/styles/type.scss index db282c38..d27965bf 100644 --- a/www/src/styles/type.scss +++ b/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);