docs: use tabs to focus on what matter

jy95 · Dec 17, 2023 · a551057 · a551057
1 parent a2e49c8
commit a551057
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 55 deletions.
diff --git a/testsite/docs/demo-viewer/generic_keywords/annotations.mdx b/testsite/docs/demo-viewer/generic_keywords/annotations.mdx
@@ -7,28 +7,30 @@ import CodeBlock from '@theme/CodeBlock';
 import Schema from "@site/static/schemas/examples/generic_keywords/annotations.json";
 import JSONSchemaViewer from "@theme/JSONSchemaViewer";
 import ReactMarkdown from 'react-markdown'
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 # Annotations
 
-JSON Schema :
-
-<CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
-
-viewerOptions :
-
-```js
-{
-    showExamples: true,
-    DescriptionComponent: ({description}) => <ReactMarkdown children={description} />
-}
-```
-
-Viewer :
-
-<JSONSchemaViewer 
-    schema={ Schema } 
-    viewerOptions={{ 
-        showExamples: true,
-        DescriptionComponent: ({description}) => <ReactMarkdown children={description} /> 
-    }}
-/>
+<Tabs>
+    <TabItem value="Viewer" label="Viewer" default>
+        <JSONSchemaViewer 
+            schema={ Schema } 
+            viewerOptions={{ 
+                showExamples: true,
+                DescriptionComponent: ({description}) => <ReactMarkdown children={description} /> 
+            }}
+        />
+    </TabItem>
+    <TabItem value="viewerOptions" label='viewerOptions'>
+        ```js
+        {
+            showExamples: true,
+            DescriptionComponent: ({description}) => <ReactMarkdown children={description} />
+        }
+        ```
+    </TabItem>
+    <TabItem value="JSON Schema" label='JSON Schema'>
+        <CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
+    </TabItem>
+</Tabs>
diff --git a/testsite/docs/demo-viewer/refs/localFile.mdx b/testsite/docs/demo-viewer/refs/localFile.mdx
@@ -8,17 +8,22 @@ import Schema from "@site/static/schemas/examples/refs/localFile.json";
 import JSONSchemaViewer from "@theme/JSONSchemaViewer";
 import generateResolverOptions from "@site/src/components/shared-libs/generateResolverOptions"
 import StringifyObject from "@site/src/components/shared-libs/stringifyObject"
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 # $ref (as local file)
 
-JSON Schema :
-
-<CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
-
-resolverOptions : 
-
-<CodeBlock language="js">{`${StringifyObject(generateResolverOptions({"basePath": "/schemas/examples/refs"}))}`}</CodeBlock>
-
-Viewer :
-
-<JSONSchemaViewer schema={ Schema } resolverOptions={generateResolverOptions({"basePath": "/schemas/examples/refs"})} />
+<Tabs>
+    <TabItem value="Viewer" label="Viewer" default>
+        <JSONSchemaViewer 
+            schema={ Schema } 
+            resolverOptions={generateResolverOptions({"basePath": "/schemas/examples/refs"})} 
+        />
+    </TabItem>
+    <TabItem value="resolverOptions" label='resolverOptions'>
+        <CodeBlock language="js">{`${StringifyObject(generateResolverOptions({"basePath": "/schemas/examples/refs"}))}`}</CodeBlock>
+    </TabItem>
+    <TabItem value="JSON Schema" label='JSON Schema'>
+        <CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
+    </TabItem>
+</Tabs>
diff --git a/testsite/docs/demo-viewer/refs/ref.mdx b/testsite/docs/demo-viewer/refs/ref.mdx
@@ -7,17 +7,19 @@ import CodeBlock from '@theme/CodeBlock';
 import Schema from "@site/static/schemas/examples/refs/refOnRoot.json";
 import JSONSchemaViewer from "@theme/JSONSchemaViewer";
 export const resolverOptions = {"jsonPointer": "#/definitions/user"}
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 # $ref
 
-JSON Schema :
-
-<CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
-
-resolverOptions : 
-
-<CodeBlock language="json">{JSON.stringify(resolverOptions, null, 2)}</CodeBlock>
-
-Viewer :
-
-<JSONSchemaViewer schema={ Schema } resolverOptions={resolverOptions} />
+<Tabs>
+    <TabItem value="Viewer" label="Viewer" default>
+        <JSONSchemaViewer schema={ Schema } resolverOptions={resolverOptions} />
+    </TabItem>
+    <TabItem value="resolverOptions" label='resolverOptions'>
+        <CodeBlock language="json">{JSON.stringify(resolverOptions, null, 2)}</CodeBlock>
+    </TabItem>
+    <TabItem value="JSON Schema" label='JSON Schema'>
+        <CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
+    </TabItem>
+</Tabs>
diff --git a/testsite/docs/demo-viewer/refs/remoteFile.mdx b/testsite/docs/demo-viewer/refs/remoteFile.mdx
@@ -8,17 +8,19 @@ import Schema from "@site/static/schemas/examples/refs/remoteRef.json";
 import JSONSchemaViewer from "@theme/JSONSchemaViewer";
 import generateResolverOptions from "@site/src/components/shared-libs/generateResolverOptions"
 import StringifyObject from "@site/src/components/shared-libs/stringifyObject"
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 # $ref (as local file)
 
-JSON Schema :
-
-<CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
-
-resolverOptions : 
-
-<CodeBlock language="js">{`${StringifyObject(generateResolverOptions({"remote": true}))}`}</CodeBlock>
-
-Viewer :
-
-<JSONSchemaViewer schema={ Schema } resolverOptions={generateResolverOptions({"remote": true})} />
+<Tabs>
+    <TabItem value="Viewer" label="Viewer" default>
+        <JSONSchemaViewer schema={ Schema } resolverOptions={generateResolverOptions({"remote": true})} />
+    </TabItem>
+    <TabItem value="resolverOptions" label='resolverOptions'>
+        <CodeBlock language="js">{`${StringifyObject(generateResolverOptions({"remote": true}))}`}</CodeBlock>
+    </TabItem>
+    <TabItem value="JSON Schema" label='JSON Schema'>
+        <CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
+    </TabItem>
+</Tabs>