Merge pull request #44 from rohit-gohri/server-side-rendering

example/docs/Introduction.md

@@ -0,0 +1,11 @@
+---
+slug: /
+title: Introduction
+author: Rohit Gohri
+author_title: Author of Redocusaurus
+author_url: https://rohit.page
+---
+
+This is a test post.
+
+A whole bunch of other information.

example/docs/Schema.mdx

@@ -0,0 +1,17 @@
+---
+slug: /schema
+title: Schema
+author: Rohit Gohri
+author_title: Author of Redocusaurus
+author_url: https://rohit.page
+tags: [hello, docusaurus]
+---
+
+import ApiSchema from '@theme/ApiSchema';
+
+# Test
+
+<ApiSchema
+  specUrl="https://redocly.github.io/redoc/openapi.yaml"
+  schemaRef="#/components/schemas/Pet"
+/>

example/docs/hello.md

@@ -1,5 +1,5 @@
 ---
-slug: hello
+slug: /hello
 title: Hello
 author: Rohit Gohri
 author_title: Author of Redocusaurus

example/docusaurus.config.js

@@ -7,6 +7,9 @@ const config = {
       '@docusaurus/preset-classic',
       {
         debug: Boolean(process.env.DEBUG || process.env.CI),
+        docs: {
+          routeBasePath: '/docs',
+        },
       },
     ],
     [
@@ -16,17 +19,17 @@ const config = {
         specs: [
           {
             specUrl: 'https://redocly.github.io/redoc/openapi.yaml',
-            routePath: '/using-spec-url/',
+            routePath: '/examples/using-spec-url/',
           },
           {
             specUrl: `${process.env.DEPLOY_BASE_URL || '/'}openapi-page.yaml`,
-            routePath: '/using-relative-url/',
+            routePath: '/examples/using-relative-url/',
           },
           {
             spec: 'openapi.yaml',
             // This becomes the Download URL in this case
             specUrl: `${process.env.DEPLOY_BASE_URL || '/'}openapi-page.yaml`,
-            routePath: '/using-spec-yaml/',
+            routePath: '/examples/using-spec-yaml/',
           },
         ],
         theme: {
@@ -55,7 +58,12 @@ const config = {
         {
           label: 'Docs',
           position: 'left',
-          to: '/',
+          to: '/docs',
+        },
+        {
+          label: 'Examples',
+          position: 'left',
+          to: '/examples',
         },
       ],
     },

example/package.json

@@ -21,8 +21,8 @@
     "serve": "docusaurus serve"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.0",
-    "@docusaurus/preset-classic": "^2.0.0-beta.0",
+    "@docusaurus/core": "^2.0.0-beta.5",
+    "@docusaurus/preset-classic": "^2.0.0-beta.5",
     "clsx": "^1.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

example/src/pages/examples/index.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+const sections = [
+  {
+    title: <>Using ApiDoc Component</>,
+    link: '/examples/custom-page/',
+    description: (
+      <>
+        A page using ApiDoc component in{' '}
+        <a href="https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc">
+          docusaurus-theme-redoc
+        </a>
+      </>
+    ),
+  },
+  {
+    title: <>Using Redoc Component</>,
+    link: '/examples/custom-layout/',
+    description: (
+      <>
+        A page with custom Layout using Redoc component in{' '}
+        <a href="https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc">
+          docusaurus-theme-redoc
+        </a>
+      </>
+    ),
+  },
+  {
+    title: <>Using Spec URL</>,
+    link: '/examples/using-spec-url/',
+    description: (
+      <>
+        A page made automatically with{' '}
+        <a href="https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-plugin-redoc">
+          docusaurus-plugin-redoc
+        </a>
+      </>
+    ),
+  },
+  {
+    title: <>Using YAML Spec</>,
+    link: '/examples/using-spec-yaml/',
+    description: (
+      <>
+        A page made automatically with{' '}
+        <a href="https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-plugin-redoc">
+          docusaurus-plugin-redoc
+        </a>
+      </>
+    ),
+  },
+];
+
+/**
+ *
+ * @param {{
+ *   title: string | React.ReactNode;
+ *   description: string | React.ReactNode;
+ *   link?: string;
+ * }} param0
+ */
+function Section({ title, description, link }) {
+  const sectionComponent = <h3>{title}</h3>;
+  const fullLink = useBaseUrl(link);
+  return (
+    <div className={clsx('col col--6', styles.feature, styles.featuresCol)}>
+      {link ? <Link to={fullLink}>{sectionComponent}</Link> : sectionComponent}
+      <p>{description}</p>
+    </div>
+  );
+}
+
+function Docs() {
+  return (
+    <Layout title="Redocusaurus Example" description="With different use-cases">
+      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">Redocusaurus Example</h1>
+          <p>Redoc for Docusaurus with Dark Mode Support</p>
+        </div>
+      </header>
+      <main>
+        {sections && sections.length > 0 && (
+          <section className={styles.features}>
+            <div className="container">
+              <div className="row">
+                {sections.map((props, idx) => (
+                  <Section key={idx} {...props} />
+                ))}
+              </div>
+            </div>
+          </section>
+        )}
+      </main>
+    </Layout>
+  );
+}
+
+export default Docs;

example/src/pages/examples/styles.module.css

@@ -0,0 +1,41 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featuresCol {
+  padding-bottom: 25px;
+}
+
+.featureImage {
+  height: 200px;
+  width: 200px;
+}

example/src/pages/index.jsx

@@ -7,52 +7,29 @@ import styles from './styles.module.css';
 
 const sections = [
   {
-    title: <>Using ApiDoc Component</>,
-    link: '/custom-page/',
+    title: <>🌚 Dark Mode Support</>,
     description: (
-      <>
-        A page using ApiDoc component in{' '}
-        <a href="https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc">
-          docusaurus-theme-redoc
-        </a>
-      </>
+      <>Inbuilt support for Docusaurus Classic Theme&apos;s Dark Mode!</>
     ),
   },
   {
-    title: <>Using Redoc Component</>,
-    link: '/custom-layout/',
+    title: <>🧩 Customizable</>,
     description: (
       <>
-        A page with custom Layout using Redoc component in{' '}
-        <a href="https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc">
-          docusaurus-theme-redoc
-        </a>
+        Pass in your custom theme colors or options and it will be merged. All
+        components can be swizzled to suit your needs (with Typescript support)
       </>
     ),
   },
   {
-    title: <>Using Spec URL</>,
-    link: '/using-spec-url/',
+    title: <>📑 Schema Definitions</>,
     description: (
-      <>
-        A page made automatically with{' '}
-        <a href="https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-plugin-redoc">
-          docusaurus-plugin-redoc
-        </a>
-      </>
+      <>Use individual schema definitions directly in your MDX docs</>
     ),
   },
   {
-    title: <>Using YAML Spec</>,
-    link: '/using-spec-yaml/',
-    description: (
-      <>
-        A page made automatically with{' '}
-        <a href="https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-plugin-redoc">
-          docusaurus-plugin-redoc
-        </a>
-      </>
-    ),
+    title: <>⚡️ Blazing Fast</>,
+    description: <>Support for Server Side Rendering!</>,
   },
 ];
 
@@ -77,11 +54,11 @@ function Section({ title, description, link }) {
 
 function Docs() {
   return (
-    <Layout title="Redocusaurus Example" description="With different use-cases">
+    <Layout title="Redocusaurus" description="OpenAPI documentation solution">
       <header className={clsx('hero hero--primary', styles.heroBanner)}>
         <div className="container">
-          <h1 className="hero__title">Redocusaurus Example</h1>
-          <p>Redoc for Docusaurus with Dark Mode Support</p>
+          <h1 className="hero__title">Redocusaurus</h1>
+          <p>OpenAPI documentation solution made with Redoc</p>
         </div>
       </header>
       <main>

example/src/theme/Root/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import ServerStyle from '@theme/ServerStyle';
+
+function Root({ children }: { children: React.Component }): JSX.Element {
+  return (
+    <>
+      <ServerStyle from={children} />
+      {children}
+    </>
+  );
+}
+
+export default Root;

packages/docusaurus-plugin-redoc/package.json

@@ -26,8 +26,8 @@
   },
   "homepage": "https://github.com/rohit-gohri/redocusaurus#readme",
   "dependencies": {
-    "@docusaurus/types": "^2.0.0-beta.0",
-    "@docusaurus/utils": "^2.0.0-beta.0",
+    "@docusaurus/types": "^2.0.0-beta.5",
+    "@docusaurus/utils": "^2.0.0-beta.5",
     "joi": "^17.2.1",
     "yaml": "^1.10.0"
   },

packages/docusaurus-plugin-redoc/src/index.ts

@@ -9,6 +9,7 @@ import { normalizeUrl } from '@docusaurus/utils';
 import YAML from 'yaml';
 
 import {
+  Spec,
   PluginOptionSchema,
   PluginOptions,
   PluginOptionsWithDefault,
@@ -53,18 +54,21 @@ export default function redocPlugin(
       return [contentPath];
     },
     async contentLoaded({ content, actions }) {
-      const { createData, addRoute } = actions;
+      const { createData, addRoute, setGlobalData } = actions;
       if (!content && !specUrl) {
         console.error('[Redocusaurus] No spec provided');
         return;
       }
+      const data: Spec = {
+        specUrl,
+        type: content ? 'object' : 'url',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        content: (content || specUrl) as any,
+      };
+      setGlobalData(data);
       const specData = await createData(
         `redocApiSpec-${options.id || '1'}.json`,
-        JSON.stringify({
-          specUrl,
-          type: content ? 'object' : 'url',
-          content: content || specUrl,
-        }),
+        JSON.stringify(data),
       );
       const layoutData = await createData(
         `redocApiLayout-${options.id || '1'}.json`,

packages/docusaurus-plugin-redoc/src/options.ts

@@ -14,6 +14,19 @@ type LayoutProps = {
   };
 };
 
+export type Spec = {
+  specUrl?: string;
+} & (
+  | {
+      type: 'url';
+      content: string;
+    }
+  | {
+      type: 'object';
+      content: Record<string, unknown>;
+    }
+);
+
 export interface PluginOptions {
   id?: string;
   spec?: string;