feat: add dynamic sidebar

public/jdr/core.json

@@ -0,0 +1,3 @@
+{
+  "name":"Règles de bases"
+}

public/pages/jdr/core.md

@@ -0,0 +1,7 @@
+# Règle de base de Pélican
+
+Pélican est un système générique de jeu de rôle basé sur le système D100, ayant pour objectif de créer un système de jeu de rôle simple mais efficace, se basant sur les dés les plus générique d’un rôliste. Il ne s’agit cependant que d’une base de système, à partir de laquelle vous pourrez construire des systèmes adaptés à votre univers et vos concepts.
+
+Sur cette page, vous trouverez les règles les plus générales, qui sont utilisée pour pouvoir créer les autres jeux de rôles.
+
+Ce set de règle est fourni par [Kazhnuz](https://kazhnuz.space), avec certaines règles reprise des systèmes de mon groupe de JDR. Il est distribué sous la [Creative Common BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).

public/pages/jdr/erratum.md

@@ -7,6 +7,4 @@ Erratum est un JDR D100 basé sur mon set de règle [pélican](https://pelicanjd
 
 Cette page à pour objectif de vous présenter à la fois l'univers et comment il interragit avec le système Pélican.
 
-Ce set de règle est fourni par [Kazhnuz](https://kazhnuz.space), avec certaines règles reprise du système de [MDupoignard](https://twitter.com/MDupoignard). Il est distribué sous la [Licence Ludique Libre 1.0](https://fr.wikipedia.org/wiki/Licence_ludique_libre), crée par [Wizard of the Coast](https://company.wizards.com/).
+Ce set de règle est fourni par [Kazhnuz](https://kazhnuz.space), avec certaines règles reprise des systèmes de mon groupe de JDR. Il est distribué sous la [Creative Common BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).
-
-Ce site est généré par [Docsify](https://docsify.now.sh/) et hébergé par [Chlore](https://chlore.net).

public/pelican.json

@@ -5,7 +5,7 @@
       "id": 0,
       "title":"",
       "links": [
-        {"title": "Règles de bases", "link": "core"}
+        {"title": "Règles de bases", "path": "core"}
       ]
     }
   ],

src/components/layout/SideBar.vue

@@ -5,7 +5,15 @@ import { computed } from "vue";
 const store = useConfigStore();
 
 const sidebar = computed(() => {
-  return store.getSidebar() ?? { title: "", id: 0, links: [] };
+  return store.getSidebar() ?? [{ title: "", id: 0, links: [] }];
+});
+
+const linkBase = computed(() => {
+  if (store.isJdrLoaded()) {
+    return `jdr/${store.currentJdr}`;
+  } else {
+    return `jdr`;
+  }
 });
 </script>
 
@@ -15,9 +23,12 @@ const sidebar = computed(() => {
     <ul v-for="item in sidebar" :key="item.id">
       <div class="menu-divider" v-if="item.title">{{ item.title }}</div>
       <li v-for="(link, index) in item.links" :key="index">
-        <router-link :to="`/jdr/core/${link.path}`" class="menu-item" :replace="true">{{
+        <router-link
-          link.title
+          :to="`/${linkBase}/${link.path}`"
-        }}</router-link>
+          class="menu-item"
+          :replace="true"
+          >{{ link.title }}</router-link
+        >
       </li>
     </ul>
   </aside>

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } 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),
@@ -14,6 +15,10 @@ const router = createRouter({
       path: "/jdr/:jdr/rules/:category/:filepath",
       component: RuleView,
     },
+    {
+      path: "/jdr/:jdr/",
+      component: JdrView,
+    },
     {
       path: "/about",
       name: "about",

src/stores/config.ts

@@ -2,17 +2,59 @@ import { ref } from "vue";
 import { defineStore } from "pinia";
 import type PelicanConfig from "@/types/PelicanConfig";
 import type LinkList from "@/types/LinkList";
+import type JdrConfig from "@/types/JdrConfig";
+import axios from "axios";
 
 export const useConfigStore = defineStore("config", () => {
   const config = ref(null as PelicanConfig | null);
+  const currentJdr = ref("");
+  const jdrConfig = ref(null as JdrConfig | null);
+  const sidebar = ref([{ id: 0, links: [] }] as LinkList[]);
+
+  function computeSidebar() {
+    return config.value?.sidebar ?? [{ id: 0, links: [] }];
+  }
 
   function setConfig(newConfig: PelicanConfig) {
     config.value = newConfig;
   }
 
-  function getSidebar(): LinkList[] {
+  function loadJdr(newJdr: string) {
-    return config.value?.sidebar ?? [{ id: 0, links: [] }];
+    if (newJdr !== currentJdr.value) {
+      axios.get(`/jdr/${newJdr}.json`).then((response) => {
+        jdrConfig.value = response.data;
+        currentJdr.value = newJdr;
+        sidebar.value = computeSidebar();
+      });
+    }
   }
 
-  return { config, setConfig, getSidebar };
+  function resetJdr() {
+    jdrConfig.value = null;
+    currentJdr.value = "";
+    sidebar.value = [{ id: 0, links: [] }];
+  }
+
+  function isJdrLoaded(): boolean {
+    return currentJdr.value !== "";
+  }
+
+  function getSidebar(): LinkList[] {
+    if (isJdrLoaded()) {
+      return sidebar.value;
+    } else {
+      return config.value?.jdr ?? [{ id: 0, links: [] }];
+    }
+  }
+
+  return {
+    config,
+    currentJdr,
+    jdrConfig,
+    setConfig,
+    getSidebar,
+    loadJdr,
+    resetJdr,
+    isJdrLoaded,
+  };
 });

src/types/JdrConfig.ts

@@ -0,0 +1,6 @@
+import type LinkList from "./LinkList";
+
+export default interface JdrConfig {
+  name: string;
+  sidebar: LinkList[];
+}

src/views/HomeView.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import TheWelcome from "../components/TheWelcome.vue";
+import { useConfigStore } from "@/stores/config";
+import { onMounted } from "vue";
+import MarkdownFile from "../components/MarkdownFile.vue";
+
+const store = useConfigStore();
+
+onMounted(() => {
+  store.resetJdr();
+});
 </script>
 
 <template>
-  <main>
+  <MarkdownFile path="pages/home">
-    <TheWelcome />
+    Test d'afficher quelque chose en dessous du Markdown
-  </main>
+  </MarkdownFile>
 </template>

src/views/JdrView.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useConfigStore } from "@/stores/config";
+import { onMounted } from "vue";
+import { useRoute } from "vue-router";
+import MarkdownFile from "../components/MarkdownFile.vue";
+
+const store = useConfigStore();
+const route = useRoute();
+
+onMounted(() => {
+  store.loadJdr(`${route.params.jdr}`);
+});
+</script>
+
+<template>
+  <MarkdownFile :path="`pages/jdr/${$route.params.jdr}`"></MarkdownFile>
+</template>

src/views/RuleView.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
+import { useConfigStore } from "@/stores/config";
+import { onMounted } from "vue";
+import { useRoute } from "vue-router";
 import MarkdownFile from "../components/MarkdownFile.vue";
+
+const store = useConfigStore();
+const route = useRoute();
+
+onMounted(() => {
+  store.loadJdr(`${route.params.jdr}`);
+});
 </script>
 
 <template>