Add docs

.changeset/config.json

@@ -14,5 +14,5 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"
   },
-  "ignore": ["redocusaurus-example"]
+  "ignore": ["redocusaurus-website"]
 }

.changeset/olive-badgers-drive.md

@@ -0,0 +1,5 @@
+---
+'docusaurus-theme-redoc': patch
+---
+
+Fix common types not being exported

.eslintignore

@@ -129,5 +129,5 @@ static/openapi
 .tsbuild.info
 .tsbuild.jsx.info
 
-example/docusaurus.config.js
-example/babel.config.js
+website/docusaurus.config.js
+website/babel.config.js

.github/workflows/build.yml

@@ -43,7 +43,7 @@ jobs:
         run: yarn build
 
       - name: Build Example 🔨
-        run: yarn build:example
+        run: yarn build:website
         env:
           DEPLOY_PRIME_URL: https://rohit-gohri.github.io/
           DEPLOY_BASE_URL: /redocusaurus/
@@ -53,7 +53,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages
-          folder: example/build
+          folder: website/build
           clean: true # Automatically remove deleted files from the deploy branch
           git-config-email: drone@rohit.page
           git-config-name: Drone User

DEVELOPMENT.md

@@ -36,7 +36,7 @@ This repository is structured as a [monorepo](https://blog.npmjs.org/post/186494
 1. Build the projects
 
    ```sh
-   yarn build && yarn build:example
+   yarn build && yarn build:website
    ```
 
 1. Run in Dev (Watch) Mode

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Rohit Gohri
+Copyright (c) 2021 Rohit Gohri
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -28,7 +28,7 @@ A content plugin that creates pages from your OpenAPI files or URLs and rendered
 
 A Docusaurus Preset that uses the above 2 plugins to easily add API docs to your docs site.
 
-### [Example](./example)
+### [Example](./website)
 
 Example project show casing the preset in action with multiple different OpenAPI specs.
 

lerna.json

@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
-  "packages": ["example", "packages/*"],
+  "packages": ["website", "packages/*"],
   "command": {
     "publish": {
       "allowBranch": ["main"],

package.json

@@ -4,15 +4,15 @@
   "private": "true",
   "description": "Redoc for DocusaurusV2",
   "scripts": {
-    "build": "lerna run build --ignore 'redocusaurus-example'",
-    "build:example": "lerna run build --scope 'redocusaurus-example'",
+    "build": "lerna run build --ignore 'redocusaurus-website'",
+    "build:website": "lerna run build --scope 'redocusaurus-website'",
     "clean": "lerna exec -- \"rm -rf dist* .tsbuild*.info\"",
-    "dev": "lerna run --parallel dev --ignore redocusaurus-example",
-    "dev:example": "lerna run --parallel dev --scope 'redocusaurus-example'",
+    "dev": "lerna run --parallel dev --ignore redocusaurus-website",
+    "dev:website": "lerna run --parallel dev --scope 'redocusaurus-website'",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "yarn lint --fix",
     "release": "yarn build && changeset publish",
-    "start": "yarn build && lerna run start --stream --scope redocusaurus-example",
+    "start": "yarn build && lerna run start --stream --scope redocusaurus-website",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -63,7 +63,7 @@
   },
   "workspaces": {
     "packages": [
-      "example",
+      "website",
       "packages/*"
     ]
   },

packages/docusaurus-theme-redoc/Readme.md

@@ -8,45 +8,43 @@ This theme provides a `Redoc` and a `ApiDoc` theme component with a theme matchi
 
 1. Install theme:
 
-    ```sh
-    npm i --save docusaurus-theme-redoc
-    ```
+   ```sh
+   npm i --save docusaurus-theme-redoc
+   ```
 
 1. Add it as a theme to your docusaurus config:
 
-    ```js
-    // docusaurus.config.js
+   ```js
+   // docusaurus.config.js
 
-    module.exports = {
-      // ...
-      themes: [
-        'docusaurus-theme-redoc',
-      ],
-      // ...
-    }
-    ```
+   module.exports = {
+     // ...
+     themes: ['docusaurus-theme-redoc'],
+     // ...
+   };
+   ```
 
 ## Theme Components
 
 ### Redoc
 
 RedocStandalone with dark mode support, matching docusaurus classic theme.
 
-  ```js
-  import Redoc from '@theme/Redoc';
-  ```
+```js
+import Redoc from '@theme/Redoc';
+```
 
-See [here for full example.](https://github.com/rohit-gohri/redocusaurus/tree/main/example/src/pages/custom-layout/index.js)
+See [here for full example.](https://github.com/rohit-gohri/redocusaurus/tree/main/website/src/pages/examples/custom-layout/index.js)
 
 ### ApiDoc
 
-  Includes a `@theme/Layout` wrapper over Redoc.
+Includes a `@theme/Layout` wrapper over Redoc.
 
-  ```js
-  import ApiDoc from '@theme/ApiDoc';
-  ```
+```js
+import ApiDoc from '@theme/ApiDoc';
+```
 
-See [here for full example.](https://github.com/rohit-gohri/redocusaurus/tree/main/example/src/pages/custom-page/index.js)
+See [here for full example.](https://github.com/rohit-gohri/redocusaurus/tree/main/website/src/pages/examples/custom-page/index.js)
 
 ## Options
 
@@ -59,8 +57,6 @@ Hex code to be passed as the `main` color to [RedocStandalone](https://github.co
 Override the default redoc options passed to the [RedocStandalone](https://github.com/redocly/redoc#usage-as-a-react-component) component.
 See the defaults [here](https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/theme/Redoc/Redoc.tsx#L101-L108).
 
-
-
 ## Related Preset
 
 Read More Here: <https://github.com/rohit-gohri/redocusaurus>

packages/docusaurus-theme-redoc/src/theme/ApiSchema/ApiSchema.tsx

@@ -4,12 +4,14 @@ import {
   useAllPluginInstancesData,
 } from '@docusaurus/useGlobalData';
 import useThemeContext from '@theme/hooks/useThemeContext';
+import clsx from 'clsx';
 import { ThemeProvider } from 'styled-components';
 import { SchemaDefinition, AppStore } from 'redoc';
 import { ApiSchemaProps as Props, GlobalData, Spec } from '../../types/common';
 import '../Redoc/styles.css';
+import './styles.css';
 
-function ApiSchema({ id, ...rest }: Props): JSX.Element {
+function ApiSchema({ id, hideExample, ...rest }: Props): JSX.Element {
   const { isDarkTheme } = useThemeContext();
   const allData = useAllPluginInstancesData<Spec>('docusaurus-plugin-redoc');
   const { lightTheme, darkTheme, redocOptions } = usePluginData<GlobalData>(
@@ -44,7 +46,13 @@ function ApiSchema({ id, ...rest }: Props): JSX.Element {
 
   return (
     <ThemeProvider theme={store.options.theme}>
-      <div className="redocusaurus redocusaurus-schema">
+      <div
+        className={clsx([
+          'redocusaurus',
+          'redocusaurus-schema',
+          hideExample ? 'hide-example' : null,
+        ])}
+      >
         <SchemaDefinition
           parser={store.spec.parser}
           options={store.options}

packages/docusaurus-theme-redoc/src/theme/ApiSchema/styles.css

@@ -0,0 +1,6 @@
+.redocusaurus-schema.hide-example > div > div > div:nth-child(2) {
+  display: none;
+}
+.redocusaurus-schema.hide-example > div > div > div:nth-child(1) {
+  width: 100%;
+}

packages/docusaurus-theme-redoc/src/types/common.d.ts → packages/docusaurus-theme-redoc/src/types/common.ts

@@ -1,6 +1,6 @@
-import { Props as LayoutProps } from '@theme/Layout';
-import { RedocRawOptions, ObjectDescriptionProps } from 'redoc';
-import { RecursivePartial } from './util';
+import type { Props as LayoutProps } from '@theme/Layout';
+import type { RedocRawOptions, ObjectDescriptionProps } from 'redoc';
+import type { RecursivePartial } from './util';
 
 export type RedocProps = {
   spec?: Record<string, unknown>;
@@ -16,6 +16,7 @@ export type ApiSchemaProps = Omit<
    * And pass the same here
    */
   id?: string;
+  hideExample?: boolean;
 };
 
 export type Spec = {

packages/redocusaurus/src/index.ts

@@ -4,10 +4,12 @@ import type { ThemeOptions } from 'docusaurus-theme-redoc';
 
 export interface PresetOptions {
   debug?: boolean;
-  specs: PluginOptions[] | PluginOptions;
+  specs: PluginOptions[];
   theme?: ThemeOptions;
 }
 
+export type PresetEntry = ['redocusaurus', PresetOptions];
+
 export default function preset(
   context: LoadContext,
   opts: PresetOptions = {