fix: turn off js on homepage

cabljac · cabljac · commit fc512bd414e8 · 2022-11-04T12:45:49.000Z
diff --git a/website/app/root.tsx b/website/app/root.tsx
@@ -7,6 +7,7 @@ import {
   ScrollRestoration,
   useCatch,
   useLoaderData,
+  useMatches,
 } from 'remix';
 import type { LinksFunction } from 'remix';
 import tailwind from './styles/tailwind.css';
@@ -113,7 +114,10 @@ export function CatchBoundary(): JSX.Element {
 
 function Document({ children, title }: { children: React.ReactNode; title?: string }) {
   const location = useLocation();
+  const matches = useMatches();
 
+  // If at least one route wants to hydrate, this will return true
+  const includeScripts = matches.some(match => match.handle?.hydrate);
   return (
     <html lang="en">
       <head>
@@ -139,7 +143,7 @@ function Document({ children, title }: { children: React.ReactNode; title?: stri
         />
         {children}
         {location.pathname !== '/preview' && <ScrollRestoration />}
-        <Scripts />
+        {includeScripts ? <Scripts /> : null}
         {process.env.NODE_ENV === 'development' && <LiveReload />}
       </body>
     </html>
diff --git a/website/app/routes/$owner.$repo.$.tsx b/website/app/routes/$owner.$repo.$.tsx
@@ -19,6 +19,8 @@ import { Head } from '~/components/Head';
 import { getSocialImage } from '~/utils';
 import codeHikeStyles from '@code-hike/mdx/dist/index.css';
 
+export const handle = { hydrate: true };
+
 //@ts-ignore
 export function headers({ loaderHeaders }) {
   return {
diff --git a/website/app/routes/preview.tsx b/website/app/routes/preview.tsx
@@ -10,6 +10,8 @@ import extraStyles from '../styles/extra-styles.css';
 import { LandingPage } from '../components/PreviewLandingPage';
 import Documentation from '~/components/Documentation';
 
+export const handle = { hydrate: true };
+
 export function headers(): Record<string, string> {
   return {
     'docs-page-preview': 'true',
