timlrx
diff --git a/‎components/ClientReload.js‎
Lines changed: 23 additions & 0 deletions b/‎components/ClientReload.js‎
Lines changed: 23 additions & 0 deletions
diff --git a/‎package-lock.json‎
Lines changed: 205 additions & 0 deletions b/‎package-lock.json‎
Lines changed: 205 additions & 0 deletions
diff --git a/‎package.json‎
Lines changed: 3 additions & 1 deletion b/‎package.json‎
Lines changed: 3 additions & 1 deletion
diff --git a/‎pages/_app.js‎
Lines changed: 4 additions & 0 deletions b/‎pages/_app.js‎
Lines changed: 4 additions & 0 deletions
@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+import Router from 'next/router'
+
+/**
+ * Client-side complement to next-remote-watch
+ * Re-triggers getStaticProps when watched mdx files change
+ *
+ */
+export const ClientReload = () => {
+  // Exclude socket.io from prod bundle
+  useEffect(() => {
+    import('socket.io-client').then((module) => {
+      const socket = module.io()
+      socket.on('reload', (data) => {
+        Router.replace(Router.asPath, undefined, {
+          scroll: false,
+        })
+      })
+    })
+  }, [])
+
+  return null
+}
@@ -3,7 +3,7 @@
   "version": "1.1.2",
   "private": true,
   "scripts": {
-    "start": "next-remote-watch ./data",
+    "start": "node ./scripts/next-remote-watch.js ./data",
     "dev": "next dev",
     "build": "next build && node ./scripts/generate-sitemap",
     "serve": "next start",
@@ -56,6 +56,8 @@
     "inquirer": "^8.1.1",
     "lint-staged": "^11.0.0",
     "next-remote-watch": "^1.0.0",
+    "socket.io": "^4.1.3",
+    "socket.io-client": "^4.1.3",
     "prettier": "2.2.1"
   },
   "lint-staged": {
 
@@ -6,13 +6,17 @@ import Head from 'next/head'
 
 import Analytics from '@/components/analytics'
 import LayoutWrapper from '@/components/LayoutWrapper'
+import { ClientReload } from '@/components/ClientReload'
+
+const isDevelopment = process.env.NODE_ENV === 'development'
 
 export default function App({ Component, pageProps }) {
   return (
     <ThemeProvider attribute="class">
       <Head>
         <meta content="width=device-width, initial-scale=1" name="viewport" />
       </Head>
+      {isDevelopment && <ClientReload />}
       <Analytics />
       <LayoutWrapper>
         <Component {...pageProps} />