@next-library/theme 1.0.2 → 1.0.4

package/README.md

@@ -2,7 +2,9 @@
 
 Complete UI theme package for Next.js documentation framework. This package provides ready-made React components built on top of [`@next-library/core`](../core/README.md).
 
-> **Looking for core utilities only?** Check out [`@next-library/core`](../core/README.md) which provides content management, i18n, and SEO utilities without UI components.
+> **Looking for core utilities only?** See [`@next-library/core`](../core/README.md).
+
+> **Content tree:** Layout and nav expect the same **`PageData`** from **`extractPageData(contentTree, locale, slug)`**. Import **`contentTree`** from your generated **`lib/tree.ts`** and pass **`contentTree`** into **`NavigationBar`** (and derive **`getSupportedLocales(contentTree)`** for **`LanguageSwitcher`**). The canonical wiring is **[`example/app/`](../../example/app/)** and **[`docs/getting-started.md`](../../docs/getting-started.md)**.
 
 ## Features
 
@@ -115,10 +117,18 @@ Import server components from `@next-library/theme/server`:
 ```typescript
 // app/[locale]/layout.tsx
 import { DocumentationLayout } from '@next-library/theme/server';
+import { isValidLocale, type Locale } from '@next-library/core';
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale: raw } = await params;
+  const locale = (isValidLocale(raw) ? raw : 'en') as Locale;
 
-export default function LocaleLayout({ children, params }) {
-  const { locale } = await params;
-  
   return (
     <DocumentationLayout language={locale}>
       {children}
@@ -131,22 +141,38 @@ export default function LocaleLayout({ children, params }) {
 
 Import client components from `@next-library/theme/client`:
 
+Server parent (derive locales from the generated tree):
+
+```typescript
+import { getSupportedLocales } from '@next-library/core';
+import contentTree from '@/lib/tree';
+import { LocaleTools } from './locale-tools';
+
+const availableLocales = getSupportedLocales(contentTree);
+// …
+<LocaleTools availableLocales={availableLocales} />;
+```
+
+Client component:
+
 ```typescript
-// components/my-component.tsx
+// app/locale-tools.tsx
 'use client';
 
 import { LanguageSwitcher, ThemeSwitcher } from '@next-library/theme/client';
 
-export function MyComponent() {
+export function LocaleTools({ availableLocales }: { availableLocales: string[] }) {
   return (
     <div>
-      <LanguageSwitcher availableLocales={['en', 'fr', 'de']} />
+      <LanguageSwitcher availableLocales={availableLocales} />
       <ThemeSwitcher />
     </div>
   );
 }
 ```
 
+`NavigationBar` computes locales from **`contentTree`** when you pass **`contentTree`** (see complete example below).
+
 ## Component Exports
 
 ### Server Components (`@next-library/theme/server`)
@@ -204,16 +230,18 @@ export function MyComponent() {
 ```typescript
 // app/[locale]/layout.tsx
 import { DocumentationLayout } from '@next-library/theme/server';
+import { isValidLocale, type Locale } from '@next-library/core';
 
-export default async function LocaleLayout({ 
-  children, 
-  params 
-}: { 
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
   children: React.ReactNode;
   params: Promise<{ locale: string }>;
 }) {
-  const { locale } = await params;
-  
+  const { locale: rawLocale } = await params;
+  const locale = (isValidLocale(rawLocale) ? rawLocale : 'en') as Locale;
+
   return (
     <DocumentationLayout language={locale}>
       {children}
@@ -228,52 +256,50 @@ export default async function LocaleLayout({
 // app/[locale]/docs/[[...slug]]/layout.tsx
 import { NavigationBar, LeftSidebar, RightSidebar } from '@next-library/theme/server';
 import { Breadcrumbs, AnchorLinkHandler } from '@next-library/theme/client';
-import { extractPageData, getSupportedLocales, type Locale } from '@next-library/core';
-
-export default async function DocsLayout({ 
-  children, 
-  params 
-}: { 
+import { extractPageData, isValidLocale, createConfig, type Locale } from '@next-library/core';
+import { libraryConfig } from '@/library.config';
+import contentTree from '@/lib/tree';
+
+export default async function DocsLayout({
+  children,
+  params,
+}: {
   children: React.ReactNode;
   params: Promise<{ locale: string; slug?: string[] }>;
 }) {
   const { locale: rawLocale, slug } = await params;
-  const supportedLocales = getSupportedLocales();
-  const locale = (supportedLocales.includes(rawLocale) ? rawLocale : 'en') as Locale;
+  const locale = (isValidLocale(rawLocale) ? rawLocale : 'en') as Locale;
   const safeSlug = Array.isArray(slug) ? slug : [];
-
-  const pageData = extractPageData(locale, safeSlug);
+  const fullConfig = createConfig(libraryConfig);
+  const pageData = extractPageData(contentTree, locale, safeSlug);
+  const repoUrl =
+    fullConfig.github?.user && fullConfig.github?.repo
+      ? `https://github.com/${fullConfig.github.user}/${fullConfig.github.repo}`
+      : undefined;
 
   return (
     <div>
-      {/* Mobile Navigation */}
       <NavigationBar
         language={locale}
         className="block lg:hidden"
         pageData={pageData}
+        websiteTitle={fullConfig.website?.title || 'Documentation'}
+        contentTree={contentTree}
+        repoUrl={repoUrl}
       />
-
-      {/* Main Content Layout */}
       <div className="flex flex-row gap-12 w-full lg:w-[95vw] mx-auto pt-10">
-        {/* Left Sidebar */}
         <LeftSidebar
           data={pageData}
           className="sticky top-28 hidden lg:flex lg:flex-[2] max-w-xs"
         />
-
-        {/* Main Content */}
         <main className="flex flex-col lg:gap-8 gap-4 flex-1 w-full lg:flex-[6] px-4 lg:px-0">
           <Breadcrumbs data={pageData} locale={locale} />
           {children}
         </main>
-
-        {/* Right Sidebar */}
         <RightSidebar
           data={pageData}
           className="sticky top-28 hidden lg:flex lg:flex-[1.5] max-w-xs"
         />
-
-        {/* Anchor Link Handler */}
         <AnchorLinkHandler locale={locale} />
       </div>
     </div>
@@ -284,73 +310,66 @@ export default async function DocsLayout({
 ### Documentation Page
 
 ```typescript
-// app/[locale]/docs/[[...slug]]/page.tsx
-import { PageHeader, MarkdownRenderer, FallbackLocaleWarning } from '@next-library/theme';
-import { extractPageData, generateArticleSchema, generateBreadcrumbSchema, generateCollectionPageSchema, getSupportedLocales, fetchRawFileContent } from '@next-library/core';
-import { StructuredData } from '@next-library/theme/server';
+// app/[locale]/docs/[[...slug]]/page.tsx (leaf page — folder views need FolderCards; see example app)
+import {
+  extractPageData,
+  isValidLocale,
+  fetchRawFileContent,
+  createConfig,
+  type Locale,
+} from '@next-library/core';
+import { PageHeader, FallbackLocaleWarning } from '@next-library/theme/server';
+import { MarkdownRenderer } from '@next-library/theme/client';
+import { libraryConfig } from '@/library.config';
+import contentTree from '@/lib/tree';
 import { notFound } from 'next/navigation';
 
-export default async function DocPage({ 
-  params 
-}: { 
+export default async function DocPage({
+  params,
+}: {
   params: Promise<{ locale: string; slug?: string[] }>;
 }) {
   const { locale: rawLocale, slug } = await params;
-  const supportedLocales = getSupportedLocales();
-  const locale = supportedLocales.includes(rawLocale) ? rawLocale : 'en';
+  const locale = (isValidLocale(rawLocale) ? rawLocale : 'en') as Locale;
   const safeSlug = Array.isArray(slug) ? slug : [];
-
-  const pageData = extractPageData(locale, safeSlug);
+  const fullConfig = createConfig(libraryConfig);
+  const pageData = extractPageData(contentTree, locale, safeSlug);
   const { node } = pageData;
 
-  if (!node) {
+  if (!node?.githubPath || !fullConfig.github?.user || !fullConfig.github?.repo) {
     notFound();
   }
 
-  // Fetch markdown content from GitHub
-  const rawMarkdown = await fetchRawFileContent(node.githubPath!);
-
-  // Generate structured data
-  const articleSchema = generateArticleSchema({ /* ... */ });
-  const breadcrumbSchema = generateBreadcrumbSchema(pageData.navigation.breadcrumbs);
-  const collectionPageSchema = generateCollectionPageSchema({ /* ... */ });
-
-  const schemas = [articleSchema, breadcrumbSchema, collectionPageSchema]
-    .filter(Boolean)
-    .map(schema => JSON.stringify(schema, null, 0).replace(/</g, '\\u003c'))
-    .join('\n');
+  const githubConfig = {
+    user: fullConfig.github.user,
+    repo: fullConfig.github.repo,
+    branch: fullConfig.github.branch || 'main',
+    token: fullConfig.github.token,
+    app: fullConfig.github.app,
+  };
+  const rawMarkdown = await fetchRawFileContent(node.githubPath, githubConfig);
+  const baseUrl = fullConfig.website?.siteUrl || 'http://localhost:3000';
+  const pageUrl = `${baseUrl.replace(/\/$/, '')}/${locale}/docs/${safeSlug.join('/')}`;
+  const websiteTitle = fullConfig.website?.title || fullConfig.website?.organizationName || 'Documentation';
 
   return (
     <div>
-      {/* Structured Data */}
-      {schemas && (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: schemas }}
-        />
-      )}
-
-      {/* Page Header with Copy Button */}
       <PageHeader
         title={node.title}
         markdown={rawMarkdown}
-        pageUrl={`https://example.com/${locale}/docs/${safeSlug.join('/')}`}
-        websiteTitle="My Documentation"
+        pageUrl={pageUrl}
+        websiteTitle={websiteTitle}
         locale={locale}
       />
-
-      {/* Fallback Warning */}
-      {node.fallback && (
-        <FallbackLocaleWarning locale={locale} />
-      )}
-
-      {/* Markdown Content */}
+      {node.fallback && <FallbackLocaleWarning locale={locale} />}
       <MarkdownRenderer markdown={rawMarkdown} />
     </div>
   );
 }
 ```
 
+For **JSON-LD**, **`generateMetadata`**, **folder `index` views** (`FolderCards`), and error handling, copy from **`example/app/[locale]/docs/[[...slug]]/page.tsx`** in the monorepo.
+
 ## Internationalization
 
 The theme package includes translations for 20+ languages. Components automatically use translations based on the `locale` prop:
@@ -467,10 +486,12 @@ interface DocumentationLayoutProps {
 
 ```typescript
 interface NavigationBarProps {
-  language: Locale;
+  language?: Locale;
   className?: string;
   pageData?: PageData;
   websiteTitle?: string;
+  contentTree?: ContentTree;
+  repoUrl?: string;
 }
 ```
 

package/dist/index.js

@@ -1009,7 +1009,11 @@ var localeNamesEn = {
   pl: "Polish",
   tr: "Turkish",
   he: "Hebrew",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Persian",
+  id: "Indonesian",
+  th: "Thai",
+  vi: "Vietnamese"
 };
 var localeNamesFr = {
   en: "Anglais",
@@ -1031,7 +1035,11 @@ var localeNamesFr = {
   pl: "Polonais",
   tr: "Turc",
   he: "H\xE9breu",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Persan",
+  id: "Indon\xE9sien",
+  th: "Tha\xEF",
+  vi: "Vietnamien"
 };
 var localeNamesDe = {
   en: "Englisch",
@@ -1053,7 +1061,11 @@ var localeNamesDe = {
   pl: "Polnisch",
   tr: "T\xFCrkisch",
   he: "Hebr\xE4isch",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Persisch",
+  id: "Indonesisch",
+  th: "Thail\xE4ndisch",
+  vi: "Vietnamesisch"
 };
 var localeNamesEs = {
   en: "Ingl\xE9s",
@@ -1075,7 +1087,11 @@ var localeNamesEs = {
   pl: "Polaco",
   tr: "Turco",
   he: "Hebreo",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Persa",
+  id: "Indonesio",
+  th: "Tailand\xE9s",
+  vi: "Vietnamita"
 };
 var localeNamesAr = {
   en: "\u0627\u0644\u0625\u0646\u062C\u0644\u064A\u0632\u064A\u0629",
@@ -1097,7 +1113,11 @@ var localeNamesAr = {
   pl: "\u0627\u0644\u0628\u0648\u0644\u0646\u062F\u064A\u0629",
   tr: "\u0627\u0644\u062A\u0631\u0643\u064A\u0629",
   he: "\u0627\u0644\u0639\u0628\u0631\u064A\u0629",
-  hi: "\u0627\u0644\u0647\u0646\u062F\u064A\u0629"
+  hi: "\u0627\u0644\u0647\u0646\u062F\u064A\u0629",
+  fa: "\u0627\u0644\u0641\u0627\u0631\u0633\u064A\u0629",
+  id: "\u0627\u0644\u0625\u0646\u062F\u0648\u0646\u064A\u0633\u064A\u0629",
+  th: "\u0627\u0644\u062A\u0627\u064A\u0644\u0627\u0646\u062F\u064A\u0629",
+  vi: "\u0627\u0644\u0641\u064A\u062A\u0646\u0627\u0645\u064A\u0629"
 };
 var localeNamesZh = {
   en: "\u82F1\u8BED",
@@ -1119,7 +1139,11 @@ var localeNamesZh = {
   pl: "\u6CE2\u5170\u8BED",
   tr: "\u571F\u8033\u5176\u8BED",
   he: "\u5E0C\u4F2F\u6765\u8BED",
-  hi: "\u5370\u5730\u8BED"
+  hi: "\u5370\u5730\u8BED",
+  fa: "\u6CE2\u65AF\u8BED",
+  id: "\u5370\u5C3C\u8BED",
+  th: "\u6CF0\u8BED",
+  vi: "\u8D8A\u5357\u8BED"
 };
 var localeNamesJa = {
   en: "\u82F1\u8A9E",
@@ -1141,7 +1165,11 @@ var localeNamesJa = {
   pl: "\u30DD\u30FC\u30E9\u30F3\u30C9\u8A9E",
   tr: "\u30C8\u30EB\u30B3\u8A9E",
   he: "\u30D8\u30D6\u30E9\u30A4\u8A9E",
-  hi: "\u30D2\u30F3\u30C7\u30A3\u30FC\u8A9E"
+  hi: "\u30D2\u30F3\u30C7\u30A3\u30FC\u8A9E",
+  fa: "\u30DA\u30EB\u30B7\u30A2\u8A9E",
+  id: "\u30A4\u30F3\u30C9\u30CD\u30B7\u30A2\u8A9E",
+  th: "\u30BF\u30A4\u8A9E",
+  vi: "\u30D9\u30C8\u30CA\u30E0\u8A9E"
 };
 var localeNamesKo = {
   en: "\uC601\uC5B4",
@@ -1163,7 +1191,11 @@ var localeNamesKo = {
   pl: "\uD3F4\uB780\uB4DC\uC5B4",
   tr: "\uD130\uD0A4\uC5B4",
   he: "\uD788\uBE0C\uB9AC\uC5B4",
-  hi: "\uD78C\uB514\uC5B4"
+  hi: "\uD78C\uB514\uC5B4",
+  fa: "\uD398\uB974\uC2DC\uC544\uC5B4",
+  id: "\uC778\uB3C4\uB124\uC2DC\uC544\uC5B4",
+  th: "\uD0DC\uAD6D\uC5B4",
+  vi: "\uBCA0\uD2B8\uB0A8\uC5B4"
 };
 var localeNamesPt = {
   en: "Ingl\xEAs",
@@ -1185,7 +1217,11 @@ var localeNamesPt = {
   pl: "Polon\xEAs",
   tr: "Turco",
   he: "Hebraico",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Persa",
+  id: "Indon\xE9sio",
+  th: "Tailand\xEAs",
+  vi: "Vietnamita"
 };
 var localeNamesIt = {
   en: "Inglese",
@@ -1207,7 +1243,11 @@ var localeNamesIt = {
   pl: "Polacco",
   tr: "Turco",
   he: "Ebraico",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Persiano",
+  id: "Indonesiano",
+  th: "Tailandese",
+  vi: "Vietnamita"
 };
 var localeNamesRu = {
   en: "\u0410\u043D\u0433\u043B\u0438\u0439\u0441\u043A\u0438\u0439",
@@ -1229,7 +1269,11 @@ var localeNamesRu = {
   pl: "\u041F\u043E\u043B\u044C\u0441\u043A\u0438\u0439",
   tr: "\u0422\u0443\u0440\u0435\u0446\u043A\u0438\u0439",
   he: "\u0418\u0432\u0440\u0438\u0442",
-  hi: "\u0425\u0438\u043D\u0434\u0438"
+  hi: "\u0425\u0438\u043D\u0434\u0438",
+  fa: "\u041F\u0435\u0440\u0441\u0438\u0434\u0441\u043A\u0438\u0439",
+  id: "\u0418\u043D\u0434\u043E\u043D\u0435\u0437\u0438\u0439\u0441\u043A\u0438\u0439",
+  th: "\u0422\u0430\u0439\u0441\u043A\u0438\u0439",
+  vi: "\u0412\u044C\u0435\u0442\u043D\u0430\u043C\u0441\u043A\u0438\u0439"
 };
 var localeNamesNl = {
   en: "Engels",
@@ -1251,7 +1295,11 @@ var localeNamesNl = {
   pl: "Pools",
   tr: "Turks",
   he: "Hebreeuws",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Perzisch",
+  id: "Indonesisch",
+  th: "Thai",
+  vi: "Vietnamees"
 };
 var localeNamesSv = {
   en: "Engelska",
@@ -1273,7 +1321,11 @@ var localeNamesSv = {
   pl: "Polska",
   tr: "Turkiska",
   he: "Hebreiska",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Persiska",
+  id: "Indonesiska",
+  th: "Thail\xE4ndska",
+  vi: "Vietnamesiska"
 };
 var localeNamesNo = {
   en: "Engelsk",
@@ -1295,7 +1347,11 @@ var localeNamesNo = {
   pl: "Polsk",
   tr: "Tyrkisk",
   he: "Hebraisk",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Persisk",
+  id: "Indonesisk",
+  th: "Thai",
+  vi: "Vietnamesisk"
 };
 var localeNamesDa = {
   en: "Engelsk",
@@ -1317,7 +1373,11 @@ var localeNamesDa = {
   pl: "Polsk",
   tr: "Tyrkisk",
   he: "Hebraisk",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Persisk",
+  id: "Indonesisk",
+  th: "Thai",
+  vi: "Vietnamesisk"
 };
 var localeNamesFi = {
   en: "Englanti",
@@ -1339,7 +1399,11 @@ var localeNamesFi = {
   pl: "Puola",
   tr: "Turkki",
   he: "Heprea",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Persia",
+  id: "Indonesia",
+  th: "Thai",
+  vi: "Vietnam"
 };
 var localeNamesPl = {
   en: "Angielski",
@@ -1361,7 +1425,11 @@ var localeNamesPl = {
   pl: "Polski",
   tr: "Turecki",
   he: "Hebrajski",
-  hi: "Hindi"
+  hi: "Hindi",
+  fa: "Perski",
+  id: "Indonezyjski",
+  th: "Tajski",
+  vi: "Wietnamski"
 };
 var localeNamesTr = {
   en: "\u0130ngilizce",
@@ -1383,7 +1451,11 @@ var localeNamesTr = {
   pl: "Leh\xE7e",
   tr: "T\xFCrk\xE7e",
   he: "\u0130branice",
-  hi: "Hint\xE7e"
+  hi: "Hint\xE7e",
+  fa: "Fars\xE7a",
+  id: "Endonezce",
+  th: "Tayca",
+  vi: "Vietnamca"
 };
 var localeNamesHe = {
   en: "\u05D0\u05E0\u05D2\u05DC\u05D9\u05EA",
@@ -1405,7 +1477,11 @@ var localeNamesHe = {
   pl: "\u05E4\u05D5\u05DC\u05E0\u05D9\u05EA",
   tr: "\u05D8\u05D5\u05E8\u05E7\u05D9\u05EA",
   he: "\u05E2\u05D1\u05E8\u05D9\u05EA",
-  hi: "\u05D4\u05D9\u05E0\u05D3\u05D9"
+  hi: "\u05D4\u05D9\u05E0\u05D3\u05D9",
+  fa: "\u05E4\u05E8\u05E1\u05D9\u05EA",
+  id: "\u05D0\u05D9\u05E0\u05D3\u05D5\u05E0\u05D6\u05D9\u05EA",
+  th: "\u05EA\u05D0\u05D9\u05EA",
+  vi: "\u05D5\u05D9\u05D9\u05D8\u05E0\u05D0\u05DE\u05D9\u05EA"
 };
 var localeNamesHi = {
   en: "\u0905\u0902\u0917\u094D\u0930\u0947\u091C\u0940",
@@ -1427,7 +1503,11 @@ var localeNamesHi = {
   pl: "\u092A\u094B\u0932\u093F\u0936",
   tr: "\u0924\u0941\u0930\u094D\u0915\u0940",
   he: "\u0939\u093F\u092C\u094D\u0930\u0942",
-  hi: "\u0939\u093F\u0928\u094D\u0926\u0940"
+  hi: "\u0939\u093F\u0928\u094D\u0926\u0940",
+  fa: "\u092B\u093C\u093E\u0930\u0938\u0940",
+  id: "\u0907\u0902\u0921\u094B\u0928\u0947\u0936\u093F\u092F\u093E\u0908",
+  th: "\u0925\u093E\u0908",
+  vi: "\u0935\u093F\u092F\u0924\u0928\u093E\u092E\u0940"
 };
 var localeNamesByLanguage = {
   en: localeNamesEn,