element-book 0.0.6 → 0.0.7

package/dist/data/element-book-entry/element-book-entry.d.ts

@@ -7,3 +7,6 @@ export type ElementBookRoot = {
     parent: undefined;
 };
 export type ElementBookEntry = ElementBookChapter | ElementBookPage | ElementBookRoot;
+export declare function isElementBookEntry<SpecificType extends ElementBookEntryTypeEnum>(entry: unknown, type: SpecificType): entry is Extract<ElementBookEntry, {
+    type: SpecificType;
+}>;

package/dist/data/element-book-entry/element-book-entry.js

@@ -1 +1,4 @@
-export {};
+import { typedHasProperty } from '@augment-vir/common';
+export function isElementBookEntry(entry, type) {
+    return typedHasProperty(entry, 'type') && entry.type === type;
+}

package/dist/data/element-book-entry/entry-tree/entry-tree.js

@@ -16,7 +16,7 @@ export function createEmptyEntryTreeRoot() {
     return rootNode;
 }
 export function titleToBreadcrumb(title) {
-    return collapseWhiteSpace(title).replaceAll(/\s/g, '-');
+    return collapseWhiteSpace(title).toLowerCase().replaceAll(/\s/g, '-');
 }
 export function entriesToTree(entries) {
     const tree = createEmptyEntryTreeRoot();

package/dist/data/element-book-entry/entry-tree/walk-entry-tree.d.ts

@@ -1,6 +1,5 @@
 import { MaybePromise } from '@augment-vir/common';
 import { EntryTreeNode } from './entry-tree';
-export declare function findFirstPageBreadcrumbs(entryTree: Readonly<EntryTreeNode>): string[];
 /**
  * Walk the whole given tree, calling callback on each node. If callback returns the boolean false
  * exactly, then all walking will abort. If callback returns a promise, this function will return a

package/dist/data/element-book-entry/entry-tree/walk-entry-tree.js

@@ -1,19 +1,3 @@
-import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
-import { doesNodeHaveEntryType, listBreadcrumbs } from './entry-tree';
-export function findFirstPageBreadcrumbs(entryTree) {
-    let pageEntry;
-    walkEntryTree(entryTree, (node) => {
-        if (doesNodeHaveEntryType(node, ElementBookEntryTypeEnum.Page)) {
-            pageEntry = node;
-            return false;
-        }
-        return;
-    });
-    if (!pageEntry) {
-        return [];
-    }
-    return listBreadcrumbs(pageEntry.entry).concat(pageEntry.breadcrumb);
-}
 /**
  * Walk the whole given tree, calling callback on each node. If callback returns the boolean false
  * exactly, then all walking will abort. If callback returns a promise, this function will return a

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './data/element-book-entry/element-book-chapter/element-book-chapter';
+export * from './data/element-book-entry/element-book-entry';
 export * from './data/element-book-entry/element-book-page/element-book-page';
 export * from './data/element-book-entry/element-book-page/element-book-page-example';
 export * from './ui/elements/element-book-app.element';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './data/element-book-entry/element-book-chapter/element-book-chapter';
+export * from './data/element-book-entry/element-book-entry';
 export * from './data/element-book-entry/element-book-page/element-book-page';
 export * from './data/element-book-entry/element-book-page/element-book-page-example';
 export * from './ui/elements/element-book-app.element';

package/dist/ui/elements/element-book-app.element.js

@@ -1,6 +1,8 @@
+import { extractErrorMessage } from '@augment-vir/common';
 import { assign, css, defineElement, html, listen } from 'element-vir';
-import { entriesToTree, findEntryByBreadcrumbs, } from '../../data/element-book-entry/entry-tree/entry-tree';
-import { findFirstPageBreadcrumbs } from '../../data/element-book-entry/entry-tree/walk-entry-tree';
+import { isElementBookEntry, } from '../../data/element-book-entry/element-book-entry';
+import { ElementBookEntryTypeEnum } from '../../data/element-book-entry/element-book-entry-type';
+import { entriesToTree, findEntryByBreadcrumbs, listBreadcrumbs, } from '../../data/element-book-entry/entry-tree/entry-tree';
 import { createElementBookRouter } from '../../routing/create-element-book-router';
 import { emptyElementBookFullRoute, } from '../../routing/element-book-routing';
 import { setThemeCssVars } from '../color-theme/color-theme';
@@ -65,71 +67,80 @@ export const ElementBookApp = defineElement()({
         setThemeCssVars(host, state.colors.theme);
     },
     renderCallback: ({ state, inputs, host, updateState }) => {
-        if (inputs.themeColor !== state.colors?.original) {
-            const newTheme = createTheme(inputs.themeColor);
-            updateState({
-                colors: {
-                    original: inputs.themeColor,
-                    theme: newTheme,
-                },
-            });
-            setThemeCssVars(host, newTheme);
-        }
-        function updateRoutes(newRoute) {
-            if (state.router) {
-                state.router.setRoutes(newRoute);
-            }
-            else {
+        try {
+            if (inputs.themeColor !== state.colors?.original) {
+                const newTheme = createTheme(inputs.themeColor);
                 updateState({
-                    currentRoute: {
-                        ...state.currentRoute,
-                        ...newRoute,
+                    colors: {
+                        original: inputs.themeColor,
+                        theme: newTheme,
                     },
                 });
+                setThemeCssVars(host, newTheme);
             }
-        }
-        const entriesTree = entriesToTree(inputs.entries);
-        if (!findEntryByBreadcrumbs(state.currentRoute.paths, entriesTree)) {
-            const firstPageBreadcrumbs = findFirstPageBreadcrumbs(entriesTree);
-            const defaultPath = inputs.defaultPath ??
-                (firstPageBreadcrumbs.length ? firstPageBreadcrumbs : undefined);
-            if (defaultPath && defaultPath.length) {
-                const newRoute = {
-                    paths: defaultPath,
-                };
-                updateRoutes(newRoute);
+            function updateRoutes(newRoute) {
+                if (state.router) {
+                    state.router.setRoutes(newRoute);
+                }
+                else {
+                    updateState({
+                        currentRoute: {
+                            ...state.currentRoute,
+                            ...newRoute,
+                        },
+                    });
+                }
             }
+            const entriesTree = entriesToTree(inputs.entries);
+            const initialNode = findEntryByBreadcrumbs(state.currentRoute.paths, entriesTree);
+            if (!initialNode ||
+                isElementBookEntry(initialNode.entry, ElementBookEntryTypeEnum.Root)) {
+                const firstChild = Object.values(entriesTree.children)[0];
+                if (!firstChild) {
+                    throw new Error(`No entries exist.`);
+                }
+                const firstEntryBreadcrumbs = listBreadcrumbs(firstChild.entry, true);
+                const defaultPath = inputs.defaultPath ??
+                    (firstEntryBreadcrumbs.length ? firstEntryBreadcrumbs : undefined);
+                if (defaultPath && defaultPath.length) {
+                    const newRoute = {
+                        paths: defaultPath,
+                    };
+                    updateRoutes(newRoute);
+                }
+            }
+            const currentNode = findEntryByBreadcrumbs(state.currentRoute.paths, entriesTree);
+            if (!currentNode) {
+                throw new Error(`Tried to self-correct for invalid path ${state.currentRoute.paths.join('/')}
+                        but failed to do so.`);
+            }
+            return html `
+                <div
+                    class="root"
+                    ${listen(ChangeRouteEvent, (event) => {
+                updateRoutes(event.detail);
+            })}
+                >
+                    <${ElementBookNav}
+                        ${assign(ElementBookNav, {
+                tree: entriesTree,
+                router: state.router,
+                selectedPath: state.currentRoute.paths,
+            })}
+                    ></${ElementBookNav}>
+                    <${ElementBookEntryDisplay}
+                        ${assign(ElementBookEntryDisplay, {
+                currentRoute: state.currentRoute,
+                currentNode,
+            })}
+                    ></${ElementBookEntryDisplay}>
+                </div>
+            `;
         }
-        const currentNode = findEntryByBreadcrumbs(state.currentRoute.paths, entriesTree);
-        if (!currentNode) {
+        catch (error) {
             return html `
-                <p class="error">
-                    Tried to self-correct for invalid path ${state.currentRoute.paths.join('/')} but
-                    failed to do so.
-                </p>
+                <p class="error">${extractErrorMessage(error)}</p>
             `;
         }
-        return html `
-            <div
-                class="root"
-                ${listen(ChangeRouteEvent, (event) => {
-            updateRoutes(event.detail);
-        })}
-            >
-                <${ElementBookNav}
-                    ${assign(ElementBookNav, {
-            tree: entriesTree,
-            router: state.router,
-            selectedPath: state.currentRoute.paths,
-        })}
-                ></${ElementBookNav}>
-                <${ElementBookEntryDisplay}
-                    ${assign(ElementBookEntryDisplay, {
-            currentRoute: state.currentRoute,
-            currentNode,
-        })}
-                ></${ElementBookEntryDisplay}>
-            </div>
-        `;
     },
 });

package/dist/ui/elements/entry-display/element-book-entry-display.element.d.ts

@@ -1,6 +1,7 @@
+import { HTMLTemplateResult } from 'element-vir';
 import { EntryTreeNode } from '../../../data/element-book-entry/entry-tree/entry-tree';
 import { ElementBookFullRoute } from '../../../routing/element-book-routing';
 export declare const ElementBookEntryDisplay: import("element-vir").DeclarativeElementDefinition<"element-book-entry-display", {
     currentRoute: Readonly<ElementBookFullRoute>;
     currentNode: Readonly<EntryTreeNode>;
-}, {}, {}, string, string, import("lit-html").HTMLTemplateResult, undefined>;
+}, {}, {}, string, string, HTMLTemplateResult, undefined>;

package/dist/ui/elements/entry-display/element-book-entry-display.element.js

@@ -1,5 +1,6 @@
 import { VirIcon } from '@electrovir/icon-element';
 import { assign, css, html, renderIf } from 'element-vir';
+import { isElementBookEntry } from '../../../data/element-book-entry/element-book-entry';
 import { ElementBookEntryTypeEnum } from '../../../data/element-book-entry/element-book-entry-type';
 import { listBreadcrumbs, } from '../../../data/element-book-entry/entry-tree/entry-tree';
 import { colorThemeCssVars } from '../../color-theme/color-theme';
@@ -44,27 +45,9 @@ export const ElementBookEntryDisplay = defineElementBookElement()({
         }
     `,
     renderCallback: ({ inputs }) => {
-        const descendantPages = extractAllDescendantPages(inputs.currentNode);
+        const nestedPages = extractNestedPages(inputs.currentNode);
         const entryBreadcrumbs = listBreadcrumbs(inputs.currentNode.entry, true);
-        const showPageTitles = inputs.currentNode.entry.type !== ElementBookEntryTypeEnum.Page;
-        const exampleTemplates = descendantPages.map((descendantPage) => {
-            return html `
-                <div class="page-examples">
-                    ${renderIf(showPageTitles, html `
-                            <h2>
-                                <${VirIcon} ${assign(VirIcon, { icon: Element24Icon })}></${VirIcon}>
-                                ${descendantPage.title}
-                            </h2>
-                        `)}
-                    <${ElementBookPageExamples}
-                        ${assign(ElementBookPageExamples, {
-                page: descendantPage,
-                parentBreadcrumbs: entryBreadcrumbs,
-            })}
-                    ></${ElementBookPageExamples}>
-                </div>
-            `;
-        });
+        const exampleTemplates = createNestedPagesTemplates(nestedPages, entryBreadcrumbs, true);
         return html `
             <div class="title-bar">
                 <${ElementBookBreadcrumbs}
@@ -75,9 +58,52 @@ export const ElementBookEntryDisplay = defineElementBookElement()({
         `;
     },
 });
-function extractAllDescendantPages(node) {
+function createNestedPagesTemplates(nestedPages, parentBreadcrumbs, isTopLevel) {
+    const showTitles = !isTopLevel &&
+        (nestedPages.length !== 1 || nestedPages[0]?.type !== ElementBookEntryTypeEnum.Page);
+    return nestedPages
+        .map((nesting) => {
+        if (isElementBookEntry(nesting, ElementBookEntryTypeEnum.Page)) {
+            return html `
+                    <div class="page-examples">
+                        ${renderIf(showTitles, html `
+                                <h2>
+                                    <${VirIcon}
+                                        ${assign(VirIcon, { icon: Element24Icon })}
+                                    ></${VirIcon}>
+                                    ${nesting.title}
+                                </h2>
+                            `)}
+                        <${ElementBookPageExamples}
+                            ${assign(ElementBookPageExamples, {
+                page: nesting,
+                parentBreadcrumbs: parentBreadcrumbs,
+            })}
+                        ></${ElementBookPageExamples}>
+                    </div>
+                `;
+        }
+        else {
+            return Object.entries(nesting).map(([title, nextNesting,]) => {
+                return html `
+                            ${renderIf(showTitles, html `
+                                    <h1>${title}</h1>
+                                `)}
+                            ${createNestedPagesTemplates(nextNesting, parentBreadcrumbs, false)}
+                        `;
+            });
+        }
+    })
+        .flat();
+}
+function extractNestedPages(node) {
     if (node.entry.type === ElementBookEntryTypeEnum.Page) {
         return [node.entry];
     }
-    return Object.values(node.children).map(extractAllDescendantPages).flat();
+    const nestedPages = [
+        {
+            [node.entry.title]: Object.values(node.children).map(extractNestedPages).flat(),
+        },
+    ];
+    return nestedPages;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "keywords": [
         "book",
         "design system",