Redocly: Add support for content on redocly pages (#329)

* Redocly: Add support for content on redocly pages

* Redocly: Fix redoc sidebar hiding under the header

* Redocly: Fix mobile sidebar alignment

---------

Co-authored-by: Lam Nguyen <[email protected]>

Author: nginx-jack

assets/css/v2/style.css

@@ -881,6 +881,26 @@ nav {
   [data-grid="half"] {
     grid-column: span 6;
   }
+
+  [data-grid="breakout"] {
+    grid-column: 1 / -1;
+    width: calc(100vw - var(--sidebar-width) - 4rem);
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: calc(-1 * (50vw - var(--sidebar-width) / 2 - 2rem));
+    margin-right: calc(-1 * (50vw - var(--sidebar-width) / 2 - 2rem));
+    max-width: calc(100vw - var(--sidebar-width) - 4rem);
+  }
+
+  @media (max-width: 68rem) {
+    [data-grid="breakout"] {
+      width: 100vw;
+      margin-left: -50vw;
+      margin-right: -50vw;
+      max-width: 100vw;
+    }
+  }
 }
 
 .content {
@@ -921,18 +941,20 @@ nav {
       }
     }
   }
+}
+/* Allow redocly to fill the entire container */
+.content .content__redocly {
+  border-top: 1px solid oklch(var(--color-divider));
+  border-bottom: 1px solid oklch(var(--color-divider));
+  #api-component {
+    z-index: 0;
+    position: relative;
+    display: block;
+    max-width: 100%;
 
-  /* Allow redocly to fill the entire container */
-  &.content__redocly {
-    min-width: 100%;
-    margin: 0;
-
-    #api-component {
-      z-index: 0;
-      position: relative;
-      display: block;
-      max-width: 100%;
-      margin-block-start: 1rem;
+    .redoc-wrap .menu-content {
+      top: 4rem !important; /* Override redocly's inline top property */
+      left: 0;
     }
   }
 }

exampleSite/content/test-product/redoc/api-reference.md

@@ -7,5 +7,11 @@ tags:
   - api
 doctypes:
   - reference
+nd-api-reference: "./api/example.json"
 ---
-{{< openapi spec="./api/example.json" >}}
+
+## Introduction
+
+Welcome to the API Reference documentation for the example book API. This documentation provides detailed information about the API endpoints, request/response formats, and other relevant details.
+
+## API Specification

exampleSite/content/test-product/redoc/live-example.md

@@ -7,5 +7,5 @@ tags:
   - api
 doctypes:
   - reference
+nd-api-reference: "./api/one.json"
 ---
-{{< openapi spec="./api/one.json" >}}

layouts/_default/single.html

@@ -20,6 +20,12 @@ <h1>{{ .Title }}</h1>
         {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
         {{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
 
+        {{ with (index .Page.Params "nd-api-reference") }}
+        <div class="content__redocly" data-grid="breakout">
+            {{ partial "openapi.html" . }}
+        </div>
+        {{ end }}
+
         {{ if .Page.Lastmod }}
         <div class="last-modified">
             {{ partial "page-meta-links" . }}
@@ -28,13 +34,13 @@ <h1>{{ .Title }}</h1>
 
         {{ partial "version-list" . }}
         {{ partial "qualtrics-feedback.html" }}
-
-    </section>
-    </section>
+    </article>
 </main>
 
 
 
+
+
 <!-- If there is a script defined in the page metadata, load it  -->
 {{if .Params.script}}
     {{ $script := (delimit (slice "scripts" .Params.script) "/")}}

layouts/partials/openapi.html

@@ -0,0 +1,16 @@
+<div>
+    <div id="api-component">
+        <api-container>
+            <redoc
+                spec-url='{{ . | relURL }}'
+                menu-toggle
+                path-in-middle-panel
+                required-props-first
+                hide-hostname="true"
+                show-extensions="x-f5-experimental"
+                nativeScrollbars
+            >
+            </redoc>
+        </api-container>
+    </div>
+</div>