refactor(docs): initialize Docusaurus

.gitignore

@@ -89,3 +89,9 @@ packages/*/lib/
 packages/@textlint/*/lib/
 packages/**/yarn.lock
 test/**/yarn.lock
+
+# Docusaurus
+website/translated_docs
+website/build
+website/i18n/*
+!website/i18n/en.json

website/.gitignore

@@ -0,0 +1,11 @@
+node_modules
+.DS_Store
+lib/core/metadata.js
+lib/core/MetadataBlog.js
+website/translated_docs
+website/build/
+website/yarn.lock
+website/node_modules
+
+website/i18n/*
+!website/i18n/en.json

website/blog/2018-01-13-renewing-1.0.0.md

@@ -0,0 +1,7 @@
+---
+title: Renewing
+author: 0x6b
+authorURL: http://github.com/0x6b
+---
+
+We're renewing our website to be able to give you better experience.

website/core/Footer.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require("react");
+
+class Footer extends React.Component {
+    docUrl(doc, language) {
+        const baseUrl = this.props.config.baseUrl;
+        return baseUrl + "docs/" + (language ? language + "/" : "") + doc;
+    }
+
+    pageUrl(doc, language) {
+        const baseUrl = this.props.config.baseUrl;
+        return baseUrl + (language ? language + "/" : "") + doc;
+    }
+
+    render() {
+        const currentYear = new Date().getFullYear();
+        return (
+            <footer className="nav-footer" id="footer">
+                <section className="sitemap">
+                    <a href={this.props.config.baseUrl} className="nav-home">
+                        {this.props.config.footerIcon && (
+                            <img
+                                src={this.props.config.baseUrl + this.props.config.footerIcon}
+                                alt={this.props.config.title}
+                                width="66"
+                                height="58"
+                            />
+                        )}
+                    </a>
+                    <div>
+                        <h5>Docs</h5>
+                        <a href={this.docUrl("getting-started.html", this.props.language)}>Getting Started</a>
+                        <a href={this.docUrl("configuring.html", this.props.language)}>User manual</a>
+                        <a href={this.docUrl("rule.html", this.props.language)}>Developer documentation</a>
+                    </div>
+                    <div>
+                        <h5>Community</h5>
+                        <a href="https://gitter.im/textlint-ja/textlint-ja">Project Chat</a>
+                    </div>
+                    <div>
+                        <h5>More</h5>
+                        <a href={this.props.config.baseUrl + "blog"}>Blog</a>
+                        <a href="https://github.com/">GitHub</a>
+                        <a
+                            className="github-button"
+                            href={this.props.config.repoUrl}
+                            data-icon="octicon-star"
+                            data-count-href="/facebook/docusaurus/stargazers"
+                            data-show-count={true}
+                            data-count-aria-label="# stargazers on GitHub"
+                            aria-label="Star this project on GitHub"
+                        >
+                            Star
+                        </a>
+                    </div>
+                </section>
+
+                <section className="copyright">Copyright &copy; {currentYear} textlint organization</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.0.5"
+  }
+}

website/pages/en/help.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require("react");
+
+const CompLibrary = require("../../core/CompLibrary.js");
+const Container = CompLibrary.Container;
+const GridBlock = CompLibrary.GridBlock;
+
+const siteConfig = require(process.cwd() + "/siteConfig.js");
+
+class Help extends React.Component {
+    render() {
+        const supportLinks = [
+            {
+                content: "Learn more using the [documentation on this site.](/docs/README.html)",
+                title: "Browse Docs"
+            },
+            {
+                content:
+                    "For bugs and feature requests, please [open an issue](https://github.com/textlint/textlint/issues).",
+                title: "Join the community"
+            }
+        ];
+
+        return (
+            <div className="docMainWrapper wrapper">
+                <Container className="mainContainer documentContainer postContainer">
+                    <div className="post">
+                        <header className="postHeader">
+                            <h2>Need help?</h2>
+                        </header>
+                        <p>This project is maintained by a dedicated group of people.</p>
+                        <GridBlock contents={supportLinks} layout="threeColumn" />
+                    </div>
+                </Container>
+            </div>
+        );
+    }
+}
+
+module.exports = Help;

website/pages/en/index.js

@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require("react");
+
+const CompLibrary = require("../../core/CompLibrary.js");
+const MarkdownBlock = CompLibrary.MarkdownBlock;
+/* Used to read markdown */
+const Container = CompLibrary.Container;
+const GridBlock = CompLibrary.GridBlock;
+
+const siteConfig = require(process.cwd() + "/siteConfig.js");
+
+function imgUrl(img) {
+    return siteConfig.baseUrl + "img/" + img;
+}
+
+function docUrl(doc, language) {
+    return siteConfig.baseUrl + "docs/" + (language ? language + "/" : "") + doc;
+}
+
+function pageUrl(page, language) {
+    return siteConfig.baseUrl + (language ? language + "/" : "") + page;
+}
+
+class Button extends React.Component {
+    render() {
+        return (
+            <div className="pluginWrapper buttonWrapper">
+                <a className="button" href={this.props.href} target={this.props.target}>
+                    {this.props.children}
+                </a>
+            </div>
+        );
+    }
+}
+
+Button.defaultProps = {
+    target: "_self"
+};
+
+const SplashContainer = props => (
+    <div className="homeContainer">
+        <div className="homeSplashFade">
+            <div className="wrapper homeWrapper">{props.children}</div>
+        </div>
+    </div>
+);
+
+const Logo = props => (
+    <div className="projectLogo">
+        <img src={props.img_src} />
+    </div>
+);
+
+const ProjectTitle = props => (
+    <h2 className="projectTitle">
+        {siteConfig.title}
+        <small>{siteConfig.tagline}</small>
+    </h2>
+);
+
+const PromoSection = props => (
+    <div className="section promoSection">
+        <div className="promoRow">
+            <div className="pluginRowBlock">{props.children}</div>
+        </div>
+    </div>
+);
+
+class HomeSplash extends React.Component {
+    render() {
+        let language = this.props.language || "";
+        return (
+            <SplashContainer>
+                <Logo img_src={imgUrl("textlint-icon_256x256.png")} />
+                <div className="inner">
+                    <ProjectTitle />
+                    <PromoSection>
+                        <Button href="https://textlint.github.io/">Try It Out</Button>
+                        <Button href="https://github.com/textlint/textlint">GitHub</Button>
+                    </PromoSection>
+                </div>
+            </SplashContainer>
+        );
+    }
+}
+
+const Block = props => (
+    <Container padding={["bottom", "top"]} id={props.id} background={props.background}>
+        <GridBlock align="center" contents={props.children} layout={props.layout} />
+    </Container>
+);
+
+const Features = props => (
+    <Block layout="fourColumn">
+        {[
+            {
+                content: "This is the content of my feature",
+                image: imgUrl("docusaurus.svg"),
+                imageAlign: "top",
+                title: "Feature One"
+            },
+            {
+                content: "The content of my second feature",
+                image: imgUrl("docusaurus.svg"),
+                imageAlign: "top",
+                title: "Feature Two"
+            }
+        ]}
+    </Block>
+);
+
+const FeatureCallout = props => (
+    <div className="productShowcaseSection paddingBottom" style={{ textAlign: "left" }}>
+        <h2>What is textlint?</h2>
+        <p>
+            textlint is an open source text linting utility written in JavaScript. It is hard to lint natural language
+            texts, but we try to resolve this issue by <em>pluggable</em> approach.
+        </p>
+    </div>
+);
+
+const LearnHow = props => (
+    <Block background="light">
+        {[
+            {
+                content: "Talk about learning how to use this",
+                image: imgUrl("docusaurus.svg"),
+                imageAlign: "right",
+                title: "Learn How"
+            }
+        ]}
+    </Block>
+);
+
+const TryOut = props => (
+    <Block id="try">
+        {[
+            {
+                content: "Talk about trying this out",
+                image: imgUrl("docusaurus.svg"),
+                imageAlign: "left",
+                title: "Try it Out"
+            }
+        ]}
+    </Block>
+);
+
+const Description = props => (
+    <Block background="dark">
+        {[
+            {
+                content: "This is another description of how this project is useful",
+                image: imgUrl("docusaurus.svg"),
+                imageAlign: "right",
+                title: "Description"
+            }
+        ]}
+    </Block>
+);
+
+const Showcase = props => {
+    if ((siteConfig.users || []).length === 0) {
+        return null;
+    }
+    const showcase = siteConfig.users
+        .filter(user => {
+            return user.pinned;
+        })
+        .map((user, i) => {
+            return (
+                <a href={user.infoLink} key={i}>
+                    <img src={user.image} title={user.caption} />
+                </a>
+            );
+        });
+
+    return (
+        <div className="productShowcaseSection paddingBottom">
+            <h2>{"Who's Using This?"}</h2>
+            <p>This project is used by all these people</p>
+            <div className="logos">{showcase}</div>
+            <div className="more-users">
+                <a className="button" href={pageUrl("users.html", props.language)}>
+                    More {siteConfig.title} Users
+                </a>
+            </div>
+        </div>
+    );
+};
+
+class Index extends React.Component {
+    render() {
+        let language = this.props.language || "";
+
+        return (
+            <div>
+                <HomeSplash language={language} />
+                <div className="mainContainer">
+                    {/*<Features />*/}
+                    <FeatureCallout />
+                    {/*<LearnHow />*/}
+                    {/*<TryOut />*/}
+                    {/*<Description />*/}
+                    <Showcase language={language} />
+                </div>
+            </div>
+        );
+    }
+}
+
+module.exports = Index;