fix font imports

ocadotechnology · May 4, 2023 · 29ab161 · 29ab161
1 parent 2e0cb7e
commit 29ab161
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 65 deletions.
diff --git a/frontend/djangoBundler.js b/frontend/djangoBundler.js
@@ -23,10 +23,8 @@ const handlebarsTemplatePath = Path.resolve(
 
 const bundler = new Bundler(file, options)
 
-function getReactURL(entryPointHTML) {
-  const regex =
-    /(<script src="\/static\/react\/)(.*\.js)("><\/script>\n?)/g
-  return regex.exec(entryPointHTML)[2]
+function getHashedFileName(indexHtml, fileName, fileType) {
+  return new RegExp(`"/static/react/(${fileName}\\..*\\.${fileType})"`).exec(indexHtml)[1];
 }
 
 Handlebars.registerHelper('if_eq', function (a, b, opts) {
@@ -37,19 +35,33 @@ Handlebars.registerHelper('if_eq', function (a, b, opts) {
   }
 })
 
-function generateHTML(reactFileName) {
+function generateHTML(
+  srcFileName,
+  spaceGroteskFontFileName,
+  interFontFileName
+) {
   const templateString = fs.readFileSync(handlebarsTemplatePath, 'utf-8')
   const template = Handlebars.compile(templateString)
   return template({
-    reactUrl: `react/${reactFileName}`,
+    reactUrl: `react/${srcFileName}`,
+    spaceGroteskFontUrl: `react/${spaceGroteskFontFileName}`,
+    interFontUrl: `react/${interFontFileName}`,
     environment: process.env.SERVER_ENV,
   })
 }
 
 bundler.on('bundled', (bundle) => {
-  const entryPointHTML = fs.readFileSync(bundle.name, 'utf-8')
-  const reactUrl = getReactURL(entryPointHTML)
-  const HTML = generateHTML(reactUrl)
+  const indexHtml = fs.readFileSync(bundle.name, 'utf-8')
+
+  const srcFileName = getHashedFileName(indexHtml, 'src', 'js')
+  const spaceGroteskFileName = getHashedFileName(indexHtml, 'SpaceGrotesk-VariableFont_wght', 'ttf')
+  const interFileName = getHashedFileName(indexHtml, 'Inter-VariableFont_slnt,wght', 'ttf')
+
+  const HTML = generateHTML(
+    srcFileName,
+    spaceGroteskFileName,
+    interFileName
+  )
 
   fs.writeFile(`${templateFolder}/portal.html`, HTML, (error) => {
     if (error) {

diff --git a/...rc/fonts/Inter-VariableFont_slnt,wght.ttf → ...ic/fonts/Inter-VariableFont_slnt,wght.ttf b/...rc/fonts/Inter-VariableFont_slnt,wght.ttf → ...ic/fonts/Inter-VariableFont_slnt,wght.ttf
diff --git a/.../fonts/SpaceGrotesk-VariableFont_wght.ttf → .../fonts/SpaceGrotesk-VariableFont_wght.ttf b/.../fonts/SpaceGrotesk-VariableFont_wght.ttf → .../fonts/SpaceGrotesk-VariableFont_wght.ttf
diff --git a/frontend/public/handlebars_template.html b/frontend/public/handlebars_template.html
@@ -2,11 +2,35 @@
 <!DOCTYPE html>
 
 <head>
-    <title>Portal</title>
-    <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon" />
+  <title>Code for Life</title>
+  <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon" />
+  <style>
+    html,
+    body,
+    div#root {
+      height: 100%;
+      min-height: 100%;
+      max-height: 100%;
+      width: 100%;
+      min-width: 100%;
+      max-width: 100%;
+    }
+
+    @font-face {
+      font-family: "SpaceGrotesk";
+      src: local("SpaceGrotesk"),
+      url("{% static '{{ spaceGroteskFontUrl }}' %}") format("truetype");
+    }
+
+    @font-face {
+      font-family: "Inter";
+      src: local("Inter"),
+      url("{% static '{{ interFontUrl }}' %}") format("truetype");
+    }
+  </style>
 </head>
 
 <body>
-<div id="root"></div>
-<script src="{% static '{{ reactUrl }}' %}"></script>
-</body>
+  <div id="root"></div>
+  <script src="{% static '{{ reactUrl }}' %}"></script>
+</body>
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,18 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <!--
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -21,12 +19,35 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Code for Life</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>Code for Life</title>
+  <style>
+    html,
+    body,
+    div#root {
+      height: 100%;
+      min-height: 100%;
+      max-height: 100%;
+      width: 100%;
+      min-width: 100%;
+      max-width: 100%;
+    }
+
+    @font-face {
+      font-family: "SpaceGrotesk";
+      src: local("SpaceGrotesk"), url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
+    }
+
+    @font-face {
+      font-family: "Inter";
+      src: local("Inter"), url("fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
+    }
+  </style>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -36,6 +57,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script src="../src/index.tsx"></script>
-  </body>
-</html>
+  <script src="../src/index.tsx"></script>
+</body>
+
+</html>
diff --git a/frontend/src/app/App.css b/frontend/src/app/App.css
diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
@@ -5,7 +5,6 @@ import { ThemeProvider } from '@mui/material/styles';
 
 import store from './store';
 import theme from './theme';
-import './App.css';
 
 const App: React.FC<{
   children: React.ReactNode

diff --git a/frontend/src/app/theme.ts b/frontend/src/app/theme.ts
@@ -2,8 +2,6 @@ import { createTheme, ThemeOptions } from '@mui/material/styles';
 
 import { theme as cflTheme } from 'codeforlife';
 
-// import '../fonts/SpaceGrotesk-VariableFont_wght.ttf';
-
 const options: ThemeOptions = {
   typography: {
     h1: {
@@ -53,15 +51,6 @@ const options: ThemeOptions = {
     }
   },
   components: {
-    // TODO: https://mui.com/material-ui/customization/typography/#self-hosted-fonts
-    // MuiCssBaseline: {
-    //   styleOverrides: `
-    //     @font-face {
-    //       font-family: "SpaceGrotesk";
-    //       src: local("SpaceGrotesk"), url("../../../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
-    //     }
-    //   `
-    // }
     MuiButton: {
       defaultProps: {
         variant: 'contained',