chore(website): Updated fonts for latest nextjs build optimizations

mlaursen · Sep 8, 2021 · ca9ecbd · ca9ecbd
1 parent b629e3e
commit ca9ecbd
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 91 deletions.
diff --git a/packages/documentation/src/components/Code/InternalCode.tsx b/packages/documentation/src/components/Code/InternalCode.tsx
diff --git a/packages/documentation/src/components/Code/InternalCodeBlock.tsx b/packages/documentation/src/components/Code/InternalCodeBlock.tsx
diff --git a/packages/documentation/src/components/Code/index.ts b/packages/documentation/src/components/Code/index.ts
@@ -1,2 +1,2 @@
-export { default as Code } from "./InternalCode";
-export { default as CodeBlock } from "./InternalCodeBlock";
+export { default as Code } from "./Code";
+export { default as CodeBlock } from "./CodeBlock";
diff --git a/packages/documentation/src/components/Demos/DemoPage.tsx b/packages/documentation/src/components/Demos/DemoPage.tsx
@@ -1,12 +1,12 @@
 import React, { ReactElement } from "react";
 import cn from "classnames";
 import { defaults } from "lodash";
+import Head from "next/head";
 
 import { toId } from "utils/toTitle";
 
 import Demo from "./Demo";
 import DemoPageHeader from "./DemoPageHeader";
-import DemoPageFont from "./DemoPageFont";
 import { DemoPageConfig, DemoProps, DemoConfig } from "./types";
 
 import styles from "./DemoPage.module.scss";
@@ -47,9 +47,20 @@ export default function DemoPage(props: DemoPageProps): ReactElement {
   } = props;
   return (
     <div id="demo-page-container" className={cn(styles.container, className)}>
-      {fonts.map((font) => (
-        <DemoPageFont font={font} key={font} />
-      ))}
+      <Head>
+        {fonts.map((font) => {
+          let href: string;
+          if (font === "Font Awesome") {
+            href =
+              "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css";
+          } else {
+            const name = font.replace(/\s+/g, "+");
+            href = `https://fonts.googleapis.com/css2?family=${name}&display=swap`;
+          }
+
+          return <link key={font} rel="stylesheet" href={href} />;
+        })}
+      </Head>
       <DemoPageHeader packageName={packageName}>{description}</DemoPageHeader>
       {demos.map((demo, index) => (
         // eslint-disable-next-line react/jsx-key

diff --git a/packages/documentation/src/components/Demos/DemoPageFont.tsx b/packages/documentation/src/components/Demos/DemoPageFont.tsx
diff --git a/packages/documentation/src/components/GoogleFont.tsx b/packages/documentation/src/components/GoogleFont.tsx
diff --git a/packages/documentation/src/components/Markdown/Markdown.tsx b/packages/documentation/src/components/Markdown/Markdown.tsx
@@ -11,8 +11,6 @@ import React, {
 import cn from "classnames";
 import { useRouter } from "next/router";
 
-import GoogleFont from "components/GoogleFont";
-
 import styles from "./Markdown.module.scss";
 import { markdownToHTML } from "./utils";
 
@@ -116,7 +114,6 @@ export default function Markdown({
 
   return (
     <>
-      <GoogleFont font="Source Code Pro" />
       <div
         {...props}
         ref={ref}

diff --git a/packages/documentation/src/pages/_app.tsx b/packages/documentation/src/pages/_app.tsx
@@ -13,7 +13,6 @@ import {
   DEFAULT_TABLET_MIN_WIDTH,
 } from "@react-md/utils";
 import MobileDetect from "mobile-detect";
-import GoogleFont from "components/GoogleFont";
 import Layout from "components/Layout";
 import Theme, { getDefaultTheme, ThemeMode } from "components/Theme";
 import { GA_CODE } from "constants/github";
@@ -168,8 +167,6 @@ export default class App extends NextApp<AppProps> {
 
     return (
       <>
-        <GoogleFont font="Roboto:400,500,700" />
-        <GoogleFont font="Source Code Pro" />
         <Head>
           <meta
             name="viewport"

diff --git a/packages/documentation/src/pages/_document.tsx b/packages/documentation/src/pages/_document.tsx
@@ -42,7 +42,16 @@ export default class MyDocument extends Document<MyDocumentProps> {
     const { theme } = this.props;
     return (
       <Html lang="en" dir="ltr" className={`${theme}-theme`}>
-        <Head />
+        <Head>
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+          />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
+          />
+        </Head>
         <body>
           <Main />
           <script dangerouslySetInnerHTML={{ __html: PRISM_MANUAL_MODE }} />