✨优化文档

4 files changed, 143 insertions, 0 deletions

diff --git a/docs/composables/useDocSearch.ts b/docs/composables/useDocSearch.ts
new file mode 100644
index 0000000..646260d
--- /dev/null
+++ b/docs/composables/useDocSearch.ts
@@ -0,0 +1,11 @@
+export const useDocSearch = () => {
+  const { $docSearch } = useNuxtApp()
+
+  if (!$docSearch) {
+    return {
+      hasDocSearch: ref(false)
+    }
+  }
+
+  return $docSearch
+}
diff --git a/docs/composables/useDocus.ts b/docs/composables/useDocus.ts
new file mode 100644
index 0000000..f86c573
--- /dev/null
+++ b/docs/composables/useDocus.ts
@@ -0,0 +1,88 @@
+export const useDocus = () => {
+  const docus = computed(() => useAppConfig()?.docus || {})
+  const { navPageFromPath, navDirFromPath, navKeyFromPath } = useContentHelpers()
+  const { navigation, page } = useContent()
+  const route = useRoute()
+
+  /**
+   * Returns fallbacked values for `main`, `header`, `aside` and `footer`.
+   *
+   * It allows to configure `app.config` per page/_dir.
+   */
+  const config = computed(
+    () => {
+      const titleTemplate = docus?.value?.titleTemplate || navKeyFromPath(page?.value?._path, 'titleTemplate', navigation.value || []) || `%s · ${docus?.value?.title || 'Docus'}`
+      const main = docus?.value?.main || {}
+      const header = docus?.value?.header || {}
+      const aside = docus?.value?.aside || {}
+      const footer = docus?.value?.footer || {}
+
+      return {
+        // Raw appConfig
+        ...docus.value,
+
+        // Merged attributes
+        titleTemplate,
+        main: {
+          ...main,
+          ...navKeyFromPath(route.path, 'main', navigation.value || []),
+          ...page.value?.main
+        } as typeof main,
+        header: {
+          ...header,
+          ...navKeyFromPath(route.path, 'header', navigation.value || []),
+          ...page.value?.header
+        } as typeof header,
+        aside: {
+          ...aside,
+          ...navKeyFromPath(route.path, 'aside', navigation.value || []),
+          ...page.value?.aside
+        } as typeof aside,
+        footer: {
+          ...footer,
+          ...navKeyFromPath(route.path, 'footer', navigation.value || []),
+          ...page.value?.footer
+        } as typeof footer
+      }
+    }
+  )
+
+  /**
+   * Current aside tree.
+   */
+  const tree = computed(() => {
+    let nav = navigation.value || []
+    const _path = route.path
+    const level = config?.value?.aside?.level || 0
+    const filtered = config?.value?.aside?.exclude || []
+
+    if (level) {
+      // Filter if `aside.level` is enabled in docus configuration
+      const path = _path.split('/')
+
+      // Get level
+      const leveledPath = path.splice(0, 1 + level).join('/')
+
+      nav = navDirFromPath(leveledPath, nav) || []
+
+      if (!Array.isArray(nav)) { nav = [nav] }
+    }
+
+    // No navigation found; try to resolve page url
+    if (nav.length === 0) {
+      nav = navPageFromPath(page.value?._path || '/', navigation.value || [])
+
+      if (!nav) { return [] }
+
+      if (!Array.isArray(nav)) { nav = [nav] }
+    }
+
+    // Filtered using `aside.exclude` in docus configuration
+    return nav.filter((item: any) => {
+      if (filtered.includes(item._path)) { return false }
+      return true
+    })
+  })
+
+  return { tree, config }
+}
diff --git a/docs/composables/useMenu.ts b/docs/composables/useMenu.ts
new file mode 100644
index 0000000..804ddc6
--- /dev/null
+++ b/docs/composables/useMenu.ts
@@ -0,0 +1,5 @@
+export const useMenu = () => {
+  const { $menu } = useNuxtApp()
+
+  return $menu
+}
diff --git a/docs/composables/useScrollspy.ts b/docs/composables/useScrollspy.ts
new file mode 100644
index 0000000..5962d0d
--- /dev/null
+++ b/docs/composables/useScrollspy.ts
@@ -0,0 +1,39 @@
+import type { Ref } from 'vue'
+
+/**
+ * Scrollspy allows you to watch visible headings in a specific page.
+ * Useful for table of contents live style updates.
+ */
+export const useScrollspy = () => {
+  const observer = ref() as Ref<IntersectionObserver>
+  const visibleHeadings = ref([]) as Ref<string[]>
+  const activeHeadings = ref([]) as Ref<string[]>
+
+  const observerCallback = (entries: IntersectionObserverEntry[]) =>
+    entries.forEach((entry) => {
+      const id = entry.target.id
+
+      if (entry.isIntersecting) { visibleHeadings.value.push(id) } else { visibleHeadings.value = visibleHeadings.value.filter(t => t !== id) }
+    })
+
+  const updateHeadings = (headings: Element[]) =>
+    headings.forEach((heading) => {
+      observer.value.observe(heading)
+    })
+
+  watch(visibleHeadings, (val, oldVal) => {
+    if (val.length === 0) { activeHeadings.value = oldVal } else { activeHeadings.value = val }
+  }, { deep: true })
+
+  // Create intersection observer
+  onBeforeMount(() => (observer.value = new IntersectionObserver(observerCallback)))
+
+  // Destroy it
+  onBeforeUnmount(() => observer.value?.disconnect())
+
+  return {
+    visibleHeadings,
+    activeHeadings,
+    updateHeadings
+  }
+}