Update OpenAPI docs plugin to v2.0.0 (#349)

* Update to plugin v2.0.0-beta.3 * Add missing key to NavbarDocItems li mappings * Remove maxwidth for navbar and main wrapper * Set prism code font size to openapi var * Update dark mode color theme * Use ifm-pre-background for server container * upgrade plugin and docusaurus * revert docusaurus to 2.4.0 * upgrade plugin to 665 * upgrade to v2.0.0-beta.4 * migrate to more legible font family * override send btn bg color * fix openapi response placeholder text color and alignment * revert background colors * apply more appropriate bg colors * adjust code bg color * increase body input font size * upgrade to latest canary release * upgrade to 0.0.0-beta.672 * upgrade to react 18 and beta.677 --------- Co-authored-by: Steven Serrata <[email protected]>
PaloAltoNetworks · Nov 10, 2023 · a60c0d1 · a60c0d1
1 parent b86269c
commit a60c0d1
Show file tree

Hide file tree

Showing 9 changed files with 524 additions and 438 deletions.
diff --git a/package.json b/package.json
@@ -43,22 +43,22 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.3.0",
-    "@docusaurus/core": "2.2.0",
-    "@docusaurus/plugin-client-redirects": "2.2.0",
-    "@docusaurus/preset-classic": "2.2.0",
-    "@docusaurus/theme-classic": "2.2.0",
-    "@docusaurus/theme-mermaid": "^2.2.0",
+    "@docusaurus/core": "2.4.3",
+    "@docusaurus/plugin-client-redirects": "2.4.3",
+    "@docusaurus/preset-classic": "2.4.3",
+    "@docusaurus/theme-classic": "2.4.3",
+    "@docusaurus/theme-mermaid": "2.4.3",
     "algoliasearch": "^4.14.2",
     "clsx": "^1.2.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-616",
+    "docusaurus-plugin-openapi-docs": "0.0.0-beta.677",
     "docusaurus-plugin-sass": "^0.2.2",
-    "docusaurus-theme-openapi-docs": "0.0.0-616",
+    "docusaurus-theme-openapi-docs": "0.0.0-beta.677",
     "esbuild-loader": "^2.20.0",
     "fast-xml-parser": "^4.0.10",
     "firebase": "^9.14.0",
     "plugin-sitemap-coveo": "./plugin-sitemap-coveo",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-responsive": "^9.0.0",
     "react-slick": "^0.29.0",
     "sass": "^1.54.1",

diff --git a/src/components/Featured/Featured.scss b/src/components/Featured/Featured.scss
@@ -16,6 +16,8 @@
 
 html[data-theme="light"] {
   .featured-card-container {
+    border-color: var(--ifm-color-emphasis-100);
+    background-color: var(--ifm-color-emphasis-0);
     &.network-security a:hover {
       color: var(--ifm-color-panos-dark);
     }
@@ -43,8 +45,7 @@ html[data-theme="light"] {
 .featured-card-container {
   padding: 1.5rem;
   border-radius: 1rem;
-  background-color: var(--ifm-color-emphasis-0);
-  border: 2px solid var(--ifm-color-emphasis-100);
+  border: 2px solid var(--ifm-toc-border-color);
   transition: 500ms all;
 
   a {

diff --git a/src/components/HomepageBanner/HomepageBanner.scss b/src/components/HomepageBanner/HomepageBanner.scss
@@ -1,3 +1,9 @@
+html[data-theme="dark"] {
+  .homepage-banner-container {
+    border-color: var(--ifm-toc-border-color);
+  }
+}
+
 .homepage-banner-container {
   padding: 3rem;
   text-align: center;

diff --git a/src/components/HompageHero/HomepageHero.scss b/src/components/HompageHero/HomepageHero.scss
@@ -1,5 +1,11 @@
-html[data-theme="dark"] .hero-image__logo {
-  content: url("/img/PANW_Parent_Logo_White.svg");
+html[data-theme="dark"] {
+  .hero-image__logo {
+    content: url("/img/PANW_Parent_Logo_White.svg");
+  }
+
+  .hero-background-wrapper {
+    border-color: var(--ifm-toc-border-color);
+  }
 }
 
 /* The typing effect */

diff --git a/src/components/Medium/styles.module.css b/src/components/Medium/styles.module.css
@@ -1,3 +1,7 @@
+html[data-theme="dark"] .showcaseBlog {
+  background-color: var(--ifm-pre-background);
+}
+
 .showcaseBlog {
   height: 500px;
   background-color: var(--ifm-color-emphasis-100);

diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -95,9 +95,13 @@ html:has(body):has(div):has(div):has(.homepage) {
   /* END SIDEBAR VARS */
 
   /* START FONTS */
-  --ifm-font-family-base: "Inter", sans-serif, system-ui, -apple-system;
+  --ifm-font-family-base: "Plus Jakarta Sans", ui-sans-serif, system-ui,
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   --ifm-heading-font-family: "Metropolis Semi Bold", sans-serif;
-  --ifm-font-family-monospace: "Source Code Pro", monospace;
+  --ifm-font-family-monospace: "Fira Code", SFMono-Regular, Menlo, Monaco,
+    Consolas, "Liberation Mono", "Courier New", monospace;
   --ifm-font-size-base: 95%;
   /* END FONTS */
 
@@ -171,6 +175,12 @@ html[data-theme="dark"] {
   /* START BACKGROUND COLOR */
   --ifm-background-surface-color: var(--ifm-color-gray-1000);
   --ifm-background-color: var(--ifm-color-gray-1000);
+  --ifm-pre-background: var(--ifm-color-gray-900);
+  --ifm-toc-border-color: rgba(84, 84, 84, 0.48);
+  --ifm-navbar-background-color: var(--ifm-color-gray-1000);
+  --ifm-card-background-color: var(--ifm-color-gray-900);
+  --prism-background-color: var(--ifm-background-color) !important;
+  --ifm-footer-background-color: var(--ifm-pre-background);
   /* END BACKGROUND COLOR */
 
   /* START SIDEBAR COLORS */
@@ -279,6 +289,10 @@ html[data-theme="dark"] {
     color: black;
   }
   /* END VERSION BADGES */
+
+  .openapi-demo__server-container {
+    background: var(--ifm-pre-background);
+  }
 }
 
 /* START CODE TABS */
@@ -341,7 +355,6 @@ html[data-theme="dark"] {
 /* START DOCUSAURUS OVERALL */
 .main-wrapper {
   width: 100%;
-  max-width: 1400px;
   align-self: center;
   overflow: visible;
 }
@@ -350,12 +363,12 @@ html[data-theme="dark"] {
 
 /* START NAVBAR */
 .navbar {
-  border-bottom: 1px solid var(--ifm-color-emphasis-100);
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+  box-shadow: none;
 }
 
 .navbar .navbar__inner {
   margin: 0 auto;
-  max-width: 1360px;
 }
 
 .dropdown {
@@ -638,6 +651,39 @@ a {
     }
   }
 }
+
+.openapi-demo__request-form {
+  .openapi-demo__request-btn {
+    opacity: 0.75;
+    background-color: var(--ifm-color-success);
+
+    &:hover {
+      opacity: 1;
+      background-color: var(--ifm-color-success);
+    }
+  }
+}
+
+.openapi-demo__response-container {
+  > div:nth-child(2) {
+    padding: 1rem;
+    background-color: var(--ifm-pre-background) !important;
+  }
+
+  .openapi-tabs__schema-container {
+    margin-top: 0;
+  }
+}
+
+.openapi-demo__response-container .openapi-demo__code-block code {
+  padding-top: var(--ifm-pre-padding) !important;
+}
+
+.openapi-demo__playground-editor {
+  .prism-code {
+    font-size: var(--openapi-demo-font-size-input);
+  }
+}
 /* END OPENAPI */
 
 /* START NAVBAR ICONS */
@@ -709,3 +755,29 @@ a {
   transform: rotate(180deg) !important;
 }
 /* END DETAILS MARKERS  */
+
+/* API Explorer send button */
+.openapi-explorer__request-btn {
+  background-color: var(--ifm-color-success) !important;
+}
+
+.openapi-explorer__request-btn:hover {
+  background-color: var(--ifm-color-success-light) !important;
+}
+
+.openapi-explorer__response-placeholder-message {
+  color: var(--ifm-color-gray-100) !important;
+  text-align: left !important;
+}
+
+.openapi-explorer__response-placeholder-message code {
+  background-color: unset !important;
+}
+
+code {
+  background-color: var(--ifm-pre-background) !important;
+}
+
+.openapi-explorer__form-item {
+  font-size: 0.9rem !important;
+}
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
@@ -152,8 +152,13 @@ html[data-theme="dark"] .heroImage {
   transition: 500ms all;
 }
 
+html[data-theme="dark"] .toolCardContainer {
+  background-color: transparent;
+  border: 2px solid var(--ifm-toc-border-color);
+}
+
 .toolCardContainer:hover {
-  border-color: var(--ifm-color-main);
+  border: 2px solid var(--ifm-color-main) !important;
 }
 
 .toolCardDescription {

diff --git a/src/theme/NavbarDocItems/index.js b/src/theme/NavbarDocItems/index.js
@@ -11,8 +11,8 @@ function NavbarDocItems({ apiDocs, docs, colorClass, productTitle }) {
     <div className="navbar-doc-items">
       <span className="navbar-doc-items__title">API Reference</span>
       <div className="navbar-doc-items__links">
-        {Object.values(apiDocs).map((apiDoc) => (
-          <li>
+        {Object.values(apiDocs).map((apiDoc, i) => (
+          <li key={i}>
             <NavbarNavLink
               className="dropdown__link"
               to={apiDoc.to}
@@ -28,8 +28,8 @@ function NavbarDocItems({ apiDocs, docs, colorClass, productTitle }) {
     <div className="navbar-doc-items">
       <span className="navbar-doc-items__title">Developer Guides</span>
       <div className="navbar-doc-items__links">
-        {Object.values(docs).map((doc) => (
-          <li>
+        {Object.values(docs).map((doc, i) => (
+          <li key={i}>
             <NavbarNavLink
               className="dropdown__link"
               to={doc.to}