Show example index in the nav drawer

package.json

@@ -18,13 +18,14 @@
     "js-sha256": "^0.11.0",
     "marked": "^5.0.0",
     "n3": "^1.17.3",
+    "pinia": "^2.2.0",
     "prismjs": "^1.29.0",
     "roboto-fontface": "*",
     "rollup": "^4.12.1",
     "v-network-graph": "^0.9.14",
     "vite-plugin-ejs": "1.6.4",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.2.0",
+    "vue": "^3.3.0",
     "vue-router": "^4.0.0",
     "vue-worker": "^1.2.1",
     "vuetify": "^3.0.0",

src/components/BuildingBlock.vue

@@ -27,7 +27,7 @@
           color="primary"
         >
           <v-tab value="about" prepend-icon="mdi-information-outline">About</v-tab>
-          <v-tab v-if="bblock.examples && bblock.examples.length" prepend-icon="mdi-puzzle-outline" value="examples">
+          <v-tab v-if="bblock.examples?.length" prepend-icon="mdi-puzzle-outline" value="examples">
             Examples
           </v-tab>
           <v-tab value="json-schema" prepend-icon="mdi-code-json" v-if="bblock.schema">JSON Schema</v-tab>
@@ -168,7 +168,7 @@
             </v-window-item>
 
             <v-window-item
-              v-if="bblock.examples && bblock.examples.length"
+              v-if="bblock.examples?.length"
               value="examples"
               class="ma-1"
               :transition="false" :reverse-transition="false"
@@ -186,6 +186,7 @@
                   <v-expansion-panel
                     :value="exampleIdx"
                     v-if="example.content?.length || example.snippets?.length"
+                    :id="`example-panel-${exampleIdx}`"
                   >
                     <v-expansion-panel-title>
                       {{ example.title }}
@@ -313,7 +314,6 @@ import ExampleViewer from "@/components/bblock/ExampleViewer.vue";
 import {statuses} from "@/models/status";
 import DependencyViewer from "@/components/bblock/DependencyViewer.vue";
 import configService from "@/services/config.service";
-import JsonLdContextViewer from "@/components/bblock/JsonLdContextViewer.vue";
 import LanguageTabs from "@/components/bblock/LanguageTabs.vue";
 import JsonSchemaViewer from "@/components/bblock/JsonSchemaViewer.vue";
 import ColorCircle from "@/components/ColorCircle.vue";
@@ -322,6 +322,9 @@ import OpenApiDocumentViewer from "@/components/bblock/OpenApiDocumentViewer.vue
 import DependencyList from "@/components/bblock/DependencyList.vue";
 import OntologyViewer from "@/components/bblock/OntologyViewer.vue";
 import SemanticUplift from "@/components/bblock/SemanticUplift.vue";
+import {useNavigationStore} from "@/stores/navigation";
+
+const navigationStore = useNavigationStore();
 
 export default {
   components: {
@@ -332,7 +335,6 @@ export default {
     ColorCircle,
     JsonSchemaViewer,
     LanguageTabs,
-    JsonLdContextViewer,
     DependencyViewer,
     ExampleViewer,
     OpenApiDocumentViewer,
@@ -415,6 +417,12 @@ export default {
       }
       return this.registers[this.bblock.register.url];
     },
+    contextNavigationWatched() {
+      return {
+        tab: this.tab,
+        bblock: this.bblock,
+      };
+    },
   },
   methods: {
     copyToClipboard,
@@ -539,6 +547,11 @@ export default {
       this.relatedBBlock.show = false;
     },
     nop: () => {},
+    scrollToExample(example) {
+      const top = document.getElementById(`example-panel-${example.idx}`).getBoundingClientRect().top;
+      const headerHeight = document.querySelector('header').offsetHeight;
+      window.scrollTo(0, window.scrollY + top - headerHeight);
+    },
   },
   watch: {
     bblockId() {
@@ -553,6 +566,16 @@ export default {
         },
       });
     },
+    contextNavigationWatched() {
+      if (this.tab === 'examples' && this?.bblock?.examples?.length) {
+        navigationStore.setItems(
+          this.bblock.examples.map((e, idx) => ({ title: e.title, idx})),
+          this.scrollToExample,
+        )
+      } else {
+        navigationStore.clearItems();
+      }
+    },
     loading(v) {
       this.$emit('update:loading', v);
     },

src/layouts/default/View.vue

@@ -20,13 +20,25 @@
   <v-navigation-drawer
     v-model="navigationDrawerComputed"
   >
+    {{ contextNavigation }}
     <v-list>
       <v-list-item
         v-for="(item, idx) of navigationItems"
         :key="idx"
         :to="item.to"
         :title="item.title"
       ></v-list-item>
+      <template v-if="contextNavItems?.length">
+        <v-list-subheader title="On this page"></v-list-subheader>
+        <v-list-item
+          v-for="(item, idx) of contextNavItems"
+          :key="idx"
+          @click.prevent="handleContextNavigationClick(item)"
+          density="compact"
+        >
+          <v-list-item-title style="font-size: 90%">{{ item.title }}</v-list-item-title>
+        </v-list-item>
+      </template>
     </v-list>
   </v-navigation-drawer>
   <v-main>
@@ -62,6 +74,8 @@
 import bblockService from "@/services/bblock.service";
 import RegisterLoadingProgress from "@/components/RegisterLoadingProgress.vue";
 import configService from "@/services/config.service";
+import {useNavigationStore} from "@/stores/navigation";
+import {mapState} from "pinia";
 
 export default {
   components: {RegisterLoadingProgress},
@@ -101,6 +115,11 @@ export default {
       this.loading = false;
     });
   },
+  methods: {
+    handleContextNavigationClick(item) {
+      this.contextNavHandler && this.contextNavHandler(item);
+    },
+  },
   computed: {
     mobile() {
       return this.$vuetify.display.mobile;
@@ -113,6 +132,10 @@ export default {
         this.navigationDrawer = v;
       }
     },
+    ...mapState(useNavigationStore, {
+      contextNavItems: 'items',
+      contextNavHandler: 'handler',
+    }),
   },
 }
 </script>

src/plugins/index.js

@@ -8,10 +8,12 @@
 import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import router from '../router'
+import { createPinia } from 'pinia'
 
 export function registerPlugins (app) {
   loadFonts()
   app
+    .use(createPinia())
     .use(vuetify)
     .use(router)
 }

src/router/index.js

@@ -3,6 +3,8 @@ import {createRouter, createWebHistory} from 'vue-router'
 import bblockService from "@/services/bblock.service";
 import configService from "@/services/config.service";
 
+import {useNavigationStore} from "@/stores/navigation";
+
 const routes = [
   {
     path: '/',
@@ -56,7 +58,7 @@ const routes = [
   }
 ];
 
-export const persistQuery = (to, from, next) => {
+const persistQuery = (to, from, next) => {
   const newQueryParams = Object.entries(from.query)
     .filter(e => !to.query.hasOwnProperty(e[0]));
 
@@ -68,11 +70,20 @@ export const persistQuery = (to, from, next) => {
   }
 }
 
+const updateContextualNav = (to, from) => {
+  if (to.name === 'BuildingBlock' && from.name === 'BuildingBlock' && to.params.id === from.params.id) {
+    return;
+  }
+  const navigationStore = useNavigationStore();
+  navigationStore.clearItems();
+}
+
 const router = createRouter({
   history: createWebHistory(configService.config.baseUrl),
   routes,
 })
 
 router.beforeEach(persistQuery);
+router.beforeEach(updateContextualNav);
 
 export default router

src/stores/navigation.js

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia';
+
+export const useNavigationStore = defineStore('navigation', {
+  state: () => ({
+    items: [],
+    handler: null,
+  }),
+  actions: {
+    clearItems() {
+      this.items = [];
+      this.handler = null;
+    },
+    setItems(items, handler) {
+      console.log('setting new items');
+      this.items = items;
+      this.handler = handler;
+    },
+  },
+});