wip: docs

docs/.vitepress/config.ts

@@ -25,7 +25,8 @@ export default defineConfig({
 
     sidebar: {
       '/guide/': sidebarGuide(),
-      '/config/': sidebarConfig()
+      '/config/': sidebarConfig(),
+      '/api/': sidebarGuide()
     },
 
     editLink: {
@@ -63,6 +64,11 @@ function nav() {
       link: '/config/introduction',
       activeMatch: '/config/'
     },
+    {
+      text: 'Runtime API',
+      link: '/api/',
+      activeMatch: '/api/'
+    },
     {
       text: pkg.version,
       items: [
@@ -89,38 +95,35 @@ function sidebarGuide() {
         { text: 'Getting Started', link: '/guide/getting-started' },
         { text: 'Configuration', link: '/guide/configuration' },
         { text: 'Routing', link: '/guide/routing' },
-        { text: 'Deploying', link: '/guide/deploying' },
-        { text: 'Internationalization', link: '/guide/i18n' }
+        { text: 'Deploying', link: '/guide/deploying' }
       ]
     },
     {
       text: 'Writing',
       collapsed: false,
       items: [
-        { text: 'Markdown', link: '/guide/markdown' },
+        { text: 'Markdown Extensions', link: '/guide/markdown' },
         { text: 'Asset Handling', link: '/guide/asset-handling' },
         { text: 'Frontmatter', link: '/guide/frontmatter' },
         { text: 'Using Vue in Markdown', link: '/guide/using-vue' },
-        { text: 'API Reference', link: '/guide/api' }
+        { text: 'Internationalization', link: '/guide/i18n' }
       ]
     },
     {
-      text: 'Theme',
+      text: 'Customization',
       collapsed: false,
       items: [
-        { text: 'Introduction', link: '/guide/theme-introduction' },
-        { text: 'Nav', link: '/guide/theme-nav' },
-        { text: 'Sidebar', link: '/guide/theme-sidebar' },
-        { text: 'Prev Next Link', link: '/guide/theme-prev-next-link' },
-        { text: 'Edit Link', link: '/guide/theme-edit-link' },
-        { text: 'Last Updated', link: '/guide/theme-last-updated' },
-        { text: 'Layout', link: '/guide/theme-layout' },
-        { text: 'Home Page', link: '/guide/theme-home-page' },
-        { text: 'Team Page', link: '/guide/theme-team-page' },
-        { text: 'Badge', link: '/guide/theme-badge' },
-        { text: 'Footer', link: '/guide/theme-footer' },
-        { text: 'Search', link: '/guide/theme-search' },
-        { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' }
+        { text: 'Default Theme', link: '/guide/default-theme' },
+        {
+          text: 'Extending the Default Theme',
+          link: '/guide/customization-extending-default-theme'
+        },
+        { text: 'Building a Custom Theme', link: '/guide/customization-intro' },
+        {
+          text: 'Runtime API',
+          link: '/api/'
+        },
+        { text: 'Build-Time Data Loading', link: '/guide/data-loading' }
       ]
     },
     {

docs/api/index.md

@@ -1,4 +1,4 @@
-# API Reference
+# Runtime API Reference
 
 VitePress offers several built-in APIs to let you access app data. VitePress also comes with a few built-in components that can be used globally.
 
@@ -66,11 +66,11 @@ interface Router {
 
 - **Type**: `(path: string) => string`
 
-Appends the configured [`base`](../config/app-config#base) to a given URL path. Also see [Base URL](./asset-handling#base-url).
+Appends the configured [`base`](/config/app-config#base) to a given URL path. Also see [Base URL](/guide/asset-handling#base-url).
 
 ## `<Content />`
 
-The `<Content />` component displays the rendered markdown contents. Useful [when creating your own theme](./theme-introduction).
+The `<Content />` component displays the rendered markdown contents. Useful [when creating your own theme](/guide/customization-intro).
 
 ```vue
 <template>

docs/guide/asset-handling.md

@@ -45,7 +45,7 @@ However, if you are authoring a theme component that links to assets dynamically
 <img :src="theme.logoPath" />
 ```
 
-In this case it is recommended to wrap the path with the [`withBase` helper](./api#withbase) provided by VitePress:
+In this case it is recommended to wrap the path with the [`withBase` helper](/api/#withbase) provided by VitePress:
 
 ```vue
 <script setup>

docs/guide/data-loading.md

@@ -0,0 +1,49 @@
+## Basic Usage
+
+```js
+export default {
+  load() {
+    return {
+      data: 'hello'
+    }
+  }
+}
+```
+
+```js
+export default {
+  async load() {
+    return (await fetch('...')).json()
+  }
+}
+```
+
+## Generating Data Based On Local Files
+
+```js
+import { readDirSync } from 'node:fs'
+
+export default {
+  watch: ['*.md'],
+  async load() {
+    //
+  }
+}
+```
+
+## Typed Data
+
+```ts
+export interface Data {
+  // data type
+}
+
+declare const data: Data
+export { data }
+
+export default {
+  async load(): Promise<Data> {
+    // ...
+  }
+}
+```

docs/guide/using-vue.md

@@ -36,7 +36,7 @@ Directives also work:
 
 ### Access to Site & Page Data
 
-You can use the [`useData` helper](./api#usedata) in a `<script>` block and expose the data to the page.
+You can use the [`useData` helper](/api/#usedata) in a `<script>` block and expose the data to the page.
 
 **Input**
 
@@ -104,7 +104,7 @@ This is a .md using a custom component
 
 ### Registering global components in the theme
 
-If the components are going to be used across several pages in the docs, they can be registered globally in the theme (or as part of extending the default VitePress theme). Check out the [Theming Guide](./theme-introduction) for more information.
+If the components are going to be used across several pages in the docs, they can be registered globally in the theme (or as part of extending the default VitePress theme). Check out the [Customization Guide](./customization-intro) for more information.
 
 In `.vitepress/theme/index.js`, the `enhanceApp` function receives the Vue `app` instance so you can [register components](https://vuejs.org/guide/components/registration.html) as you would do in a regular Vue application.
 
@@ -198,7 +198,7 @@ export default {
 
 ## Built-In Components
 
-VitePress provides Built-In Vue Components like `ClientOnly`, check out the [Global Component Guide](./api) for more information.
+VitePress provides Built-In Vue Components like `ClientOnly`, check out the [Global Component Guide](/api/) for more information.
 
 **Also see:**
 

docs/index.md

@@ -11,7 +11,7 @@ hero:
   actions:
     - theme: brand
       text: Get Started
-      link: /guide/getting-started
+      link: /guide/what-is-vitepress
     - theme: alt
       text: View on GitHub
       link: https://github.com/vuejs/vitepress