feat: astro-font - optimize fonts & prevent CLS
This commit is contained in:
Rishi Raj Jain
parent
b16694debe
commit
65f9d683f1
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Source+Code+Pro&display=swap"
|
||||
rel="stylesheet"
|
||||
<AstroFont
|
||||
config={[
|
||||
{
|
||||
src: [],
|
||||
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 />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue