docusaurus-theme-openapi-docs 0.0.0-362 → 0.0.0-365

package/lib/theme/ApiDemoPanel/SecuritySchemes/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Link = _interopRequireDefault(require("@docusaurus/Link"));
+
 var _hooks = require("../hooks");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,9 +19,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
-function SecuritySchemes() {
+function SecuritySchemes(props) {
   const options = (0, _hooks.useTypedSelector)(state => state.auth.options);
   const selected = (0, _hooks.useTypedSelector)(state => state.auth.selected);
+  const infoAuthPath = `/${props.infoPath}#authentication`;
   if (selected === undefined) return null;
   const selectedAuth = options[selected];
   return <div style={{
@@ -32,7 +35,9 @@ function SecuritySchemes() {
 
       if (isApiKey || isBearer) {
         return <_react.default.Fragment key={selected}>
-              <b>Authorization: {auth.key}</b>
+              <b>
+                Authorization: <_Link.default to={infoAuthPath}>{auth.key}</_Link.default>
+              </b>
               <pre style={{
             display: "flex",
             flexDirection: "column",

package/lib/theme/ApiDemoPanel/index.js

@@ -46,7 +46,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 function ApiDemoPanel({
-  item
+  item,
+  infoPath
 }) {
   var _item$responses, _item$requestBody$con, _item$requestBody, _item$servers, _item$parameters, _xCodeSamples;
 
@@ -110,19 +111,14 @@ function ApiDemoPanel({
   return <_reactRedux.Provider store={store2}>
       <div className={_stylesModule.default.apiDemoPanelContainer}>
         <_MethodEndpoint.default method={method} path={path} />
-
-        <_SecuritySchemes.default />
-
+        <_SecuritySchemes.default infoPath={infoPath} />
         <div className={_stylesModule.default.optionsPanel}>
           <_ParamOptions.default />
           <_Body.default jsonRequestBodyExample={item.jsonRequestBodyExample} requestBodyMetadata={item.requestBody} />
           <_Accept.default />
         </div>
-
         <_Server.default />
-
         <_Curl.default postman={postman} codeSamples={(_xCodeSamples = item["x-code-samples"]) !== null && _xCodeSamples !== void 0 ? _xCodeSamples : []} />
-
         <_Response.default />
       </div>
     </_reactRedux.Provider>;

package/lib/theme/ApiItem/index.js

@@ -85,6 +85,7 @@ function DocItemContent(props) {
     frontMatter
   } = DocContent;
   const {
+    info_path: infoPath,
     hide_title: hideTitle,
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
@@ -131,7 +132,7 @@ function DocItemContent(props) {
                     <DocContent />
                   </div>
                   {api && <div className="col col--5">
-                      <ApiDemoPanel item={api} />
+                      <ApiDemoPanel item={api} infoPath={infoPath} />
                     </div>}
                 </div>
               </_MDXContent.default>

package/lib-next/theme/ApiDemoPanel/SecuritySchemes/index.js

@@ -5,11 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
+import Link from "@docusaurus/Link";
 import { useTypedSelector } from "../hooks";
 
-function SecuritySchemes() {
+function SecuritySchemes(props) {
   const options = useTypedSelector((state) => state.auth.options);
   const selected = useTypedSelector((state) => state.auth.selected);
+  const infoAuthPath = `/${props.infoPath}#authentication`;
   if (selected === undefined) return null;
   const selectedAuth = options[selected];
   return (
@@ -27,7 +29,9 @@ function SecuritySchemes() {
         if (isApiKey || isBearer) {
           return (
             <React.Fragment key={selected}>
-              <b>Authorization: {auth.key}</b>
+              <b>
+                Authorization: <Link to={infoAuthPath}>{auth.key}</Link>
+              </b>
               <pre
                 style={{
                   display: "flex",

package/lib-next/theme/ApiDemoPanel/index.js

@@ -21,7 +21,7 @@ import Server from "./Server";
 import { createStoreWithState } from "./store";
 import styles from "./styles.module.css";
 
-function ApiDemoPanel({ item }) {
+function ApiDemoPanel({ item, infoPath }) {
   const { siteConfig } = useDocusaurusContext();
   const themeConfig = siteConfig.themeConfig;
   const options = themeConfig.api;
@@ -83,9 +83,7 @@ function ApiDemoPanel({ item }) {
     <Provider store={store2}>
       <div className={styles.apiDemoPanelContainer}>
         <MethodEndpoint method={method} path={path} />
-
-        <SecuritySchemes />
-
+        <SecuritySchemes infoPath={infoPath} />
         <div className={styles.optionsPanel}>
           <ParamOptions />
           <Body
@@ -94,11 +92,8 @@ function ApiDemoPanel({ item }) {
           />
           <Accept />
         </div>
-
         <Server />
-
         <Curl postman={postman} codeSamples={item["x-code-samples"] ?? []} />
-
         <Response />
       </div>
     </Provider>

package/lib-next/theme/ApiItem/index.js

@@ -58,6 +58,7 @@ function DocItemContent(props) {
   const { content: DocContent } = props;
   const { metadata, frontMatter } = DocContent;
   const {
+    info_path: infoPath,
     hide_title: hideTitle,
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
@@ -121,7 +122,7 @@ function DocItemContent(props) {
                   </div>
                   {api && (
                     <div className="col col--5">
-                      <ApiDemoPanel item={api} />
+                      <ApiDemoPanel item={api} infoPath={infoPath} />
                     </div>
                   )}
                 </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-362",
+  "version": "0.0.0-365",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -51,7 +51,7 @@
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-362",
+    "docusaurus-plugin-openapi-docs": "0.0.0-365",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "monaco-editor": "^0.31.1",
@@ -70,5 +70,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "b887778ce634dfbc7f723721ffacef03679cec7e"
+  "gitHead": "f9390cc5f7f74c629f45bb374c26dac169deb797"
 }

package/src/theme/ApiDemoPanel/SecuritySchemes/index.tsx

@@ -7,11 +7,14 @@
 
 import React from "react";
 
+import Link from "@docusaurus/Link";
+
 import { useTypedSelector } from "../hooks";
 
-function SecuritySchemes() {
+function SecuritySchemes(props: any) {
   const options = useTypedSelector((state) => state.auth.options);
   const selected = useTypedSelector((state) => state.auth.selected);
+  const infoAuthPath = `/${props.infoPath}#authentication`;
 
   if (selected === undefined) return null;
 
@@ -28,7 +31,9 @@ function SecuritySchemes() {
         if (isApiKey || isBearer) {
           return (
             <React.Fragment key={selected}>
-              <b>Authorization: {auth.key}</b>
+              <b>
+                Authorization: <Link to={infoAuthPath}>{auth.key}</Link>
+              </b>
               <pre
                 style={{
                   display: "flex",

package/src/theme/ApiDemoPanel/index.tsx

@@ -27,7 +27,13 @@ import Server from "./Server";
 import { createStoreWithState } from "./store";
 import styles from "./styles.module.css";
 
-function ApiDemoPanel({ item }: { item: NonNullable<ApiItem> }) {
+function ApiDemoPanel({
+  item,
+  infoPath,
+}: {
+  item: NonNullable<ApiItem>;
+  infoPath: string;
+}) {
   const { siteConfig } = useDocusaurusContext();
   const themeConfig = siteConfig.themeConfig as ThemeConfig;
   const options = themeConfig.api;
@@ -89,9 +95,7 @@ function ApiDemoPanel({ item }: { item: NonNullable<ApiItem> }) {
     <Provider store={store2}>
       <div className={styles.apiDemoPanelContainer}>
         <MethodEndpoint method={method} path={path} />
-
-        <SecuritySchemes />
-
+        <SecuritySchemes infoPath={infoPath} />
         <div className={styles.optionsPanel}>
           <ParamOptions />
           <Body
@@ -100,14 +104,11 @@ function ApiDemoPanel({ item }: { item: NonNullable<ApiItem> }) {
           />
           <Accept />
         </div>
-
         <Server />
-
         <Curl
           postman={postman}
           codeSamples={(item as any)["x-code-samples"] ?? []}
         />
-
         <Response />
       </div>
     </Provider>

package/src/theme/ApiItem/index.tsx

@@ -30,7 +30,9 @@ import type { ApiItem as ApiItemType } from "docusaurus-plugin-openapi-docs/lib/
 import { DocFrontMatter } from "../../types";
 import styles from "./styles.module.css";
 
-let ApiDemoPanel = (_: { item: any }) => <div style={{ marginTop: "3.5em" }} />;
+let ApiDemoPanel = (_: { item: any; infoPath: any }) => (
+  <div style={{ marginTop: "3.5em" }} />
+);
 if (ExecutionEnvironment.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
 }
@@ -53,11 +55,12 @@ function DocItemContent(props: Props): JSX.Element {
   const { content: DocContent } = props;
   const { metadata, frontMatter } = DocContent;
   const {
+    info_path: infoPath,
     hide_title: hideTitle,
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
     toc_max_heading_level: tocMaxHeadingLevel,
-  } = frontMatter;
+  } = frontMatter as DocFrontMatter;
   const { title } = metadata;
 
   const { api } = frontMatter as ApiFrontMatter;
@@ -122,7 +125,7 @@ function DocItemContent(props: Props): JSX.Element {
                   </div>
                   {api && (
                     <div className="col col--5">
-                      <ApiDemoPanel item={api} />
+                      <ApiDemoPanel item={api} infoPath={infoPath} />
                     </div>
                   )}
                 </div>

package/src/types.ts

@@ -177,4 +177,6 @@ export type DocFrontMatter = {
   draft?: boolean;
   /** Allows overriding the last updated author and/or date. */
   last_update?: FileChange;
+  /** Provides OpenAPI Docs with a reference path to their respective Info Doc */
+  info_path?: string;
 };