diff --git a/components/layout/site-shell.tsx b/components/layout/site-shell.tsx index 14a2bab..05aeb46 100644 --- a/components/layout/site-shell.tsx +++ b/components/layout/site-shell.tsx @@ -1,4 +1,3 @@ -import { GeistMono } from 'geist/font/mono' import { Fraunces, Inter } from 'next/font/google' import type { ReactNode } from 'react' import { InterfaceLanguageProvider } from '@/components/interface-language-provider' @@ -9,6 +8,7 @@ import { LoadingBar } from '@/components/layout/loading-indicator' import { NavigationProgress } from '@/components/layout/navigation-progress' import { SkipLink } from '@/components/layout/skip-link' import { ThemeProvider } from '@/components/theme-provider' +import { geistMono } from '@/lib/fonts/geist-mono' import { getDictionary } from '@/lib/i18n/dictionary' import { htmlLang, type InterfaceLanguage } from '@/lib/i18n/types' import '@/app/globals.css' @@ -38,7 +38,7 @@ export function SiteShell({ return ( diff --git a/e2e/font-mono.spec.ts b/e2e/font-mono.spec.ts new file mode 100644 index 0000000..1a2dc97 --- /dev/null +++ b/e2e/font-mono.spec.ts @@ -0,0 +1,88 @@ +import { expect, test } from '@playwright/test' + +const geistMonoFile = /GeistMono/i + +const postWithInlineCode = '/blog/css-flexbox-guia-pratico' + +function computedFamilyUsesVariable(computed: string, variable: string) { + const normalizedVariable = variable.trim().replaceAll(/['"]/g, '') + const normalizedComputed = computed.trim().replaceAll(/['"]/g, '') + return ( + normalizedVariable.length > 0 && + normalizedComputed.startsWith(normalizedVariable) + ) +} + +test('home HTML and requests omit Geist Mono', async ({ page, request }) => { + const response = await request.get('/') + expect(response.ok()).toBe(true) + const html = await response.text() + + for (const tag of html.match(/]*>/gi) ?? []) { + if (/rel=["']preload["']/.test(tag)) { + expect(tag).not.toMatch(geistMonoFile) + } + } + + const fontRequests: string[] = [] + page.on('request', (fontRequest) => { + if (geistMonoFile.test(fontRequest.url())) { + fontRequests.push(fontRequest.url()) + } + }) + + await page.goto('/') + await page.evaluate(() => document.fonts.ready) + + expect(fontRequests).toEqual([]) +}) + +test('a post with code loads Geist Mono for blocks, labels, and inline code', async ({ + page, +}) => { + const fontRequests: string[] = [] + page.on('request', (fontRequest) => { + if ( + geistMonoFile.test(fontRequest.url()) && + fontRequest.url().includes('.woff2') + ) { + fontRequests.push(fontRequest.url()) + } + }) + + await page.goto(postWithInlineCode) + + const families = await page.evaluate(() => { + const variable = getComputedStyle(document.documentElement) + .getPropertyValue('--font-geist-mono') + .trim() + const pre = document.querySelector('pre.shiki[data-language]') + const inline = document.querySelector('main p code') + if (!pre || !inline) { + return null + } + + return { + variable, + pre: getComputedStyle(pre).fontFamily, + label: getComputedStyle(pre, '::after').fontFamily, + inline: getComputedStyle(inline).fontFamily, + } + }) + + expect(families).not.toBeNull() + if (!families) { + return + } + + expect(computedFamilyUsesVariable(families.pre, families.variable)).toBe(true) + expect(computedFamilyUsesVariable(families.label, families.variable)).toBe( + true, + ) + expect(computedFamilyUsesVariable(families.inline, families.variable)).toBe( + true, + ) + + await page.evaluate(() => document.fonts.ready) + expect(fontRequests.length).toBeGreaterThan(0) +}) diff --git a/lib/fonts/GeistMono-Variable.woff2 b/lib/fonts/GeistMono-Variable.woff2 new file mode 100644 index 0000000..efaf95d Binary files /dev/null and b/lib/fonts/GeistMono-Variable.woff2 differ diff --git a/lib/fonts/OFL.txt b/lib/fonts/OFL.txt new file mode 100644 index 0000000..8d003fe --- /dev/null +++ b/lib/fonts/OFL.txt @@ -0,0 +1,92 @@ +Copyright (c) 2023 Vercel, in collaboration with basement.studio + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION AND CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/lib/fonts/geist-mono.ts b/lib/fonts/geist-mono.ts new file mode 100644 index 0000000..b147567 --- /dev/null +++ b/lib/fonts/geist-mono.ts @@ -0,0 +1,10 @@ +import localFont from 'next/font/local' + +export const geistMono = localFont({ + src: './GeistMono-Variable.woff2', + variable: '--font-geist-mono', + weight: '100 900', + display: 'swap', + preload: false, + adjustFontFallback: false, +}) diff --git a/package.json b/package.json index 0440619..c0a8d21 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "@shikijs/rehype": "^4.4.3", "@shikijs/transformers": "^4.4.3", "@tailwindcss/postcss": "^4.3.3", - "geist": "^1.7.2", "gray-matter": "^4.0.3", "next": "16.3.8", "next-mdx-remote": "^6.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 43b2198..7a2e793 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,9 +17,6 @@ importers: '@tailwindcss/postcss': specifier: ^4.3.3 version: 4.3.3 - geist: - specifier: ^1.7.2 - version: 1.7.2(next@16.3.8(@playwright/test@1.63.0)(@types/node@20.19.43)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)) gray-matter: specifier: ^4.0.3 version: 4.0.3 @@ -1012,11 +1009,6 @@ packages: engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] - geist@1.7.2: - resolution: {integrity: sha512-Gu5lDFa3pLRyoBlBPf0QIFHVdWAnpco7fS1bJm41jyLPFoguBgiubseUN2oLXMgqZ7uxAxDoXcHMhCY/fOTTgg==} - peerDependencies: - next: '>=13.2.0' - graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} @@ -2643,10 +2635,6 @@ snapshots: fsevents@2.3.3: optional: true - geist@1.7.2(next@16.3.8(@playwright/test@1.63.0)(@types/node@20.19.43)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)): - dependencies: - next: 16.3.8(@playwright/test@1.63.0)(@types/node@20.19.43)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - graceful-fs@4.2.11: {} gray-matter@4.0.3: