diff --git a/_includes/docs/blockquotes.html b/_includes/docs/blockquotes.html deleted file mode 100644 index 01c176d9bd..0000000000 --- a/_includes/docs/blockquotes.html +++ /dev/null @@ -1,22 +0,0 @@ -
- {% if page.version and page.version != site.docs_version and page.version != "latest" %} - {% if page.version == "master" %} -
- These are the docs for the Metabase master branch. Some features documented here may not yet be available in the current release. - Check out the docs for the current stable version, Metabase {{site.docs_version}}. -
- {% else %} - {% assign support = site.data.version_support[page.version] %} - {% if support.status == "unsupported" %} -
- Version {{ page.version }} of Metabase is no longer supported. Check out the docs for the current stable version, Metabase {{site.docs_version}}. -
- {% else %} -
- These are the docs for Metabase {{ page.version }}. - Check out the docs for the current stable version, Metabase {{site.docs_version}}. -
- {% endif %} - {% endif %} - {% endif %} -
diff --git a/_includes/docs_breadcrumb.html b/_includes/docs_breadcrumb.html deleted file mode 100644 index 66d33238e2..0000000000 --- a/_includes/docs_breadcrumb.html +++ /dev/null @@ -1,55 +0,0 @@ -{% comment %} - -{% endcomment %} - -{% capture version %} -{% if page.version == "latest" %}{{site.docs_version}}{% else %}{{page.version}}{% endif %} -{% endcapture %} - -{% capture latest_or_explicit_version %}{% if site.docs_version == page.version and page.url contains "/docs/latest/" %}latest{% else %}{{page.version}}{% endif %}{% endcapture %} -{% capture category_slug %}{{ page.category | slugify }}{% endcapture %} -{% capture category_slug_part %}{% if category_slug == "troubleshooting-guide"%}/{% elsif category_slug == "api" %}{{ "api-documentation" | strip}}{% else %}/start{% endif %}{% endcapture %} - -
- {% if page.has_magic_breadcrumbs %} - - {% else %} - - {% endif %} -
diff --git a/_includes/docs_version.html b/_includes/docs_version.html deleted file mode 100644 index ad878be1e7..0000000000 --- a/_includes/docs_version.html +++ /dev/null @@ -1,35 +0,0 @@ -{% assign versions = site.available_versions | reverse %} - -
- - {% if page.version == "latest" %} - {{site.docs_version}} - {% else %} - {{page.version}} - {% endif %} - - {% include svg-icons/chevron.html %} - - -
diff --git a/_includes/learn/breadcrumbs.html b/_includes/learn/breadcrumbs.html deleted file mode 100644 index c6c1353074..0000000000 --- a/_includes/learn/breadcrumbs.html +++ /dev/null @@ -1,40 +0,0 @@ - diff --git a/_includes/learn/search-input.html b/_includes/learn/search-input.html deleted file mode 100644 index cb2f87c8b9..0000000000 --- a/_includes/learn/search-input.html +++ /dev/null @@ -1,8 +0,0 @@ -{% if include.domain == "docs" %} -{% assign action = "/docs-search" %} -{% else %} -{% assign action = "/search" %} -{% endif %} -
- - diff --git a/_includes/learn/top-bar.html b/_includes/learn/top-bar.html deleted file mode 100644 index 8b39688ff4..0000000000 --- a/_includes/learn/top-bar.html +++ /dev/null @@ -1,27 +0,0 @@ -
-
- {% if include.show_breadcrumb %} -
- {% if include.domain == "docs" %} - {% include docs_breadcrumb.html %} - {% else %} - {% include learn/breadcrumbs.html %} - {% endif %} -
- {% endif %} -
- -
- {% if include.domain == "docs" %} - {% include docs_version.html %} - - {% include svg-icons/stars.html %} - What’s new - - {% endif %} - - {% unless include.show_search == "false" %} - {% include learn/search-input.html domain=include.domain %} - {% endunless %} -
-
diff --git a/_includes/svg-icons/stars.html b/_includes/svg-icons/stars.html deleted file mode 100644 index e74caf56a1..0000000000 --- a/_includes/svg-icons/stars.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/chrome/Breadcrumb.astro b/src/components/chrome/Breadcrumb.astro new file mode 100644 index 0000000000..5070dedbdb --- /dev/null +++ b/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');`; +--- + +
+ {page.has_magic_breadcrumbs ? ( + + ) : ( + + )} +
diff --git a/src/components/chrome/SearchInput.astro b/src/components/chrome/SearchInput.astro new file mode 100644 index 0000000000..28dafdcf05 --- /dev/null +++ b/src/components/chrome/SearchInput.astro @@ -0,0 +1,3 @@ +
+ + diff --git a/src/components/chrome/TopBar.astro b/src/components/chrome/TopBar.astro new file mode 100644 index 0000000000..8ef061e4ed --- /dev/null +++ b/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; +--- + +
+
+ {showBreadcrumb && ( +
+ +
+ )} +
+ +
+ + + + What’s new + + + +
+
diff --git a/src/components/chrome/VersionNotice.astro b/src/components/chrome/VersionNotice.astro new file mode 100644 index 0000000000..85425d8308 --- /dev/null +++ b/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; +--- + +
+ +{/* +`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 && } diff --git a/src/components/chrome/VersionSelector.astro b/src/components/chrome/VersionSelector.astro new file mode 100644 index 0000000000..a934c962d6 --- /dev/null +++ b/src/components/chrome/VersionSelector.astro @@ -0,0 +1,54 @@ +--- +import Chevron from "@/icons/chevron.svg"; +import { baseCtx } from "@/lib/liquid/liquidRenderer"; +import { renderVersionListItems } from "./utils/versionUtils"; + +type Props = { + version?: string; + latest?: boolean; +}; + +const { version, latest } = Astro.props; +const { site } = baseCtx; +--- + +
+ + {version} + + +
+ +{/* +`latest` is excluded since it gets rebuilt often enough to stay current on its own. This targets +older pages (e.g. v0.44) that rarely get rebuilt but should still show an up-to-date version list +in the selector. +*/} +{!latest && } diff --git a/src/components/chrome/utils/versionUtils.ts b/src/components/chrome/utils/versionUtils.ts new file mode 100644 index 0000000000..7aafa33fd4 --- /dev/null +++ b/src/components/chrome/utils/versionUtils.ts @@ -0,0 +1,62 @@ +import type { VersionSupport } from "@/lib/docs/versionSupport"; +import type { VersionsInfo } from "@/pages/docs/versions.json"; + +let versionsPromise: Promise; + +export const fetchVersions = () => { + versionsPromise ??= fetch("/docs/versions.json").then((res) => res.json()); + return versionsPromise; +}; + +export const renderVersionNotice = ( + pageVersion: string | null | undefined, + versionSupport: Record, + docsVersion: string, +): string => { + const latest = pageVersion === docsVersion; + if (!pageVersion || latest) { + return ""; + } + const support = versionSupport[pageVersion]; + if (support?.status == "unsupported") { + return `
+ Version ${pageVersion} of Metabase is + no longer supported. + Check out the + + docs for the current stable version, Metabase ${docsVersion}. + +
`; + } else { + return `
+ These are the docs for Metabase ${pageVersion}. Check out the + + docs for the current stable version, Metabase ${docsVersion}. + +
`; + } +}; + +export const renderVersionListItems = ( + pageVersion: string | null | undefined, + versionSupport: Record, + availableVersions: string[], +): string => { + const items = [...availableVersions] + .reverse() + .slice(0, 10) + .filter((v) => v !== pageVersion) + .map((v) => { + const support = versionSupport[v]; + const tag = + support?.status === "unsupported" + ? `unsupported` + : support?.lts + ? `lts` + : ""; + return `
  • ${v}${tag}
    • `; + }) + .join(""); + + return `${items}
  • See more
    • `; +}; diff --git a/src/icons/stars.svg b/src/icons/stars.svg new file mode 100644 index 0000000000..84f3d9805e --- /dev/null +++ b/src/icons/stars.svg @@ -0,0 +1,15 @@ + + + diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro index 8fa7958fde..f1f91d189a 100644 --- a/src/layouts/DefaultLayout.astro +++ b/src/layouts/DefaultLayout.astro @@ -14,8 +14,6 @@ type Props = { const { page, dirname } = Astro.props; const lq = getLiquidRenderer({ page, dirname }); - -const currentDocsVersion = await lq.render("{{ site.docs_version }}"); --- @@ -26,17 +24,6 @@ const currentDocsVersion = await lq.render("{{ site.docs_version }}");
    - {page.version && page.version !== currentDocsVersion && ( -
    -
    - You are viewing the documentation for Metabase {page.version}. The{" "} - - most recent docs version is {currentDocsVersion}. - -
    -
    - )} -
    diff --git a/src/layouts/NewDocsLayout.astro b/src/layouts/NewDocsLayout.astro index 4db6cedfb2..3578162431 100644 --- a/src/layouts/NewDocsLayout.astro +++ b/src/layouts/NewDocsLayout.astro @@ -1,5 +1,8 @@ --- import LeftSidebar from "@/components/chrome/LeftSidebar.astro"; +import TopBar from "@/components/chrome/TopBar.astro"; +import VersionNotice from "@/components/chrome/VersionNotice.astro"; +import VersionSelector from "@/components/chrome/VersionSelector.astro"; import LiquidInclude from "@/components/LiquidInclude.astro"; import { UNIFY_ENABLED_PAGES } from "@/constants"; import { getLiquidRenderer } from "@/lib/liquid/liquidRenderer"; @@ -11,7 +14,7 @@ type Props = { url: string; category?: string; version?: string; - latest?: string; + latest?: boolean; }; dirname: string; }; @@ -36,17 +39,14 @@ const unify = UNIFY_ENABLED_PAGES.includes(page.url); />
    - +
    - {!showBreadcrumb && } + {!showBreadcrumb && ( + + )} - + diff --git a/src/layouts/OldDocsLayout.astro b/src/layouts/OldDocsLayout.astro index e7db0ea7e4..ba6a98eb00 100644 --- a/src/layouts/OldDocsLayout.astro +++ b/src/layouts/OldDocsLayout.astro @@ -1,6 +1,6 @@ --- +import VersionNotice from "@/components/chrome/VersionNotice.astro"; import LiquidInclude from "@/components/LiquidInclude.astro"; -import { getVersionSupport } from "@/lib/docs/versionSupport"; import { getLiquidRenderer } from "@/lib/liquid/liquidRenderer"; import DefaultLayout from "./DefaultLayout.astro"; @@ -25,8 +25,6 @@ const latestOrExplicitVersion = ? "latest" : page.version; -const support = getVersionSupport(page.version); - const showChrome = page.category !== "ignore"; --- @@ -58,16 +56,7 @@ const showChrome = page.category !== "ignore"; )} - {support?.status === "unsupported" && ( -
    - Version {page.version} of Metabase is no longer{" "} - supported. Check out the{" "} - - docs for the current stable version, Metabase{" "} - {currentDocsVersion}. - -
    - )} +
    diff --git a/src/pages/docs/versions.json.ts b/src/pages/docs/versions.json.ts new file mode 100644 index 0000000000..488fd76e91 --- /dev/null +++ b/src/pages/docs/versions.json.ts @@ -0,0 +1,23 @@ +import type { VersionSupport } from "@/lib/docs/versionSupport"; +import { baseCtx } from "@/lib/liquid/liquidRenderer"; +import type { APIRoute } from "astro"; + +const { docs_version, available_versions } = baseCtx.site; +const { version_support } = baseCtx.site.data; + +export interface VersionsInfo { + docs_version: string; + available_versions: string[]; + version_support: Record; +} + +export const GET: APIRoute = async () => { + const data: VersionsInfo = { + docs_version, + available_versions, + version_support, + }; + return new Response(JSON.stringify(data), { + headers: { "Content-Type": "application/json" }, + }); +}; diff --git a/tsconfig.json b/tsconfig.json index 85eaf84be9..a01dc7921c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], - "exclude": ["dist", "_docs", "_site", "gdpr-cookie-notice", "lib", "js", "script"], + "exclude": ["dist", "_docs", "_site", "public/docs/gdpr-cookie-notice", "lib", "public/docs/js", "script"], "compilerOptions": { "paths": { "@/*": ["./src/*"]