feat: add config for mono font family

wevm · May 10, 2024 · 7a8d54d · 7a8d54d
1 parent 8df8768
commit 7a8d54d
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 10 deletions.
diff --git a/.changeset/curvy-sheep-eat.md b/.changeset/curvy-sheep-eat.md
@@ -0,0 +1,5 @@
+---
+"vocs": patch
+---
+
+Added support to define a font family for inline code & code blocks.
diff --git a/site/pages/docs/api/config.mdx b/site/pages/docs/api/config.mdx
@@ -220,6 +220,24 @@ export default defineConfig({
 })
 ```
 
+You can also define the font family for inline code & code blocks:
+
+```ts twoslash
+import { defineConfig } from 'vocs'
+
+export default defineConfig({
+  font: { 
+    default: { 
+      google: 'Inter', 
+    }, 
+    mono: { // [!code focus]
+      google: 'Dancing Script', // [!code focus]
+    }, // [!code focus]
+  },
+  title: 'Viem'
+})
+```
+
 ### head
 
 - **Type:** `ReactElement | { [path: string]: ReactElement } | ({ path: string }) => ReactElement)`

diff --git a/src/app/layouts/DocsLayout.tsx b/src/app/layouts/DocsLayout.tsx
@@ -43,8 +43,11 @@ export function DocsLayout({
       data-layout={layout}
       style={assignInlineVars({
         [bannerHeight]: showBanner ? banner?.height : undefined,
-        [fontFamilyVars.default]: font?.google
-          ? `${font.google}, ${defaultFontFamily.default}`
+        [fontFamilyVars.default]: font?.default?.google
+          ? `${font.default.google}, ${defaultFontFamily.default}`
+          : undefined,
+        [fontFamilyVars.mono]: font?.mono?.google
+          ? `${font.mono.google}, ${defaultFontFamily.mono}`
           : undefined,
       })}
     >

diff --git a/src/app/root.tsx b/src/app/root.tsx
@@ -108,11 +108,21 @@ function Head({ frontmatter }: { frontmatter: Module['frontmatter'] }) {
       )}
 
       {/* Fonts */}
-      {font?.google && <link rel="preconnect" href="https://fonts.googleapis.com" />}
-      {font?.google && <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />}
-      {font?.google && (
+      {(font?.default?.google || font?.mono?.google) && (
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+      )}
+      {(font?.default?.google || font?.mono?.google) && (
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+      )}
+      {font?.default?.google && (
+        <link
+          href={`https://fonts.googleapis.com/css2?family=${font.default.google}:wght@300;400;500&display=swap`}
+          rel="stylesheet"
+        />
+      )}
+      {font?.mono?.google && (
         <link
-          href={`https://fonts.googleapis.com/css2?family=${font.google}:wght@300;400;500&display=swap`}
+          href={`https://fonts.googleapis.com/css2?family=${font.mono.google}:wght@300;400;500&display=swap`}
           rel="stylesheet"
         />
       )}

diff --git a/src/config.ts b/src/config.ts
@@ -79,7 +79,7 @@ export type Config<
      *
      * @default { google: "Inter" }
      */
-    font?: Font
+    font?: Normalize<Font<parsed>>
     /**
      * Additional tags to include in the `<head>` tag of the page HTML.
      */
@@ -170,7 +170,6 @@ export type ParsedConfig = Config<true>
 
 export async function defineConfig<colorScheme extends ColorScheme = undefined>({
   blogDir = './pages/blog',
-  font,
   head,
   ogImageUrl,
   rootDir = 'docs',
@@ -181,7 +180,6 @@ export async function defineConfig<colorScheme extends ColorScheme = undefined>(
   const basePath = parseBasePath(config.basePath)
   return {
     blogDir,
-    font,
     head,
     ogImageUrl,
     rootDir,
@@ -190,6 +188,7 @@ export async function defineConfig<colorScheme extends ColorScheme = undefined>(
     ...config,
     basePath,
     banner: await parseBanner(config.banner ?? ''),
+    font: parseFont(config.font ?? {}),
     iconUrl: parseImageUrl(config.iconUrl, {
       basePath,
     }),
@@ -263,6 +262,11 @@ async function parseBanner(banner: Banner): Promise<Banner<true> | undefined> {
   }
 }
 
+function parseFont(font: Font): Font<true> {
+  if ('google' in font) return { default: font }
+  return font as Font<true>
+}
+
 function parseImageUrl(
   imageUrl: ImageUrl | undefined,
   { basePath }: { basePath?: string },
@@ -424,10 +428,17 @@ export type EditLink = {
   text?: string
 }
 
-export type Font = {
+type FontSource = Normalize<{
   /** Name of the Google Font to use. */
   google?: string
+}>
+type ParsedFont = {
+  default?: FontSource
+  mono?: FontSource
 }
+export type Font<parsed extends boolean = false> = parsed extends true
+  ? ParsedFont
+  : FontSource | ParsedFont
 
 export type ImageUrl = string | { light: string; dark: string }