add noscript on renderer not dev plugin

2 years ago · 20a11d0d2b
parent a4400887fb
commit 20a11d0d2b
3 changed files with 17 additions and 18 deletions
--- a/src/node/build/render.ts
+++ b/src/node/build/render.ts
@ -170,6 +170,7 @@ export async function renderPage(
        : ''
    }
    ${await renderHead(head)}
+    <noscript><style>.js-required{display:none!important}</style></noscript>
  </head>
  <body>${teleports?.body || ''}
    <div id="app">${content}</div>
--- a/src/node/config.ts
+++ b/src/node/config.ts
@ -255,24 +255,23 @@ function resolveSiteDataHead(userConfig?: UserConfig): HeadConfig[] {
        ? userConfig.appearance.initialValue ?? 'auto'
        : 'auto'

-    head.push(
-      [
-        'script',
-        { id: 'check-dark-light' },
-        `;(() => {
-          const preference = localStorage.getItem('${APPEARANCE_KEY}') || '${fallbackPreference}'
-          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-          if (!preference || preference === 'auto' ? prefersDark : preference === 'dark')
-            document.documentElement.classList.add('dark')
-        })()`
-      ],
-      [
-        'script',
-        { id: 'check-mac-os' },
-        `document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))`
-      ]
-    )
+    head.push([
+      'script',
+      { id: 'check-dark-mode' },
+      `;(() => {
+        const preference = localStorage.getItem('${APPEARANCE_KEY}') || '${fallbackPreference}'
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+        if (!preference || preference === 'auto' ? prefersDark : preference === 'dark')
+          document.documentElement.classList.add('dark')
+      })()`
+    ])
  }

+  head.push([
+    'script',
+    { id: 'check-mac-os' },
+    `document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))`
+  ])
+
  return head
 }
--- a/src/node/plugin.ts
+++ b/src/node/plugin.ts
@ -266,7 +266,6 @@ export async function createVitePressPlugin(
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="">
-    <noscript><style>.js-required{display:none!important}</style></noscript>
  </head>
  <body>
    <div id="app"></div>