chore(site): add new site

package.json

@@ -10,6 +10,7 @@
     "precommit": "pretty-quick --staged",
     "build:samples": "node scripts/build-samples.js",
     "deploy:samples": "npm run build:samples && node scripts/deploy-samples.js",
+    "deploy:site": "node scripts/deploy-site.js",
     "setup": "npm run link && npm run bootstrap",
     "link": "lerna link",
     "bootstrap": "lerna bootstrap",

scripts/deploy-site.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const { execSync } = require('child_process');
+const { join } = require('path');
+const deploy = require('../packages/task-ghp/src');
+
+(async () => {
+  execSync('cd site/website && yarn build', { stdio: 'inherit' });
+
+  try {
+    execSync('git checkout gh-pages && rm -rf docs css en img js && rm index.html sitemap.xml', {
+      stdio: 'inherit'
+    });
+
+    try {
+      execSync(
+        "git add docs css en img js index.html sitemap.xml && git commit -m 'delete site' && git push origin gh-pages",
+        {
+          stdio: 'inherit'
+        }
+      );
+    } catch (e) {
+      console.error(e);
+    }
+
+    execSync('git checkout -', {
+      stdio: 'inherit'
+    });
+  } catch (e) {
+    console.error(e);
+  }
+
+  await deploy(join(process.cwd(), 'site/website/build/fusuma'), { add: true });
+})();

site/.dockerignore

@@ -0,0 +1,2 @@
+*/node_modules
+*.log

site/.gitignore

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

site/Dockerfile

@@ -0,0 +1,10 @@
+FROM node:8.11.4
+
+WORKDIR /app/website
+
+EXPOSE 3000 35729
+COPY ./docs /app/docs
+COPY ./website /app/website
+RUN yarn install
+
+CMD ["yarn", "start"]

site/docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3'
+
+services:
+  docusaurus:
+    build: .
+    ports:
+      - 3000:3000
+      - 35729:35729
+    volumes:
+      - ./docs:/app/docs
+      - ./website/blog:/app/website/blog
+      - ./website/core:/app/website/core
+      - ./website/i18n:/app/website/i18n
+      - ./website/pages:/app/website/pages
+      - ./website/static:/app/website/static
+      - ./website/sidebars.json:/app/website/sidebars.json
+      - ./website/siteConfig.js:/app/website/siteConfig.js
+    working_dir: /app/website

site/docs/getting-started/cli.md

@@ -0,0 +1,81 @@
+---
+id: cli
+title: CLI
+sidebar_label: CLI
+---
+
+Fusuma provides these commands.
+
+```sh
+$ npx fusuma --help
+```
+
+## Init
+
+Create a configuration file.
+
+```sh
+$ npx fusuma init
+$ npx fusuma init --help
+```
+
+## Start
+
+Serve your slides with webpack-dev-server.
+
+```sh
+$ npx fusuma start
+$ npx fusuma start --help
+```
+
+## Build
+
+Generate static files using webpack as NODE_ENV=production.
+
+```sh
+$ npx fusuma build
+$ npx fusuma build --help
+```
+
+## Live
+
+Run the server and start Live Mode.
+
+See [Live Mode](modes-live.md) for detail.
+
+```sh
+$ npx fusuma live
+$ npx fusuma live --help
+```
+
+## Deploy
+
+Deploy your slides to GitHub Pages.
+
+```sh
+$ npx fusuma deploy
+$ npx fusuma deploy --help
+```
+
+## PDF
+
+Export your slides as PDF.
+
+```sh
+$ npx fusuma pdf
+$ npx fusuma pdf --help
+```
+
+## Package.json
+
+It is good to define in pacakge.json as follows.
+
+```json
+{
+  "start": "fusuma start",
+  "build": "fusuma build",
+  "pdf": "fusuma pdf",
+  "live": "fusuma live -w '@nodejs'",
+  "deploy": "fusuma deploy"
+}
+```

site/docs/getting-started/creating-your-slide.md

@@ -0,0 +1,63 @@
+---
+id: creating-your-slide
+title: Creating Your Slide
+sidebar_label: Creating Your Slide
+---
+
+Fusuma allow using `.md` and `.mdx` extensions and provides 2 methods for dividing your slide.
+
+## Markdown
+
+```md
+<!-- 0-title.md -->
+
+## Hello
+
+This is the first slide.
+```
+
+## MDX
+
+## What's mdx?
+
+_MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast_.
+
+[mdx-js/mdx](https://github.com/mdx-js/mdx)
+
+**In other words, you can use react components into Markdown.**
+
+```md
+<!-- 0-title.mdx -->
+
+import { Sample } from './scripts/Sample';
+
+<Sample />
+```
+
+```js
+// Sample.js
+
+import React from 'react';
+
+export const Sample = () => <p>Hello from jsx!!</p>;
+```
+
+## Dividing Slides
+
+The order of the slides is determined by the file name, but also you can split using `---` in the file.
+
+```md
+<!-- 0-title.md -->
+
+## Hello
+
+This is the first slide.
+
+---
+
+## 🤭
+
+This is the second slide.
+```
+
+See the example directory for use-case. [fusuma/intro](https://github.com/hiroppy/fusuma/tree/master/samples/intro/slides)

site/docs/getting-started/installation.md

@@ -0,0 +1,37 @@
+---
+id: installation
+title: Installation
+sidebar_label: Installation
+---
+
+## Installing Fusuma
+
+Fusuma requires Node >= 8.x.
+
+```sh
+$ npm i fusuma -D # yarn fusuma --dev
+```
+
+## Procedure
+
+Only a `slides` directory is required by Fusuma.
+
+```sh
+$ mkdir slides && echo '# Hello😄' > slides/title.md
+$ npx fusuma start
+$ open http://localhost:8080
+
+# --- Tree ---
+$ tree -a
+.
+└── slides
+    └── title.md
+
+1 directory, 1 files
+```
+
+<br />
+
+As you can see a cool slide was generated.😎 Fusuma uses [WebSlides](http://webslides.tv) as UI and has a sidebar as a default.
+
+![](assets/procedure-screenshot.png)

site/docs/getting-started/preparation.md

@@ -0,0 +1,67 @@
+---
+id: preparation
+title: Preparation
+sidebar_label: Preparation
+---
+
+## Configuration File
+
+**Fusuma can run if a configuration file doesn't exist**, but if you want to customize SEO, slide options, etc, you can use `.furumarc` file. It supports `.yml` and `.js` extensions and can be generated by CLI.
+
+```sh
+$ npx fusuma init
+$ cat .fusumarc.yml
+```
+
+```yml
+meta:
+  url: # [SEO] your site url, e.g. github pages
+  title: # [SEO] your slide title
+  description: # [SEO] your slide description
+  thumbnail: # [SEO] your slide thumbnail
+  siteName: # [SEO] your slide siteName
+  sns: # [Sidebar] add SNS buttons
+    - twitter
+slide:
+  loop: true
+  sidebar: true
+  targetBlank: true
+  showIndex: false
+  isVertical: false
+  code: # [Slide] use Prism.js
+    languages: # [Slide] Code Syntax Highlighting
+      - javascript
+    plugins:
+      - line-numbers
+    theme: default
+extends:
+  js: index.js
+  css: style.css
+```
+
+## Directory Structure
+
+Only the `slides` directory is required.
+
+```sh
+.
+├── .fusumarc.yml       <-- [optional] the configuration file
+├── index.js            <-- [optional] js extending fusuma
+├── slides              <-- [required] slides written by Markdown or HTML
+│   ├── 0-title.md
+│   ├── 01-content.md
+│   ├── 02-body
+│   │   └── 0-title.md
+│   └── 03-end.md
+└── style.css           <-- [optional] css extending fusuma
+```
+
+> A file extension doesn't matter either `.md` or `.mdx`.
+
+Searching slides are based on root hierarchy, and searching order is **numeric, alphabetical**.
+
+The slide display order is as follows.
+
+```sh
+0-title.md -> 01-content.md -> 0-title.md(in 02-body) -> 03-end.md
+```

site/docs/guides/audits.md

@@ -0,0 +1,12 @@
+---
+id: audits
+title: Audits
+sidebar_label: Audits
+---
+
+This is a measure of the maximum performance Fusuma can deliver. It was measured using [this slide](https://hiroppy.github.io/fusuma/issues/).
+
+![](assets/audits.png)
+
+The values of `Accessibility` and `Best Practices` depend on the user because the user writes HTML(Markdown).
+If you want to make SEO score 100%, you should fill in the `.fusumarc`.