GRO-951-1 Make variable docs content render client-side [version info]

src/components/chrome/Breadcrumb.astro

@@ -0,0 +1,94 @@
+---
+import { baseCtx } from "@/lib/liquid/liquidRenderer";
+
+type Props = {
+  page: {
+    version?: string;
+    url: string;
+    title?: string;
+    category?: string;
+    has_magic_breadcrumbs?: boolean;
+    show_category_breadcrumb?: boolean;
+  };
+};
+
+const { page } = Astro.props;
+const { site } = baseCtx;
+
+const slugify = (str: string) =>
+  str
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+
+const version = page.version === "latest" ? site.docs_version : page.version;
+const latestOrExplicitVersion =
+  site.docs_version === page.version && page.url.includes("/docs/latest/")
+    ? "latest"
+    : (page.version ?? "");
+const categorySlug = slugify(page.category ?? "");
+const categorySlugPart =
+  categorySlug === "troubleshooting-guide"
+    ? "/"
+    : categorySlug === "api"
+      ? "api-documentation"
+      : "/start";
+const breadcrumbDividerStyle = `--bs-breadcrumb-divider: url('/images/chevron_blue_right.svg');`;
+---
+
+<div class="bootstrap">
+  {page.has_magic_breadcrumbs ? (
+    <nav style={breadcrumbDividerStyle} aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+          <a href={`/docs/${latestOrExplicitVersion}/`}>Home</a>
+        </li>
+
+        {page.title === "README" ? (
+          <li class="breadcrumb-item">
+            <p class="neutral-40">{page.category}</p>
+          </li>
+        ) : (
+          page.show_category_breadcrumb && (
+            <li class="breadcrumb-item">
+              <a
+                class="blue-60"
+                href={`/docs/${latestOrExplicitVersion}/${page.category !== "Api" ? categorySlug : ""}${categorySlugPart}`}
+              >
+                {page.category}
+              </a>
+            </li>
+          )
+        )}
+      </ol>
+    </nav>
+  ) : (
+    <nav style={breadcrumbDividerStyle} aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        {page.title === "Search" ? (
+          <li class="breadcrumb-item">
+            <span class="m-0 paragraph-5 neutral-40 fw-bold">
+              <a href="/docs/latest/">{site.latest_version}</a>
+            </span>
+          </li>
+        ) : (
+          <li class="breadcrumb-item">
+            <span class="neutral-40">{version}</span>
+          </li>
+        )}
+
+        {page.category === "Api" && (
+          <li class="breadcrumb-item">
+            <span class="neutral-40">{page.category}</span>
+          </li>
+        )}
+        {page.title !== "README" && (
+          <li class="breadcrumb-item">
+            <span class="neutral-40">{page.title}</span>
+          </li>
+        )}
+      </ol>
+    </nav>
+  )}
+</div>

src/components/chrome/SearchInput.astro

@@ -0,0 +1,3 @@
+<div id="inkeep"></div>
+
+<script is:inline src="/docs/js/inkeep.js" type="module" defer></script>

src/components/chrome/TopBar.astro

@@ -0,0 +1,41 @@
+---
+import Breadcrumb from "@/components/chrome/Breadcrumb.astro";
+import SearchInput from "@/components/chrome/SearchInput.astro";
+import VersionSelector from "@/components/chrome/VersionSelector.astro";
+import Stars from "@/icons/stars.svg";
+
+type Props = {
+  page: {
+    version?: string;
+    latest?: boolean;
+    url: string;
+    title?: string;
+    category?: string;
+    has_magic_breadcrumbs?: boolean;
+    show_category_breadcrumb?: boolean;
+  };
+  showBreadcrumb?: boolean;
+};
+
+const { page, showBreadcrumb } = Astro.props;
+---
+
+<div class="top-bar">
+  <div>
+    {showBreadcrumb && (
+      <div class="learn-breadcrumb-trail">
+        <Breadcrumb page={page} />
+      </div>
+    )}
+  </div>
+
+  <div>
+    <VersionSelector version={page.version} latest={!!page.latest} />
+    <a href="/releases" class="whats-new">
+      <Stars />
+      What’s new
+    </a>
+
+    <SearchInput />
+  </div>
+</div>

src/components/chrome/VersionNotice.astro

@@ -0,0 +1,46 @@
+---
+import { baseCtx } from "@/lib/liquid/liquidRenderer";
+import { renderVersionNotice } from "./utils/versionUtils";
+
+type Props = {
+  version?: string;
+  latest?: boolean;
+};
+
+const { version, latest } = Astro.props;
+const { site } = baseCtx;
+---
+
+<div
+  data-component="version-notice"
+  data-version={version}
+  set:html={renderVersionNotice(
+    version,
+    site.data.version_support,
+    site.docs_version,
+  )}
+/>
+
+{/*
+`latest` is excluded since updating it client-side would just be a no-op (we only warn users when
+they're NOT on the latest version). This targets older pages (e.g. v0.44) that rarely get rebuilt
+but should still show accurate version info.
+*/}
+{!latest && <script>
+  import { fetchVersions, renderVersionNotice } from "./utils/versionUtils";
+
+  const updateVersionNotice = async (el: Element) => {
+    const versions = await fetchVersions();
+    const pageVersion = el.getAttribute("data-version");
+    const { version_support, docs_version } = versions;
+    el.innerHTML = renderVersionNotice(
+      pageVersion,
+      version_support,
+      docs_version,
+    );
+  };
+
+  document
+    .querySelectorAll('[data-component="version-notice"]')
+    .forEach(updateVersionNotice);
+</script>}