@publier/shell 3.4.3 → 3.5.0

package/dist/runtime/lazy-upgrade-registry.d.mts

@@ -37,5 +37,6 @@ declare const upgradeThemeToggle: () => Promise<unknown>;
  * itself on `astro:page-load` after the first import.
  */
 declare const upgradeImageZoom: () => Promise<unknown>;
+declare const upgradeDetailsMenu: () => Promise<unknown>;
 //#endregion
-export { upgradeClipboardCopy, upgradeImageZoom, upgradeRelativeTime, upgradeTabContainer, upgradeThemeToggle };
+export { upgradeClipboardCopy, upgradeDetailsMenu, upgradeImageZoom, upgradeRelativeTime, upgradeTabContainer, upgradeThemeToggle };

package/dist/runtime/lazy-upgrade-registry.mjs

@@ -1 +1 @@
-const e=()=>import(`@github/clipboard-copy-element`),t=()=>import(`@github/tab-container-element`),n=()=>import(`@github/relative-time-element`),r=()=>import(`../theme-toggle-element-DJTP9Mbw.mjs`),i=()=>import(`../image-zoom-runtime-CnJeWrYp.mjs`);export{e as upgradeClipboardCopy,i as upgradeImageZoom,n as upgradeRelativeTime,t as upgradeTabContainer,r as upgradeThemeToggle};
+const e=()=>import(`@github/clipboard-copy-element`),t=()=>import(`@github/tab-container-element`),n=()=>import(`@github/relative-time-element`),r=()=>import(`../theme-toggle-element-DJTP9Mbw.mjs`),i=()=>import(`../image-zoom-runtime-CnJeWrYp.mjs`),a=()=>import(`@github/details-menu-element`);export{e as upgradeClipboardCopy,a as upgradeDetailsMenu,i as upgradeImageZoom,n as upgradeRelativeTime,t as upgradeTabContainer,r as upgradeThemeToggle};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publier/shell",
-  "version": "3.4.3",
+  "version": "3.5.0",
   "license": "UNLICENSED",
   "description": "Qwik + Astro docs layout for Publier sites.",
   "_filesRationale": "mixed: dist for build-time TS + source globs for shipped .astro components",
@@ -113,9 +113,10 @@
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@github/clipboard-copy-element": "^1.3.2",
+    "@github/details-menu-element": "^1.0.13",
     "@github/relative-time-element": "^5.3.1",
     "@github/tab-container-element": "^4.9.0",
-    "@publier/native": "2.2.1",
+    "@publier/native": "2.2.2",
     "@tailwindcss/typography": "^0.5.20",
     "astro-pagefind": "^2.0.1",
     "daisyui": "^5.7.22",

package/src/components/index.ts

@@ -37,6 +37,7 @@ export { default as OpenInAI } from './open-in-ai.astro';
 export { default as PackageInstall } from './package-install.astro';
 export { default as Panels } from './panels.astro';
 export { default as SearchButton } from './search-button.astro';
+export { default as SectionSwitcher } from './section-switcher.astro';
 export { default as Sidebar } from './sidebar.astro';
 export { default as SkipLink } from './skip-link.astro';
 export { default as Steps } from './steps.astro';

package/src/components/section-switcher.astro

@@ -0,0 +1,25 @@
+---
+import { navigationActiveIndex } from '@publier/native';
+
+interface Props {
+	sections: { label: string; href: string }[];
+	currentPath: string;
+}
+const { sections, currentPath } = Astro.props;
+const active = navigationActiveIndex(JSON.stringify(sections), currentPath);
+---
+{sections.length > 1 && (
+  <nav aria-label="Documentation sections" class="mb-4">
+    <details class="dropdown w-full">
+      <summary class="btn btn-outline w-full justify-between font-normal" aria-label={`Documentation: ${sections[active]?.label ?? 'Choose a section'}`}>
+        <span class="truncate">{sections[active]?.label ?? 'Choose a section'}</span>
+        <span aria-hidden="true">⌄</span>
+      </summary>
+      <details-menu role="menu" class="dropdown-content menu bg-base-100 rounded-box border border-base-300 shadow-lg z-30 w-full p-2">
+        {sections.map((section, index) => (
+          <li role="none"><a role="menuitem" href={section.href} aria-current={index === active ? 'location' : undefined}>{section.label}</a></li>
+        ))}
+      </details-menu>
+    </details>
+  </nav>
+)}

package/src/routes/docs-slug.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection, render } from 'astro:content';
 import BaseLayout from '../layouts/base-layout.astro';
-import { type BreadcrumbItem, DocsLayout, LastModified, Sidebar, SkipLink, TableOfContents } from '../components/index.ts';
+import { type BreadcrumbItem, DocsLayout, LastModified, SectionSwitcher, 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';
@@ -13,15 +13,31 @@ const { entry } = Astro.props;
 const { Content, headings } = await render(entry);
 const all = await getCollection('docs');
 const plan = JSON.parse(shellPlanDocsSlug(JSON.stringify({ entry_id: entry.id, title: entry.data.title, description: entry.data.description ?? null, tab_sections: docsConfig.tabSections, all_entry_ids: all.map((e) => e.id) }))) as { breadcrumbs: BreadcrumbItem[]; section_entry_ids: string[]; scope: string; current_path: string; sidebar_persist_key: string };
+const pages = all.map((e) => entryToPage({ slug: e.id.replace(/\.(mdx?|md)$/, ''), data: e.data, headings: [] }, { urlPrefix: '/docs' }));
+const sections = [
+	...(pages.some((page) => page.url === '/docs') ? [{ label: 'All documentation', href: '/docs' }] : []),
+	...docsConfig.tabSections.flatMap((section) => {
+		const path = `/docs/${section}`;
+		const page = pages.find((page) => page.url === path) ?? pages.find((page) => page.url.startsWith(`${path}/`));
+		return page ? [{ label: page.url === path ? page.frontmatter.title : section, href: page.url }] : [];
+	}),
+];
+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;
+});
 const ids = new Set(plan.section_entry_ids);
-const sidebarItems = buildSidebar(all.filter((e) => ids.has(e.id)).map((e) => entryToPage({ slug: e.id.replace(/\.(mdx?|md)$/, ''), data: e.data, headings: [] }, { urlPrefix: '/docs' })), { urlPrefix: '/docs', meta: docsConfig.sidebarMeta });
+const sidebarItems = buildSidebar(pages.filter((_, index) => ids.has(all[index].id)), { urlPrefix: '/docs', meta: docsConfig.sidebarMeta });
 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">
 	<SkipLink slot="skip" targetId="main-content" />
-	<DocsLayout breadcrumbs={plan.breadcrumbs.length > 2 ? plan.breadcrumbs : undefined} sidebarPersistKey={plan.sidebar_persist_key}>
-		<Sidebar slot="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} />
+	<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} />
+		</Fragment>
 		<TableOfContents slot="toc" headings={headings} />
 		<Fragment set:html={bodyHead} />
 		<Content />

package/src/styles/base.css

@@ -625,3 +625,23 @@ header.alert[data-publier-banner] [data-publier-banner-dismiss] {
 	margin-inline-start: 0;
 	color: var(--color-base-content);
 }
+
+/* Native dialog top-layer placement keeps mobile docs above the sticky header. */
+.publier-docs-dialog {
+	justify-items: start;
+	align-items: stretch;
+}
+.publier-docs-dialog .modal-box {
+	width: min(20rem, calc(100vw - 2rem));
+	max-width: none;
+	max-height: 100dvh;
+	height: 100dvh;
+	border-radius: 0;
+	padding: 1rem;
+}
+[data-publier-mobile-toc] .publier-toc__label {
+	display: none;
+}
+.prose :where(h2, h3, h4, h5, h6)[id] {
+	scroll-margin-top: 5rem;
+}