feat: multi digit chapter

src/modules/01_manual/MainPage.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import MarkdownIt, { type Token } from "markdown-it";
 
@@ -8,12 +8,11 @@ import mditFigureWithPCaption from "markdown-it-image-figures";
 import mditAnchor from "markdown-it-anchor";
 import { useManualStore } from "@/stores/manual";
 import { storeToRefs } from "pinia";
-import { useQuasar } from "quasar";
+
 const md = new MarkdownIt().use(mditAnchor).use(mditFigureWithPCaption, {
   figcaption: "alt",
 });
 
-const quasar = useQuasar();
 const route = useRoute();
 const manual = useManualStore();
 const { toc } = storeToRefs(manual);
@@ -26,7 +25,7 @@ const active = ref("");
 
 function onScroll() {
   let current = "";
-  document.querySelectorAll("h2").forEach((v) => {
+  document.querySelectorAll("h2,h3").forEach((v) => {
     if (
       window.top &&
       window.top.scrollY + window.innerHeight / 2 > v.offsetTop
@@ -62,9 +61,14 @@ onMounted(async () => {
   if (typeof route.params.name === "string") {
     const res = await fetch(`/${route.params.name}.md`);
     if (res && res.ok) {
+      const pattern = /chapter-(\d+)/;
+      const match = pattern.exec(route.params.name);
+
+      if (!match) return;
+
       text.value = await res.text();
       found.value = true;
-      chapter.value = +route.params.name.slice(8, 9) - 1;
+      chapter.value = +match[1] - 1;
       parsed.value = md.parse(text.value, {});
     }
   }
@@ -121,6 +125,23 @@ onUnmounted(() => {
               </q-item-label>
             </q-item-section>
           </q-item>
+          <q-item
+            v-if="token.tag === 'h3' && token.type === 'heading_open'"
+            class="tabNative child-tab"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="active === token.attrGet('id')"
+            @click="scrollTo(token.attrGet('id') || '')"
+            clickable
+            v-ripple
+            dense
+            exact
+          >
+            <q-item-section>
+              <q-item-label>
+                <span class="q-pl-xl">{{ parsed[idx + 1].content }}</span>
+              </q-item-label>
+            </q-item-section>
+          </q-item>
         </template>
       </q-list>
     </q-scroll-area>
@@ -162,17 +183,17 @@ onUnmounted(() => {
 
 .markdown :deep(h2:before) {
   counter-increment: h2;
-  content: counter(h1) "." counter(h2) ". ";
+  content: counter(h1) "." counter(h2) " ";
 }
 
 .markdown :deep(h3:before) {
   counter-increment: h3;
-  content: counter(h1) "." counter(h2) "." counter(h3) ". ";
+  content: counter(h1) "." counter(h2) "." counter(h3) " ";
 }
 
 .markdown :deep(h4:before) {
   counter-increment: h4;
-  content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
+  content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " ";
 }
 
 .markdown :deep(blockquote) {
@@ -236,4 +257,13 @@ onUnmounted(() => {
   padding: 0px 16px;
   color: #02a998;
 }
+
+.markdown :deep(h3) {
+  text-align: left;
+  margin-block: 0;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 0px 16px;
+  color: #02a998;
+}
 </style>