Merge pull request #332 from codex-team/fix/nested-breadcrumbs

Fix nested breadcrumbs

Author: Dobrunia

package.json

@@ -1,7 +1,7 @@
 {
   "name": "codex.docs",
   "license": "Apache-2.0",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "type": "module",
   "bin": {
     "codex.docs": "dist/backend/app.js"

src/backend/build-static.ts

@@ -14,6 +14,7 @@ import appConfig  from './utils/appConfig.js';
 import Aliases from './controllers/aliases.js';
 import Pages from './controllers/pages.js';
 import { downloadFavicon } from './utils/downloadFavicon.js';
+import { buildPageBreadcrumbs } from './utils/breadcrumbs.js';
 
 /**
  * Build static pages from database
@@ -96,7 +97,7 @@ export default async function buildStatic(): Promise<void> {
     if (!pageUri) {
       throw new Error('Page uri is not defined');
     }
-    const pageParent = await page.getParent();
+    const breadcrumbItems = await buildPageBreadcrumbs(page);
     const pageId = page._id;
 
     if (!pageId) {
@@ -108,7 +109,7 @@ export default async function buildStatic(): Promise<void> {
     const menu = createMenuTree(parentIdOfRootPages, allPages, pagesOrder);
     const result = await renderTemplate('./views/pages/page.twig', {
       page,
-      pageParent,
+      breadcrumbItems,
       previousPage,
       nextPage,
       menu,

src/backend/models/page.ts

@@ -137,6 +137,29 @@ class Page {
     return new Page(data);
   }
 
+  /**
+   * Ancestors from root to immediate parent (for breadcrumbs). Omits virtual root id "0".
+   */
+  public async getAncestorChain(): Promise<Page[]> {
+    const chain: Page[] = [];
+    let parentId = this._parent;
+
+    while (parentId && !isEqualIds(parentId, '0' as EntityId)) {
+      const data = await pagesDb.findOne({ _id: parentId });
+
+      if (!data?._id) {
+        break;
+      }
+
+      const ancestor = new Page(data);
+
+      chain.unshift(ancestor);
+      parentId = ancestor._parent;
+    }
+
+    return chain;
+  }
+
   /**
    * Return child pages models
    *

src/backend/routes/aliases.ts

@@ -5,6 +5,7 @@ import Alias from '../models/alias.js';
 import verifyToken from './middlewares/token.js';
 import PagesFlatArray from '../models/pagesFlatArray.js';
 import HttpException from '../exceptions/httpException.js';
+import { buildPageBreadcrumbs } from '../utils/breadcrumbs.js';
 
 
 const router = express.Router();
@@ -33,14 +34,14 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
       case Alias.types.PAGE: {
         const page = await Pages.get(alias.id);
 
-        const pageParent = await page.getParent();
+        const breadcrumbItems = await buildPageBreadcrumbs(page);
 
         const previousPage = await PagesFlatArray.getPageBefore(alias.id);
         const nextPage = await PagesFlatArray.getPageAfter(alias.id);
 
         res.render('pages/page', {
           page,
-          pageParent,
+          breadcrumbItems,
           previousPage,
           nextPage,
           config: req.app.locals.config,

src/backend/routes/pages.ts

@@ -5,6 +5,7 @@ import verifyToken from './middlewares/token.js';
 import allowEdit from './middlewares/locals.js';
 import PagesFlatArray from '../models/pagesFlatArray.js';
 import { toEntityId } from '../database/index.js';
+import { buildPageBreadcrumbs } from '../utils/breadcrumbs.js';
 
 const router = express.Router();
 
@@ -62,14 +63,14 @@ router.get('/page/:id', verifyToken, async (req: Request, res: Response, next: N
   try {
     const page = await Pages.get(pageId);
 
-    const pageParent = await page.parent;
+    const breadcrumbItems = await buildPageBreadcrumbs(page);
 
     const previousPage = await PagesFlatArray.getPageBefore(pageId);
     const nextPage = await PagesFlatArray.getPageAfter(pageId);
 
     res.render('pages/page', {
       page,
-      pageParent,
+      breadcrumbItems,
       config: req.app.locals.config,
       previousPage,
       nextPage,

src/backend/utils/breadcrumbs.ts

@@ -0,0 +1,49 @@
+import Page from '../models/page.js';
+
+type BreadcrumbItem = {
+  title: string;
+  href: string | null;
+  isEllipsis?: boolean;
+};
+
+function hrefForPage(p: Page): string {
+  if (p.uri) {
+    return `/${p.uri}`;
+  }
+
+  return `/page/${p._id}`;
+}
+
+/**
+ * At most 3 segments after "Documentation": first ancestor, optional middle ellipsis, current page.
+ * Shallow trees (≤2 segments) show everything without ellipsis.
+ */
+function collapseToFirstEllipsisCurrent(items: BreadcrumbItem[]): BreadcrumbItem[] {
+  if (items.length <= 2) {
+    return items;
+  }
+
+  return [
+    items[0],
+    { title: '…', href: null, isEllipsis: true },
+    items[items.length - 1],
+  ];
+}
+
+/**
+ * Breadcrumb trail: ancestors (linked) + current page (plain text, last).
+ */
+export async function buildPageBreadcrumbs(page: Page): Promise<BreadcrumbItem[]> {
+  const ancestors = await page.getAncestorChain();
+  const items: BreadcrumbItem[] = ancestors.map(a => ({
+    title: a.title ?? '',
+    href: hrefForPage(a),
+  }));
+
+  items.push({
+    title: page.title ?? '',
+    href: null,
+  });
+
+  return collapseToFirstEllipsisCurrent(items);
+}

src/backend/views/pages/page.twig

@@ -7,17 +7,18 @@
         <a href="/" class="page__header-nav-item">
           Documentation
         </a>
-        {{ svg('arrow-right') }}
-        {% if page._parent %}
-          <a class="page__header-nav-item"
-            {% if pageParent.uri %}
-              href="/{{ pageParent.uri }}"
+        <div class="page__header-nav-crumbs">
+          {% for item in breadcrumbItems %}
+            {{ svg('arrow-right') }}
+            {% if item.isEllipsis %}
+              <span class="page__header-nav-item page__header-nav-item--ellipsis" aria-hidden="true">{{ item.title }}</span>
+            {% elseif item.href %}
+              <a class="page__header-nav-item" href="{{ item.href }}">{{ item.title | striptags }}</a>
             {% else %}
-              href="/page/{{ pageParent._id }}"
-            {% endif %}>
-            {{ pageParent.title }}
-          </a>
-        {% endif %}
+              <span class="page__header-nav-item page__header-nav-item--current">{{ item.title | striptags }}</span>
+            {% endif %}
+          {% endfor %}
+        </div>
       </div>
       <time class="page__header-time">
         Last edit {{ (page.body.time / 1000)  | date("M d Y") }}

src/frontend/styles/components/page.pcss

@@ -6,6 +6,7 @@
     font-size: 14px;
     color: var(--color-text-second);
     line-height: 1.5em;
+    min-width: 0;
 
     @media (--mobile) {
       font-size: 13px;
@@ -14,6 +15,42 @@
     &-nav {
       display: flex;
       align-items: center;
+      min-width: 0;
+      flex: 1 1 auto;
+
+      > .page__header-nav-item:first-of-type {
+        flex-shrink: 0;
+        max-width: min(10rem, 28vw);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &-crumbs {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+        flex: 1 1 auto;
+        overflow: hidden;
+
+        @media (--mobile) {
+          display: none;
+        }
+
+        > .page__header-nav-item:not(.page__header-nav-item--current):not(.page__header-nav-item--ellipsis) {
+          flex: 0 1 auto;
+          max-width: 38%;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        svg {
+          flex-shrink: 0;
+          margin: 0 6px;
+        }
+      }
 
       &-item {
         color: inherit;
@@ -26,19 +63,30 @@
         &:hover {
           color: var(--color-link-active);
         }
-      }
 
-      svg {
-        margin: 0 6px;
+        &--current {
+          flex: 1 1 0;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-weight: 600;
+          color: var(--color-text-main);
+          pointer-events: none;
+        }
 
-        @media (--mobile) {
-          display: none;
+        &--ellipsis {
+          flex-shrink: 0;
+          pointer-events: none;
+          user-select: none;
         }
       }
     }
 
     &-time {
       margin-left: auto;
+      flex-shrink: 0;
+      white-space: nowrap;
 
       @media (--mobile) {
         margin-left: 0;
@@ -47,6 +95,7 @@
 
     &-button {
       margin-left: 20px;
+      flex-shrink: 0;
       text-decoration: none;
 
       @media (--mobile) {