docs: composables

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

composables/useConfig.ts

@@ -11,6 +11,7 @@ export function useConfig() {
       const main = appConfig?.value?.main || {};
       const aside = appConfig?.value?.aside || {};
       const footer = appConfig?.value?.footer || {};
+      const toc = appConfig?.value?.toc || {};
 
       return {
         ...appConfig.value,
@@ -29,6 +30,11 @@ export function useConfig() {
           ...navKeyFromPath(route.path, 'aside', navigation.value || []),
           ...page.value?.aside,
         } as typeof aside,
+        toc: {
+          ...toc,
+          ...navKeyFromPath(route.path, 'toc', navigation.value || []),
+          ...page.value?.toc,
+        } as typeof toc,
         footer: {
           ...footer,
           ...navKeyFromPath(route.path, 'footer', navigation.value || []),

content/2.api/3.composables.md

@@ -4,4 +4,35 @@ description: Composable functions exported by shadcn-docs-nuxt.
 icon: 'lucide:square-function'
 ---
 
-TODO
+### `useConfig()`
+
+Get the config from `app.config.ts`.
+
+- `main`, `header`, `aside`, `footer` and `toc` can be set from `_dir.yml` and any `page.md` file.
+
+```ts
+const {
+  site,
+  search,
+  header,
+  main,
+  aside,
+  footer,
+  toc,
+} = useConfig();
+```
+
+### `useScrollspy()`
+
+Modified from [docus](https://github.com/nuxt-themes/docus/blob/main/composables/useScrollspy.ts). `useScrollspy()` is used in docs layout to make the ToC display the currently visible headings.
+
+```ts
+const {
+  // Headings on the page
+  visibleHeadings,
+  // Active headings (for the current page)
+  activeHeadings,
+  // Update headings (an array of DOM nodes)
+  updateHeadings
+} = useScrollspy();
+```