From eaa1da875270b2a1a49680efcc2589c719cb5677 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Tue, 7 Feb 2023 23:30:55 +0100
Subject: [PATCH] feat: ajout ToC

---
 src/App.vue                              |  6 +++-
 src/components/MarkdownFile.vue          | 38 +++++++++++++++++++++++-
 src/components/layout/TableOfContent.vue | 22 ++++++++++++++
 src/router/index.ts                      | 13 ++++++--
 src/stores/toc.ts                        | 27 +++++++++++++++++
 src/styles/custom/_global.scss           | 12 ++++++++
 src/types/TocLine.ts                     |  5 ++++
 src/views/AboutView.vue                  | 31 ++++++++++---------
 src/views/HomeView.vue                   |  3 ++
 src/views/JdrView.vue                    |  3 ++
 src/views/RuleView.vue                   |  3 ++
 11 files changed, 145 insertions(+), 18 deletions(-)
 create mode 100644 src/components/layout/TableOfContent.vue
 create mode 100644 src/stores/toc.ts
 create mode 100644 src/types/TocLine.ts

diff --git a/src/App.vue b/src/App.vue
index a211775..81ed1ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 import { RouterView } from "vue-router";
 import TopBar from "./components/layout/TopBar.vue";
 import SideBar from "./components/layout/SideBar.vue";
+import TableOfContent from "./components/layout/TableOfContent.vue";
 import { useConfigStore } from "./stores/config";
 import { onMounted } from "vue";
 import axios from "axios";
@@ -17,6 +18,9 @@ onMounted(() => {
   <TopBar id="topbar" />
   <div id="wrapper">
     <SideBar />
-    <div id="page"><RouterView /></div>
+    <div id="page">
+      <RouterView />
+    </div>
+    <TableOfContent />
   </div>
 </template>
diff --git a/src/components/MarkdownFile.vue b/src/components/MarkdownFile.vue
index ff76e2f..fa5d7b1 100644
--- a/src/components/MarkdownFile.vue
+++ b/src/components/MarkdownFile.vue
@@ -1,20 +1,56 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUpdate } from "vue";
 import { marked } from "marked";
+import { useTocStore } from "../stores/toc";
+
 import axios from "axios";
+import { useRoute } from "vue-router";
 
 const props = defineProps<{
   path: string;
+  order?: number;
 }>();
 
 const htmlContent = ref("");
+const loadedPage = ref("");
+
+var renderer = new marked.Renderer();
+
+const toc = useTocStore();
+const route = useRoute();
+var tocNbr = 1;
+
+renderer.heading = function (text, level, raw) {
+  var anchor = "#" + raw.toLowerCase().replace(/[^\w]+/g, "-");
+  if (level === 2) {
+    toc.addTocLine(route.path, {
+      anchor: anchor,
+      order: (props.order ?? 1) * 100 + tocNbr,
+      text: text,
+    });
+    tocNbr++;
+  }
+  return `<h${level} id="${anchor}">${text}</h${level}>\n`;
+};
+
+marked.setOptions({
+  renderer: renderer,
+});
 
 function refresh() {
   const markdownFileUrl = `/${props.path}.md`;
+  if (loadedPage.value === markdownFileUrl) {
+    return;
+  }
+  loadedPage.value = markdownFileUrl;
   console.log(`Chargement de l'URL ${markdownFileUrl}`);
   axios
     .get(markdownFileUrl)
-    .then((response) => (htmlContent.value = marked.parse(response.data)))
+    .then((response) => {
+      tocNbr = 1;
+      htmlContent.value = marked.parse(response.data);
+      console.log(toc);
+    })
     .catch(
       () =>
         (htmlContent.value = marked.parse(
diff --git a/src/components/layout/TableOfContent.vue b/src/components/layout/TableOfContent.vue
new file mode 100644
index 0000000..fdc0777
--- /dev/null
+++ b/src/components/layout/TableOfContent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useTocStore } from "../../stores/toc";
+import { computed } from "vue";
+
+const toc = useTocStore();
+const tocList = computed(() => {
+  return toc.getToc();
+});
+</script>
+
+<template>
+  <div class="card" id="toc" v-if="tocList.length > 1">
+    <div class="card-header bg-primary">Sommaire</div>
+    <ul class="menu fg-dark">
+      <li v-for="(tocLine, index) in tocList" :key="index">
+        <router-link :to="`#${tocLine.anchor}`"
+          ><span v-html="tocLine.text"></span
+        ></router-link>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 7535bd3..43691a9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,10 +1,10 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import RuleView from "../views/RuleView.vue";
 import JdrView from "../views/JdrView.vue";
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: "/",
@@ -28,6 +28,15 @@ const router = createRouter({
       component: () => import("../views/AboutView.vue"),
     },
   ],
+  scrollBehavior(to, from, savedPosition) {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: "smooth",
+        top: 64,
+      };
+    }
+  },
 });
 
 export default router;
diff --git a/src/stores/toc.ts b/src/stores/toc.ts
new file mode 100644
index 0000000..8d51e35
--- /dev/null
+++ b/src/stores/toc.ts
@@ -0,0 +1,27 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import type TocLine from "@/types/TocLine";
+
+export const useTocStore = defineStore("toc", () => {
+  const currentPage = ref("");
+  const tocLines = ref([] as TocLine[]);
+
+  function addTocLine(page: string, line: TocLine) {
+    if (page !== currentPage.value) {
+      tocLines.value = [];
+      currentPage.value = page;
+    }
+    tocLines.value.push(line);
+  }
+
+  function getToc(): TocLine[] {
+    return tocLines.value.sort((a, b) => a.order - b.order);
+  }
+
+  function resetToc() {
+    tocLines.value = [];
+    currentPage.value = "";
+  }
+
+  return { currentPage, tocLines, addTocLine, getToc, resetToc };
+});
diff --git a/src/styles/custom/_global.scss b/src/styles/custom/_global.scss
index cc40308..7e7fa93 100644
--- a/src/styles/custom/_global.scss
+++ b/src/styles/custom/_global.scss
@@ -31,6 +31,18 @@
 #page {
   flex-grow:1;
   padding-left:18rem;
+  padding-right: 18rem;
+}
+
+#toc {
+  position: fixed;
+  top: 4rem;
+  right: 1rem;
+  width: 17rem;
+  .menu {
+    padding-left:0.5rem;
+    padding-right:0.5rem;
+  }
 }
 
 #content {
diff --git a/src/types/TocLine.ts b/src/types/TocLine.ts
new file mode 100644
index 0000000..f1aa80c
--- /dev/null
+++ b/src/types/TocLine.ts
@@ -0,0 +1,5 @@
+export default interface TocLine {
+  order: number;
+  text: string;
+  anchor: string;
+}
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 756ad2a..84ab753 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,15 +1,18 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
+<script setup lang="ts">
+import { useConfigStore } from "@/stores/config";
+import { onMounted } from "vue";
+import { useTocStore } from "@/stores/toc";
+import MarkdownFile from "../components/MarkdownFile.vue";
 
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
+const store = useConfigStore();
+const toc = useTocStore();
+
+onMounted(() => {
+  store.resetJdr();
+  toc.resetToc();
+});
+</script>
+
+<template>
+  <MarkdownFile path="pages/about"></MarkdownFile>
+</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 757bd7e..c122f25 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { useConfigStore } from "@/stores/config";
 import { onMounted } from "vue";
+import { useTocStore } from "@/stores/toc";
 import MarkdownFile from "../components/MarkdownFile.vue";
 
 const store = useConfigStore();
+const toc = useTocStore();
 
 onMounted(() => {
   store.resetJdr();
+  toc.resetToc();
 });
 </script>
 
diff --git a/src/views/JdrView.vue b/src/views/JdrView.vue
index fa57bd0..b1d4c1d 100644
--- a/src/views/JdrView.vue
+++ b/src/views/JdrView.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { useConfigStore } from "@/stores/config";
+import { useTocStore } from "@/stores/toc";
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
 import MarkdownFile from "../components/MarkdownFile.vue";
 
 const store = useConfigStore();
 const route = useRoute();
+const toc = useTocStore();
 
 onMounted(() => {
+  toc.resetToc();
   store.loadJdr(`${route.params.jdr}`);
 });
 </script>
diff --git a/src/views/RuleView.vue b/src/views/RuleView.vue
index b4c7d7c..83d2389 100644
--- a/src/views/RuleView.vue
+++ b/src/views/RuleView.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { useConfigStore } from "@/stores/config";
+import { useTocStore } from "@/stores/toc";
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
 import MarkdownFile from "../components/MarkdownFile.vue";
 
 const store = useConfigStore();
+const toc = useTocStore();
 const route = useRoute();
 
 onMounted(() => {
+  toc.resetToc();
   store.loadJdr(`${route.params.jdr}`);
 });
 </script>