Merge pull request #44 from Pkcarreno/try-font

Try font

package.json

@@ -20,13 +20,13 @@
     "@astrojs/tailwind": "^5.1.5",
     "@astrojs/ts-plugin": "^1.10.4",
     "@astrojs/vercel": "^8.0.4",
+    "@fontsource/ia-writer-duo": "^5.1.0",
     "@keystatic/astro": "^5.0.4",
     "@keystatic/core": "^0.5.43",
     "@resvg/resvg-js": "^2.6.2",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "astro": "^5.1.10",
-    "astro-font": "^1.0.0",
     "astro-seo": "^0.8.4",
     "clsx": "^2.1.1",
     "markdown-it": "^14.1.0",

src/components/generic/Font.astro

@@ -1,62 +1,24 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import { AstroFont } from 'astro-font'
+import '@fontsource/ia-writer-duo/400.css'
+import '@fontsource/ia-writer-duo/700.css'
+import '@fontsource/ia-writer-duo/400-italic.css'
+import '@fontsource/ia-writer-duo/700-italic.css'
 
-const getFontPath = ({
-  weight,
-  style = 'normal',
-  format = 'woff2'
-}: {
-  weight: '400' | '700'
-  style?: 'normal' | 'italic'
-  format?: 'woff' | 'woff2'
-}) =>
-  `https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-duo@latest/latin-${weight}-${style}.${format}`
-
-type AstroFontConfigSrc = ComponentProps<
-  typeof AstroFont
->['config'][number]['src']
-
-const getFontSources: (
-  weight: '400' | '700',
-  format: 'woff' | 'woff2'
-) => AstroFontConfigSrc = (weight, format) => {
-  return [
-    {
-      style: 'normal',
-      weight,
-      path: getFontPath({
-        weight,
-        format
-      })
-    },
-    {
-      style: 'italic',
-      weight,
-      path: getFontPath({
-        weight,
-        style: 'italic',
-        format
-      })
-    }
-  ]
-}
+import iaWriterDuoWoff from '@fontsource/ia-writer-duo/files/ia-writer-duo-latin-400-normal.woff?url'
+import iaWriterDuoWoff2 from '@fontsource/ia-writer-duo/files/ia-writer-duo-latin-400-normal.woff2?url'
 ---
 
-<AstroFont
-  config={[
-    {
-      name: 'iA Writer Duo',
-      fetch: true,
-      preload: false,
-      src: [
-        ...getFontSources('400', 'woff2'),
-        ...getFontSources('700', 'woff2'),
-        ...getFontSources('400', 'woff'),
-        ...getFontSources('700', 'woff')
-      ],
-      display: 'swap',
-      fallback: 'monospace'
-    }
-  ]}
-/>
+<>
+  <link
+    as="font"
+    type="font/woff"
+    href={iaWriterDuoWoff}
+    crossorigin="anonymous"
+  />
+  <link
+    as="font"
+    type="font/woff2"
+    href={iaWriterDuoWoff2}
+    crossorigin="anonymous"
+  />
+</>

src/components/generic/Link.astro

@@ -5,50 +5,45 @@ import type { LinkProps } from './Link.type.ts'
 
 type Props = LinkProps
 
-const { ...props } = Astro.props
+const { href, class: className, ...props } = Astro.props
 
 const { pathname } = Astro.url
 
-const href =
-  typeof props.href === 'string'
-    ? props.href
-    : props.href
-      ? props.href.toString()
-      : ''
+const dir = typeof href === 'string' ? href : href ? href.toString() : ''
 
-const isExternal = URL.canParse(href)
-const isHash = href.startsWith('#')
-const isMail = href.startsWith('mailto:')
-const isTel = href.startsWith('tel:')
+const isExternal = URL.canParse(dir)
+const isHash = dir.startsWith('#')
+const isMail = dir.startsWith('mailto:')
+const isTel = dir.startsWith('tel:')
 const isInternal = !isExternal && !isHash && !isMail && !isTel
 const isActive =
   isInternal &&
-  (href === pathname ||
-    href === `${pathname}/` ||
-    `${href}/` === pathname ||
-    href === '.' ||
-    href === './')
+  (dir === pathname ||
+    dir === `${pathname}/` ||
+    `${dir}/` === pathname ||
+    dir === '.' ||
+    dir === './')
 
 let contact: string | undefined = undefined
 if (isMail) {
-  contact = href.replace('mailto:', '')
+  contact = dir.replace('mailto:', '')
 } else if (isTel) {
-  contact = href.replace('tel:', '')
+  contact = dir.replace('tel:', '')
 }
 
-let parsedUrl = href
+let parsedUrl = dir
 if (isExternal === false && isHash === false) {
   const basePrefix = import.meta.env.BASE_URL
 
-  parsedUrl = path.isAbsolute(href)
-    ? `${path.join(basePrefix ?? '/', href)}`
-    : href
+  parsedUrl = path.isAbsolute(dir)
+    ? `${path.join(basePrefix ?? '/', dir)}`
+    : dir
 }
 
 let dataContact: string | null = null
 if (contact) {
   parsedUrl = '#'
-  dataContact = btoa(href)
+  dataContact = btoa(dir)
 }
 
 const uniqueId = dataContact
@@ -70,7 +65,7 @@ const uniqueId = dataContact
         'is-tel': isTel,
         'is-active': isActive
       },
-      props.class,
+      className,
       props['class:list']
     ]}
     unique-id={uniqueId}

src/pages/og/default.png.ts

@@ -1,33 +1,16 @@
+import fs from 'node:fs'
+
 import { Resvg, type ResvgRenderOptions } from '@resvg/resvg-js'
 import type { APIRoute } from 'astro'
 import satori from 'satori'
 import { html as toReactElement } from 'satori-html'
 
-const getFontPath = ({
-  weight,
-  style = 'normal',
-  format = 'woff2'
-}: {
-  weight: '400' | '700'
-  style?: 'normal' | 'italic'
-  format?: 'woff' | 'woff2'
-}) =>
-  `https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-duo@latest/latin-${weight}-${style}.${format}`
-
-const fontFileRegular = await fetch(
-  getFontPath({
-    weight: '400',
-    format: 'woff'
-  })
+const fontDataRegular = fs.readFileSync(
+  'node_modules/@fontsource/ia-writer-duo/files/ia-writer-duo-latin-400-normal.woff'
 )
-const fontFileBold = await fetch(
-  getFontPath({
-    weight: '700',
-    format: 'woff'
-  })
+const fontDataBold = fs.readFileSync(
+  'node_modules/@fontsource/ia-writer-duo/files/ia-writer-duo-latin-700-normal.woff'
 )
-const fontDataRegular: ArrayBuffer = await fontFileRegular.arrayBuffer()
-const fontDataBold: ArrayBuffer = await fontFileBold.arrayBuffer()
 
 const height = 630
 const width = 1200

src/pages/og/escritos/[id].png.ts

@@ -1,35 +1,18 @@
+import fs from 'node:fs'
+
 import { Resvg, type ResvgRenderOptions } from '@resvg/resvg-js'
 import type { APIRoute } from 'astro'
 import satori from 'satori'
 import { html as toReactElement } from 'satori-html'
 
 import { getAllEscritos } from '@/data/collections'
 
-const getFontPath = ({
-  weight,
-  style = 'normal',
-  format = 'woff2'
-}: {
-  weight: '400' | '700'
-  style?: 'normal' | 'italic'
-  format?: 'woff' | 'woff2'
-}) =>
-  `https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-duo@latest/latin-${weight}-${style}.${format}`
-
-const fontFileRegular = await fetch(
-  getFontPath({
-    weight: '400',
-    format: 'woff'
-  })
+const fontDataRegular = fs.readFileSync(
+  'node_modules/@fontsource/ia-writer-duo/files/ia-writer-duo-latin-400-normal.woff'
 )
-const fontFileBold = await fetch(
-  getFontPath({
-    weight: '700',
-    format: 'woff'
-  })
+const fontDataBold = fs.readFileSync(
+  'node_modules/@fontsource/ia-writer-duo/files/ia-writer-duo-latin-700-normal.woff'
 )
-const fontDataRegular: ArrayBuffer = await fontFileRegular.arrayBuffer()
-const fontDataBold: ArrayBuffer = await fontFileBold.arrayBuffer()
 
 const height = 630
 const width = 1200

tsconfig.json

@@ -18,4 +18,3 @@
   "exclude": ["node_modules", "dist"],
   "include": [".astro/types.d.ts", "**/*", "src"]
 }
-