Try browser only

Author: sourishkrout

README.md

@@ -56,12 +56,18 @@ Most changes are reflected live without having to restart the server.
 
 To build the website locally, or to test/preview the build process that will run in CI.
 
-```sh {"id":"01HPS5TSQ025AQBEY5C5R7BQK4","name":"npm-run-build"}
+```sh {"id":"01HPS5TSQ025AQBEY5C5R7BQK4","name":"build"}
 npm run build
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
+### Serve locally
+
+```sh {"id":"01HTMQZMYX58ZX7PK297YNYZ36","name":"serve"}
+cd build; python -m http.server 9000
+```
+
 ### Deployment
 
 This website is auto-deployed via Vercel's GitHub integration, when your branch is merged into main.

src/components/ExamplesPage.tsx

@@ -1,3 +1,4 @@
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import React, { useEffect, useState } from "react";
 import Layout from "@theme/Layout";
 
@@ -15,6 +16,16 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+export default function (props) {
+  return (
+    <BrowserOnly fallback={<div>Loading...</div>}>
+      {() => {
+        return <ExamplesPage {...props} />;
+      }}
+    </BrowserOnly>
+  );
+}
+
 function ExampleLayout({ children }) {
   return (
     <Layout>
@@ -28,7 +39,7 @@ function ExampleLayout({ children }) {
   )
 }
 
-export default function ExamplesPage({ examples, example }) {
+function ExamplesPage({ examples, example }) {
   if (example) {
     return (
       <ExampleLayout>