update

Author: s00d

README.md

@@ -123,3 +123,7 @@ docs/
 
 [wiki](https://github.com/on-org/nuxt-openapi-docs-module/wiki/Development)
 
+### Custom pages
+
+[wiki](https://github.com/on-org/nuxt-openapi-docs-module/wiki/Custom-pages)
+

changelog.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.5.1]- 2023-04-14
+
+### Added
+
+- custom pagex
+
+### Fixed
+
+nuxt 3 auth
+
 ## [3.4.3]- 2023-04-13
 
 ### Removed

dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-open-api-docs",
   "configKey": "openApiDocs",
-  "version": "3.4.3"
+  "version": "3.5.1"
 }

dist/module.mjs

@@ -108,6 +108,98 @@ function filesCleanup(files) {
   }
   return result;
 }
+function processCustomPaths(custom, locales) {
+  const pathsByTags = {};
+  if (Object.keys(custom).length) {
+    pathsByTags["custom"] = {
+      name: custom.name ?? "Custom",
+      description: custom.description ?? "",
+      isOpen: custom["x-tag-expanded"] ?? true,
+      items: []
+    };
+    for (const i in locales) {
+      if (custom[`x-summary-${i}`]) {
+        pathsByTags[`x-description-${i}`] = custom[`x-summary-${i}`];
+      }
+      if (custom[`x-name-${i}`]) {
+        pathsByTags[`x-name-${i}`] = custom[`x-name-${i}`];
+      }
+    }
+    for (const path in custom.paths) {
+      const item = {
+        name: custom.paths[path].title ?? path,
+        path,
+        type: "custom",
+        description: custom.paths[path].description ?? "",
+        icon: custom.paths[path]["x-icon"] ?? null
+      };
+      for (const i in locales) {
+        if (custom[`x-summary-${i}`]) {
+          pathsByTags[`x-description-${i}`] = custom[`x-summary-${i}`];
+        }
+        if (custom[`x-name-${i}`]) {
+          pathsByTags[`x-name-${i}`] = custom[`x-name-${i}`];
+        }
+      }
+      pathsByTags["custom"].items.push(item);
+    }
+  }
+  return pathsByTags;
+}
+function processOpenApiPaths(paths, locales) {
+  const pathsByTags = {};
+  for (const url in paths) {
+    let routePath = url;
+    if (routePath.startsWith("/"))
+      routePath = routePath.substring(1);
+    if (routePath.endsWith("/"))
+      routePath = routePath.substring(-1);
+    routePath = routePath.replace(/[/\\.?+=&{}]/gumi, "_").replace(/__+/, "_");
+    for (const method in paths[url]) {
+      const openapi_item = paths[url][method];
+      if (!openapi_item.tags)
+        openapi_item.tags = ["other"];
+      openapi_item.tags.forEach((tag) => {
+        if (method === "parameters")
+          return;
+        if (method === "servers")
+          return;
+        if (!pathsByTags[tag]) {
+          const tagInfo = openapi_item.tags[tag] ?? {};
+          const item2 = {
+            name: tagInfo.name ?? tag,
+            description: marked.parse(tagInfo.description ?? ""),
+            isOpen: tagInfo["x-tag-expanded"] ?? true,
+            items: []
+          };
+          for (const locale in locales) {
+            if (tagInfo[`x-description-${locale}`]) {
+              item2[`x-description-${locale}`] = marked.parse(tagInfo[`x-description-${locale}`]);
+            }
+            if (tagInfo[`x-name-${locale}`]) {
+              item2[`x-name-${locale}`] = tagInfo[`x-name-${locale}`];
+            }
+          }
+          pathsByTags[tag] = item2;
+        }
+        const item = {
+          name: url,
+          path: routePath,
+          type: method,
+          icon: openapi_item["x-icon"] ?? null,
+          description: openapi_item.summary ?? null
+        };
+        for (const i in locales) {
+          if (openapi_item[`x-summary-${i}`]) {
+            item[`x-description-${i}`] = openapi_item[`x-summary-${i}`];
+          }
+        }
+        pathsByTags[tag].items.push(item);
+      });
+    }
+  }
+  return pathsByTags;
+}
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-open-api-docs",
@@ -158,60 +250,14 @@ const module = defineNuxtModule({
       if (openApiSpec.info["x-locales"]) {
         localoptions.locales = { ...{ en: "English" }, ...openApiSpec.info["x-locales"] };
       }
-      const tags = (openApiSpec.tags ?? []).reduce((acc, tag) => {
+      (openApiSpec.tags ?? []).reduce((acc, tag) => {
         acc[tag.name] = tag;
         return acc;
       }, {});
-      const pathsByTags = {};
-      for (const url in openApiSpec.paths) {
-        let reUrl = url;
-        if (reUrl.startsWith("/"))
-          reUrl = reUrl.substring(1);
-        if (reUrl.endsWith("/"))
-          reUrl = reUrl.substring(-1);
-        reUrl = reUrl.replace(/[/\\.?+=&{}]/gumi, "_").replace(/__+/, "_");
-        for (const method in openApiSpec.paths[url]) {
-          const openapi_item = openApiSpec.paths[url][method];
-          if (!openapi_item.tags)
-            openapi_item.tags = ["other"];
-          openapi_item.tags.forEach((tag) => {
-            if (method === "parameters")
-              return;
-            if (method === "servers")
-              return;
-            if (!pathsByTags[tag]) {
-              const tagInfo = tags[tag] ?? {};
-              const item2 = {
-                name: tagInfo.name ?? tag,
-                description: marked.parse(tagInfo.description ?? ""),
-                isOpen: tagInfo["x-tag-expanded"] ?? true,
-                items: []
-              };
-              for (const i in localoptions.locales) {
-                if (tagInfo[`x-description-${i}`]) {
-                  item2[`x-description-${i}`] = marked.parse(tagInfo[`x-description-${i}`]);
-                }
-                if (tagInfo[`x-name-${i}`]) {
-                  item2[`x-name-${i}`] = tagInfo[`x-name-${i}`];
-                }
-              }
-              pathsByTags[tag] = item2;
-            }
-            const item = {
-              name: url,
-              path: reUrl,
-              type: method,
-              description: openapi_item.summary ?? null
-            };
-            for (const i in localoptions.locales) {
-              if (openapi_item[`x-summary-${i}`]) {
-                item[`x-description-${i}`] = openapi_item[`x-summary-${i}`];
-              }
-            }
-            pathsByTags[tag].items.push(item);
-          });
-        }
-      }
+      const pathsByTags = JSON.parse(JSON.stringify({
+        ...processCustomPaths(openApiSpec["x-custom-path"] ?? {}, localoptions.locales),
+        ...processOpenApiPaths(openApiSpec.paths, localoptions.locales)
+      }));
       openApiSpec.definitions = replaceMarkdown(openApiSpec.definitions, openApiSpec.components, openApiSpec.definitions);
       openApiSpec.components = replaceMarkdown(openApiSpec.components, openApiSpec.components, openApiSpec.definitions);
       localoptions.doc = replaceMarkdown(openApiSpec, openApiSpec.components, openApiSpec.definitions);
@@ -261,6 +307,8 @@ const module = defineNuxtModule({
             }
           });
           for (let tag in pathsByTags) {
+            if (tag === "custom")
+              continue;
             for (let i in pathsByTags[tag].items) {
               const item = pathsByTags[tag].items[i];
               pages.push({

dist/runtime/OpenApiPlugin.d.ts

@@ -27,7 +27,7 @@ export default class OpenApiPlugin {
     getLocaleText(lang: string, path: string): string;
     hasLocaleText(lang: string, path: string): boolean;
     hasAccess(file: string): boolean;
-    setAccess(accessor: (file: string) => true): void;
+    setAccess(accessor: (file: string) => boolean): void;
     getFooter(): string | null;
     setFooter(footer: null | string): void;
     getLogo(): string | null;

dist/runtime/components/OpenApiMenu.vue

@@ -37,7 +37,8 @@
           <nuxt-link :to="getSubRoute(route)" @click.native.stop.prevent class="block-btn py-2 px-4 hover:bg-gray-200 dark:hover:bg-gray-700">
             <div class="flex flex-col">
               <div class="font-semibold item-path">
-                <span class="px-1 font-medium method-tag" :class="getTagColor(route.type)">{{ getRouteType(route.type) }} </span>
+                <span class="px-1 font-medium method-icon" v-if="route.icon" v-html="route.icon"></span>
+                <span class="px-1 font-medium method-tag" v-else-if="route.type !== 'custom'" :class="getTagColor(route.type)">{{ getRouteType(route.type) }} </span>
                 {{ route.name }}
               </div>
               <div class="description text-sm text-gray-600 dark:text-gray-300/75 overflow-hidden overflow-ellipsis whitespace-nowrap">{{ tr(route, 'description', currentLocale) }}</div>
@@ -120,6 +121,10 @@ export default {
     getSubRoute(route) {
       const path = this.genUrl(route.path);
       const type = route.type;
+      if (route.type === 'custom') {
+        return `/${this.path}/${this.file}/${this.currentLocale}/${type}/${path}`
+      }
+
       return {name: `openapi-${this.path}/${this.file}/${this.currentLocale}-${type}-${path}`, meta: {locale: this.currentLocale, path: path, file: this.file, type: type}};
     },
     changeDoc(option) {
@@ -133,6 +138,10 @@ export default {
 </script>
 
 <style scoped>
+.method-icon {
+  width: 24px;
+  display: inline-block;
+}
 .method-tag {
   width: 45px;
   display: inline-block;

dist/runtime/components/OpenApiMenu.vue.d.ts

@@ -53,7 +53,7 @@ declare namespace _default {
                 type: string;
             };
         };
-        export function getSubRoute(route: any): {
+        export function getSubRoute(route: any): string | {
             name: string;
             meta: {
                 locale: any;

dist/runtime/components/OpenApiRoute.vue

@@ -36,10 +36,10 @@
     <OpenApiRequestBody v-if="route.requestBody" :requestBody="route.requestBody" :current-locale="currentLocale"
                         :components="components"/>
 
-    <client-only v-if="route.path">
+    <client-only v-if="url">
       <h2 class="text-lg font-bold mb-2">{{ $openapidoc.getLocaleText(currentLocale, 'Code simple') }}:</h2>
       <CodeSimples
-        :url="route.path"
+        :url="url"
         :baseUrl="server"
         :method="method"
         :mime-type="mimeType"
@@ -81,10 +81,6 @@ export default {
     subParams: {
       required: false,
     },
-    url: {
-      type: String,
-      required: true,
-    },
     path_doc: {
       type: String,
       required: true,

dist/runtime/components/OpenApiRoute.vue.d.ts

@@ -10,31 +10,31 @@ declare namespace _default {
             const required_1: boolean;
             export { required_1 as required };
         }
-        export namespace url {
+        export namespace path_doc {
             const type_1: StringConstructor;
             export { type_1 as type };
             const required_2: boolean;
             export { required_2 as required };
-            const _default: string;
-            export { _default as default };
         }
-        export namespace path_doc {
+        export namespace file {
             const type_2: StringConstructor;
             export { type_2 as type };
             const required_3: boolean;
             export { required_3 as required };
         }
-        export namespace file {
+        export namespace currentLocale {
             const type_3: StringConstructor;
             export { type_3 as type };
             const required_4: boolean;
             export { required_4 as required };
         }
-        export namespace currentLocale {
+        export namespace url {
             const type_4: StringConstructor;
             export { type_4 as type };
             const required_5: boolean;
             export { required_5 as required };
+            const _default: string;
+            export { _default as default };
         }
         export namespace server {
             const type_5: StringConstructor;

dist/runtime/layout/docs.vue

@@ -40,7 +40,7 @@
 
 <script>
 <% if (options.isNuxt3) {
-  print('import {useNuxtApp} from "#app";');
+  print('import {useNuxtApp, showError} from "#app";');
 } %>
 
 
@@ -56,7 +56,7 @@ export default {
       const { $openapidoc } = useNuxtApp()
 
       if(!$openapidoc.hasAccess(file)) {
-        throw createError({
+        showError({
           statusCode: 404,
           message: 'page not found',
         })