Display every locales' content on navigation tree As this page layout uses tree for site navigation, I thought this presentation has the best discoverability and usablity. Although the `en/` links does not work at the moment, I'll change path construction strategy so it's kept as-is.

Changes

3 changed files (+39/-6)

• docs/build.ts
  • @@ -4,7 +4,7 @@ // SPDX-License-Identifier: Apache-2.0
    import { DenoFsReader } from "../filesystem_reader/deno_fs.ts"; import { DenoFsWriter } from "../filesystem_writer/deno_fs.ts"; - import { MultiLocaleTreeBuilder } from "../tree_builder/multi_locale_tree_builder.ts" + import { MultiLocaleTreeBuilder } from "../tree_builder/multi_locale_tree_builder.ts"; import { VaultParser } from "../metadata_parser/vault_parser.ts"; import { DefaultThemeBuilder } from "../page_builder/default_theme/builder.tsx";
  • @@ -29,7 +29,8 @@ const fileSystemWriter = new DenoFsWriter(outDir);
    const treeBuilder = new MultiLocaleTreeBuilder({ defaultLocale: "en", ignore(node) { - return node.name.startsWith(".") || (node.path.length === 1 && node.name.endsWith(".ts")); + return node.name.startsWith(".") || + (node.path.length === 1 && node.name.endsWith(".ts")); }, }); const metadataParser = new VaultParser();
• page_builder/default_theme/components/html.tsx
  • @@ -103,7 +103,8 @@ <SiteLayout.View
    aside={toc.length > 0 && <Toc.View toc={toc} />} nav={ <DocumentTreeUI.View - tree={topLevelDocs} + tree={tree} + currentLocale={locale} currentPath={document.file.path} /> }
• page_builder/default_theme/components/organisms/document_tree.tsx
  • @@ -9,6 +9,7 @@
    import type { Document, DocumentDirectory, + DocumentTree, } from "../../../../tree_builder/interface.ts"; import { css } from "../../css.ts";
  • @@ -36,15 +37,45 @@ }
    `; export interface ViewProps { - tree: ReadonlyArray<Document | DocumentDirectory>; + tree: DocumentTree; + + currentLocale: string; currentPath: readonly string[]; } - export function View({ tree, currentPath }: ViewProps) { + export function View({ tree, currentLocale, currentPath }: ViewProps) { + if (tree.locales.size > 1) { + return ( + <ul className={C.Root}> + {Array.from(tree.locales.entries()).map(([locale, items]) => ( + <li> + <details + className={C.Directory} + open={locale === currentLocale ? "" : undefined} + > + <summary>{locale}</summary> + + <ul className={C.List} lang={locale}> + {items.map((item) => ( + <Node value={item} currentPath={currentPath} /> + ))} + </ul> + </details> + </li> + ))} + </ul> + ); + } + + const singleLocale = tree.locales.get(tree.defaultLocale); + if (!singleLocale) { + throw new Error(`Locale not found: ${tree.defaultLocale}`); + } + return ( <ul className={C.Root}> - {tree.map((entry) => ( + {singleLocale.map((entry) => ( <Node value={entry} currentPath={currentPath}