Update docusaurus (#268)

* WIP

* prep for migration

* wip

* updates

* Update docs

* Fix git tracking for docusaurus

* Tons of updates

* Remove old website

* Updates

* Fix docusaurus config

* Fix docusaurus path

* Fix docs helper

* Update docs with codesandboxes

* Update create script

README.md

@@ -1,7 +1,7 @@
 <br/>
 <br/>
 <p align="center">
-  <img src="https://i.gyazo.com/67b004be5aa811e9ccd8375b9ce274e1.png" height="300" style="margin: 200px 0" />
+  <img src="https://i.gyazo.com/67b004be5aa811e9ccd8375b9ce274e1.png" height="300" />
 </p>
 <br/>
 

helpers/create.js

@@ -12,6 +12,7 @@ const filesToRead = [
   "../template/index.spec.template",
   "../template/package.json",
   "../template/README.md",
+  "../template/Examples.md",
   "../template/.babelrc",
   "../template/.eslintrc",
   "../template/.npmignore",
@@ -22,6 +23,7 @@ const filesToWrite = [
   "test/index.spec.js",
   "package.json",
   "README.md",
+  "Examples.md",
   ".babelrc",
   ".eslintrc",
   ".npmignore",

helpers/docs/index.js

@@ -0,0 +1,103 @@
+const packageName = process.env.LERNA_PACKAGE_NAME;
+const newReadmeFileName = packageName.startsWith("@rooks")
+  ? packageName.split("@rooks/")[1]
+  : packageName;
+
+const writeFileSync = require("fs").writeFileSync;
+const readFileSync = require("fs").readFileSync;
+const parseReadme = require("./parse-readme");
+
+function ls() {
+  let readmeFileContent = readFileSync(`./README.md`, "utf8");
+  readmeFileContent = parseReadme(readmeFileContent);
+  let examplesFileContent = null;
+  try {
+    examplesFileContent = readFileSync(`./Examples.md`, "utf8");
+  } catch (err) {
+    console.log("Could not read examples in package: " + newReadmeFileName);
+  }
+  let frontMatter = `id: ${newReadmeFileName}
+title: ${newReadmeFileName}
+hide_title: true
+sidebar_label: ${newReadmeFileName}`;
+  if (newReadmeFileName === "rooks") {
+    frontMatter = `${frontMatter}      
+slug: /`;
+  }
+  const fileBody = examplesFileContent
+    ? `
+${readmeFileContent}
+
+---
+
+## Codesandbox Examples
+
+${examplesFileContent}    
+
+
+
+`
+    : readmeFileContent;
+
+  const updatedFileContent = `---
+${frontMatter}
+---
+
+${fileBody}
+    `;
+  writeFileSync(
+    `../docusaurus/docs/${newReadmeFileName}.md`,
+    updatedFileContent,
+    "utf8"
+  );
+}
+
+function addToSidebarJson() {
+  if (newReadmeFileName === "rooks") {
+    return;
+  }
+  let currentSidebarJson;
+  let fileContent;
+  try {
+    fileContent = readFileSync(`../docusaurus/sidebars.json`, "utf8");
+    currentSidebarJson = JSON.parse(fileContent);
+    if (
+      Object.keys(currentSidebarJson.docs["Independent Packages"]).includes(
+        "newReadmeFileName"
+      )
+    ) {
+      return;
+    }
+    const independentPackages = Array.from(
+      new Set(
+        [
+          ...currentSidebarJson.docs["Independent Packages"],
+          newReadmeFileName,
+        ].sort()
+      )
+    );
+    const newSidebarJson = {
+      ...currentSidebarJson,
+      docs: {
+        ...currentSidebarJson.docs,
+        ["Independent Packages"]: independentPackages,
+      },
+    };
+    writeFileSync(
+      `../docusaurus/sidebars.json`,
+      JSON.stringify(newSidebarJson, null, 2),
+      "utf-8"
+    );
+  } catch (err) {
+    console.log("----");
+    console.log(err);
+    console.log("----");
+  }
+}
+
+try {
+  ls();
+  addToSidebarJson();
+} catch (err) {
+  console.log(err);
+}

helpers/docs/parse-readme.js

@@ -0,0 +1,19 @@
+var fromMarkdown = require("mdast-util-from-markdown");
+var compact = require("mdast-util-compact");
+var toMarkdown = require("mdast-util-to-markdown");
+const normalizeHeadings = require('mdast-normalize-headings')
+
+function parseReadme(readmeContent) {
+  try {
+    var tree = fromMarkdown(readmeContent);
+    tree = compact(tree);
+    tree = normalizeHeadings(tree)
+    const md = toMarkdown(tree);
+    return md;
+  } catch (err) {
+    console.log("ERROR in readme parse", err);
+    return readmeContent;
+  }
+}
+
+module.exports = parseReadme;

package.json

@@ -11,7 +11,7 @@
     "deploy:dev": "cd packages/storybook && yarn deploy:dev",
     "deploy": "cd packages/storybook && yarn deploy",
     "create": "node helpers/create",
-    "readme-to-docs": "lerna exec --scope=@rooks/* --scope=rooks --concurrency 1 --stream -- 'node ../../helpers/docs.js'",
+    "readme-to-docs": "lerna exec --scope=@rooks/* --scope=rooks --concurrency 1 --stream -- 'node ../../helpers/docs/index.js'",
     "bs": "lerna bootstrap",
     "prebuild": "lerna clean -y && yarn",
     "build:independent": "lerna run --ignore rooks --ignore storybook --ignore shared build",
@@ -58,6 +58,10 @@
     "lerna": "^3.13.2",
     "lodash.capitalize": "4.2.1",
     "make-dir": "1.3.0",
+    "mdast-normalize-headings": "^2.0.0",
+    "mdast-util-compact": "^3.0.0",
+    "mdast-util-from-markdown": "^0.8.1",
+    "mdast-util-to-markdown": "^0.5.3",
     "meow": "5.0.0",
     "mini-css-extract-plugin": "0.8.0",
     "ora": "4.0.3",
@@ -66,6 +70,8 @@
     "react-dom": "16.9.0",
     "react-test-renderer": "16.9.0",
     "read-pkg-up": "7.0.0",
+    "remark": "^13.0.0",
+    "remark-preset-lint-markdown-style-guide": "^4.0.0",
     "replace-string": "2.0.0",
     "rollup": "1.20.3",
     "rollup-plugin-babel": "4.3.2",
@@ -81,6 +87,7 @@
     "shelljs": "0.8.3",
     "tslib": "1.9.3",
     "typescript": "3.4.1",
+    "vfile-reporter": "^6.0.1",
     "webpack": "4.29.1",
     "webpack-cli": "3.2.1",
     "write-pkg": "3.2.0"
@@ -91,4 +98,4 @@
   "resolutions": {
     "terser": "3.14"
   }
-}
+}

packages/did-mount/Examples.md

@@ -0,0 +1,15 @@
+### Basic Usage
+
+<iframe
+  src="https://codesandbox.io/embed/quizzical-glitter-emrtj?expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark"
+  style={{
+    width: "100%",
+    height: 500,
+    border: 0,
+    borderRadius: 4,
+    overflow: "hidden"
+  }}
+  title="quizzical-glitter-emrtj"
+  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>

packages/docusaurus/.gitignore

@@ -9,3 +9,4 @@ build/
 yarn.lock
 node_modules
 i18n/*
+.docusaurus/*