Merge branch 'master' into fix/font-weight-and-types

rishi-raj-jain · Apr 5, 2024 · 1105144 · 1105144
2 parents 2c50215 + ca7089f
commit 1105144
Show file tree

Hide file tree

Showing 5 changed files with 957 additions and 916 deletions.
diff --git a/packages/astro-font/README.md b/packages/astro-font/README.md
@@ -18,6 +18,43 @@ yarn add astro-font
 pnpm add astro-font
 ```
 
+### With Cloudflare Workers
+
+`astro-font` uses the following node imports:
+
+- `node:path`
+- `node:buffer`
+
+#### Step 1. Enable nodejs_compat
+
+To make sure that it works in Cloudflare Workers, please enable the `node_compatibiliy` flag per the guide https://developers.cloudflare.com/workers/runtime-apis/nodejs/#enable-nodejs-with-workers.
+
+If the above guide fails to work, go to your **Cloudflare project > Settings > Functions > Compatibility flags** and add the flag (as follows).
+
+<img width="1214" alt="Screenshot 2024-03-21 at 7 39 51 AM" src="https://github.com/rishi-raj-jain/astro-font/assets/46300090/3572601b-ec47-4c8e-a9fd-f7cc51b60ff0">
+
+#### Step 2. Opt out of bundling Node.js built-ins
+
+Per [Astro + Cloudflare docs](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#nodejs-compatibility), you'd need to modify the vite configuration to allow for the node:* import syntax:
+
+```diff
+// File: astro.config.mjs
+
+import { defineConfig } from 'astro/config';
+import cloudflare from '@astrojs/cloudflare';
+
+// https://astro.build/config
+export default defineConfig({
+    output: 'server',
+    adapter: cloudflare(),
++    vite: {
++        ssr: {
++            external: ['node:buffer', 'node:path', 'node:fs', 'node:os'],
++        },
++    },
+});
+```
+
 ## Google Fonts
 
 Automatically optimize any Google Font. To use the font in all your pages, add it to `<head>` file in an Astro layout:

diff --git a/packages/astro-font/font.ts b/packages/astro-font/font.ts
@@ -5,16 +5,23 @@ import type { Font } from 'fontkit'
 
 // The font metadata of the fallback fonts, retrieved with fontkit on system font files
 // The average width is calculated with the calcAverageWidth function below
-const DEFAULT_SANS_SERIF_FONT = {
-  name: 'Arial',
-  azAvgWidth: 934.5116279069767,
-  unitsPerEm: 2048,
-}
 
-const DEFAULT_SERIF_FONT = {
-  name: 'Times New Roman',
-  azAvgWidth: 854.3953488372093,
-  unitsPerEm: 2048,
+const fallbackFonts = {
+  serif: {
+    name: 'Times New Roman',
+    azAvgWidth: 854.3953488372093,
+    unitsPerEm: 2048,
+  },
+  monospace: {
+    name: 'Courier New',
+    azAvgWidth: 1145.9929435483877,
+    unitsPerEm: 2048,
+  },
+  'sans-serif': {
+    name: 'Arial',
+    azAvgWidth: 934.5116279069767,
+    unitsPerEm: 2048,
+  },
 }
 
 /**
@@ -69,17 +76,17 @@ function formatOverrideValue(val: number) {
  * https://developer.chrome.com/blog/font-fallbacks/
  * https://docs.google.com/document/d/e/2PACX-1vRsazeNirATC7lIj2aErSHpK26hZ6dA9GsQ069GEbq5fyzXEhXbvByoftSfhG82aJXmrQ_sJCPBqcx_/pub
  */
-export function getFallbackMetricsFromFontFile(font: Font, category = 'serif') {
-  const fallbackFont = category === 'serif' ? DEFAULT_SERIF_FONT : DEFAULT_SANS_SERIF_FONT
+export function getFallbackMetricsFromFontFile(font: Font, category: 'serif' | 'monospace' | 'sans-serif' = 'serif') {
   const azAvgWidth = calcAverageWidth(font)
+  const fallbackFont = fallbackFonts[category]
   const { ascent, descent, lineGap, unitsPerEm } = font
   const fallbackFontAvgWidth = fallbackFont.azAvgWidth / fallbackFont.unitsPerEm
-  let sizeAdjust = azAvgWidth ? azAvgWidth / unitsPerEm / fallbackFontAvgWidth : 1
+  const sizeAdjust = azAvgWidth ? azAvgWidth / unitsPerEm / fallbackFontAvgWidth : 1
   return {
+    fallbackFont: fallbackFont.name,
+    sizeAdjust: formatOverrideValue(sizeAdjust),
     ascentOverride: formatOverrideValue(ascent / (unitsPerEm * sizeAdjust)),
     descentOverride: formatOverrideValue(descent / (unitsPerEm * sizeAdjust)),
     lineGapOverride: formatOverrideValue(lineGap / (unitsPerEm * sizeAdjust)),
-    fallbackFont: fallbackFont.name,
-    sizeAdjust: formatOverrideValue(sizeAdjust),
   }
 }
diff --git a/packages/astro-font/package.json b/packages/astro-font/package.json
@@ -2,7 +2,7 @@
   "license": "MIT",
   "type": "module",
   "private": false,
-  "version": "0.0.76",
+  "version": "0.0.78",
   "name": "astro-font",
   "types": "index.d.ts",
   "exports": {

diff --git a/packages/astro-font/utils.ts b/packages/astro-font/utils.ts
@@ -33,8 +33,7 @@ interface Config {
   fallbackName?: string
   googleFontsURL?: string
   cssVariable?: string | boolean
-  // https://developer.mozilla.org/fr/docs/Web/CSS/font-family
-  fallback: 'serif' | 'sans-serif'
+  fallback: 'serif' | 'sans-serif' | 'monospace'
 }
 
 export interface Props {
@@ -328,7 +327,7 @@ export async function createBaseCSS(fontCollection: Config): Promise<string[]> {
 export async function createFontCSS(fontCollection: Config): Promise<string> {
   const collection = []
   const fallbackFont = await getFallbackFont(fontCollection)
-  const fallbackName = `'${fontCollection.fallbackName || '_font_fallback_' + new Date().getTime()}'`
+  const fallbackName = `'${fontCollection.fallbackName || '_font_fallback_' + Math.floor(Math.random() * Date.now())}'`
   if (fontCollection.selector) {
     collection.push(fontCollection.selector)
     collection.push(`{`)