(enhance) maxTocDepth

fix #10

components/docs/TocLinks.vue

@@ -14,7 +14,7 @@
             </a>
             <TocLinks
                 class="mt-2"
-                v-if="link.children"
+                v-if="link.children && (link.depth ?? 0 + 1) < maxDepth"
                 :links="link.children"
                 @move="childMove($event)"
             />
@@ -23,14 +23,13 @@
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue'
-import type { TocLink } from '@nuxt/content/dist/runtime/types'
+import type { TocLink } from '@nuxt/content/dist/runtime/types';
 
-const props = defineProps({
-    links: {
-        type: Array as PropType<TocLink[]>,
-        default: () => []
-    }
+const props = withDefaults(defineProps<{
+    links?: TocLink[];
+    maxDepth?: number;
+}>(), {
+    maxDepth: Infinity,
 });
 
 const emit = defineEmits(['move', 'child-click']);

content/.README.md

@@ -36,10 +36,10 @@ date: 2023-11-11
 ```
 
 ### `maxTocDepth`
-（Docsのみ）もくじの見出しを遡る限度を指定できます。
+（Docsのみ）もくじの見出しを遡る限度を指定できます。`<h2>`タグまでにしたい場合は`2`を指定します。
 
 ```yml
-maxTocDepth: 1
+maxTocDepth: 2
 ```
 
 ### `ignoreDirBasedNav`

content/ja/docs/5.releases.md

@@ -1,3 +1,7 @@
+---
+maxTocDepth: 2
+---
+
 # リリースノート
 Misskeyのリリースノートを掲載しています。
 

pages/docs/[...slug].vue

@@ -29,14 +29,13 @@
         <div class="hidden lg:block text-sm">
             <div class="sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto py-6 pl-6">
                 <h3 class="font-bold mb-6">{{ $t('_docs._toc.title') }}</h3>
-                <DocsTocLinks v-if="data?.body" :links="data?.body.toc.links" class="break-words" />
+                <DocsTocLinks v-if="data?.body" :links="data?.body.toc?.links" :max-depth="data?.maxTocDepth ?? undefined" class="break-words" />
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import type { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables';
 import AsideNavIco from 'bi/text-indent-left.svg';
 
 const isAsideNavOpen = useState<boolean>('miHub_docs_asideNav_openState', () => false);