Compact mobile chrome for the docs pages

.stylelintrc

@@ -3,6 +3,7 @@
   "plugins": ["stylelint-order"],
   "rules": {
     "alpha-value-notation": "number",
+    "length-zero-no-unit": [true, { "ignore": ["custom-properties"] }],
     "color-function-notation": "legacy",
     "color-no-invalid-hex": true,
     "max-line-length": [

public/docs/css/inkeep.css

@@ -108,16 +108,21 @@ div.ikp-d_flex.ikp-flex_row.ikp-items_center.ikp-pt_3.ikp-pb_1:has(.ikp-search-b
   padding-bottom: 30px;
 }
 
-@media screen and (max-width: 992px) {
-  .ikp-search-bar-trigger__text {
+@media (max-width: 991.98px) {
+  .ikp-search-bar__text,
+  .ikp-search-bar__kbd-wrapper {
     display: none;
   }
 
-  .ikp-search-bar-trigger__icon {
-    margin-right: 0;
+  .ikp-search-bar__button {
+    background: none;
+    border: 0;
+    justify-content: center;
+    padding: 0;
   }
 
-  kbd.ikp-search-bar__kbd-wrapper {
-    display: none;
+  .ikp-search-bar__icon {
+    color: #5a6072;
+    font-size: 18px;
   }
 }

public/docs/js/position-feedback-widget.js

@@ -36,7 +36,7 @@ function resizeLearnRightSidebar() {
   const bottomOfHeader = Math.max(0, header.getBoundingClientRect().bottom);
 
   const bottomOfTopBar = document
-    .querySelector(".top-bar")
+    .getElementById("top-bar")
     .getBoundingClientRect().bottom;
 
   $subNavigationContent.style.height = `calc(100vh - ${Math.max(

src/components/InkeepSearch/InkeepSearch.astro

@@ -57,3 +57,14 @@ import { TOP_BAR_ID } from "@/constants";
     },
   });
 </script>
+
+<style>
+  @media (max-width: 991.98px) {
+    #inkeep {
+      background: none;
+      flex: none;
+      min-width: 0;
+      width: 34px;
+    }
+  }
+</style>

src/components/chrome/Breadcrumb.astro

@@ -1,74 +1,135 @@
 ---
 import { getCategoryUrl } from "@/lib/docs/nav";
-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;
   };
+  variant: "top-bar" | "inline";
 };
 
-const { page } = Astro.props;
-const { site } = baseCtx;
+type Crumb = { label: string; href?: string };
 
-const latestOrExplicitVersion =
-  site.docs_version === page.version && page.url.includes("/docs/latest/")
-    ? "latest"
-    : (page.version ?? "");
+const { page, variant } = Astro.props;
 
-const getFallbackCategoryUrl = (version: string, url: string) => {
-  // page.url is /docs/<version>/<category-slug>/...
-  const categorySlug = url.split("/")[3] ?? "";
-  const legacyMapping: Record<string, string> = {
-    api: "api-documentation",
-    "troubleshooting-guide": "troubleshooting-guide/",
-  };
-  const fallbackCategoryPath =
-    legacyMapping[categorySlug] ?? `${categorySlug}/start`;
-  return `/docs/${version}/${fallbackCategoryPath}`;
+// page.url is /docs/<version>/<category-slug>/...
+const getFallbackCategoryPath = (url: string) => {
+  const slug = url.split("/")[3] ?? "";
+  if (slug === "api") return "api-documentation";
+  if (slug === "troubleshooting-guide") return `${slug}/`;
+  return `${slug}/start`;
 };
 
-const categoryUrl =
-  getCategoryUrl(latestOrExplicitVersion, page.category ?? "") ??
-  getFallbackCategoryUrl(latestOrExplicitVersion, page.url);
+const getCrumbs = (page: Props["page"]): Crumb[] => {
+  if (!page.has_magic_breadcrumbs) return [{ label: page.title ?? "" }];
+
+  const version = page.url.split("/")[2];
+  const root = `/docs/${version}/`;
+  const crumbs: Crumb[] = [{ label: "Home", href: root }];
+  if (page.show_category_breadcrumb && page.category) {
+    crumbs.push({
+      label: page.category,
+      href:
+        getCategoryUrl(version, page.category) ??
+        root + getFallbackCategoryPath(page.url),
+    });
+  }
+  return crumbs;
+};
 ---
 
-<div class="bootstrap">
-  <nav
-    style="--bs-breadcrumb-divider: url('/images/chevron_blue_right.svg')"
-    aria-label="breadcrumb"
-  >
-    <ol class="breadcrumb">
-      {page.has_magic_breadcrumbs ? (
-        <>
-          <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={categoryUrl}>
-                  {page.category}
-                </a>
-              </li>
-            )
-          )}
-        </>
-      ) : (
-        <li class="breadcrumb-item">
-          <span class="neutral-40">{page.title}</span>
-        </li>
-      )}
-    </ol>
-  </nav>
-</div>
+<nav class:list={["trail", variant]} aria-label="breadcrumb">
+  <ol>
+    {getCrumbs(page).map(({ label, href }) => (
+      <li>{href ? <a href={href}>{label}</a> : <span>{label}</span>}</li>
+    ))}
+  </ol>
+</nav>
+
+<style>
+  /* Doubled to outrank the legacy `.bootstrap .learn__post a` / `li` rules, which load later. */
+  .trail.trail {
+    ol {
+      align-items: center;
+      display: flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      align-items: baseline;
+      display: flex;
+      margin: 0;
+      position: relative;
+      white-space: nowrap;
+    }
+
+    a {
+      color: #509ee3;
+    }
+
+    span {
+      color: #5a6072;
+    }
+
+    &.top-bar {
+      li {
+        font-size: 18px;
+        line-height: 30px;
+      }
+
+      a {
+        font-size: 16px;
+        font-weight: 700;
+      }
+
+      li + li {
+        padding-left: 23px;
+
+        &::before {
+          content: url("/images/chevron_blue_right.svg");
+          left: 7px;
+          position: absolute;
+          top: 50%;
+          transform: translateY(calc(-50% + 3px));
+        }
+      }
+
+      @media (max-width: 991.98px) {
+        display: none;
+      }
+    }
+
+    &.inline {
+      display: none;
+
+      @media (max-width: 991.98px) {
+        display: block;
+
+        ol {
+          margin: 16px 0;
+        }
+
+        li,
+        a,
+        span {
+          color: #5a6072;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+        }
+
+        li + li::before {
+          color: #c6c9d2;
+          content: "/";
+          padding: 0 6px;
+        }
+      }
+    }
+  }
+</style>

src/components/chrome/DocsNavToggle.astro

@@ -36,12 +36,5 @@
     color: #5a6072;
     display: flex;
     flex-shrink: 0;
-    margin-left: -11px;
-    padding: 8px;
-    transition: color 0.3s ease;
-
-    &:hover {
-      color: #509ee3;
-    }
   }
 </style>

src/components/chrome/GetStartedButton.astro

@@ -0,0 +1,44 @@
+<a id="get-started-btn" href="https://store.metabase.com/checkout">
+  Get started
+</a>
+
+<style>
+  #get-started-btn {
+    align-items: center;
+    background-color: #509ee3;
+    border: 1px solid #509ee3;
+    border-radius: 12px;
+    color: #fff;
+    display: inline-flex;
+    flex-shrink: 0;
+    font-size: 14px;
+    font-weight: 700;
+    height: 42px;
+    line-height: 20px;
+    padding: 0 18px;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: #1c6bb0;
+      color: #fff;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #509ee3;
+      outline-offset: 2px;
+    }
+
+    @media (min-width: 992px) {
+      margin-left: 8px;
+    }
+  }
+
+  @media (max-width: 991.98px) {
+    :global(header.hide-on-scroll) #get-started-btn {
+      border-radius: 8px;
+      height: 36px;
+    }
+  }
+</style>