refactor(open-api): load yaml files from (remote) url rather than jso…

…n files from a local directory

INT-407

package.json

@@ -91,7 +91,8 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
     "vite-svg-loader": "^4.0.0",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "yaml": "^2.4.1"
   },
   "packageManager": "[email protected]",
   "volta": {

src/.vuepress/config.ts

@@ -27,7 +27,7 @@ export default defineUserConfig({
 
   plugins: [
     openApiPlugin({
-      specsDir: 'src/openapi',
+      yamlUrls: ['https://address.api.myparcel.nl/openapi.yaml'],
     }),
 
     parseTranslationsPlugin({

src/.vuepress/plugins/openApi.ts

@@ -1,29 +1,28 @@
-import fs from 'fs';
+import {parse as parseYaml} from 'yaml';
 import {createPage, type Plugin} from 'vuepress';
 import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import {kebabCase} from 'lodash-es';
 import {resolveRefs} from '../theme/client/utils/openApiHelpers';
 
 interface OpenApiPluginConfig {
-  specsDir: string;
+  yamlUrls: string[];
 }
 
 export const openApiPlugin = (config: OpenApiPluginConfig): Plugin => ({
   name: '@myparcel/vuepress-openapi',
-  onInitialized(app) {
-    // Find all .json files in config.spesDir and create a page for each of them
-    fs.readdir(config.specsDir, (err, files) => {
-      files.forEach(async (file) => {
-        // If the file is a .json file, create a page for it
-        if (file.endsWith('.json')) {
-          // Read the file and parse it as JSON
-          const spec = JSON.parse(fs.readFileSync(`${config.specsDir}/${file}`).toString()) as OpenApiType.Document;
-          // Use the basename of the file as the slug
-          const slug = file.replace('.json', '');
-          // Now generate the page contents
-          app.pages.push(
-            await createPage(app, {
-              path: `/api-reference/${slug}`,
-              content: `\
+  async onInitialized(app) {
+    // Find all yaml files in config.yamlUrls and create a page for each of them
+    await Promise.all(
+      config.yamlUrls?.map(async (url) => {
+        const spec = (await fetch(url).then(async (res) => parseYaml(await res.text()))) as OpenApiType.Document;
+        // Use the basename of the file as the slug
+        const slug = kebabCase(spec.info.title);
+
+        // Now generate the page contents
+        app.pages.push(
+          await createPage(app, {
+            path: `/api-reference/${slug}`,
+            content: `\
 ---
 title: ${spec.info.title}
 description: ${spec.info.description}
@@ -33,12 +32,11 @@ Version ${spec.info.version}
 ${spec.info.description ?? ''}
 
 ${renderChapters(spec)}
-          `,
-            }),
-          );
-        }
-      });
-    });
+                  `,
+          }),
+        );
+      }),
+    );
   },
 });