chore(site): Fix including package styles

HHogg · Oct 5, 2024 · c5d351c · c5d351c
1 parent db46cff
commit c5d351c
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 31 deletions.
diff --git a/workspaces/site/index.html b/workspaces/site/index.html
@@ -28,6 +28,8 @@
     <meta content="en_GB" property="og:locale" />
     <meta content="https://preshape.hogg.io" property="og:url" />
     <meta content="./src/assets/preshape.png" property="og:image" />
+    <!--meta-tags-->
+    <!--media-style-->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

diff --git a/workspaces/site/prerender.js b/workspaces/site/prerender.js
@@ -8,6 +8,7 @@ const toAbsolute = (p) => path.resolve(__dirname, p);
 const template = fs.readFileSync(toAbsolute('dist/client/index.html'), 'utf-8');
 
 const routesToPrerender = [
+  '/',
   '/colors',
   '/themes',
   '/sizings',
@@ -21,11 +22,12 @@ const routesToPrerender = [
   '/components/ButtonAsync',
   '/components/Checkbox',
   '/components/Code',
+  '/components/ConfigMenu',
   '/components/DatePicker',
   '/components/Form',
   '/components/Grid',
   '/components/Input',
-  '/components/Label',
+  '/components/Labels',
   '/components/Link',
   '/components/List',
   '/components/Modal',
@@ -36,20 +38,26 @@ const routesToPrerender = [
   '/components/Table',
   '/components/Tabs',
   '/components/Text',
-  '/components/Textarea',
+  '/components/TextArea',
   '/components/Toggle',
   '/components/Tooltip',
 ];
 
 // pre-render each route...
 for (const url of routesToPrerender) {
-  const appHtml = render(url);
-  const html = template.replace(`<!--app-html-->`, appHtml);
+  const { html: htmlContent, helmetContext, mediaStyle } = render(url);
+  const metaContent = helmetContext.helmet.priority.toString();
+
+  const contents = template
+    .replace(`<!--media-style-->`, `<style>${mediaStyle}</style>`)
+    .replace(`<!--meta-tags-->`, metaContent)
+    .replace(`<!--app-html-->`, htmlContent);
+
   const filePath = toAbsolute(
     `dist/client${url === '/' ? '/index' : url}.html`
   );
   const fileDir = path.dirname(filePath);
 
   fs.mkdirSync(fileDir, { recursive: true });
-  fs.writeFileSync(filePath, html);
+  fs.writeFileSync(filePath, contents);
 }
diff --git a/workspaces/site/src/App.tsx b/workspaces/site/src/App.tsx
@@ -1,17 +1,25 @@
+import { HelmetProvider } from 'react-helmet-async';
 import DesktopApp from './components/App/AppDesktop';
 import MobileApp from './components/App/AppMobile';
 import { Media, MediaContextProvider } from './components/App/Media';
+import 'preshape/dist/style.css';
 
-const App = () => {
+type Props = {
+  helmetContext?: any;
+};
+
+const App = ({ helmetContext = {} }: Props) => {
   return (
-    <MediaContextProvider>
-      <Media greaterThanOrEqual="sm">
-        <DesktopApp />
-      </Media>
-      <Media lessThan="sm">
-        <MobileApp />
-      </Media>
-    </MediaContextProvider>
+    <HelmetProvider context={helmetContext}>
+      <MediaContextProvider>
+        <Media greaterThanOrEqual="sm">
+          <DesktopApp />
+        </Media>
+        <Media lessThan="sm">
+          <MobileApp />
+        </Media>
+      </MediaContextProvider>
+    </HelmetProvider>
   );
 };
 

diff --git a/workspaces/site/src/components/App/AppShell.tsx b/workspaces/site/src/components/App/AppShell.tsx
@@ -1,22 +1,19 @@
 import { Box, ModalManager, ThemeProvider } from 'preshape';
 import { type PropsWithChildren } from 'react';
-import { HelmetProvider } from 'react-helmet-async';
 import Message from './Message';
 import './App.css';
 
 const AppShell = ({ children }: PropsWithChildren) => {
   return (
-    <HelmetProvider>
-      <ThemeProvider>
-        <ModalManager>
-          <Box flex="vertical" grow>
-            <Message />
+    <ThemeProvider>
+      <ModalManager>
+        <Box flex="vertical" grow>
+          <Message />
 
-            {children}
-          </Box>
-        </ModalManager>
-      </ThemeProvider>
-    </HelmetProvider>
+          {children}
+        </Box>
+      </ModalManager>
+    </ThemeProvider>
   );
 };
 

diff --git a/workspaces/site/src/components/App/Media.tsx b/workspaces/site/src/components/App/Media.tsx
@@ -7,6 +7,4 @@ const PreshapeMedia = createMedia({
   },
 });
 
-export const mediaStyles = PreshapeMedia.createMediaStyle();
-
-export const { Media, MediaContextProvider } = PreshapeMedia;
+export const { Media, MediaContextProvider, createMediaStyle } = PreshapeMedia;
diff --git a/workspaces/site/src/entry-server.tsx b/workspaces/site/src/entry-server.tsx
@@ -1,11 +1,17 @@
 import { renderToString } from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom/server';
 import App from './App';
+import { createMediaStyle } from './components/App/Media';
 
 export function SSRRender(url: string | Partial<Location>) {
-  return renderToString(
+  const helmetContext = {};
+  const mediaStyle = createMediaStyle();
+
+  const html = renderToString(
     <StaticRouter location={url}>
-      <App />
+      <App helmetContext={helmetContext} />
     </StaticRouter>
   );
+
+  return { html, helmetContext, mediaStyle };
 }
diff --git a/workspaces/site/vite.config.ts b/workspaces/site/vite.config.ts
@@ -1,5 +1,4 @@
 import react from '@vitejs/plugin-react-swc';
-import { resolve } from 'path';
 import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/