feat: add new fonts

riccardoperra · Dec 23, 2024 · 887c9ab · 887c9ab
1 parent c4a4c2d
commit 887c9ab
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 14 deletions.
diff --git a/apps/codeimage/changelog/1-8-3_12-23-2024.mdx b/apps/codeimage/changelog/1-8-3_12-23-2024.mdx
diff --git a/apps/codeimage/changelog/1-8-4_12-23-2024.mdx b/apps/codeimage/changelog/1-8-4_12-23-2024.mdx
@@ -0,0 +1,25 @@
+import {mdxComponents} from '../src/mdx/components';
+
+# v1.8.4
+
+<mdxComponents.h3>💬 New fonts</mdxComponents.h3>
+
+This new version of CodeImage introduces new fonts into it's core:
+- [Geist Mono](https://vercel.com/font)
+- [IBM Plex Mono](https://github.com/IBM/plex)
+- [Agave](https://github.com/blobject/agave)
+- [Monaspace](https://monaspace.githubnext.com/) (all versions: Argon, Krypton, Neon, Radon, Xenon)
+
+
+### 🎆 New CSS logo
+
+`.css` extension icon has been updated with the new official [CSS logo](https://github.com/CSS-Next/logo.css)
+
+
+### 🤖 New languages
+
+This new version of CodeImage introduces support for new languages:
+- Visual Basic
+- Pascal
+
+The PHP language has been updated to highlight syntax without `<?` opening tag.
diff --git a/apps/codeimage/src/core/configuration/font.ts b/apps/codeimage/src/core/configuration/font.ts
@@ -54,6 +54,12 @@ export const [SUPPORTED_FONTS, SUPPORTED_FONTS_DICTIONARY] = createCustomFonts([
       {name: 'Bold', weight: 700},
     ],
   },
+  {
+    id: 'agave',
+    name: 'Agave',
+    type: 'web',
+    types: [{name: 'Regular', weight: 400}],
+  },
   {
     id: 'fira-code',
     name: 'Fira Code',
@@ -112,4 +118,17 @@ export const [SUPPORTED_FONTS, SUPPORTED_FONTS_DICTIONARY] = createCustomFonts([
       {name: 'Bold', weight: 700},
     ],
   },
+  ...['Argon', 'Krypton', 'Neon', 'Radon', 'Xenon'].map(
+    font =>
+      ({
+        id: `monaspace-${font}`,
+        name: `Monaspace ${font}`,
+        type: 'web',
+        types: [
+          {name: 'Regular', weight: 400},
+          {name: 'Medium', weight: 500},
+          {name: 'Bold', weight: 700},
+        ],
+      } as const),
+  ),
 ] as const);
diff --git a/apps/codeimage/src/theme/global.css.ts b/apps/codeimage/src/theme/global.css.ts
@@ -68,3 +68,19 @@ globalFontFace('Geist Mono', {
     src: `url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-${font}.ttf) format('truetype')`,
   });
 });
+
+globalFontFace('Agave', {
+  fontDisplay: 'swap',
+  fontWeight: 400,
+  fontStyle: 'normal',
+  src: `url(/assets/fonts/agave/Agave-Regular.ttf) format('truetype')`,
+});
+
+(['Argon', 'Krypton', 'Neon', 'Radon', 'Xenon'] as const).forEach(font => {
+  globalFontFace(`Monaspace ${font}`, {
+    fontDisplay: 'swap',
+    fontWeight: '400 700',
+    fontStyle: 'normal',
+    src: `url(/assets/fonts/monaspace/Monaspace${font}VarVF[wght,wdth,slnt].ttf) format('truetype')`,
+  });
+});