docs: init document (#74)

Author: himself65

README.md

@@ -74,7 +74,7 @@ const Component = () => (
 )
 ```
 
-![Avatar Preview](docs/public/avatar-preview.png)
+![Avatar Preview](public/avatar-preview.png)
 
 [see the full code](examples/basic/pages/index.tsx)
 
@@ -110,7 +110,7 @@ const Component = () => (
 )
 ```
 
-![Ocean Theme Preview](docs/public/ocean-theme.png)
+![Ocean Theme Preview](public/ocean-theme.png)
 
 ### Browser
 

docs/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com./articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# nextra
+public/feed.xml

docs/README.md

@@ -0,0 +1,38 @@
+# Portfolio Starter Kit
+
+This portfolio is built with **Next.js** and a library called [Nextra](https://nextra.vercel.app/). It allows you to write Markdown and focus on the _content_ of your portfolio. This starter includes:
+
+- Automatically configured to handle Markdown/MDX
+- Generates an RSS feed based on your posts
+- A beautiful theme included out of the box
+- Easily categorize posts with tags
+- Fast, optimized web font loading
+
+https://demo.vercel.blog
+
+## Configuration
+
+1. Update your name in `theme.config.js` or change the footer.
+1. Update your name and site URL for the RSS feed in `scripts/gen-rss.js`.
+1. Update the meta tags in `pages/_document.tsx`.
+1. Update the posts inside `pages/posts/*.md` with your own content.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com./vercel/next.js/tree/canary/examples/blog&project-name=portfolio&repository-name=portfolio)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com./vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example blog my-blog
+# or
+yarn create next-app --example blog my-blog
+# or
+pnpm create next-app --example blog my-blog
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

docs/components/JsonViewerPreview.tsx

@@ -0,0 +1,13 @@
+import { JsonViewer, JsonViewerProps } from '@textea/json-viewer'
+import type React from 'react'
+
+export const JsonViewerPreview: React.FC<JsonViewerProps> = (props) => {
+  return (
+    <JsonViewer
+      style={{
+        fontSize: 12
+      }}
+      value={props.value}
+    />
+  )
+}

examples/basic/shared.ts renamed to docs/lib/shared.ts

@@ -1,3 +1,9 @@
+const withNextra = require('nextra')({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.js',
+  unstable_staticImage: true
+})
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -15,4 +21,4 @@ const withTM = require('next-transpile-modules')([], {
   debug: false
 })
 
-module.exports = withTM(nextConfig)
+module.exports = withNextra(withTM(nextConfig))

examples/basic/next.config.js renamed to docs/next.config.js

@@ -1,23 +1,24 @@
 {
-  "name": "@textea/json-viewer-example-basic",
+  "name": "@textea/json-viewer-docs",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "next start"
   },
   "dependencies": {
     "@textea/json-viewer": "workspace:^",
-    "next": "^12.3.0",
+    "gray-matter": "^4.0.3",
+    "next": "^12.3.1",
+    "nextra": "^2.0.0-beta.29",
+    "nextra-theme-docs": "^2.0.0-beta.29",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^12.3.1",
-    "@textea/dev-kit": "^0.13.4",
-    "@types/node": "^18.7.18",
-    "@types/react": "^18.0.20",
+    "@textea/dev-kit": "^0.13.8",
+    "@types/node": "^18.7.21",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "next-transpile-modules": "^9.0.0",
     "typescript": "^4.8.3"

examples/basic/package.json renamed to docs/package.json

@@ -0,0 +1,8 @@
+import 'nextra-theme-docs/style.css'
+
+import type { AppProps } from 'next/app'
+import type React from 'react'
+
+export default function Nextra ({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

docs/pages/_app.tsx

@@ -18,7 +18,7 @@ import Image from 'next/image'
 import type React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 
-import { ocean } from '../shared'
+import { ocean } from '../../lib/shared'
 
 const allowedDomains = ['i.imgur.com']
 
@@ -130,14 +130,6 @@ const IndexPage: React.FC = () => {
           >
             JSON viewer
           </Typography>
-          <a href='https://www.netlify.com' target='_blank' rel='noreferrer'>
-            <Image
-              width={114}
-              height={51}
-              src='https://www.netlify.com/v3/img/components/netlify-color-accent.svg'
-              alt='Deploys by Netlify'
-            />
-          </a>
         </Toolbar>
       </AppBar>
       <Toolbar/>

examples/basic/pages/index.tsx renamed to docs/pages/full/index.tsx

@@ -0,0 +1,63 @@
+import Link from 'next/link'
+import Button from '@mui/material/Button'
+import { JsonViewerPreview } from '../components/JsonViewerPreview'
+
+# @textea/json-viewer
+
+### NPM
+```shell
+npm install @textea/json-viewer
+```
+### Yarn
+```shell
+yarn add @textea/json-viewer
+```
+### PNPM
+```shell
+pnpm add @textea/json-viewer
+```
+
+### Basic Example
+
+```tsx
+import { JsonViewer } from '@textea/json-viewer'
+
+const object = { /* my json object */ }
+const Component = () => (<JsonViewer value={object}/>)
+```
+
+<JsonViewerPreview
+  value={{
+    string: 'this is a string',
+    number: 1,
+    float: 114.514,
+    bigint: 10086n,
+    object: {
+      value: new Date('December 17, 1995 03:24:00')
+    }
+  }}
+/>
+
+### Full Example
+
+<Link href='/full'>
+  <Button>
+    View ->
+  </Button>
+</Link>
+
+## 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>
+
+## Acknowledge
+
+This package is originally based on [mac-s-g/react-json-view](https://github.com./mac-s-g/react-json-view).
+
+Also thanks open source projects that make this possible.
+
+## Sponsoring services
+
+![Netlify](https://www.netlify.com/v3/img/components/full-logo-light.svg)
+
+[Netlify](https://www.netlify.com/) lets us distribute the [site](https://viewer.textea.io).

docs/pages/index.mdx

@@ -0,0 +1,5 @@
+export default {
+  project: {
+    link: 'https://github.com./TexteaInc/json-viewer'
+  }
+}

docs/theme.config.js

@@ -1,12 +1,13 @@
 {
   "extends": "@textea/dev-kit/config/tsconfig.root.json",
   "compilerOptions": {
-    "baseUrl": ".",
     "paths": {
-      "@textea/json-viewer": ["../../src/index"]
+      "@textea/json-viewer": [
+        "../src/index"
+      ]
     },
     "jsx": "preserve",
-    "jsxImportSource": "react",
+    "incremental": true,
     "noEmit": true
   },
   "include": [

examples/basic/tsconfig.json renamed to docs/tsconfig.json

@@ -109,6 +109,7 @@
   },
   "packageManager": "[email protected]",
   "workspaces": [
-    "examples/*"
+    "examples/*",
+    "docs"
   ]
 }