feat(config): font

wevm · Nov 25, 2023 · 9517f94 · 9517f94
1 parent 0d72edf
commit 9517f94
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/src/app/root.tsx b/src/app/root.tsx
@@ -29,21 +29,29 @@ export function Root({
 function Head({ frontmatter }: { frontmatter: Module['frontmatter'] }) {
   const config = useConfig()
 
-  const { iconUrl } = config
+  const { font, iconUrl } = config
   const { title, description = config.description } = frontmatter || {}
 
   const enableTitleTemplate = config.title && config.title.toLowerCase() !== title?.toLowerCase()
 
   return (
     <>
+      {/* Title */}
       <Helmet
         defaultTitle={config.title}
         titleTemplate={enableTitleTemplate ? config.titleTemplate : undefined}
       >
         {title && <title>{title}</title>}
-        {description && <meta name="description" content={description} />}
       </Helmet>
 
+      {/* Description */}
+      {description && (
+        <Helmet>
+          <meta name="description" content={description} />
+        </Helmet>
+      )}
+
+      {/* Icons */}
       {iconUrl && (
         <>
           {typeof iconUrl === 'string' ? (
@@ -63,6 +71,22 @@ function Head({ frontmatter }: { frontmatter: Module['frontmatter'] }) {
           )}
         </>
       )}
+
+      {/* Fonts */}
+      {font && (
+        <>
+          {font.google && (
+            <Helmet>
+              <link rel="preconnect" href="https://fonts.googleapis.com" />
+              <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+              <link
+                href={`https://fonts.googleapis.com/css2?family=${font.google}:wght@300;400;500&display=swap`}
+                rel="stylesheet"
+              />
+            </Helmet>
+          )}
+        </>
+      )}
     </>
   )
 }

diff --git a/src/config.ts b/src/config.ts
@@ -2,14 +2,20 @@ import type { ReactElement } from 'react'
 
 type RequiredBy<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>
 
-type RequiredProperties = 'root' | 'title' | 'titleTemplate'
+type RequiredProperties = 'font' | 'root' | 'title' | 'titleTemplate'
 
 export type Config<parsed extends boolean = false> = RequiredBy<
   {
     /**
      * General description for the documentation.
      */
     description?: string
+    /**
+     * Base font face.
+     *
+     * @default { google: "Inter" }
+     */
+    font?: Font
     /**
      * Additional tags to include in the `<head>` tag of the page HTML.
      */
@@ -55,13 +61,15 @@ export type Config<parsed extends boolean = false> = RequiredBy<
 export type ParsedConfig = Config<true>
 
 export function defineConfig({
+  font = { google: 'Inter' },
   head,
   root = 'docs',
   title = 'Docs',
   titleTemplate = `%s – ${title}`,
   ...config
 }: Config): ParsedConfig {
   return {
+    font,
     head,
     root,
     title,
@@ -95,6 +103,11 @@ function parseSocials(socials: Socials): ParsedSocials {
 //////////////////////////////////////////////////////
 // Types
 
+export type Font = {
+  /** Name of the Google Font to use. */
+  google?: string
+}
+
 export type IconUrl = string | { light: string; dark: string }
 
 export type LogoUrl = string | { light: string; dark: string }

diff --git a/src/vite/index.html b/src/vite/index.html
@@ -3,9 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
     <script src="../app/utils/initializeTheme.ts"></script>
     <!--head-->
   </head>