Improve pre-render

Author: yandeu

scripts/ssr.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 /**
  * Pre Render JavaScript
  */
@@ -36,6 +38,9 @@ const ssr = async url => {
     req.continue()
   })
 
+  await page.evaluateOnNewDocument(() => {
+    window.isPuppeteer = true
+  })
   await page.goto(url, { waitUntil: 'networkidle2' })
 
   // https://github.com/lichtquelle/generate-static-site/blob/main/src/crawl.ts

src/docs.html

@@ -21,12 +21,16 @@
     <script SSROnly src="//cdn.jsdelivr.net/npm/marked@3/lib/marked.min.js"></script>
 
     <script>
-      const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-      const highlightTheme = darkMode ? 'github-dark.min.css' : 'github.min.css'
-      const link = document.createElement('link')
-      link.rel = 'stylesheet'
-      link.href = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/' + highlightTheme
-      document.head.appendChild(link)
+      // we do not want to to be pre-rendered
+      const isPuppeteer = window.isPuppeteer === true
+      if (!isPuppeteer) {
+        const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        const highlightTheme = darkMode ? 'github-dark.min.css' : 'github.min.css'
+        const link = document.createElement('link')
+        link.rel = 'stylesheet'
+        link.href = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/' + highlightTheme
+        document.head.appendChild(link)
+      }
     </script>
     <script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
   </head>