Fix: "head" element order

With [capo.js](https://github.com/rviscomi/capo.js) re-order "head" element.
mdn · Dec 27, 2024 · 6eaf37c · 6eaf37c
1 parent d3e355e
commit 6eaf37c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 31 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" href="/favicon-48x48.png" />
     <title>MDN Web Docs</title>
+    <link rel="icon" href="/favicon-48x48.png" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/kumascript/src/live-sample.ts b/kumascript/src/live-sample.ts
@@ -12,6 +12,7 @@ const LIVE_SAMPLE_HTML = `
     <head>
         <meta charset="utf-8">
         <meta name="robots" content="noindex, nofollow">
+        <title><%= sampleTitle %></title>
         <style>
             body {
               padding: 0;
@@ -49,7 +50,6 @@ const LIVE_SAMPLE_HTML = `
             <%- css %>
         </style>
         <% } %>
-        <title><%= sampleTitle %></title>
         <% if (hasMathML) { %>
           <link rel="stylesheet" href="https://fred-wang.github.io/MathFonts/STIX/mathfonts.css" />
           <script src="https://fred-wang.github.io/mathml.css/mspace.js"></script>

diff --git a/ssr/render.tsx b/ssr/render.tsx
@@ -157,15 +157,38 @@ export default function render(
     renderToString(
       <html lang={DEFAULT_LOCALE} prefix="og: https://ogp.me/ns#">
         <head>
-          <meta charSet="utf-8" />
+          <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width,initial-scale=1" />
+          <title>{realPageTitle || "MDN Web Docs"}</title>
 
-          <link rel="icon" href={favicon} />
+          <style
+            media="print"
+            dangerouslySetInnerHTML={{
+              __html: printCSS,
+            }}
+          />
+          {ASSET_MANIFEST.entrypoints.map((url) =>
+            url.endsWith(".css") ? (
+              <link href={`/${url}`} rel="stylesheet" />
+            ) : null
+          )}
+          {WEBFONT_URLS.map((url) => (
+            <link
+              rel="preload"
+              as="font"
+              type="font/woff2"
+              href={url}
+              crossOrigin=""
+            />
+          ))}
+          {GTAG_PATH && <script src={GTAG_PATH} defer />}
+          {ASSET_MANIFEST.entrypoints.map((url) =>
+            url.endsWith(".js") ? <script defer src={`/${url}`} /> : null
+          )}
 
+          <link rel="icon" href={favicon} />
           <link rel="apple-touch-icon" href={appleIcon} />
-
           <meta name="theme-color" content="#ffffff" />
-
           <link rel="manifest" href={manifest} />
 
           <link
@@ -175,17 +198,7 @@ export default function render(
             title="MDN Web Docs"
           />
 
-          <title>{realPageTitle || "MDN Web Docs"}</title>
           {translations}
-          {WEBFONT_URLS.map((url) => (
-            <link
-              rel="preload"
-              as="font"
-              type="font/woff2"
-              href={url}
-              crossOrigin=""
-            />
-          ))}
           <link
             rel="alternate"
             type="application/rss+xml"
@@ -229,21 +242,6 @@ export default function render(
           <meta name="twitter:creator" content="MozDevNet" />
 
           {!pageNotFound && <link rel="canonical" href={canonicalURL} />}
-          <style
-            media="print"
-            dangerouslySetInnerHTML={{
-              __html: printCSS,
-            }}
-          />
-          {GTAG_PATH && <script src={GTAG_PATH} defer />}
-          {ASSET_MANIFEST.entrypoints.map((url) =>
-            url.endsWith(".js") ? <script defer src={`/${url}`} /> : null
-          )}
-          {ASSET_MANIFEST.entrypoints.map((url) =>
-            url.endsWith(".css") ? (
-              <link href={`/${url}`} rel="stylesheet" />
-            ) : null
-          )}
         </head>
 
         <body>