Fix broken resources menu via shared chrome

_includes/head.html

@@ -48,20 +48,7 @@
   <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;0,900&display=swap"
-    rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Roboto+Mono&display=swap"
-    rel="stylesheet" />
-  <link href="/gdpr-cookie-notice/dist/style.css" rel="stylesheet" />
-  <link href="/css/docs.css" rel="stylesheet" />
-  <link href="/css/styles.css" rel="stylesheet" />
-  {% unless page.layout == "docs-api" %}
-  <link href="/css/main.css" rel="stylesheet" />
-  {% endunless %}
-  <link href="/css/gdpr.css" rel="stylesheet" />
-  <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
+  {% include shared-chrome/stylesheets.html %}
 
   {% if page.url contains "/data-stack-report-2023/" %}
   <!-- Cooper Font -->
@@ -72,10 +59,6 @@
   <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
   {% endif %}
 
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet"
-    type="text/css" />
-  <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
-
   <link href="/feed.xml" rel="alternate" title="{{ site.title }}" type="application/rss+xml" />
 
   {% if page.markdown_alternate %}
@@ -86,23 +69,11 @@
 
   {% include marketing-vwo.html %}
 
-  <!-- Syntax Highlighting -->
-  <link rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/atelier-sulphurpool-light.min.css"
-    integrity="sha512-qrwjMzcPG1EHhhg9z2nH7VW7hj525RVx0o7GlxQc4ZhWkghp9slpnTjOUu5thnPaRfRqfAUlX7anvAqD9EonfQ=="
-    crossorigin="anonymous" referrerpolicy="no-referrer" />
-  <script src="/js/navigation-header.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-
-  <script src="/js/promo-banner.js"></script>
-
    {% if jekyll.environment == "production" %}
      {% include sentry.html %}
    {% endif %}
 
-  <!-- GDPR -->
-  <script type="text/javascript" src="/gdpr-cookie-notice/dist/script.js"></script>
-  <script type="text/javascript" src="/js/cookie-consent.js"></script>
+  {% include shared-chrome/scripts.html %}
 
   <!-- Start of crisp.chat script -->
   {% if page.url contains "/pricing" or page.url contains "/product" or page.url
@@ -121,14 +92,9 @@
   {% endif %}
   <!-- End of crisp.chat script -->
 
-  <script type="text/javascript" src="/js/add-params-to-anchors.js"></script>
-  <script type="text/javascript" src="/js/pass-referral-params-to-fillout-forms.js"></script>
-
   {% if page.url contains "/learn" or page.url contains "/docs" or page.url contains "/search" or page.url contains
   "/changelog" %}
   <!-- Add Inkeep widget -->
   <script type="module" src="https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5.117/dist/embed.js" crossorigin="anonymous" defer></script>
   {% endif %}
-
-  <script type="text/javascript" src="/js/ai-newsletter-subscribe-form.js" defer></script>
 </head>

_includes/shared-chrome/footer.html

@@ -0,0 +1 @@
+{{ site.data.shared_chrome.footer_html }}

_includes/shared-chrome/header.html

@@ -0,0 +1 @@
+{{ site.data.shared_chrome.header_html }}

_includes/shared-chrome/scripts.html

@@ -0,0 +1,11 @@
+{% for script in site.data.shared_chrome.scripts %}
+  {% assign script_src = script.attributes.src %}
+
+  {% if script_src and script_src contains "sentry-cdn" %}
+    {% continue %}
+  {% endif %}
+
+  {% if script_src %}
+    <{{ script.tag }}{% for attribute in script.attributes %} {{ attribute[0] }}="{{ attribute[1] }}"{% endfor %}></{{ script.tag }}>
+  {% endif %}
+{% endfor %}

_includes/shared-chrome/stylesheets.html

@@ -0,0 +1,3 @@
+{% for stylesheet in site.data.shared_chrome.stylesheets %}
+  <{{ stylesheet.tag }}{% for attribute in stylesheet.attributes %} {{ attribute[0] }}="{{ attribute[1] }}"{% endfor %} />
+{% endfor %}

_layouts/default_new.html

@@ -4,13 +4,13 @@
   {% include head.html %}
 
   <body>
-    {% include navigation-header.html %}
+    {% include shared-chrome/header.html %}
 
     <div>
       {{ content }}
     </div>
 
-    {% include footer.html %}
+    {% include shared-chrome/footer.html %}
   </body>
 
   <script type="text/javascript" src="/js/contentloaded.min.js"></script>

package.json

@@ -39,10 +39,11 @@
     "opengraph-glossary": "node script/_data/bin/opengraph.js --folder _glossary --properties title",
     "opengraph-learn": "node script/_data/bin/opengraph.js --folder _learn --properties title,image,categories",
     "all-opengraphs": "bun run opengraph-community && bun run opengraph-case-studies && bun run opengraph-dashboards && bun run opengraph-data-sources && bun run opengraph-docs && bun run opengraph-glossary && bun run opengraph-learn",
+    "shared-chrome": "node script/_data/bin/shared-chrome.js",
     "jekyll:clean": "rm -f -r _site && rm -f -r .sass-cache && rm -f .jekyll-metadata",
-    "jekyll:start": "bundle exec jekyll serve --config _config.dev.yml --livereload --incremental --port=4321",
+    "jekyll:start": "bun run shared-chrome && bundle exec jekyll serve --config _config.dev.yml --livereload --incremental --port=4321",
     "jekyll:clean-start": "bun run jekyll:clean && bun run jekyll:start",
-    "jekyll:build": "bundle exec jekyll build --config _config.yml",
+    "jekyll:build": "bun run shared-chrome && bundle exec jekyll build --config _config.yml",
     "frontend:dev": "webpack --watch --mode=development --stats-error-details",
     "frontend:build": "webpack --progress --mode=production",
     "cloudflare:remove-heavy-files": "find ./_site -type f -size +25M | xargs rm"

script/_data/bin/shared-chrome.js

@@ -0,0 +1,71 @@
+const { promises: fs } = require("fs");
+const https = require("https");
+const path = require("path");
+
+const chromeUrl =
+  process.env.SHARED_CHROME_URL ||
+  "https://www.metabase.com/shared/chrome.json";
+const outputPath = path.resolve(__dirname, "../../../_data/shared_chrome.json");
+const requiredKeys = ["stylesheets", "scripts", "header_html", "footer_html"];
+
+function get(url) {
+  return new Promise((resolve, reject) => {
+    const request = https.get(url, (response) => {
+      const chunks = [];
+
+      response.on("data", (chunk) => chunks.push(chunk));
+      response.on("error", reject);
+      response.on("end", () => {
+        const { statusCode, statusMessage } = response;
+        const body = Buffer.concat(chunks).toString("utf8");
+
+        if (statusCode < 200 || statusCode >= 300) {
+          reject(
+            new Error(
+              `Failed to fetch shared chrome from ${url}: ${statusCode} ${statusMessage}`,
+            ),
+          );
+          return;
+        }
+
+        resolve(body);
+      });
+    });
+
+    request.on("error", reject);
+  });
+}
+
+async function fetchJson(url) {
+  const body = await get(url);
+  return JSON.parse(body);
+}
+
+function requireSharedChromeKeys(chrome) {
+  const missingKeys = requiredKeys.filter((key) => chrome[key] == null);
+
+  if (missingKeys.length > 0) {
+    throw new Error(
+      `Shared chrome payload is missing required keys: ${missingKeys.join(
+        ", ",
+      )}`,
+    );
+  }
+}
+
+async function writeJson(filePath, data) {
+  await fs.writeFile(filePath, `${JSON.stringify(data, null, 2)}\n`);
+}
+
+async function main() {
+  const chrome = await fetchJson(chromeUrl);
+  requireSharedChromeKeys(chrome);
+
+  await writeJson(outputPath, chrome);
+  console.log(`Wrote ${outputPath}`);
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

script/build

@@ -3,4 +3,5 @@
 #
 # Builds the site
 
+node script/_data/bin/shared-chrome.js
 bundle exec jekyll build