feat(breadcrumbs): show Title in breadcrumbs, fall back to file names

client/store/page.js

@@ -1,3 +1,4 @@
+
 import { make } from 'vuex-pathify'
 
 const state = {
@@ -16,6 +17,7 @@ const state = {
   updatedAt: '',
   editor: '',
   mode: '',
+  breadcrumbs: [],
   scriptJs: '',
   scriptCss: '',
   effectivePermissions: {

client/themes/default/components/page.vue

@@ -489,6 +489,10 @@ export default {
     filename: {
       type: String,
       default: ''
+    },
+    initialBreadcrumbs: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -528,6 +532,7 @@ export default {
     commentsCount: get('page/commentsCount'),
     commentsPerms: get('page/effectivePermissions@comments'),
     editShortcutsObj: get('page/editShortcuts'),
+    breadcrumbs: get('page/breadcrumbs'),
     rating: {
       get () {
         return 3.5
@@ -536,15 +541,6 @@ export default {
 
       }
     },
-    breadcrumbs() {
-      return [{ path: '/', name: 'Home' }].concat(_.reduce(this.path.split('/'), (result, value, key) => {
-        result.push({
-          path: _.get(_.last(result), 'path', `/${this.locale}`) + `/${value}`,
-          name: value
-        })
-        return result
-      }, []))
-    },
     pageUrl () { return window.location.href },
     upBtnPosition () {
       if (this.$vuetify.breakpoint.mdAndUp) {
@@ -598,6 +594,9 @@ export default {
     if (this.editShortcuts) {
       this.$store.set('page/editShortcuts', JSON.parse(Buffer.from(this.editShortcuts, 'base64').toString()))
     }
+    if (this.initialBreadcrumbs) {
+      this.$store.set('page/breadcrumbs', JSON.parse(Buffer.from(this.initialBreadcrumbs, 'base64').toString()))
+    }
 
     this.$store.set('page/mode', 'view')
   },
@@ -789,4 +788,4 @@ export default {
   }
 }
 
-</style>
+</style>

server/controllers/common.js

@@ -478,6 +478,32 @@ router.get('/*', async (req, res, next) => {
           })
         }
 
+        // -> Build breadcrumbs
+        const breadcrumbPaths = []
+        let currentBreadcrumbPath = ''
+        for (const part of page.path.split('/')) {
+          currentBreadcrumbPath = currentBreadcrumbPath ? `${currentBreadcrumbPath}/${part}` : part
+          breadcrumbPaths.push(currentBreadcrumbPath)
+        }
+        const breadcrumbTitles = _.fromPairs((await WIKI.models.knex.table('pageTree')
+          .where('localeCode', page.localeCode)
+          .whereIn('path', breadcrumbPaths)
+          .select('path', 'title')).map(t => [t.path, t.title]))
+
+        const breadcrumbs = [{ path: '/', name: 'Home' }]
+        let currentPath = ''
+        for (const part of page.path.split('/')) {
+          currentPath = currentPath ? `${currentPath}/${part}` : part
+          breadcrumbs.push({
+            path: `/${page.localeCode}/${currentPath}`,
+            name: breadcrumbTitles[currentPath] || part
+          })
+        }
+        // Use the actual page title for the last segment if available
+        if (page.title && page.title !== 'Untitled Page') {
+          breadcrumbs[breadcrumbs.length - 1].name = page.title
+        }
+
         // -> Build sidebar navigation
         let sdi = 1
         const sidebar = (await WIKI.models.navigation.getTree({ cache: true, locale: pageArgs.locale, groups: req.user.groups })).map(n => ({
@@ -518,6 +544,7 @@ router.get('/*', async (req, res, next) => {
             page,
             sidebar,
             injectCode,
+            breadcrumbs,
             isAuthenticated: req.user && req.user.id !== 2
           })
         } else {
@@ -529,6 +556,7 @@ router.get('/*', async (req, res, next) => {
           // -> Inject comments variables
           const commentTmpl = {
             codeTemplate: WIKI.data.commentProvider.codeTemplate,
+            providerKey: WIKI.data.commentProvider.key,
             head: WIKI.data.commentProvider.head,
             body: WIKI.data.commentProvider.body,
             main: WIKI.data.commentProvider.main
@@ -553,6 +581,7 @@ router.get('/*', async (req, res, next) => {
             page,
             sidebar,
             injectCode,
+            breadcrumbs,
             comments: commentTmpl,
             effectivePermissions,
             pageFilename
@@ -581,4 +610,4 @@ router.get('/*', async (req, res, next) => {
   }
 })
 
-module.exports = router
+module.exports = router

server/views/page.pug

@@ -21,7 +21,7 @@ block body
       author-name=page.authorName
       :author-id=page.authorId
       editor=page.editorKey
-      :is-published=page.isPublished.toString()
+      :is-published=(page.isPublished ? 'true' : 'false')
       toc=Buffer.from(page.toc).toString('base64')
       :page-id=page.id
       sidebar=Buffer.from(JSON.stringify(sidebar)).toString('base64')
@@ -30,6 +30,7 @@ block body
       effective-permissions=Buffer.from(JSON.stringify(effectivePermissions)).toString('base64')
       comments-external=comments.codeTemplate
       edit-shortcuts=Buffer.from(JSON.stringify(config.editShortcuts)).toString('base64')
+      initial-breadcrumbs=Buffer.from(JSON.stringify(breadcrumbs)).toString('base64')
       filename=pageFilename
       )
       template(slot='contents')