Add Docusaurus

.gitignore

@@ -1,6 +1,13 @@
 /content/
 /dist/
-/node_modules/
+/docs/
+node_modules/
 *.log
 .DS_Store
 package-lock.json
+
+# Docusaurus
+/website/build/
+/website/i18n/*
+/website/translated_docs
+/website/yarn.lock

.travis.yml

@@ -3,3 +3,5 @@ sudo: false
 language: node_js
 node_js:
   - 8
+script:
+  - npm run lint

package.json

@@ -24,7 +24,9 @@
     "build": "phenomic build",
     "predeploy": "npm run build",
     "deploy": "gh-pages -t -d dist -r [email protected]:stylelint/stylelint.github.io.git -b master",
-    "watch": "jest --watch"
+    "watch": "jest --watch",
+    "pregendoc": "rimraf docs",
+    "gendoc": "node ./scripts/generate-stylelint-docs docs"
   },
   "phenomic": {
     "assets": false,
@@ -153,6 +155,7 @@
     "file-loader": "^1.1.6",
     "fs-extra": "^5.0.0",
     "gh-pages": "^1.1.0",
+    "glob": "^7.1.4",
     "history": "^2.0.0",
     "husky": "^0.14.3",
     "jest": "^22.0.4",
@@ -178,6 +181,7 @@
     "react-svg-inline": "^2.0.1",
     "react-topbar-progress-indicator": "^2.0.0",
     "redux": "^3.6.0",
+    "remark": "^10.0.1",
     "remark-toc": "^3.1.0",
     "rimraf": "^2.5.4",
     "style-loader": "^0.19.1",

scripts/generate-stylelint-docs.js

@@ -0,0 +1,117 @@
+/* eslint-disable no-console */
+const fs = require("fs");
+const path = require("path");
+const glob = require("glob");
+const remark = require("remark");
+const visit = require("unist-util-visit");
+
+// NOTE: Since Node 10.12.0, `mkdirSync(dir, { recursive: true })` has been supported.
+//
+// If using the version or newer, this utility function can be replaced.
+// See https://github.com/nodejs/node/blob/v10.12.0/doc/changelogs/CHANGELOG_V10.md
+function mkdir_p(dir) {
+  dir.split(path.sep).reduce((parentDir, currentDir) => {
+    const newDir = path.join(parentDir, currentDir);
+    if (!fs.existsSync(newDir)) {
+      fs.mkdirSync(newDir);
+    }
+    return newDir;
+  }, "");
+}
+
+function rewriteLink({ rewriter }) {
+  function visitor(node) {
+    node.url = rewriter(node.url);
+  }
+  function transform(tree) {
+    visit(tree, ["link"], visitor);
+  }
+  return transform;
+}
+
+const extractTitleFromH1 = content => content.match(/\n?# ([^\n]+)\n/)[1];
+
+const titleToSidebarLabel = {
+  stylelint: "Home"
+};
+
+function processMarkdown(file, { rewriter }) {
+  let processor = remark().use(rewriteLink, { rewriter });
+  const content = processor
+    .processSync(fs.readFileSync(file, "utf8"))
+    .toString();
+  const title = extractTitleFromH1(content);
+  const sidebarLabel = titleToSidebarLabel[title] || title;
+  return `---
+title: ${title}
+sidebar_label: ${sidebarLabel}
+hide_title: true
+---
+
+${content}`;
+}
+
+function main(outputDir) {
+  fs.mkdirSync(outputDir);
+
+  glob.sync("node_modules/stylelint/*.md").forEach(async file => {
+    const output = processMarkdown(file, {
+      rewriter: url =>
+        url.replace(/^\/?docs\//, "").replace("README.md", "index.md")
+    });
+    const outputFile = path.join(
+      outputDir,
+      file
+        .replace("node_modules/stylelint", "")
+        .replace("README.md", "index.md")
+    );
+    mkdir_p(path.dirname(outputFile));
+    fs.writeFileSync(outputFile, output, "utf8");
+    console.log(outputFile);
+  });
+
+  glob.sync("node_modules/stylelint/docs/**/*.md").forEach(file => {
+    const output = processMarkdown(file, {
+      rewriter: url =>
+        url
+          .replace(
+            "../../lib/rules/index.js",
+            "https://github.com/stylelint/stylelint/blob/master/lib/rules/index.js"
+          )
+          .replace("../../VISION.md", "../VISION.md")
+          .replace("../../lib/rules/", "rules/")
+          .replace("/README.md", ".md")
+    });
+    const outputFile = path.join(
+      outputDir,
+      file.replace("node_modules/stylelint/docs", "")
+    );
+    mkdir_p(path.dirname(outputFile));
+    fs.writeFileSync(outputFile, output, "utf8");
+    console.log(outputFile);
+  });
+
+  glob.sync("node_modules/stylelint/lib/rules/**/*.md").forEach(file => {
+    const output = processMarkdown(file, {
+      rewriter: url =>
+        url
+          .replace("../indentation/README.md", "indentation.md")
+          .replace(/\.\.\/([a-z-]+)\/README.md/, "$1.md")
+          .replace(
+            /\.\.\/\.\.\/\.\.\/docs\/user-guide\/([a-z-]+)\.md/,
+            "../$1.md"
+          )
+    });
+    const outputFile = path.join(
+      outputDir,
+      file
+        .replace("node_modules/stylelint/lib/rules", "user-guide/rules")
+        .replace("/README.md", ".md")
+    );
+    mkdir_p(path.dirname(outputFile));
+    fs.writeFileSync(outputFile, output, "utf8");
+    console.log(outputFile);
+  });
+}
+
+main(process.argv[2]);

website/README.md

@@ -0,0 +1,193 @@
+This website was created with [Docusaurus](https://docusaurus.io/).
+
+# What's In This Document
+
+* [Get Started in 5 Minutes](#get-started-in-5-minutes)
+* [Directory Structure](#directory-structure)
+* [Editing Content](#editing-content)
+* [Adding Content](#adding-content)
+* [Full Documentation](#full-documentation)
+
+# Get Started in 5 Minutes
+
+1. Make sure all the dependencies for the website are installed:
+
+```sh
+# Install dependencies
+$ yarn
+```
+2. Run your dev server:
+
+```sh
+# Start the site
+$ yarn start
+```
+
+## Directory Structure
+
+Your project file structure should look something like this
+
+```
+my-docusaurus/
+  docs/
+    doc-1.md
+    doc-2.md
+    doc-3.md
+  website/
+    blog/
+      2016-3-11-oldest-post.md
+      2017-10-24-newest-post.md
+    core/
+    node_modules/
+    pages/
+    static/
+      css/
+      img/
+    package.json
+    sidebar.json
+    siteConfig.js
+```
+
+# Editing Content
+
+## Editing an existing docs page
+
+Edit docs by navigating to `docs/` and editing the corresponding document:
+
+`docs/doc-to-be-edited.md`
+
+```markdown
+---
+id: page-needs-edit
+title: This Doc Needs To Be Edited
+---
+
+Edit me...
+```
+
+For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Editing an existing blog post
+
+Edit blog posts by navigating to `website/blog` and editing the corresponding post:
+
+`website/blog/post-to-be-edited.md`
+```markdown
+---
+id: post-needs-edit
+title: This Blog Post Needs To Be Edited
+---
+
+Edit me...
+```
+
+For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
+
+# Adding Content
+
+## Adding a new docs page to an existing sidebar
+
+1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
+
+```md
+---
+id: newly-created-doc
+title: This Doc Needs To Be Edited
+---
+
+My new content here..
+```
+
+1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
+
+```javascript
+// Add newly-created-doc to the Getting Started category of docs
+{
+  "docs": {
+    "Getting Started": [
+      "quick-start",
+      "newly-created-doc" // new doc here
+    ],
+    ...
+  },
+  ...
+}
+```
+
+For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Adding a new blog post
+
+1. Make sure there is a header link to your blog in `website/siteConfig.js`:
+
+`website/siteConfig.js`
+```javascript
+headerLinks: [
+    ...
+    { blog: true, label: 'Blog' },
+    ...
+]
+```
+
+2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
+
+`website/blog/2018-05-21-New-Blog-Post.md`
+
+```markdown
+---
+author: Frank Li
+authorURL: https://twitter.com/foobarbaz
+authorFBID: 503283835
+title: New Blog Post
+---
+
+Lorem Ipsum...
+```
+
+For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
+
+## Adding items to your site's top navigation bar
+
+1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
+
+`website/siteConfig.js`
+```javascript
+{
+  headerLinks: [
+    ...
+    /* you can add docs */
+    { doc: 'my-examples', label: 'Examples' },
+    /* you can add custom pages */
+    { page: 'help', label: 'Help' },
+    /* you can add external links */
+    { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' },
+    ...
+  ],
+  ...
+}
+```
+
+For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Adding custom pages
+
+1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
+1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
+
+`website/siteConfig.js`
+```javascript
+{
+  headerLinks: [
+    ...
+    { page: 'my-new-custom-page', label: 'My New Custom Page' },
+    ...
+  ],
+  ...
+}
+```
+
+For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
+
+# Full Documentation
+
+Full documentation can be found on the [website](https://docusaurus.io/).

website/core/Footer.js

@@ -0,0 +1,12 @@
+/* eslint-disable react/prop-types */
+const React = require("react");
+
+function Footer({ config }) {
+  return (
+    <footer className="nav-footer" id="footer">
+      <section className="copyright">{config.copyright}</section>
+    </footer>
+  );
+}
+
+module.exports = Footer;

website/package.json

@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "examples": "docusaurus-examples",
+    "start": "docusaurus-start",
+    "build": "docusaurus-build",
+    "publish-gh-pages": "docusaurus-publish",
+    "write-translations": "docusaurus-write-translations",
+    "version": "docusaurus-version",
+    "rename-version": "docusaurus-rename-version"
+  },
+  "devDependencies": {
+    "docusaurus": "^1.11.1"
+  }
+}

website/pages/en/demo.js

@@ -0,0 +1,9 @@
+const React = require("react");
+
+function Demo() {
+  return <iframe src="https://stylelint-demo.herokuapp.com" frameBorder="0" />;
+}
+
+Demo.title = "Demo";
+
+module.exports = Demo;