Translatable featured cards and backlink

_site/customizations/README.mdx

@@ -15,7 +15,6 @@ See Mintlify's docs on [custom scripts](https://www.mintlify.com/docs/customize/
 - `navbar-cta.js` — adds the "Get started" CTA to the navbar.
 - `clickhouse-sql-lexer-wasm.js` — exposes ClickHouse's SQL lexer (`src/Parsers/Lexer.cpp` compiled to WebAssembly) as a base64 global. Snapshot from ClickHouse `programs/server/play.html`; re-extract if the upstream lexer/keyword list changes.
 - `clickhouse-sql-highlight.js` — re-highlights `language="sql"` code blocks using the WASM lexer (ClickHouse-native colors, matching play.html / clickhouse-client) in place of Shiki. Must load after `clickhouse-sql-lexer-wasm.js`. Other languages are left as Shiki rendered them.
-- `quickstart-back-link.js` — on quickstart pages, relocates the autogenerated "All quickstarts" badge from the top of the body into the header above the title (breadcrumb position).
 
 To wire a new script up, add a `{ "src": "/_site/customizations/<name>.js" }`
 entry to the top-level `scripts` array in `docs.json`.

_site/scripts/update_quickstarts.py

@@ -138,8 +138,9 @@ def generate_badges(use_cases: List[str], products: List[str]) -> str:
     Returns:
         Badge components as a string
     """
-    # First line: link badge
-    first_line = '<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>'
+    # First line: muted text back-link (arrow icon + label), styled to match the
+    # homepage links (e.g. "Read the quickstart" / "Set up docs MCP server").
+    first_line = '<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>'
 
     # Second line: all other badges
     second_line_badges = []

docs.json

@@ -3875,9 +3875,6 @@
     },
     {
       "src": "/_site/customizations/clickhouse-sql-highlight.js"
-    },
-    {
-      "src": "/_site/customizations/quickstart-back-link.js"
     }
   ],
   "styling": {

get-started/quickstarts/connect-your-iceberg-catalog.mdx

@@ -11,7 +11,7 @@ import CloudPrerequisites from '/get-started/quickstarts/_prerequisites/cloud_pr
 import ClickHouseAcademyCTA from '/get-started/quickstarts/_academy-ctas/_academy_cta_generic.mdx'
 
 {/* AUTOGENERATED_START */}
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 <div className="mt-2 flex flex-wrap gap-2">
 <Badge size="lg" color="blue">Data Warehousing</Badge>
 <Badge size="lg" color="orange">Cloud</Badge>
@@ -47,7 +47,7 @@ By the end, you'll have ClickHouse Cloud connected to your Iceberg catalog and b
         In this step, you will connect to your Data Lake Catalog in ClickHouse Cloud.
 
         1. Open your ClickHouse Cloud service.
-        2. Navigate to **Data Sources → Connect to your Data Lake Catalog**.
+        2. Navigate to **Data Sources → Connect to your Data Lake Catalog**.
         3. Select your data catalog in dropdown.
         4. Fill out the form with your credential and connection information.
         For Unity Catalog, enter in:
@@ -93,5 +93,5 @@ Be mindful of your quotes. ClickHouse doesn't support three part namespaces, you
 <ClickHouseAcademyCTA />
 
 <div className="mt-8">
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 </div>

get-started/quickstarts/create-your-first-materialized-view.mdx

@@ -10,7 +10,7 @@ import CloudPrerequisites from '/get-started/quickstarts/_prerequisites/cloud_pr
 import ClickHouseAcademyCTA from '/get-started/quickstarts/_academy-ctas/_academy_cta_generic.mdx'
 
 {/* AUTOGENERATED_START */}
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 <div className="mt-2 flex flex-wrap gap-2">
 <Badge size="lg" color="blue">Real-Time Analytics</Badge>
 <Badge size="lg" color="blue">Data Warehousing</Badge>
@@ -211,5 +211,5 @@ Or go deeper with the reference documentation:
 <ClickHouseAcademyCTA />
 
 <div className="mt-8">
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 </div>

get-started/quickstarts/create-your-first-mergetree-table.mdx

@@ -10,7 +10,7 @@ import CloudPrerequisites from '/get-started/quickstarts/_prerequisites/cloud_pr
 import ClickHouseAcademyCTA from '/get-started/quickstarts/_academy-ctas/_academy_cta_generic.mdx'
 
 {/* AUTOGENERATED_START */}
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 <div className="mt-2 flex flex-wrap gap-2">
 <Badge size="lg" color="blue">Real-Time Analytics</Badge>
 <Badge size="lg" color="blue">Data Warehousing</Badge>
@@ -184,7 +184,7 @@ By the end, you'll understand why the MergeTree engine is the foundation of almo
         Each row represents one active data part. Notice:
 
         - **`partition`** - the `YYYYMM` value derived from your `PARTITION BY` expression. Each month's data is isolated.
-        - **`name`** - the part name encodes the partition, the block number range, and the merge level (e.g. `199501_1_4_2` would mean partition `199501`, blocks 1–4, merged twice).
+        - **`name`** - the part name encodes the partition, the block number range, and the merge level (e.g. `199501_1_4_2` would mean partition `199501`, blocks 1–4, merged twice).
         - **`marks`** - the number of index granules. Each granule covers 8,192 rows by default, and the primary key index stores one entry per granule. This sparse index is what stays in memory and enables fast data skipping.
         - **`bytes_on_disk`** - ClickHouse compresses each part column by column using LZ4 by default. Compare this to the raw size to appreciate the compression ratio.
 
@@ -273,5 +273,5 @@ Or go deeper with the reference documentation:
 <ClickHouseAcademyCTA />
 
 <div className="mt-8">
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 </div>

get-started/quickstarts/create-your-first-projection.mdx

@@ -10,7 +10,7 @@ import CloudPrerequisites from '/get-started/quickstarts/_prerequisites/cloud_pr
 import ClickHouseAcademyCTA from '/get-started/quickstarts/_academy-ctas/_academy_cta_generic.mdx'
 
 {/* AUTOGENERATED_START */}
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 <div className="mt-2 flex flex-wrap gap-2">
 <Badge size="lg" color="blue">Real-Time Analytics</Badge>
 <Badge size="lg" color="blue">Data Warehousing</Badge>
@@ -224,5 +224,5 @@ Or go deeper with the reference documentation:
 <ClickHouseAcademyCTA />
 
 <div className="mt-8">
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 </div>

get-started/quickstarts/create-your-first-service-on-cloud.mdx

@@ -9,7 +9,7 @@ description: 'Create a ClickHouse Cloud service, explore the SQL console, and lo
 import ClickHouseAcademyCTA from '/get-started/quickstarts/_academy-ctas/_academy_cta_generic.mdx'
 
 {/* AUTOGENERATED_START */}
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 <div className="mt-2 flex flex-wrap gap-2">
 <Badge size="lg" color="blue">Real-Time Analytics</Badge>
 <Badge size="lg" color="blue">Data Warehousing</Badge>
@@ -154,5 +154,5 @@ Check out the following quickstarts next:
 <ClickHouseAcademyCTA />
 
 <div className="mt-8">
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 </div>

get-started/quickstarts/home.mdx

@@ -10,18 +10,9 @@ import { QuickStartsGrid } from '/snippets/components/QuickStartsGrid/QuickStart
 
 {/* Featured quickstarts - each has a quickstart ID and a banner image (the title is rendered into the image) */}
 export const featuredQuickstarts = [
-  {
-    id: 'create-your-first-service-on-cloud',
-    image: '/images/quickstarts/featured-quickstart-1.png'
-  },
-  {
-    id: 'insert-data-using-clickhouse-client',
-    image: '/images/quickstarts/featured-quickstart-2.png'
-  },
-  {
-    id: 'obtain-your-cloud-connection-details',
-    image: '/images/quickstarts/featured-quickstart-3.png'
-  }
+  { id: 'create-your-first-service-on-cloud' },
+  { id: 'insert-data-using-clickhouse-client' },
+  { id: 'obtain-your-cloud-connection-details' }
 ];
 
 {/* Define quickstarts data */}

get-started/quickstarts/insert-data-using-clickhouse-client.mdx

@@ -9,7 +9,7 @@ description: 'Learn how to use clickhouse-client to insert data from local CSV a
 import ClickHouseAcademyCTA from '/get-started/quickstarts/_academy-ctas/_academy_cta_generic.mdx'
 
 {/* AUTOGENERATED_START */}
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 <div className="mt-2 flex flex-wrap gap-2">
 <Badge size="lg" color="blue">Real-Time Analytics</Badge>
 <Badge size="lg" color="blue">Data Warehousing</Badge>
@@ -184,5 +184,5 @@ Or go deeper with the reference documentation:
 <ClickHouseAcademyCTA />
 
 <div className="mt-8">
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 </div>

get-started/quickstarts/obtain-your-cloud-connection-details.mdx

@@ -10,7 +10,7 @@ import CloudPrerequisites from '/get-started/quickstarts/_prerequisites/cloud_pr
 import ClickHouseAcademyCTA from '/get-started/quickstarts/_academy-ctas/_academy_cta_generic.mdx'
 
 {/* AUTOGENERATED_START */}
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 <div className="mt-2 flex flex-wrap gap-2">
 <Badge size="lg" color="blue">Real-Time Analytics</Badge>
 <Badge size="lg" color="blue">Data Warehousing</Badge>
@@ -116,5 +116,5 @@ Or go deeper with the reference documentation:
 <ClickHouseAcademyCTA />
 
 <div className="mt-8">
-<a href="/get-started/quickstarts/home"><Badge size="lg" color="gray" icon="arrow-left">All quickstarts</Badge></a>
+<a href="/get-started/quickstarts/home" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-zinc-500 hover:text-gray-900 dark:hover:text-[#fdff75] transition-colors font-normal no-underline"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>All quickstarts</a>
 </div>