Merge pull request #44 from microlinkhq/docs

docs: better home
microlinkhq · Oct 23, 2024 · 7dc58ec · 7dc58ec
2 parents 11b0dae + 03bbc70
commit 7dc58ec
Show file tree

Hide file tree

Showing 35 changed files with 61 additions and 242 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,10 @@
 *.swp
 npm-debug.log
-
 /coverage
 /debug
 /dist
 /node_modules
-
 .nyc_output
-.envrc
+.envrc
+docs/dist
+.DS_Store
diff --git a/.npmignore b/.npmignore
@@ -8,14 +8,12 @@ npm-debug.log
 /demo
 /dev-server
 /doc
-/docker
 /entrypoints
 /node_modules
 /src
 /test
 /webpack
 
-Dockerfile
 .babelrc
 .coveralls.yml
 .gitignore

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -21,9 +21,3 @@ npm run build
 Please add tests for your code before posting a pull request.
 
 You can run the test suite with `npm run test` or `npm run test:watch` to automatically reload when files are modified.
-
-## Docker Tools
-
-I recommend using docker for development because it enforces environmental consistency.
-
-For information about contributing with Docker, see the [README in ./docker](https://github.com/microlinkhq/react-json-view/blob/master/docker/README.md#contributing-to-this-project-using-docker).
diff --git a/LICENSE → LICENSE.md b/LICENSE → LICENSE.md
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
+
 <h1 align="center">
-  <a href="https://react-json-view.microlink.io/"><img src="https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/rjv-icon-alt.png" alt="react-json-view" width="200"></a>
+  <a href="https://react-json-view.microlink.io/">
+  <img src="https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/rjv-icon-alt.png" alt="react-json-view" width="200"></a>
   <br>
   react-json-view
   <br>
@@ -11,10 +13,7 @@
 
 **react-json-view** (rjv) is a React component for displaying and editing javascript **arrays** and **JSON objects**.
 
-<div style="display: flex;">
-  <img src="https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/output-example-15.png" alt="Output Example 1" style="width: 50%;">
-  <img src="https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/output-example-14.png" alt="Output Example 2" style="width: 50%;">
-</div>
+![](https://raw.githubusercontent.com/microlinkhq/react-json-view/docs/docs/assets/banner.png)
 
 ### Highlights
 
@@ -158,3 +157,10 @@ Check [react-json-view.microlink.io](https://react-json-view.microlink.io/) to s
 **rjv** supports any base-16 theme. You can supply your own base-16 theme object.
 
 To better understand custom themes, take a look at [my example implementation](https://github.com/microlinkhq/react-json-view/blob/7c154b9a7d83ea89dce2c171ebdf4d163ff49233/dev-server/src/index.js#L135) and the [base-16 theme styling guidelines](https://github.com/chriskempson/base16/blob/master/styling.md).
+
+## License
+
+**react-json-view** © [microlink.io](https://microlink.io), released under the [MIT](https://github.com/microlinkhq/cards/blob/master/LICENSE.md) License.<br>
+Authored by [Mac Gainor](https://github.com/mac-s-g) and maintained by [Kiko Beats](https://kikobeats.com) with help from [contributors](https://github.com/microlinkhq/cards/contributors).
+
+> [microlink.io](https://microlink.io) · GitHub [microlink.io](https://github.com/microlinkhq) · X [@microlinkhq](https://x.com/microlinkhq)
diff --git a/demo/dist/index.html b/demo/dist/index.html
diff --git a/demo/dist/main.js b/demo/dist/main.js
diff --git a/doc/edit-complete-1.png b/doc/edit-complete-1.png
diff --git a/doc/edit-init-1.png b/doc/edit-init-1.png
diff --git a/doc/edit-input-1.png b/doc/edit-input-1.png
diff --git a/doc/example-usage.js b/doc/example-usage.js
diff --git a/doc/output-example-12.png b/doc/output-example-12.png
diff --git a/doc/output-example-14.png b/doc/output-example-14.png
diff --git a/doc/output-example-15.png b/doc/output-example-15.png
diff --git a/doc/output-example-monokai-2.png b/doc/output-example-monokai-2.png
diff --git a/doc/output-example-solarized-2.png b/doc/output-example-solarized-2.png
diff --git a/doc/source-example-8.png b/doc/source-example-8.png
diff --git a/doc/source-example-9.png b/doc/source-example-9.png
diff --git a/docs/assets/banner.png b/docs/assets/banner.png
diff --git a/demo/src/style/images/favicon.ico → docs/assets/favicon.ico b/demo/src/style/images/favicon.ico → docs/assets/favicon.ico
diff --git a/doc/rjv-icon-alt.png → docs/assets/rjv-icon-alt.png b/doc/rjv-icon-alt.png → docs/assets/rjv-icon-alt.png
diff --git a/doc/rjv-icon-alt.svg → docs/assets/rjv-icon-alt.svg b/doc/rjv-icon-alt.svg → docs/assets/rjv-icon-alt.svg
diff --git a/doc/rjv-icon.png → docs/assets/rjv-icon.png b/doc/rjv-icon.png → docs/assets/rjv-icon.png
diff --git a/doc/rjv-icon.svg → docs/assets/rjv-icon.svg b/doc/rjv-icon.svg → docs/assets/rjv-icon.svg
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>react-json-view</title>
+    <meta
+      name="description"
+      content="react-json-view: A React component for displaying and editing JSON data in a tree view format."
+    />
+    <meta
+      name="keywords"
+      content="array-viewer,base-16,component,interactive,interactive-json,json,json-component,json-display,json-tree,json-view,json-viewer,json-inspector,json-tree,react,react-component,react-json,theme,tree,tree-view,treeview,mac-s-g"
+    />
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/ico" href="./assets/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+    />
+    <script
+      crossorigin
+      src="https://unpkg.com/[email protected]/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/[email protected]/umd/react-dom.development.js"
+    ></script>
+    <style>
+      body {
+        margin: 0px;
+      }
+    </style>
+  </head>
+  <body>
+    <a href="https://github.com/microlinkhq/react-json-view/" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+    <div id="mac-react-container"></div>
+    <script type="text/javascript" src="./dist/main.js"></script>
+  </body>
+</html>
diff --git a/demo/src/js/components/Demo.js → docs/src/js/components/Demo.js b/demo/src/js/components/Demo.js → docs/src/js/components/Demo.js
@@ -1,12 +1,10 @@
 import React from 'react'
 import ReactSelect from 'react-select'
 import ReactJson from './../../../../src/js/index'
-import GitHubButton from 'react-github-button'
 
 import Code from './../helpers/Code'
 import './../../style/scss/rjv-demo.scss'
 import 'react-select/dist/react-select.css'
-import 'react-github-button/assets/style.css'
 
 // index entrypoint component
 class Demo extends React.PureComponent {
@@ -180,21 +178,6 @@ class Demo extends React.PureComponent {
         <div class='rjv-demo'>
           <div class='rjv-header'>
             <div class='header-1'>@microlink/react-json-view</div>
-            <img
-              class='rjv-logo'
-              src='https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/rjv-icon-alt.png'
-              onClick={() => {
-                window.open(
-                  'https://github.com/microlinkhq/react-json-view',
-                  '_blank'
-                )
-              }}
-            />
-            <GitHubButton
-              type='stargazers'
-              namespace='microlinkhq'
-              repo='react-json-view'
-            />
           </div>
           <ReactJson
             name={false}

diff --git a/demo/src/js/entry.js → docs/src/js/entry.js b/demo/src/js/entry.js → docs/src/js/entry.js
diff --git a/demo/src/js/helpers/Code.js → docs/src/js/helpers/Code.js b/demo/src/js/helpers/Code.js → docs/src/js/helpers/Code.js
diff --git a/demo/src/js/index.js → docs/src/js/index.js b/demo/src/js/index.js → docs/src/js/index.js
diff --git a/doc/favicon.ico → docs/src/style/images/favicon.ico b/doc/favicon.ico → docs/src/style/images/favicon.ico
diff --git a/demo/src/style/scss/_variables.scss → docs/src/style/scss/_variables.scss b/demo/src/style/scss/_variables.scss → docs/src/style/scss/_variables.scss
diff --git a/demo/src/style/scss/global.scss → docs/src/style/scss/global.scss b/demo/src/style/scss/global.scss → docs/src/style/scss/global.scss
@@ -10,10 +10,4 @@
     margin-right: 5px;
     margin-bottom: 3px;
   }
-  .header-2 {
-    font-size: 22px;
-    margin-right: 5px;
-    margin-bottom: 5px;
-    font-style: italic;
-  }
 }
diff --git a/demo/src/style/scss/rjv-demo.scss → docs/src/style/scss/rjv-demo.scss b/demo/src/style/scss/rjv-demo.scss → docs/src/style/scss/rjv-demo.scss
@@ -7,32 +7,15 @@
     margin-right: 10px;
     min-width: 300px;
     max-width: 400px;
+
     .rjv-input {
       margin-bottom: 5px;
+
       .rjv-label {
         padding: 0.5em;
         font-size: 14px;
         font-weight: bold;
       }
     }
   }
-
-  .rjv-header {
-    position: relative;
-
-    .rjv-logo {
-      width: 100px;
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      cursor: pointer;
-    }
-
-    .github-btn {
-      display: block;
-      position: absolute;
-      right: 0px;
-      top: 48px;
-    }
-  }
 }
diff --git a/package.json b/package.json
@@ -240,7 +240,6 @@
     "prettier": "~2.2.1",
     "react": "~16.14.0",
     "react-dom": "~16.14.0",
-    "react-github-button": "~0.1.11",
     "react-select": "~1.1.0",
     "react-test-renderer": "~16.14.0",
     "sass": "~1.47.0",
@@ -265,12 +264,11 @@
   "scripts": {
     "build": "NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production webpack --config webpack/webpack.config.js --progress",
     "dev": "NODE_ENV=development webpack serve --config webpack/webpack.config-dev.js --open",
-    "docs:build": "NODE_ENV=production webpack --node-env production --config webpack/webpack.config-demo.js --progress",
+    "docs:build": "NODE_ENV=production webpack --node-env production --config webpack/webpack.config-docs.js --progress",
     "docs:dev": "tinyrun 'npm run docs:dev:watch' 'npm run docs:dev:browserync'",
     "docs:dev:watch": "npm run docs:build -- --watch",
-    "docs:dev:browserync": "browser-sync start --serveStatic demo/dist/ --server --files 'index.html, **/*.(css|js|md)'",
+    "docs:dev:browserync": "browser-sync start --serveStatic docs/ --server --files 'index.html, **/*.(css|js|md)'",
     "lint": "standard",
-    "modules:debug": "./docker/debug.sh",
     "modules:size-analyzer": "webpack --config webpack/webpack.config.js --json | webpack-bundle-size-analyzer",
     "modules:tree": "webpack --config webpack/webpack.config.js --json ",
     "postrelease": "npm run release:tags && npm run release:github && npm publish",