From 0da9b83d95da67cb9b8c683cf2d391a8e2659675 Mon Sep 17 00:00:00 2001 From: Mohit Sapat Date: Wed, 21 Oct 2026 12:03:54 +0530 Subject: [PATCH 1/3] feat(docs): redesign the sidebar and frame content in an inset card - Sidebar: section labels (Get Started, Components, Customization, Contributing), icons on top-level pages, collapsible component categories, and a neutral active row with brand-colored text. - Contributor pages move out of Get Started into their own section; URLs are unchanged. - Content and TOC sit in a bordered inset card on desktop. - Footer collapses to one row: Discord, GitHub, llms.txt, version. - The footer version comes from the npm registry (hourly), since the release workflow sets the version from the tag, not package.json. - Bump package.json to 2.0.1 to match the latest release. --- content/docs/components/inputs/meta.json | 5 +- .../components/language-switchers/meta.json | 6 +- content/docs/components/meta.json | 9 +- content/docs/components/navigation/meta.json | 7 +- content/docs/components/translation/meta.json | 7 +- content/docs/getting-started/meta.json | 11 +- content/docs/meta.json | 19 ++- package.json | 2 +- src/app/docs/layout.tsx | 109 +++++++++--------- src/app/globals.css | 39 ++++--- 10 files changed, 129 insertions(+), 85 deletions(-) diff --git a/content/docs/components/inputs/meta.json b/content/docs/components/inputs/meta.json index caf8f67..969af94 100644 --- a/content/docs/components/inputs/meta.json +++ b/content/docs/components/inputs/meta.json @@ -1,6 +1,7 @@ { "title": "Inputs", "icon": "TextCursorInput", - "pages": ["phone-input"], - "collapsible": false + "pages": [ + "phone-input" + ] } diff --git a/content/docs/components/language-switchers/meta.json b/content/docs/components/language-switchers/meta.json index a7548ef..f80a942 100644 --- a/content/docs/components/language-switchers/meta.json +++ b/content/docs/components/language-switchers/meta.json @@ -1,6 +1,8 @@ { "title": "Language Switchers", "icon": "Globe", - "pages": ["language-switcher", "language-switcher-pill"], - "collapsible": false + "pages": [ + "language-switcher", + "language-switcher-pill" + ] } diff --git a/content/docs/components/meta.json b/content/docs/components/meta.json index 6b2bec0..c140652 100644 --- a/content/docs/components/meta.json +++ b/content/docs/components/meta.json @@ -1,5 +1,10 @@ { "title": "Components", - "pages": ["language-switchers", "navigation", "inputs", "translation"], - "collapsible": false + "pages": [ + "index", + "language-switchers", + "navigation", + "inputs", + "translation" + ] } diff --git a/content/docs/components/navigation/meta.json b/content/docs/components/navigation/meta.json index 69e8336..0c37c29 100644 --- a/content/docs/components/navigation/meta.json +++ b/content/docs/components/navigation/meta.json @@ -1,6 +1,7 @@ { "title": "Navigation", - "icon": "Menu", - "pages": ["navbar"], - "collapsible": false + "icon": "PanelTop", + "pages": [ + "navbar" + ] } diff --git a/content/docs/components/translation/meta.json b/content/docs/components/translation/meta.json index 12a6f1f..3cb762c 100644 --- a/content/docs/components/translation/meta.json +++ b/content/docs/components/translation/meta.json @@ -1,6 +1,7 @@ { - "title": "Translation", + "title": "Widgets", "icon": "Languages", - "pages": ["translation-widget"], - "collapsible": false + "pages": [ + "translation-widget" + ] } diff --git a/content/docs/getting-started/meta.json b/content/docs/getting-started/meta.json index e36267b..00b17cd 100644 --- a/content/docs/getting-started/meta.json +++ b/content/docs/getting-started/meta.json @@ -1,5 +1,10 @@ { - "title": "Getting Started", - "pages": ["index", "install", "shadcn-cli", "contributing", "rulebook"], - "collapsible": false + "title": "Get Started", + "pages": [ + "index", + "install", + "shadcn-cli", + "contributing", + "rulebook" + ] } diff --git a/content/docs/meta.json b/content/docs/meta.json index dc8e948..6e91662 100644 --- a/content/docs/meta.json +++ b/content/docs/meta.json @@ -1,4 +1,19 @@ { - "pages": ["getting-started", "components", "customization"], - "collapsible": false + "pages": [ + "---Get Started---", + "getting-started/index", + "getting-started/install", + "getting-started/shadcn-cli", + "---Components---", + "[LayoutGrid][Overview](/docs/components)", + "components/language-switchers", + "components/navigation", + "components/inputs", + "components/translation", + "---Customization---", + "customization/interfaces", + "---Contributing---", + "getting-started/contributing", + "getting-started/rulebook" + ] } diff --git a/package.json b/package.json index 5ee17b8..e72de27 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@babelize/elements", - "version": "1.1.2", + "version": "2.0.1", "description": "Open-source Localization UI components for React and Tailwind CSS.", "license": "MIT", "type": "module", diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx index f407a62..e314dba 100644 --- a/src/app/docs/layout.tsx +++ b/src/app/docs/layout.tsx @@ -2,68 +2,73 @@ import type { ReactNode } from "react"; import { DocsLayout } from "fumadocs-ui/layouts/docs"; import { source } from "@/lib/source"; import { baseOptions } from "../layout.config"; -import { FileText, ExternalLink } from "lucide-react"; +import { version as localVersion } from "../../../package.json"; + +const DISCORD_PATH = + "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"; +const GITHUB_PATH = + "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"; + +function IconLink({ href, label, path }: { href: string; label: string; path: string }) { + return ( + + + + ); +} + +// package.json is not bumped in the repo; the release workflow sets the version from the +// git tag at publish time, so the latest npm release is the real current version. +async function getLatestVersion() { + try { + const res = await fetch("https://registry.npmjs.org/@babelize/elements/latest", { + next: { revalidate: 3600 }, + }); + if (!res.ok) return localVersion; + const data: { version?: string } = await res.json(); + return data.version ?? localVersion; + } catch { + return localVersion; + } +} + +export default async function Layout({ children }: { children: ReactNode }) { + const version = await getLatestVersion(); -export default function Layout({ children }: { children: ReactNode }) { return ( - - llms-full.txt - - ), footer: ( -
- -
- - Community -
- - - + + + -
- - GitHub -
- + llms.txt + + v{version} +
), }} diff --git a/src/app/globals.css b/src/app/globals.css index 2b3902e..5cfd6ae 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -215,24 +215,33 @@ body { box-shadow: 0 0 30px rgba(0, 189, 125, 0.1); } -/* ── Fumadocs brand refinements ── */ -aside a[data-active="true"], -aside a[aria-current="page"], -aside button[data-active="true"] { - color: var(--color-fd-primary) !important; - font-weight: 500 !important; - background: transparent !important; -} +/* ── Docs shell: sidebar sits on the page, content lives in an inset card ── */ +@media (min-width: 768px) { + #nd-sidebar[data-collapsed="false"] { + background: transparent; + border-inline-end: 0; + } -aside a[data-active="true"] svg, -aside a[aria-current="page"] svg, -aside button[data-active="true"] svg { - color: var(--color-fd-primary) !important; + #nd-docs-layout::before { + content: ""; + grid-column: 3 / -1; + grid-row: 1 / -1; + margin: 0.5rem 0.5rem 0.5rem 0; + border: 1px solid var(--color-fd-border); + border-radius: 0.875rem; + background: var(--color-fd-card); + } + + #nd-docs-layout[data-sidebar-collapsed="true"]::before { + margin-inline-start: 0.5rem; + } } -/* Remove default padding shifting if any, or just ensure it looks good */ -.fd-nav-item[data-active="true"] { - background: transparent !important; +/* Active sidebar row: faint neutral pill, brand-colored label and icon */ +#nd-sidebar a[data-active="true"] { + color: var(--color-fd-primary); + font-weight: 500; + background: color-mix(in oklab, var(--color-fd-foreground) 8%, transparent); } /* ── TOC (On this page) brand refinements ── */ From f67619a4d6b766946a65a93651e36a438b301ef3 Mon Sep 17 00:00:00 2001 From: Mohit Sapat Date: Wed, 21 Oct 2026 12:05:57 +0530 Subject: [PATCH 2/3] style(docs): format sidebar meta.json files with prettier --- content/docs/components/inputs/meta.json | 4 +--- content/docs/components/language-switchers/meta.json | 5 +---- content/docs/components/meta.json | 8 +------- content/docs/components/navigation/meta.json | 4 +--- content/docs/components/translation/meta.json | 4 +--- content/docs/getting-started/meta.json | 8 +------- 6 files changed, 6 insertions(+), 27 deletions(-) diff --git a/content/docs/components/inputs/meta.json b/content/docs/components/inputs/meta.json index 969af94..5839450 100644 --- a/content/docs/components/inputs/meta.json +++ b/content/docs/components/inputs/meta.json @@ -1,7 +1,5 @@ { "title": "Inputs", "icon": "TextCursorInput", - "pages": [ - "phone-input" - ] + "pages": ["phone-input"] } diff --git a/content/docs/components/language-switchers/meta.json b/content/docs/components/language-switchers/meta.json index f80a942..539e595 100644 --- a/content/docs/components/language-switchers/meta.json +++ b/content/docs/components/language-switchers/meta.json @@ -1,8 +1,5 @@ { "title": "Language Switchers", "icon": "Globe", - "pages": [ - "language-switcher", - "language-switcher-pill" - ] + "pages": ["language-switcher", "language-switcher-pill"] } diff --git a/content/docs/components/meta.json b/content/docs/components/meta.json index c140652..fbcbafd 100644 --- a/content/docs/components/meta.json +++ b/content/docs/components/meta.json @@ -1,10 +1,4 @@ { "title": "Components", - "pages": [ - "index", - "language-switchers", - "navigation", - "inputs", - "translation" - ] + "pages": ["index", "language-switchers", "navigation", "inputs", "translation"] } diff --git a/content/docs/components/navigation/meta.json b/content/docs/components/navigation/meta.json index 0c37c29..990efd1 100644 --- a/content/docs/components/navigation/meta.json +++ b/content/docs/components/navigation/meta.json @@ -1,7 +1,5 @@ { "title": "Navigation", "icon": "PanelTop", - "pages": [ - "navbar" - ] + "pages": ["navbar"] } diff --git a/content/docs/components/translation/meta.json b/content/docs/components/translation/meta.json index 3cb762c..5a20ff8 100644 --- a/content/docs/components/translation/meta.json +++ b/content/docs/components/translation/meta.json @@ -1,7 +1,5 @@ { "title": "Widgets", "icon": "Languages", - "pages": [ - "translation-widget" - ] + "pages": ["translation-widget"] } diff --git a/content/docs/getting-started/meta.json b/content/docs/getting-started/meta.json index 00b17cd..3228cc8 100644 --- a/content/docs/getting-started/meta.json +++ b/content/docs/getting-started/meta.json @@ -1,10 +1,4 @@ { "title": "Get Started", - "pages": [ - "index", - "install", - "shadcn-cli", - "contributing", - "rulebook" - ] + "pages": ["index", "install", "shadcn-cli", "contributing", "rulebook"] } From b56b703afac109e00e149086e3a9ec6965456a89 Mon Sep 17 00:00:00 2001 From: Mohit Sapat Date: Wed, 21 Oct 2026 12:09:57 +0530 Subject: [PATCH 3/3] fix(docs): label the llms-full.txt link accurately and reword the version comment --- src/app/docs/layout.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx index e314dba..f549678 100644 --- a/src/app/docs/layout.tsx +++ b/src/app/docs/layout.tsx @@ -26,8 +26,8 @@ function IconLink({ href, label, path }: { href: string; label: string; path: st ); } -// package.json is not bumped in the repo; the release workflow sets the version from the -// git tag at publish time, so the latest npm release is the real current version. +// Releases set the version from the git tag at publish time and never commit it back, so +// package.json can lag; the latest npm release is the real current version. async function getLatestVersion() { try { const res = await fetch("https://registry.npmjs.org/@babelize/elements/latest", { @@ -64,7 +64,7 @@ export default async function Layout({ children }: { children: ReactNode }) { href="/llms-full.txt" className="ml-1 rounded-md border border-fd-border px-2 py-1 font-mono text-[0.6875rem] text-fd-muted-foreground transition-colors hover:border-fd-primary/40 hover:text-fd-primary" > - llms.txt + llms-full.txt v{version}