Merge pull request #840 from dpc-sdp/feature/R20-1515-sitemap-toc

feat(@dpc-sdp/nuxt-ripple): added table of contents to sitemap page
dpc-sdp · Sep 6, 2023 · e7b4817 · e7b4817
2 parents 8405c62 + 0582592
commit e7b4817
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/packages/nuxt-ripple/mapping/site/index.ts b/packages/nuxt-ripple/mapping/site/index.ts
@@ -107,6 +107,10 @@ export default {
     },
     socialLinks: (src: any) => {
       return processSiteSocialLinks(src.field_site_social_links || [])
+    },
+    sitemap: {
+      showTableOfContents: 'field_show_table_of_contents',
+      tableOfContentsTitle: 'field_title_of_table_of_contents'
     }
   },
   includes: [

diff --git a/packages/nuxt-ripple/pages/sitemap.vue b/packages/nuxt-ripple/pages/sitemap.vue
@@ -8,6 +8,15 @@ export default {
 import { useTideSite } from '#imports'
 
 const site = await useTideSite()
+
+const toc = computed(() => {
+  return site.menus.menuMain.map((item) => {
+    return {
+      text: item.text,
+      url: `#${item.id}`
+    }
+  })
+})
 </script>
 
 <template>
@@ -27,7 +36,15 @@ const site = await useTideSite()
       />
     </template>
     <template #body>
-      <RplSitemap :items="site.menus.menuMain" />
+      <RplPageComponent v-if="site.sitemap?.showTableOfContents">
+        <RplInPageNavigation
+          :title="site.sitemap?.tableOfContentsTitle || 'Jump to'"
+          :items="toc"
+        />
+      </RplPageComponent>
+      <RplPageComponent>
+        <RplSitemap :items="site.menus.menuMain" />
+      </RplPageComponent>
     </template>
     <template #sidebar>
       <span />

diff --git a/packages/ripple-ui-core/src/components/list/RplList.vue b/packages/ripple-ui-core/src/components/list/RplList.vue
@@ -17,6 +17,7 @@ export interface Props {
   depth?: number
   maxDepth?: number | null
   iconPlacement?: RplIconPlacement
+  withLinkIds?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,7 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   containerClass: '',
   depth: 0,
   maxDepth: null,
-  iconPlacement: 'before'
+  iconPlacement: 'before',
+  withLinkIds: false
 })
 
 const emit = defineEmits<{
@@ -67,6 +69,7 @@ const handleClick = (item: IRplListItemArray, index: number) => {
     >
       <RplTextLink
         v-if="item.url"
+        :id="withLinkIds ? item.id : undefined"
         :url="item.url"
         class="rpl-list__link"
         @click="() => handleClick(item, index)"

diff --git a/packages/ripple-ui-core/src/components/sitemap/RplSitemap.vue b/packages/ripple-ui-core/src/components/sitemap/RplSitemap.vue
@@ -14,6 +14,7 @@ withDefaults(defineProps<Props>(), {
 <template>
   <div class="rpl-sitemap">
     <RplList
+      :withLinkIds="true"
       :items="items"
       containerClass="rpl-sitemap-list"
       itemClass="rpl-sitemap-item"