@publier/shell 4.0.1 → 4.1.1

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { h as docsShell, i as DocsShellOptions } from "./integration-BNKc2flb.mjs";
+import { g as docsShell, i as DocsShellOptions } from "./integration-B_QSCkLI.mjs";
 import "astro/zod";
 //#region src/build/headers.d.ts
 /**

package/dist/{integration-BNKc2flb.d.mts → integration-B_QSCkLI.d.mts}

@@ -182,7 +182,23 @@ interface NavCta {
   label: string;
   href: string;
 }
+interface NavProduct {
+  label: string;
+  /** Local product URL prefix used to resolve the current selection. */
+  path: string;
+  /** Landing destination. Defaults to path. */
+  href?: string;
+  /** Omit for a product without versioned documentation. */
+  versions?: {
+    label: string;
+    path: string;
+    badge?: string;
+    default?: boolean;
+  }[];
+}
 interface NavVariant {
+  /** Optional product selector and independent version lists. */
+  products?: NavProduct[];
   brand: string;
   logo: {
     light?: string;
@@ -204,4 +220,4 @@ interface NavConfig {
 }
 declare function docsShell(options?: DocsShellOptions): AstroIntegration;
 //#endregion
-export { publierCascadeHoistPlugin as _, DocsSidebarMetaOverride as a, NavCta as c, NavPathRule as d, NavVariant as f, hoistMediaOutOfUtilitiesLayer as g, docsShell as h, DocsShellOptions as i, NavItem as l, SiteConfig as m, DocVersionConfig as n, LlmsConfig as o, SidebarAnchorConfig as p, DocsConfig as r, NavConfig as s, AnnouncementConfig as t, NavLink as u };
+export { hoistMediaOutOfUtilitiesLayer as _, DocsSidebarMetaOverride as a, NavCta as c, NavPathRule as d, NavProduct as f, docsShell as g, SiteConfig as h, DocsShellOptions as i, NavItem as l, SidebarAnchorConfig as m, DocVersionConfig as n, LlmsConfig as o, NavVariant as p, DocsConfig as r, NavConfig as s, AnnouncementConfig as t, NavLink as u, publierCascadeHoistPlugin as v };

package/dist/integration.d.mts

@@ -1,2 +1,2 @@
-import { _ as publierCascadeHoistPlugin, a as DocsSidebarMetaOverride, c as NavCta, d as NavPathRule, f as NavVariant, g as hoistMediaOutOfUtilitiesLayer, h as docsShell, i as DocsShellOptions, l as NavItem, m as SiteConfig, n as DocVersionConfig, o as LlmsConfig, p as SidebarAnchorConfig, r as DocsConfig, s as NavConfig, t as AnnouncementConfig, u as NavLink } from "./integration-BNKc2flb.mjs";
-export { AnnouncementConfig, DocVersionConfig, DocsConfig, DocsShellOptions, DocsSidebarMetaOverride, LlmsConfig, NavConfig, NavCta, NavItem, NavLink, NavPathRule, NavVariant, SidebarAnchorConfig, SiteConfig, docsShell, hoistMediaOutOfUtilitiesLayer, publierCascadeHoistPlugin };
+import { _ as hoistMediaOutOfUtilitiesLayer, a as DocsSidebarMetaOverride, c as NavCta, d as NavPathRule, f as NavProduct, g as docsShell, h as SiteConfig, i as DocsShellOptions, l as NavItem, m as SidebarAnchorConfig, n as DocVersionConfig, o as LlmsConfig, p as NavVariant, r as DocsConfig, s as NavConfig, t as AnnouncementConfig, u as NavLink, v as publierCascadeHoistPlugin } from "./integration-B_QSCkLI.mjs";
+export { AnnouncementConfig, DocVersionConfig, DocsConfig, DocsShellOptions, DocsSidebarMetaOverride, LlmsConfig, NavConfig, NavCta, NavItem, NavLink, NavPathRule, NavProduct, NavVariant, SidebarAnchorConfig, SiteConfig, docsShell, hoistMediaOutOfUtilitiesLayer, publierCascadeHoistPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publier/shell",
-  "version": "4.0.1",
+  "version": "4.1.1",
   "license": "UNLICENSED",
   "description": "Qwik + Astro docs layout for Publier sites.",
   "type": "module",
@@ -115,7 +115,7 @@
     "@github/details-menu-element": "^1.0.13",
     "@github/relative-time-element": "^5.3.1",
     "@github/tab-container-element": "^4.9.0",
-    "@publier/native": "4.0.0",
+    "@publier/native": "5.0.1",
     "@tailwindcss/typography": "^0.5.20",
     "astro-pagefind": "^2.0.1",
     "daisyui": "^5.7.22",

package/src/components/top-nav-mobile.astro

@@ -4,8 +4,8 @@ import { navConfig, type NavVariant } from 'virtual:publier-nav-config';
 import type { TopNavMobileProps } from './types.ts';
 
 const EMPTY: NavVariant = { brand: '', logo: null, tabs: [], links: [], cta: null };
-const { variant = 'default', currentPath = '' } = Astro.props as TopNavMobileProps;
-const v = navConfig.variants[variant] ?? navConfig.variants.default ?? EMPTY;
+const { variant = 'default', currentPath = '', variantConfig } = Astro.props as TopNavMobileProps;
+const v = variantConfig ?? navConfig.variants[variant] ?? navConfig.variants.default ?? EMPTY;
 const html = shellRenderTopNavMobile(JSON.stringify({ currentPath, v }));
 ---
 <Fragment set:html={html} />

package/src/components/top-nav.astro

@@ -4,8 +4,8 @@ import { navConfig, type NavVariant } from 'virtual:publier-nav-config';
 import type { TopNavProps } from './types.ts';
 
 const EMPTY: NavVariant = { brand: '', logo: null, tabs: [], links: [], cta: null };
-const { variant = 'default', currentPath = '' } = Astro.props as TopNavProps;
-const v = navConfig.variants[variant] ?? navConfig.variants.default ?? EMPTY;
+const { variant = 'default', currentPath = '', variantConfig } = Astro.props as TopNavProps;
+const v = variantConfig ?? navConfig.variants[variant] ?? navConfig.variants.default ?? EMPTY;
 const [searchSlotHtml, themeSlotHtml, mobileSlotHtml] = await Promise.all([
 	Astro.slots.has('search') ? Astro.slots.render('search') : Promise.resolve(null),
 	Astro.slots.has('theme') ? Astro.slots.render('theme') : Promise.resolve(null),

package/src/components/types.ts

@@ -475,12 +475,15 @@ export interface TileGridProps {
 export interface TopNavProps {
 	/** Variant name from `publier.config.yaml` nav block. Default: `"default"`. */
 	variant?: string;
+	/** Resolved navigation for a layout that derives its own docs sections. */
+	variantConfig?: import('virtual:publier-nav-config').NavVariant;
 	/** Current page path for active highlighting. Pass `Astro.url.pathname`. */
 	currentPath?: string;
 }
 
 export interface TopNavMobileProps {
 	variant?: string;
+	variantConfig?: import('virtual:publier-nav-config').NavVariant;
 	currentPath?: string;
 }
 

package/src/layouts/base-layout.astro

@@ -10,11 +10,11 @@ import { announcement } from 'virtual:publier-announcement';
 import { appearance } from 'virtual:publier-appearance';
 import { feeds } from 'virtual:publier-feeds';
 import { fonts } from 'virtual:publier-fonts';
-import { navConfig } from 'virtual:publier-nav-config';
+import { navConfig, type NavVariant } from 'virtual:publier-nav-config';
 import { site } from 'virtual:publier-site';
 
-interface Props { title: string; description?: string; nav?: string | false; class?: string; lang?: string }
-const { title, description, nav: navProp, class: className, lang = Astro.currentLocale ?? 'en' } = Astro.props;
+interface Props { title: string; description?: string; nav?: string | false; navConfig?: NavVariant; class?: string; lang?: string }
+const { title, description, nav: navProp, navConfig: resolvedNav, class: className, lang = Astro.currentLocale ?? 'en' } = Astro.props;
 const currentPath = Astro.url.pathname;
 let navVariant: string | false;
 if (navProp !== undefined) {
@@ -54,10 +54,10 @@ const [head, bodyOpen, bodyClose] = JSON.parse(shellRenderBaseLayout(JSON.string
 <slot name="skip" />
 <Fragment set:html={bodyOpen} />
 {navVariant !== false && (
-	<TopNav variant={navVariant} currentPath={currentPath}>
+	<TopNav variant={navVariant} variantConfig={resolvedNav} currentPath={currentPath}>
 		{navConfig.searchEnabled && <SearchButton slot="search" />}
 		<ThemeToggle slot="theme" default={appearance.default} strict={appearance.strict} />
-		<TopNavMobile slot="mobile" variant={navVariant} currentPath={currentPath} />
+		<TopNavMobile slot="mobile" variant={navVariant} variantConfig={resolvedNav} currentPath={currentPath} />
 	</TopNav>
 )}
 <slot />

package/src/routes/docs-slug.astro

@@ -1,10 +1,12 @@
 ---
 import { getCollection, render } from 'astro:content';
 import BaseLayout from '../layouts/base-layout.astro';
-import { type BreadcrumbItem, DocsLayout, LastModified, SectionSwitcher, Sidebar, SkipLink, TableOfContents } from '../components/index.ts';
+import { type BreadcrumbItem, DocsLayout, LastModified, Sidebar, SkipLink, TableOfContents } from '../components/index.ts';
 import { buildSidebar, entryToPage } from '@publier/shell/search';
 import { shellPlanDocsSlug, shellRenderDocsSlug } from '@publier/native';
 import { docsConfig } from 'virtual:publier-docs-config';
+import { navConfig, type NavVariant } from 'virtual:publier-nav-config';
+import { site } from 'virtual:publier-site';
 import '../styles/expressive-code.css';
 export async function getStaticPaths() {
 	return (await getCollection('docs')).map((entry) => ({ params: { slug: entry.id.replace(/\.(mdx?|md)$/, '').replace(/\/index$/, '').replace(/^index$/, '') || undefined }, props: { entry } }));
@@ -22,6 +24,13 @@ const sections = [
 		return page ? [{ label: page.url === path ? page.frontmatter.title : section, href: page.url }] : [];
 	}),
 ];
+
+const configuredNav = navConfig.variants.docs;
+const docsNav: NavVariant = { ...(configuredNav ?? { brand: site.name, logo: site.logo, tabs: sections, links: [], cta: null }) };
+
+if (!docsNav.products?.length && docsConfig.versions.length > 0) {
+	docsNav.products = [{ label: 'Documentation', path: '/', href: '/docs', versions: docsConfig.versions }];
+}
 const breadcrumbs = plan.breadcrumbs.map((crumb) => {
 	const page = pages.find((page) => page.url === crumb.href);
 	return page && crumb.href !== '/docs' ? { ...crumb, label: page.frontmatter.title } : crumb;
@@ -31,12 +40,11 @@ const sidebarItems = buildSidebar(pages.filter((_, index) => ids.has(all[index].
 const [bodyHead, bodyTail] = shellRenderDocsSlug(JSON.stringify({ title: entry.data.title, description: entry.data.description ?? null })).split('<!--publier-content-slot-->');
 const lastUpdated = entry.data.lastUpdated instanceof Date ? entry.data.lastUpdated : null;
 ---
-<BaseLayout title={`${entry.data.title} — Docs`} description={entry.data.description} nav="docs">
+<BaseLayout title={`${entry.data.title} — Docs`} description={entry.data.description} nav="docs" navConfig={docsNav}>
 	<SkipLink slot="skip" targetId="main-content" />
 	<DocsLayout breadcrumbs={breadcrumbs.length > 2 ? breadcrumbs : undefined}>
 		<Fragment slot="sidebar">
-			<SectionSwitcher sections={sections} currentPath={plan.current_path} />
-			<Sidebar items={sidebarItems} currentPath={plan.current_path} versions={docsConfig.versions.length > 0 ? docsConfig.versions : undefined} anchors={docsConfig.anchors.length > 0 ? docsConfig.anchors : undefined} scope={plan.scope} />
+			<Sidebar items={sidebarItems} currentPath={plan.current_path} anchors={docsConfig.anchors.length > 0 ? docsConfig.anchors : undefined} scope={plan.scope} />
 		</Fragment>
 		<TableOfContents slot="toc" headings={headings} />
 		<Fragment set:html={bodyHead} />

package/src/styles/base.css

@@ -666,3 +666,55 @@ header.alert[data-publier-banner] [data-publier-banner-dismiss] {
 .prose :where(h2, h3, h4, h5, h6)[id] {
 	scroll-margin-top: 5rem;
 }
+
+/* Documentation keeps product selection and section navigation in the header.
+ * Keep the sidebar and anchor offsets in step with both header rows. */
+body:has([data-publier-docs-tabs]) {
+	--publier-header-height: 7.125rem;
+}
+[data-publier-docs-header] .navbar-start {
+	flex: 0 0 auto;
+	width: auto;
+}
+[data-publier-docs-header] .navbar {
+	gap: 0.75rem;
+}
+[data-publier-docs-tabs] {
+	border-top: 1px solid var(--color-base-300);
+}
+[data-publier-docs-tabs] > div {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding-inline: 2rem;
+	min-height: 3rem;
+}
+[data-publier-docs-tabs] a.btn {
+	border-radius: 0;
+	height: 3rem;
+	border-bottom: 2px solid transparent;
+	background: transparent;
+	white-space: nowrap;
+}
+[data-publier-docs-tabs] a[aria-current="page"] {
+	border-bottom-color: var(--color-primary);
+	color: var(--color-primary);
+}
+[data-publier-docs-sidebar],
+aside[aria-label="Table of contents"] {
+	top: var(--publier-header-height, 4rem);
+	max-height: calc(100vh - var(--publier-header-height, 4rem));
+}
+body:has([data-publier-docs-header]) :is(h2, h3, h4)[id] {
+	scroll-margin-top: calc(var(--publier-header-height, 4rem) + 1rem);
+}
+@media (width < 64rem) {
+	[data-publier-docs-tabs] > div {
+		padding-inline: 1rem;
+		gap: 0;
+		overflow-x: auto;
+	}
+	[data-publier-docs-tabs] a.btn {
+		padding-inline: 0.75rem;
+	}
+}

package/src/virtual-modules.d.ts

@@ -44,7 +44,19 @@ declare module 'virtual:publier-nav-config' {
 		href: string;
 	}
 
+	export interface NavProduct {
+		label: string;
+		/** Local product URL prefix used to resolve the current selection. */
+		path: string;
+		/** Landing destination. Defaults to path. */
+		href?: string;
+		/** Omit for a product without versioned documentation. */
+		versions?: { label: string; path: string; badge?: string; default?: boolean }[];
+	}
+
 	export interface NavVariant {
+		/** Optional product selector and independent version lists. */
+		products?: NavProduct[];
 		/** Brand text next to (or replacing) the logo. */
 		brand: string;
 		/** Logo paths. Null when no logo configured. */