@nutin/cli 2.1.0 → 3.0.0

package/templates/features/markdown/src/app/markdown/markdown-manifest.ts.hbs

@@ -0,0 +1,157 @@
+import { markdownLanguage } from './markdown-i18n.js';
+
+export interface IMarkdownHeading {
+  depth: number;
+  text: string;
+  id: string;
+}
+
+export interface IMarkdownPage {
+  slug: string;
+  title: string;
+  description: string;
+  section: string;
+  group: string | null;
+  order: number;
+  source: string;
+  headings: IMarkdownHeading[];
+  html: string;
+  ogImage?: string;
+  // With i18n: no translation exists, this is the default language's page.
+  fallback?: boolean;
+}
+
+export interface IMarkdownGroup {
+  id: string | null;
+  title: string | null;
+  pages: string[];
+}
+
+export interface IMarkdownSection {
+  id: string;
+  title: string;
+  description: string;
+  groups?: IMarkdownGroup[];
+  pages?: string[];
+}
+
+// Compiled from a folder's "landing" option: the index shown on its bare route.
+export interface IMarkdownLanding {
+  title: string;
+  description: string;
+}
+
+export interface IMarkdownSource {
+  id: string;
+  sectionInPath: boolean;
+}
+
+interface IMarkdownManifestData {
+  sections: IMarkdownSection[];
+  pages: Record<string, IMarkdownPage>;
+  landing?: IMarkdownLanding;
+}
+
+const EMPTY_MANIFEST: IMarkdownManifestData = { sections: [], pages: {} };
+
+// One compiled "markdownSources" folder (/generated/<id>.json, written at build time by
+// tools/builder/core/markdown — or /generated/<id>.<lang>.json per language with i18n, where
+// every getter reads the current language's data). Instances are owned by MarkdownManifestsService.
+export class MarkdownManifest {
+  public readonly id: string;
+  public readonly sectionInPath: boolean;
+  private readonly getLanguage: () => string | null;
+  private readonly _data = new Map<string, IMarkdownManifestData>();
+  private readonly _loading = new Map<string, Promise<void>>();
+  private readonly _failed = new Set<string>();
+
+  // getLanguage: the current language, or null without i18n (overridable for tests).
+  constructor({ id, sectionInPath }: IMarkdownSource, getLanguage: () => string | null = markdownLanguage) {
+    this.id = id;
+    this.sectionInPath = sectionInPath;
+    this.getLanguage = getLanguage;
+  }
+
+  private get lang(): string {
+    return this.getLanguage() ?? '';
+  }
+
+  private urlFor(lang: string): string {
+    return lang ? `/generated/${this.id}.${lang}.json` : `/generated/${this.id}.json`;
+  }
+
+  public get url(): string {
+    return this.urlFor(this.lang);
+  }
+
+  public get loaded(): boolean {
+    return this._data.has(this.lang);
+  }
+
+  // True when the last load for the current language failed: the manifest is empty because of
+  // an error, not because the folder has no pages.
+  public get loadFailed(): boolean {
+    return this._failed.has(this.lang);
+  }
+
+  // Fetched once per language. A failed load keeps it empty, sets loadFailed, and is retried on the next call.
+  public load(): Promise<void> {
+    const lang = this.lang;
+    let loading = this._loading.get(lang);
+    if (!loading) {
+      loading = this.fetchManifest(lang);
+      this._loading.set(lang, loading);
+    }
+    return loading;
+  }
+
+  private async fetchManifest(lang: string): Promise<void> {
+    const url = this.urlFor(lang);
+    try {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      this._data.set(lang, await response.json());
+      this._failed.delete(lang);
+    } catch (error) {
+      this._loading.delete(lang);
+      this._failed.add(lang);
+      console.error(`Markdown manifest load error (${url}):`, error);
+    }
+  }
+
+  private get data(): IMarkdownManifestData {
+    return this._data.get(this.lang) ?? EMPTY_MANIFEST;
+  }
+
+  // Set when the folder has a "landing": its bare route shows an index instead of the first page.
+  public get landing(): IMarkdownLanding | undefined {
+    return this.data.landing;
+  }
+
+  public get sections(): IMarkdownSection[] {
+    return this.data.sections;
+  }
+
+  public getPage(slug: string): IMarkdownPage | undefined {
+    return this.data.pages[slug];
+  }
+
+  public getSection(id: string): IMarkdownSection | undefined {
+    return this.data.sections.find((section) => section.id === id);
+  }
+
+  public get firstSlug(): string | undefined {
+    return this.firstSlugOf(this.data.sections[0]);
+  }
+
+  public firstSlugOf(section: IMarkdownSection | undefined): string | undefined {
+    const pages = section?.groups?.[0]?.pages ?? section?.pages;
+    return pages?.[0];
+  }
+
+  public get hasPages(): boolean {
+    return this.data.sections.some((section) =>
+      section.groups ? section.groups.some((group) => group.pages.length > 0) : (section.pages?.length ?? 0) > 0
+    );
+  }
+}

package/templates/features/markdown/src/app/markdown/markdown-manifests.service.test.js.hbs

@@ -0,0 +1,87 @@
+import nutinConfig from '#root/nutin.config.js';
+import distConfig from '#root/dist/nutin.config.js';
+import { MarkdownManifests, MarkdownManifestsService } from '#root/dist/src/app/markdown/markdown-manifests.service.js';
+import { resolveMarkdownSources } from '#root/dist/src/app/markdown/markdown-sources.js';
+
+// Builds a separate instance (the exported MarkdownManifestsService is left as it is),
+// then drops it from the registry.
+function freshManifests() {
+  MarkdownManifests.testingReset();
+  try {
+    return MarkdownManifests.getInstance();
+  } finally {
+    MarkdownManifests.testingReset();
+  }
+}
+
+describe('MarkdownManifestsService', () => {
+  let loadSpies = [];
+
+  afterEach(() => {
+    loadSpies.forEach((spy) => spy.restore());
+    loadSpies = [];
+    delete globalThis.__NUTIN_MARKDOWN_SOURCES__;
+  });
+
+  it('has one manifest per nutin.config.js "markdownSources" folder', () => {
+    const expected = resolveMarkdownSources(nutinConfig.markdownSources);
+    expect(MarkdownManifestsService.ids).toEqual(expected.map((source) => source.id));
+    expect(MarkdownManifestsService.all.map(({ id, sectionInPath }) => ({ id, sectionInPath }))).toEqual(expected);
+  });
+
+  it('returns the same manifest instance for an id', () => {
+    for (const id of MarkdownManifestsService.ids) {
+      expect(MarkdownManifestsService.get(id)).toBe(MarkdownManifestsService.get(id));
+    }
+  });
+
+  it('throws on an unknown id, listing the known ones', () => {
+    expect(() => MarkdownManifestsService.get('__unknown__')).toThrow('Unknown Markdown source "__unknown__"');
+    expect(() => MarkdownManifestsService.get('__unknown__')).toThrow(`known: ${MarkdownManifestsService.ids.join(', ')}`);
+  });
+
+  it('load() loads the manifest of an id and resolves to it', async () => {
+    const [id] = MarkdownManifestsService.ids;
+    const manifest = MarkdownManifestsService.get(id);
+    const loadSpy = spyOn(manifest, 'load').andCallFake(() => Promise.resolve());
+    loadSpies.push(loadSpy);
+    expect(await MarkdownManifestsService.load(id)).toBe(manifest);
+    expect(loadSpy.callCount).toBe(1);
+  });
+
+  it('load() rejects on an unknown id without loading anything', async () => {
+    let error;
+    try {
+      await MarkdownManifestsService.load('__unknown__');
+    } catch (e) {
+      error = e;
+    }
+    expect(error.message).toContain('Unknown Markdown source "__unknown__"');
+  });
+
+  it('loadAll() loads every manifest', async () => {
+    loadSpies = MarkdownManifestsService.all.map((manifest) => spyOn(manifest, 'load').andCallFake(() => Promise.resolve()));
+    await MarkdownManifestsService.loadAll();
+    loadSpies.forEach((spy) => expect(spy.callCount).toBe(1));
+  });
+
+  it('reads the folders from the builder define when bundled', () => {
+    globalThis.__NUTIN_MARKDOWN_SOURCES__ = JSON.stringify(['guides', { folder: 'content/api-docs/', routePrefix: 'api', sectionInPath: true }]);
+    const manifests = freshManifests();
+    expect(manifests.ids).toEqual(['guides', 'api']);
+    expect(manifests.get('api').sectionInPath).toBe(true);
+  });
+
+  it('has no manifests without "markdownSources", and says so for an unknown id', () => {
+    const saved = distConfig.markdownSources;
+    delete distConfig.markdownSources;
+    try {
+      const manifests = freshManifests();
+      expect(manifests.ids).toEqual([]);
+      expect(manifests.all).toEqual([]);
+      expect(() => manifests.get('docs')).toThrow('known: none');
+    } finally {
+      distConfig.markdownSources = saved;
+    }
+  });
+});

package/templates/features/markdown/src/app/markdown/markdown-manifests.service.ts.hbs

@@ -0,0 +1,50 @@
+import nutinConfig from '../../../nutin.config.js';
+import { Service } from '../../core/index.js';
+import { MarkdownManifest } from './markdown-manifest.js';
+import { IMarkdownSourcesConfig, MarkdownSourceEntry, resolveMarkdownSources } from './markdown-sources.js';
+
+// Every folder listed in nutin.config.js "markdownSources", by id (its routePrefix,
+// defaulting to the folder name). Manifests load on demand: MarkdownGuards load theirs
+// before a page renders; call loadAll() at startup to have them all available upfront.
+export class MarkdownManifests extends Service<MarkdownManifests> {
+  private readonly manifests = new Map<string, MarkdownManifest>();
+
+  constructor() {
+    super();
+    // Bundled builds get the folders from the builder's define; test runs on tsc output read the config itself.
+    // Used directly in `??` so esbuild folds the fallback away.
+    const sourceFolders: MarkdownSourceEntry[] = JSON.parse(globalThis.__NUTIN_MARKDOWN_SOURCES__
+      ?? JSON.stringify((nutinConfig.markdownSources as IMarkdownSourcesConfig | undefined)?.sourceFolders ?? []));
+    for (const source of resolveMarkdownSources({ sourceFolders })) {
+      this.manifests.set(source.id, new MarkdownManifest(source));
+    }
+  }
+
+  public get ids(): string[] {
+    return [...this.manifests.keys()];
+  }
+
+  public get all(): MarkdownManifest[] {
+    return [...this.manifests.values()];
+  }
+
+  public get(id: string): MarkdownManifest {
+    const manifest = this.manifests.get(id);
+    if (!manifest) {
+      throw new Error(`Unknown Markdown source "${id}" — known: ${this.ids.join(', ') || 'none'} (nutin.config.js "markdownSources")`);
+    }
+    return manifest;
+  }
+
+  public async load(id: string): Promise<MarkdownManifest> {
+    const manifest = this.get(id);
+    await manifest.load();
+    return manifest;
+  }
+
+  public async loadAll(): Promise<void> {
+    await Promise.all(this.all.map((manifest) => manifest.load()));
+  }
+}
+
+export const MarkdownManifestsService = /* @__PURE__ */ MarkdownManifests.getInstance();

package/templates/features/markdown/src/app/markdown/markdown-routes.test.js.hbs

@@ -0,0 +1,74 @@
+import { View } from '#root/dist/src/core/index.js';
+import { markdownRoutes } from '#root/dist/src/app/markdown/markdown-routes.js';
+import { MarkdownGuards } from '#root/dist/src/app/markdown/markdown-guards.js';
+import { MarkdownView } from '#root/dist/src/app/markdown/view/markdown.view.js';
+import { MarkdownManifestsService } from '#root/dist/src/app/markdown/markdown-manifests.service.js';
+
+// Swaps the configured folders for these, on the shared instance markdownRoutes() reads.
+function useSources(sources) {
+  Object.defineProperty(MarkdownManifestsService, 'all', { value: sources, configurable: true });
+}
+
+describe('markdownRoutes', () => {
+  afterEach(() => {
+    delete MarkdownManifestsService.all;
+  });
+
+  it('registers one guarded route per folder, with its section in the path when configured, lazy by default', async () => {
+    const routes = markdownRoutes();
+    const expected = MarkdownManifestsService.all.map(({ id, sectionInPath }) => (sectionInPath ? `/${id}/:section?/:slug?` : `/${id}/:slug?`));
+    expect(Object.keys(routes)).toEqual(expected);
+    for (const route of Object.values(routes)) {
+      expect(route.guards.length).toBe(1);
+      const view = route.view();
+      expect(typeof view.then).toBe('function');
+      expect(await view).toBeInstanceOf(MarkdownView);
+    }
+  });
+
+  it('builds each view with the "view" option, given the folder id', () => {
+    const ids = [];
+    class CustomView extends View {
+      constructor() { super({ viewName: 'custom' }); }
+    }
+    const routes = markdownRoutes({ view: (id) => { ids.push(id); return new CustomView(); } });
+    for (const route of Object.values(routes)) expect(route.view()).toBeInstanceOf(CustomView);
+    expect(ids).toEqual(MarkdownManifestsService.ids);
+  });
+
+  it('guards a plain folder with pageExists and a "sectionInPath" folder with sectionPageExists', () => {
+    useSources([{ id: 'guides', sectionInPath: false }, { id: 'api', sectionInPath: true }]);
+    const pageGuard = () => true;
+    const sectionGuard = () => true;
+    const pageSpy = spyOn(MarkdownGuards, 'pageExists').andCallFake(() => pageGuard);
+    const sectionSpy = spyOn(MarkdownGuards, 'sectionPageExists').andCallFake(() => sectionGuard);
+    try {
+      const routes = markdownRoutes({ view: () => new MarkdownView({ id: 'guides' }) });
+      expect(Object.keys(routes)).toEqual(['/guides/:slug?', '/api/:section?/:slug?']);
+      expect(routes['/guides/:slug?'].guards).toEqual([pageGuard]);
+      expect(routes['/api/:section?/:slug?'].guards).toEqual([sectionGuard]);
+      expect(pageSpy.calls).toEqual([['guides']]);
+      expect(sectionSpy.calls).toEqual([['api']]);
+    } finally {
+      pageSpy.restore();
+      sectionSpy.restore();
+    }
+  });
+
+  it('passes the folder id to the default lazy view, for "sectionInPath" folders too', async () => {
+    useSources([{ id: 'api', sectionInPath: true }]);
+    const getSpy = spyOn(MarkdownManifestsService, 'get').andCallFake(() => ({ id: 'api', sectionInPath: true }));
+    try {
+      const view = await markdownRoutes()['/api/:section?/:slug?'].view();
+      expect(view).toBeInstanceOf(MarkdownView);
+      expect(getSpy.lastCall).toEqual(['api']);
+    } finally {
+      getSpy.restore();
+    }
+  });
+
+  it('returns no routes without folders', () => {
+    useSources([]);
+    expect(markdownRoutes()).toEqual({});
+  });
+});

package/templates/features/markdown/src/app/markdown/markdown-routes.ts.hbs

@@ -0,0 +1,26 @@
+import { View } from '../../core/index.js';
+import { MarkdownGuards } from './markdown-guards.js';
+import { MarkdownManifestsService } from './markdown-manifests.service.js';
+
+export interface IMarkdownRoutesOptions {
+  // Builds the view of a folder's routes, e.g. a MarkdownView with your own components or a
+  // subclass of it. Called for every folder, with its id: return new MarkdownView({ id }) for
+  // the folders you don't customize. May return a Promise, to load the view lazily (see
+  // ViewFactory): e.g. import('./views/docs/docs.view.js').then((m) => new m.DocsView(id)).
+  view?: (id: string) => View | Promise<View>;
+}
+
+// One route per nutin.config.js "markdownSources" folder: '/<id>/:slug?', or
+// '/<id>/:section?/:slug?' with "sectionInPath: true". Spread into appRoutes; a route
+// written after the spread with the same path replaces the generated one.
+// By default, the routes are lazy: MarkdownView and its components are loaded on the first
+// visit to one of them, not with the rest of the app.
+export function markdownRoutes(options: IMarkdownRoutesOptions = {}): Nutin.Routes {
+  const view = options.view ?? ((id: string) => import('./view/markdown.view.js').then((m) => new m.MarkdownView({ id })));
+  return Object.fromEntries(
+    MarkdownManifestsService.all.map(({ id, sectionInPath }) => sectionInPath
+      ? [`/${id}/:section?/:slug?`, { view: () => view(id), guards: [MarkdownGuards.sectionPageExists(id)] }]
+      : [`/${id}/:slug?`, { view: () => view(id), guards: [MarkdownGuards.pageExists(id)] }]
+    )
+  );
+}

package/templates/features/markdown/src/app/markdown/markdown-sources.test.js.hbs

@@ -0,0 +1,22 @@
+import { resolveMarkdownSources } from '#root/dist/src/app/markdown/markdown-sources.js';
+
+describe('resolveMarkdownSources', () => {
+  // Same cases as tools/builder/core/markdown/markdown-compiler.test.js: the compiler names
+  // each manifest with this id, so both rules must agree.
+  it('derives manifest ids like the compiler does', () => {
+    const cases = [
+      ['content', 'content', false],
+      ['docs/My Guides', 'my-guides', false],
+      ['docs/guides/', 'guides', false],
+      [{ folder: 'x', routePrefix: 'api' }, 'api', false],
+      [{ folder: 'docs', sectionInPath: true }, 'docs', true],
+    ];
+    const sources = resolveMarkdownSources({ sourceFolders: cases.map(([entry]) => entry) });
+    expect(sources).toEqual(cases.map(([, id, sectionInPath]) => ({ id, sectionInPath })));
+  });
+
+  it('returns no sources when markdownSources is missing', () => {
+    expect(resolveMarkdownSources(undefined)).toEqual([]);
+    expect(resolveMarkdownSources({})).toEqual([]);
+  });
+});

package/templates/features/markdown/src/app/markdown/markdown-sources.ts.hbs

@@ -0,0 +1,42 @@
+import { IMarkdownSource } from './markdown-manifest.js';
+
+export type MarkdownSourceEntry = string | {
+  folder: string;
+  routePrefix?: string;
+  hubFiles?: string[];
+  sectionInPath?: boolean;
+  prefixReplacements?: [string, string][];
+  seo?: boolean;
+  ogImage?: string;
+  landing?: boolean | { title?: string; description?: string };
+};
+
+declare global {
+  // Set by the builder's esbuild define (tools/builder/core/prod-bundle/bundle-options.js):
+  // nutin.config.js's markdownSources.sourceFolders, as JSON. Undefined in tsc output (tests).
+  var __NUTIN_MARKDOWN_SOURCES__: string | undefined;
+}
+
+export interface IMarkdownSourcesConfig {
+  sourceFolders?: MarkdownSourceEntry[];
+}
+
+function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+// Mirrors normalizeSource() in tools/builder/core/markdown/markdown-compiler.js, which names
+// each manifest: keep both id rules identical (the build validates entries, not this).
+export function resolveMarkdownSources(config: IMarkdownSourcesConfig | undefined): IMarkdownSource[] {
+  return (config?.sourceFolders ?? []).map((entry) => {
+    const options = typeof entry === 'string' ? { folder: entry } : entry;
+    const folderName = options.folder.replace(/[\\/]+$/, '').split(/[\\/]/).pop() ?? '';
+    return {
+      id: options.routePrefix ?? slugify(folderName),
+      sectionInPath: options.sectionInPath === true,
+    };
+  });
+}

package/templates/features/markdown/src/app/markdown/view/markdown.view.html.hbs

@@ -0,0 +1,4 @@
+<div class="markdown-view">
+  <aside data-component="markdown-nav"></aside>
+  <div data-component="markdown-content"></div>
+</div>

package/templates/features/markdown/src/app/markdown/view/markdown.view.scss.hbs

@@ -0,0 +1,19 @@
+// Every selector is wrapped in :where(), so it has no specificity: any rule of your own wins.
+// Adjust sizes through the custom properties below, e.g. in your own stylesheet:
+//   .markdown-view { --markdown-nav-width: 20rem; }
+:where(.markdown-view) {
+  --markdown-gap: 2rem;
+  --markdown-nav-width: 16rem;
+  --markdown-toc-width: 14rem;
+  --markdown-line-height: 1.7;
+
+  display: flex;
+  gap: var(--markdown-gap);
+  padding: 2rem 1rem;
+}
+
+@media (max-width: 700px) {
+  :where(.markdown-view) {
+    flex-direction: column;
+  }
+}

package/templates/features/markdown/src/app/markdown/view/markdown.view.test.js.hbs

@@ -0,0 +1,125 @@
+import { MarkdownView } from '#root/dist/src/app/markdown/view/markdown.view.js';
+import { MarkdownManifest } from '#root/dist/src/app/markdown/markdown-manifest.js';
+import { MarkdownManifestsService } from '#root/dist/src/app/markdown/markdown-manifests.service.js';
+import { MarkdownNavComponent } from '#root/dist/src/app/markdown/components/markdown-nav/markdown-nav.component.js';
+import { MarkdownContentComponent } from '#root/dist/src/app/markdown/components/markdown-content/markdown-content.component.js';
+
+const page = (slug, section, title) => ({
+  slug, section, title, description: `About ${title}`, group: null, order: 0, source: `${slug}.md`, headings: [], html: `<h1>${title}</h1>`,
+});
+
+const DATA = {
+  sections: [
+    { id: 'api', title: 'API', description: 'The API.', pages: ['a'] },
+    { id: 'tools', title: 'Tools', description: '', pages: ['b'] },
+  ],
+  pages: { a: page('a', 'api', 'Page A'), b: page('b', 'tools', 'Page B') },
+};
+
+// A fresh manifest per test: the service's own manifests are shared singletons.
+async function manifestOf(data, sectionInPath = false) {
+  const originalFetch = global.fetch;
+  global.fetch = () => Promise.resolve({ ok: true, status: 200, json: () => Promise.resolve(data) });
+  try {
+    const manifest = new MarkdownManifest({ id: 'docs', sectionInPath }, () => null);
+    await manifest.load();
+    return manifest;
+  } finally {
+    global.fetch = originalFetch;
+  }
+}
+
+function viewOf(manifest, params = {}, options = {}) {
+  const view = new MarkdownView({ id: MarkdownManifestsService.ids[0], ...options });
+  view.manifest = manifest;
+  view.setRouteParams(params);
+  return view;
+}
+
+describe('MarkdownView', () => {
+  let replaceSpy;
+  let view;
+
+  beforeEach(() => {
+    // NavigationManager.replaceState() ends in history.replaceState(state, title, url).
+    replaceSpy = spyOn(window.history, 'replaceState').andCallFake(() => {});
+  });
+
+  afterEach(() => {
+    view?.onExit();
+    view?.destroy();
+    view = null;
+    replaceSpy.restore();
+  });
+
+  it('renders the page of the route, and uses its title as the document title', async () => {
+    view = viewOf(await manifestOf(DATA), { slug: 'b' });
+    view.render();
+    expect(view.getElement().querySelector('.markdown-content__body h1').textContent).toBe('Page B');
+    expect(view.documentTitle()).toBe('Page B');
+  });
+
+  it('without a landing, renders the first page on the bare route and points the URL at it', async () => {
+    view = viewOf(await manifestOf(DATA));
+    view.render();
+    view.onEnter();
+    expect(view.getElement().querySelector('.markdown-content__body h1').textContent).toBe('Page A');
+    expect(replaceSpy.lastCall[2]).toBe('/docs/a');
+  });
+
+  it('with a landing, renders it on the bare route and keeps the URL', async () => {
+    view = viewOf(await manifestOf({ ...DATA, landing: { title: 'Docs', description: 'Everything.' } }));
+    view.render();
+    view.onEnter();
+    const element = view.getElement();
+    expect(element.querySelector('.markdown-landing__title').textContent).toBe('Docs');
+    expect(element.querySelector('.markdown-landing__description').textContent).toBe('Everything.');
+    expect([...element.querySelectorAll('.markdown-landing__link')].map((a) => a.getAttribute('href'))).toEqual(['/docs/a', '/docs/b']);
+    expect(element.querySelector('.markdown-content__body')).toBe(null);
+    expect(replaceSpy.callCount).toBe(0);
+    expect(view.documentTitle()).toBe('Docs');
+  });
+
+  it('with sections in the URL, the folder landing links each section and the nav lists them all', async () => {
+    view = viewOf(await manifestOf({ ...DATA, landing: { title: 'Docs', description: '' } }, true));
+    view.render();
+    const element = view.getElement();
+    expect([...element.querySelectorAll('.markdown-landing__link')].map((a) => a.getAttribute('href'))).toEqual(['/docs/api', '/docs/tools']);
+    expect([...element.querySelectorAll('.markdown-nav__section-title')].map((s) => s.textContent)).toEqual(['API', 'Tools']);
+  });
+
+  it('with sections in the URL, a section landing lists its pages under its own title', async () => {
+    view = viewOf(await manifestOf({ ...DATA, landing: { title: 'Docs', description: '' } }, true), { section: 'api' });
+    view.render();
+    const element = view.getElement();
+    expect(element.querySelector('.markdown-landing__title').textContent).toBe('API');
+    expect([...element.querySelectorAll('.markdown-landing__link')].map((a) => a.getAttribute('href'))).toEqual(['/docs/api/a']);
+    expect(view.documentTitle()).toBe('API');
+  });
+
+  it('uses the nav and content components passed as options', async () => {
+    class MyNav extends MarkdownNavComponent {
+      constructor(el, config) { super(el, config, () => '<nav class="my-nav"></nav>'); }
+    }
+    class MyContent extends MarkdownContentComponent {}
+    view = viewOf(await manifestOf(DATA), { slug: 'a' }, { navComponent: MyNav, contentComponent: MyContent });
+    view.render();
+    expect(view.getElement().querySelector('.my-nav')).toBeTruthy();
+    expect(view.getElement().querySelector('.markdown-nav')).toBe(null);
+    expect(view.getElement().querySelector('.markdown-content__body')).toBeTruthy();
+  });
+
+  it('calls onContentRendered with the content element and the page', async () => {
+    const calls = [];
+    view = viewOf(await manifestOf(DATA), { slug: 'a' }, { onContentRendered: (element, shown) => calls.push([element.className, shown.slug]) });
+    view.render();
+    expect(calls).toEqual([['markdown-content', 'a']]);
+  });
+
+  it('renders without a nav when the template has no nav placeholder', async () => {
+    view = viewOf(await manifestOf(DATA), { slug: 'a' }, { template: '<div><div data-component="markdown-content"></div></div>' });
+    view.render();
+    expect(view.getElement().querySelector('.markdown-nav')).toBe(null);
+    expect(view.getElement().querySelector('.markdown-content__body')).toBeTruthy();
+  });
+});