docs: improve docs

TexteaInc · Mar 20, 2023 · c5e1753 · c5e1753
1 parent 8900389
commit c5e1753
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 85 deletions.
diff --git a/docs/components/JsonViewerPreview.tsx b/docs/components/JsonViewerPreview.tsx
@@ -1,11 +1,14 @@
-import type { JsonViewerProps } from '@textea/json-viewer'
+import type { JsonViewerProps, JsonViewerTheme } from '@textea/json-viewer'
 import { JsonViewer } from '@textea/json-viewer'
+import { useTheme } from 'nextra-theme-docs'
 import type { FC } from 'react'
 
 export const JsonViewerPreview: FC<JsonViewerProps> = (props) => {
+  const { theme, systemTheme } = useTheme()
+  const currentTheme = (theme === 'system' ? systemTheme : theme) as JsonViewerTheme
   return (
     <JsonViewer
-      theme='auto'
+      theme={currentTheme}
       style={{
         fontSize: 12
       }}

diff --git a/docs/next.config.js b/docs/next.config.js
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -0,0 +1,20 @@
+import nextra from 'nextra'
+
+const withNextra = nextra({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.js',
+  staticImage: true,
+  defaultShowCopyCode: true
+})
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  optimizeFonts: true,
+  images: {
+    domains: ['i.imgur.com', 'www.netlify.com']
+  },
+  transpilePackages: ['@textea/json-viewer']
+}
+
+export default withNextra(nextConfig)
diff --git a/docs/package.json b/docs/package.json
@@ -22,7 +22,6 @@
     "@types/node": "^18.15.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "next-transpile-modules": "^10.0.0",
     "typescript": "^5.0.2"
   }
 }
diff --git a/docs/pages/full/index.tsx b/docs/pages/full/index.tsx
@@ -128,9 +128,7 @@ const IndexPage: FC = () => {
       }))
     }
     const id = setInterval(loop, 1000)
-    return () => {
-      clearInterval(id)
-    }
+    return () => clearInterval(id)
   }, [])
   return (
     <div>
@@ -279,6 +277,9 @@ const IndexPage: FC = () => {
             }, []
           )
         }
+        style={{
+          paddingLeft: 16
+        }}
       />
     </div>
   )

diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -4,31 +4,53 @@ import { JsonViewerPreview } from '../components/JsonViewerPreview'
 
 # @textea/json-viewer
 
-### NPM
+## Overview
 
-```shell
-npm install @textea/json-viewer
-```
+> **Makes data visualization a breeze!**
 
-### Yarn
+`@textea/json-viewer` allows you to display JSON data in a readable and user-friendly format. But it's not just limited to JSON - you can use it to view **ANY** kind of data. The library is highly customizable and supports 100% TypeScript, making it easy to modify and tailor to your specific needs.
 
-```shell
-yarn add @textea/json-viewer
-```
+## Getting Started
 
-### PNPM
+### Installation
 
 ```shell
+npm install @textea/json-viewer
+# or
+yarn add @textea/json-viewer
+# or
 pnpm add @textea/json-viewer
 ```
 
+You can also use it directly from a CDN:
+
+```html {5,8-12} filename="index.html"
+<!DOCTYPE html>
+<html lang="en">
+  <body>
+    <div id="json-viewer"></div>
+    <script src="https://cdn.jsdelivr.net/npm/@textea/json-viewer"></script>
+
+    <script>
+      new JsonViewer({
+        value: {
+          /* ... */
+        }
+      }).render('#json-viewer')
+    </script>
+  </body>
+</html>
+```
+
 ### Basic Example
 
 ```tsx
 import { JsonViewer } from '@textea/json-viewer'
 
-const object = { /* my json object */ }
-const Component = () => (<JsonViewer value={object}/>)
+const object = {
+  /* my json object */
+}
+const Component = () => <JsonViewer value={object} />
 ```
 
 <JsonViewerPreview
@@ -37,13 +59,26 @@ const Component = () => (<JsonViewer value={object}/>)
     number: 1,
     float: 114.514,
     bigint: 10086n,
-    object: {
-      value: new Date('December 17, 1995 03:24:00')
-    }
+    object: { a: undefined },
+    map: new Map([
+      ['oh no', null],
+      ['birth', new Date('December 17, 1995 03:24:00')]
+    ])
   }}
 />
 
-### Props
+### Full Example
+
+<br />
+<Button variant="contained" component={Link} href="/full">
+  DEMO
+</Button>
+
+Check the [source code](https://github.com/TexteaInc/json-viewer/blob/main/docs/pages/full/index.tsx) for more details.
+
+## Configuration
+
+### Options
 
 | Name                         | Type                                                                                                    | Default   | Description                                                                                                                                                                          |
 | ---------------------------- | ------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -57,7 +92,7 @@ const Component = () => (<JsonViewer value={object}/>)
 | `valueTypes`                 | `ValueTypes`                                                                                            | -         | Customize value types.                                                                                                                                                               |
 | `onChange`                   | `(path, oldVal, newVal) => void`                                                                        | -         | Callback when value changed.                                                                                                                                                         |
 | `onCopy`                     | `(path, value) => void`                                                                                 | -         | Callback when value copied.                                                                                                                                                          |
-| `onSelect`                     | `(path, value) => void`                                                                                 | -         | Callback when value selected.                                                                                                                                                          |
+| `onSelect`                   | `(path, value) => void`                                                                                 | -         | Callback when value selected.                                                                                                                                                        |
 | `enableClipboard`            | `boolean`                                                                                               | `true`    | Whether enable clipboard feature.                                                                                                                                                    |
 | `editable`                   | `boolean` \|<br />`(path, currentValue) => boolean`                                                     | `false`   | Whether enable edit feature. You can pass a function to customize the result.                                                                                                        |
 | `defaultInspectDepth`        | `number`                                                                                                | 5         | Default inspect depth for nested objects.<br /><br />_\* If the number is set too large, it could result in performance issues._                                                     |
@@ -69,7 +104,7 @@ const Component = () => (<JsonViewer value={object}/>)
 | `displayDataTypes`           | `boolean`                                                                                               | `true`    | Whether display data type labels.                                                                                                                                                    |
 | `displayObjectSize`          | `boolean`                                                                                               | `true`    | Whether display the size of array and object.                                                                                                                                        |
 
-#### Props mapping from `react-json-view`
+#### Mapping from [`mac-s-g/react-json-view`](https://github.com/mac-s-g/react-json-view)
 
 | Name        | Type      | Alternative                                       |
 | ----------- | --------- | ------------------------------------------------- |
@@ -79,19 +114,13 @@ const Component = () => (<JsonViewer value={object}/>)
 
 ### Type Declaration
 
-see [src/type.ts](https://github.com/TexteaInc/json-viewer/blob/main/src/type.ts)
-
-### Full Example
-
-<Link href="/full">
-  <Button>
-    View ->
-  </Button>
-</Link>
+See [src/type.ts](https://github.com/TexteaInc/json-viewer/blob/main/src/type.ts)
 
 ## Contributors
 
-<a href="https://github.com/TexteaInc/json-viewer/graphs/contributors"><img src="https://opencollective.com/json-viewer/contributors.svg?width=890&button=false" /></a>
+<a href="https://github.com/TexteaInc/json-viewer/graphs/contributors">
+  <img src="https://opencollective.com/json-viewer/contributors.svg?width=890&button=false" />
+</a>
 
 ## Acknowledge
 

diff --git a/docs/theme.config.js b/docs/theme.config.js
@@ -1,5 +1,6 @@
 export default {
   logo: '@textea/json-viewer',
+  docsRepositoryBase: 'https://github.com/TexteaInc/json-viewer/tree/main/docs',
   project: {
     link: 'https://github.com/TexteaInc/json-viewer'
   },

diff --git a/yarn.lock b/yarn.lock
@@ -1684,7 +1684,6 @@ __metadata:
     "@types/react-dom": ^18.0.11
     gray-matter: ^4.0.3
     next: ^13.2.4
-    next-transpile-modules: ^10.0.0
     nextra: ^2.2.19
     nextra-theme-docs: ^2.2.19
     react: ^18.2.0
@@ -3448,16 +3447,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enhanced-resolve@npm:^5.10.0":
-  version: 5.12.0
-  resolution: "enhanced-resolve@npm:5.12.0"
-  dependencies:
-    graceful-fs: ^4.2.4
-    tapable: ^2.2.0
-  checksum: bf3f787facaf4ce3439bef59d148646344e372bef5557f0d37ea8aa02c51f50a925cd1f07b8d338f18992c29f544ec235a8c64bcdb56030196c48832a5494174
-  languageName: node
-  linkType: hard
-
 "entities@npm:^4.4.0":
   version: 4.4.0
   resolution: "entities@npm:4.4.0"
@@ -4636,7 +4625,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.10, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.10, graceful-fs@npm:^4.2.6":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: ac85f94da92d8eb6b7f5a8b20ce65e43d66761c55ce85ac96df6865308390da45a8d3f0296dd3a663de65d30ba497bd46c696cc1e248c72b13d6d567138a4fc7
@@ -7056,15 +7045,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-transpile-modules@npm:^10.0.0":
-  version: 10.0.0
-  resolution: "next-transpile-modules@npm:10.0.0"
-  dependencies:
-    enhanced-resolve: ^5.10.0
-  checksum: 3300fc7081f63b2c9487588db7cbe718f209dfd2111adec22d9c8af0e3c8ade2d95fd45f91e045546d78d98cafc78a49431de9a623360d33831b5e694bf007c9
-  languageName: node
-  linkType: hard
-
 "next@npm:^13.2.4":
   version: 13.2.4
   resolution: "next@npm:13.2.4"
@@ -8957,13 +8937,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tapable@npm:^2.2.0":
-  version: 2.2.1
-  resolution: "tapable@npm:2.2.1"
-  checksum: 3b7a1b4d86fa940aad46d9e73d1e8739335efd4c48322cb37d073eb6f80f5281889bf0320c6d8ffcfa1a0dd5bfdbd0f9d037e252ef972aca595330538aac4d51
-  languageName: node
-  linkType: hard
-
 "tar@npm:^6.1.11, tar@npm:^6.1.2":
   version: 6.1.13
   resolution: "tar@npm:6.1.13"