docs: rewrite api pages to have a right aside toc (#1265)

1 files changed, 41 insertions, 33 deletions

diff --git a/scripts/apidoc/apiDocsWriter.ts b/scripts/apidoc/apiDocsWriter.ts
index cb803499..76edc3c3 100644
--- a/scripts/apidoc/apiDocsWriter.ts
+++ b/scripts/apidoc/apiDocsWriter.ts
@@ -26,40 +26,41 @@ editLink: false
  * @param moduleName The name of the module to write the docs for.
  * @param lowerModuleName The lowercase name of the module.
  * @param comment The module comments.
+ * @param methods The methods of the module.
  */
 export function writeApiDocsModulePage(
   moduleName: string,
   lowerModuleName: string,
-  comment: string
+  comment: string,
+  methods: Method[]
 ): void {
   // Write api docs page
   let content = `
   <script setup>
-  import ApiDocsMethod from '../.vitepress/components/api-docs/method.vue'
-  import { ${lowerModuleName} } from './${lowerModuleName}'
-  import { ref } from 'vue';
-
-  const methods = ref(${lowerModuleName});
+  import ApiDocsMethod from '../.vitepress/components/api-docs/method.vue';
+  import ${lowerModuleName} from './${lowerModuleName}.json';
   </script>
 
-  # ${moduleName}
-
   <!-- This file is automatically generated. -->
   <!-- Run '${scriptCommand}' to update -->
 
+  # ${moduleName}
+
   ::: v-pre
 
   ${comment}
 
   :::
 
-  <ul>
-    <li v-for="method of methods" :key="method.name">
-      <a :href="'#' + method.name">{{ method.title }}</a>
-    </li>
-  </ul>
+  ${methods
+    .map(
+      (method) => `
+  ## ${method.name}
 
-  <ApiDocsMethod v-for="method of methods" :key="method.name" :method="method" v-once />
+  <ApiDocsMethod :method="${lowerModuleName}.${method.name}" v-once />
+  `
+    )
+    .join('')}
   `.replace(/\n +/g, '\n');
 
   content = vitePressInFileOptions + formatMarkdown(content);
@@ -71,18 +72,26 @@ export function writeApiDocsModulePage(
  * Writes the api page for the given method to the correct location.
  *
  * @param methodName The name of the method to write the docs for.
+ * @param capitalizedMethodName The capitalized name of the method.
  */
-export function writeApiDocsDirectPage(methodName: string): void {
+export function writeApiDocsDirectPage(
+  methodName: string,
+  capitalizedMethodName: string
+): void {
   let content = `
   <script setup>
-  import ApiDocsMethod from '../.vitepress/components/api-docs/method.vue'
-  import { ${methodName} } from './${methodName}'
-  import { ref } from 'vue';
-
-  const methods = ref(${methodName});
+  import ApiDocsMethod from '../.vitepress/components/api-docs/method.vue';
+  import ${methodName} from './${methodName}.json';
   </script>
 
-  <ApiDocsMethod v-for="method of methods" :key="method.name" :method="method" v-once />
+  <!-- This file is automatically generated. -->
+  <!-- Run '${scriptCommand}' to update -->
+
+  # ${capitalizedMethodName}
+
+  ## ${methodName}
+
+  <ApiDocsMethod :method="${methodName}.${methodName}" v-once />
   `.replace(/\n +/g, '\n');
 
   content = vitePressInFileOptions + formatMarkdown(content);
@@ -100,18 +109,17 @@ export function writeApiDocsData(
   lowerModuleName: string,
   methods: Method[]
 ): void {
-  let contentTs = `
-import type { Method } from '../.vitepress/components/api-docs/method';
-
-export const ${lowerModuleName}: Method[] = ${JSON.stringify(
-    methods,
-    null,
-    2
-  )}`;
-
-  contentTs = formatTypescript(contentTs);
-
-  writeFileSync(resolve(pathOutputDir, `${lowerModuleName}.ts`), contentTs);
+  const content = JSON.stringify(
+    methods.reduce<Record<string, Method>>(
+      (map, method) => ({
+        ...map,
+        [method.name]: method,
+      }),
+      {}
+    )
+  );
+
+  writeFileSync(resolve(pathOutputDir, `${lowerModuleName}.json`), content);
 }
 
 /**