fix: extract meta from custom index.html properly, close #2152

antfu · antfu · commit e92c39ce71c2 · 2025-04-22T14:09:04.000+09:00
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- head -->
 </head>
 <body>
   <div id="app"></div>
diff --git a/packages/slidev/node/setups/indexHtml.ts b/packages/slidev/node/setups/indexHtml.ts
@@ -5,7 +5,7 @@ import { join } from 'node:path'
 import { slash } from '@antfu/utils'
 import { white, yellow } from 'ansis'
 import { escapeHtml } from 'markdown-it/lib/common/utils.mjs'
-import { createHead, transformHtmlTemplate } from 'unhead/server'
+import { createHead, extractUnheadInputFromHtml, transformHtmlTemplate } from 'unhead/server'
 import { version } from '../../package.json'
 import { getSlideTitle } from '../commands/shared'
 import { toAtFS } from '../resolver'
@@ -17,24 +17,25 @@ function toAttrValue(unsafe: unknown) {
 
 export default async function setupIndexHtml({ mode, entry, clientRoot, userRoot, roots, data, base }: Omit<ResolvedSlidevOptions, 'utils'>): Promise<string> {
   let main = readFileSync(join(clientRoot, 'index.html'), 'utf-8')
-  let head = ''
   let body = ''
 
+  const inputs: any[] = []
+
   for (const root of roots) {
     const path = join(root, 'index.html')
     if (!existsSync(path))
       continue
 
-    const index = readFileSync(path, 'utf-8')
+    const html = readFileSync(path, 'utf-8')
 
-    if (root === userRoot && index.includes('<!DOCTYPE')) {
+    if (root === userRoot && html.includes('<!DOCTYPE')) {
       console.error(yellow(`[Slidev] Ignored provided index.html with doctype declaration. (${white(path)})`))
       console.error(yellow('This file may be generated by Slidev, please remove it from your project.'))
       continue
     }
 
-    head += `\n${(index.match(/<head>([\s\S]*?)<\/head>/i)?.[1] || '').trim()}`
-    body += `\n${(index.match(/<body>([\s\S]*?)<\/body>/i)?.[1] || '').trim()}`
+    inputs.push(extractUnheadInputFromHtml(html).input)
+    body += `\n${(html.match(/<body>([\s\S]*?)<\/body>/i)?.[1] || '').trim()}`
   }
 
   if (data.features.tweet) {
@@ -60,12 +61,12 @@ export default async function setupIndexHtml({ mode, entry, clientRoot, userRoot
   const unhead = createHead({
     init: [
       {
-        htmlAttrs: { lang: (data.headmatter.lang as string | undefined) ?? 'en' },
+        htmlAttrs: data.headmatter.lang ? { lang: data.headmatter.lang as string } : undefined,
         title,
         link: [
-          { rel: 'icon', href: data.config.favicon },
+          data.config.favicon ? { rel: 'icon', href: data.config.favicon } : null,
           ...webFontsLink,
-        ],
+        ].filter(x => x),
         meta: [
           { property: 'slidev:version', content: version },
           { charset: 'slidev:entry', content: mode === 'dev' && slash(entry) },
@@ -82,18 +83,18 @@ export default async function setupIndexHtml({ mode, entry, clientRoot, userRoot
           { property: 'twitter:description', content: seoMeta.twitterDescription },
           { property: 'twitter:image', content: seoMeta.twitterImage },
           { property: 'twitter:url', content: seoMeta.twitterUrl },
-        ],
+        ].filter(x => x.content),
       },
+      ...inputs,
     ],
   })
 
   const baseInDev = mode === 'dev' && base ? base.slice(0, -1) : ''
+
   main = main
     .replace('__ENTRY__', baseInDev + toAtFS(join(clientRoot, 'main.ts')))
-    .replace('<!-- head -->', head)
     .replace('<!-- body -->', body)
 
   const html = await transformHtmlTemplate(unhead, main)
-
   return html
 }
