Site: More improvements (#125)

michaeltaranto · web-flow · commit 8f4f727d4465 · 2021-05-12T13:42:26.000+10:00
diff --git a/site/src/Code/Code.tsx b/site/src/Code/Code.tsx
@@ -121,7 +121,12 @@ export default ({
                 />
               </Box>
               <Text color="secondary" size="xsmall" type="code">
-                {title || resolvedTitle}
+                <Box
+                  component="span"
+                  color={{ lightMode: 'coolGray400', darkMode: 'gray400' }}
+                >
+                  {title || resolvedTitle}
+                </Box>
               </Text>
             </Box>
           ) : null}
diff --git a/site/src/HomePage/HomePage.tsx b/site/src/HomePage/HomePage.tsx
@@ -683,7 +683,9 @@ const Feature = ({
         borderRadius="medium"
       />
       <Stack space="xlarge">
-        <Heading level="4">{title}</Heading>
+        <Heading level="4" component="h2">
+          {title}
+        </Heading>
         <Text size="small" color="secondary">
           {children}
         </Text>
diff --git a/site/src/render.tsx b/site/src/render.tsx
@@ -34,35 +34,38 @@ export default ({ route, publicPath, entrypoints }: RenderParams) => {
     throw new Error('No assets!');
   }
 
-  const cssAssets = assets
-    .filter((asset) => asset.name.endsWith('.css'))
-    .map(
-      (asset) =>
-        `<link rel="stylesheet" href="${assetPath(asset.name)}"></link>`,
-    );
-  const jsAssets = assets
-    .filter((asset) => asset.name.endsWith('.js'))
-    .map((asset) => `<script src="${assetPath(asset.name)}"></script>`);
+  const cssAssets = assets.filter((asset) => asset.name.endsWith('.css'));
+  const jsAssets = assets.filter((asset) => asset.name.endsWith('.js'));
 
   const headTags: HeadTags = [];
   const html = render(route, headTags);
 
   const favicon = (size?: number) =>
     `<link rel="icon" type="image/png" ${
       size ? `sizes="${size}x${size}" ` : ''
-    }href="${assetPath(`favicon${size ? `-${size}x${size}` : ''}.png`)}" />`;
+    }href="${assetPath(`favicon${size ? `-${size}x${size}.png` : '.ico'}`)}">`;
 
   const shareImageUrl = fullyQualifiedUrl(assetPath('og-image.png'));
 
-  return `<html>
+  return `
+  <!DOCTYPE html>
+  <html lang="en">
     <head>
       <script>
       ((d)=>{try{var p=localStorage.getItem('${themeKey}');if(p==d||(p!='${lightMode}'&&matchMedia('(prefers-color-scheme:dark)').matches)) document.documentElement.classList.add(d)}catch(e){}})('${darkMode}')
       </script>
       <link href="https://fonts.googleapis.com/css?family=Shrikhand&display=swap" rel="stylesheet">
       <link href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap" rel="stylesheet">
       <link href="https://www.monolisa.dev/api/fonts/initial" rel="stylesheet">
-      ${cssAssets.join('\n')}
+      ${cssAssets
+        .map(({ name }) => `<link rel="stylesheet" href="${assetPath(name)}">`)
+        .join('\n')}
+      ${jsAssets
+        .map(
+          ({ name }) =>
+            `<link rel="preload" as="script" href="${assetPath(name)}">`,
+        )
+        .join('\n')}
       ${renderToString(<Fragment>{headTags}</Fragment>)}
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta name="theme-color" content="#fff"/>
@@ -84,7 +87,9 @@ export default ({ route, publicPath, entrypoints }: RenderParams) => {
     </head>
     <body>
         <div id="app">${html}</div>
-        ${jsAssets.join('\n')}
+        ${jsAssets
+          .map(({ name }) => `<script async src="${assetPath(name)}"></script>`)
+          .join('\n')}
     </body>
   </html>`;
 };
diff --git a/site/webpack.config.js b/site/webpack.config.js
@@ -92,9 +92,13 @@ module.exports = [
       new CopyPlugin({
         patterns: [{ from: join(__dirname, 'src/assets') }],
       }),
-      new BundleAnalyzerPlugin({
-        openAnalyzer: false,
-      }),
+      ...(process.env.CI !== 'true'
+        ? [
+            new BundleAnalyzerPlugin({
+              openAnalyzer: false,
+            }),
+          ]
+        : []),
     ],
     stats: 'errors-only',
   },
