diff --git a/README.md b/README.md
index 59c4345..5f35660 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
# Vim Vixen
[![Greenkeeper badge](https://badges.greenkeeper.io/ueokande/vim-vixen.svg)](https://greenkeeper.io/)
-
[![Join the chat room on Gitter for vim-vixen/vim-vixen](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vim-vixen/vim-vixen)
[![CircleCI](https://circleci.com/gh/ueokande/vim-vixen.svg?style=svg)](https://circleci.com/gh/ueokande/vim-vixen)
[![devDependencies Status](https://david-dm.org/ueokande/vim-vixen/dev-status.svg)](https://david-dm.org/ueokande/vim-vixen?type=dev)
@@ -11,279 +10,9 @@ keyboard. Since version 57, Firefox has migrated to the WebExtensions API and
has dropped support for legacy add-ons. Vim Vixen is a new choice for Vim users
since it uses the WebExtensions API.
-## Basic usage
-
-### Keymaps
-
-Keymaps are configurable in the add-on's preferences by navigating to `about:addons` and selecting "Extensions".
-The default mappings are as follows:
-
-#### Console
-
-- :: open the console
-- o, t, w: open a page in the current tab, a new tab, or new window
-- O, T, W: similar to o, t, w, but using the current URL
-- b: select tabs by URL or title
-- a: add the current page to your bookmarks
-
-See the [console commands](#console-commands) section for a more detailed description.
-
-#### Tabs
-
-- d: delete the current tab and select the tab to its right
-- D: delete the current tab and select the tab to its left
-- !d: delete a pinned tab
-- u: reopen a close tab
-- r: reload the current tab
-- R: reload the current tab, bypassing the cache
-- K or gT: select the previous tab
-- J or gt: select the next tab
-- g0: select the first tab
-- g$: select the last tab
-- Ctrl+6: open the previously-selected tab
-- zp: pin the curent tab tab
-- zd: duplicate the current tab
-
-#### Scrolling
-
-- k: scroll up
-- j: scroll down
-- h: scroll left
-- l: scroll right
-- Ctrl+U: scroll up half a page
-- Ctrl+D: scroll down half a page
-- Ctrl+B: scroll up a page
-- Ctrl+F: scroll down a page
-- gg: scroll to the top of a page
-- G: scroll to the bottom of a page
-- 0: scroll to the leftmost part of a page
-- $: scroll to the rightmost part of a page
-- m: set a mark for the current position
-- ': jump to a marked position
-
-Lowercase marks (`[a-z]`) store the position of the current tab. Uppercase and
-numeric marks (`[A-Z0-9]`) store the position and the tab.
-
-#### Zoom
-
-- zi: zoom in
-- zo: zoom out
-- zz: zoom neutral (reset)
-
-#### Navigation
-
-- f: follow links in the page in the current tab
-- F: follow links in the page in a new tab
-- H: go back in history
-- L: go forward in history
-- [[, ]]: find a link to the previous/next page and open it
-- gu: go to the parent directory
-- gU: go to the root directory
-- gi: focus the first input field
-
-Vim Vixen can be configured to follow links opened in tabs in the background
-instead of switching to a new tab immediately. To do this, you'll need to update
-the config file: change the `"background"` property of the `"follow.start"`
-action to `true`, e.g.:
-
-```json
-{
- "keymaps": {
- "F": { "type": "follow.start", "newTab": true, "background": true }
- }
-}
-```
-
-#### Misc
-
-- y: copy the URL of the current tab to the clipboard
-- p: open the clipboard's URL in the current tab
-- P: open the clipboard's URL in new tab
-- Shift+Esc: enable or disable the add-on in the current tab
-- /: start searching for text in the page
-- n: find the next search result in the page
-- N: find the previous search result in the page
-- gf: view the source of the current tab
-
-### Console commands
-
-Vim Vixen provides a console for `ex`-style commands, similar to Vimperator.
-
-Open the console with :. Or populate it with initial values using
-o/O, t/T, or
-w/W.
-
-#### `:open`
-
-The `:open` command operates two different ways, depending on the parameter.
-When the parameter is a URL, it's opened in the current tab.
-
-```
-:open http://github.com/ueokande
-```
-
-Otherwise, the current tab opens a search page with the supplied string (defaults to Google).
-
-```
-:open How to contribute to Vim-Vixen
-```
-
-To use a search engine other than the default, specify the search engine to use as the first parameter.
-
-```
-:open yahoo How to contribute to Vim-Vixen
-```
-
-To adjust the default search-engine and add/remove search engines, see the [search engines](#search-engines) section.
-
-#### `:tabopen`
-
-Open a URL or search-engine query in a new tab.
-
-#### `:quit` or `:q`
-
-Close the current tab.
-
-#### `:quitall` or `:qa`
-
-Close all tabs.
-
-#### `:bdelete`
-
-Close a certain tab.
-
-You can add `!` to the end of the command to close a tab even if it is pinned:
+To get Vim Vixen, install it from [Firefox add-ons][AMO].
-```
-:bdelete!
-```
-
-#### `:bdeletes`
-
-Close tabs matching the specified keywords.
-
-You can add `!` to the end of the command to close pinned tabs:
-
-```
-:bdeletes!
-```
-
-#### `:winopen`
-
-Open a URL or search-engine query in a new window.
-
-#### `:buffer`
-
-Select tabs by URL or title keywords.
-
-#### `:addbookmark`
-
-Create a bookmark from the current URL.
-
-```
-:addbookmark My bookmark title
-```
-
-The keymap a is a convenient way to create a bookmark for the
-current page. It populates the console with `:addbookmark` and the title of
-the current page.
-
-#### `:set`
-
-The `:set` command can be used to temporarily override properties in the
-console. See the [properties](#properties) section for more details on
-the available properties.
-
-### Properties
-
-Vim Vixen can be configured by defining settings in a JSON document, e.g.:
-
-```json
-{
- "properties": {
- "complete": "sbh"
- }
-}
-```
-
-Properties can be temporarily overridden by using the `:set` command in the
-console.
-
-The following properties are available:
-
-#### `smoothscroll`
-
-Enable/disable smooth scrolling.
-
-```
-:set smoothscroll " enable smooth scrolling
-:set nosmoothscroll " disable smooth scrolling
-```
-
-#### `hintchars`
-
-Set hint characters.
-
-```
-:set hintchars=0123456789
-```
-
-#### `complete`
-
-Set completion items on `open`, `tabopen`, and `winopen` commands.
-The allowed value is character sequence of `s`, `b`, or `h`.
-Hit Tab or Shift+Tab to select an item from the completion list.
-Each character represents the following:
-
-- `s`: search engines
-- `b`: bookmark items
-- `h`: history items.
-
-```
-:set complete=sbh
-```
-
-### Search engines
-
-Vim Vixen supports searching with search engines such as Google and Yahoo.
-
-You can configure search engines, including the default search engine, in the add-on's preferences.
-The URLs specified in `"engines"` must contain a `{}`-placeholder, which will be
-replaced with the search keyword parameters of the command.
-
-```json
-{
- "search": {
- "default": "google",
- "engines": {
- "google": "https://google.com/search?q={}",
- "yahoo": "https://search.yahoo.com/search?p={}",
- "bing": "https://www.bing.com/search?q={}",
- "duckduckgo": "https://duckduckgo.com/?q={}",
- "twitter": "https://twitter.com/search?q={}",
- "wikipedia": "https://en.wikipedia.org/w/index.php?search={}"
- }
- }
-}
-```
-
-### Blacklist
-
-The blacklist allows you to disable the plugin for certain pages by URL patterns.
-For instance, you could use `"*.slack.com"` to disable the plugin on all Slack channels.
-In addition, you can also specify path patterns, such as `"example.com/mail/*"`.
-
-```json
-{
- "blacklist": [
- "*.slack.com",
- "example.com/mail/*"
- ]
-}
-```
-
-You can toggle Vim Vixen between disabled and enabled with
-shift+Esc.
+For usage and more detailed information, check out our [documentations][documentations].
## Compatibility
@@ -296,3 +25,6 @@ Copyright © 2017-2019 by Shin'ya Ueoka
## Licence
MIT
+
+[AMO]: https://addons.mozilla.org/en-US/firefox/addon/vim-vixen/
+[documentations]: https://ueokande.github.io/vim-vixen/
diff --git a/docs/_config.yml b/docs/_config.yml
deleted file mode 100644
index c741881..0000000
--- a/docs/_config.yml
+++ /dev/null
@@ -1 +0,0 @@
-theme: jekyll-theme-slate
\ No newline at end of file
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
new file mode 100644
index 0000000..e915e41
--- /dev/null
+++ b/docs/_layouts/default.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+ {%- if page.title -%}
+ {{ page.title }} - Vim Vixen
+ {%- else -%}
+ Vim Vixen
+ {%- endif -%}
+{% seo title=false%}
+
+
+
+
+
+
+
+
+
+ {{ content }}
+
+
+
+
+
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
new file mode 100644
index 0000000..f539a2f
--- /dev/null
+++ b/docs/assets/css/style.scss
@@ -0,0 +1,167 @@
+---
+---
+
+$link-color: #0099ff;
+$border-color: #dedede;
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ color: #222;
+ font-family: 'Open Sans',Arial,Helvetica,sans-serif;
+ line-height: 2;
+}
+
+a {
+ &:link, &:active {
+ color: $link-color;
+ text-decoration: none;
+ }
+ &:hover, &:visited {
+ color: $link-color;
+ text-decoration: underline;
+ }
+}
+
+h1, h2, h3, h4, h5 {
+ font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
+ font-weight: bold;
+ color: #222;
+
+ a:link, a:visited, a:hover, a:active {
+ color: #222;
+ }
+}
+
+header {
+ border-bottom: 1px solid $border-color;
+ position: fixed;
+ width: 100%;
+ background-color: white;
+
+ h1 {
+ padding: 0 1.5rem;
+ float: left;
+ line-height: 4rem;
+ }
+
+ ul {
+ display: inline-block;
+ float: right;
+ padding: 0 1rem;
+ li {
+ display: inline-block;
+ padding: 0 1rem;
+ a {
+ line-height: 4rem;
+ }
+ }
+ }
+}
+
+aside {
+ width: 15rem;
+ position: fixed;
+ top: 4rem;
+ left: 0;
+ bottom: 0;
+ border-right: 1px solid $border-color;
+ padding: 1rem 0;
+
+ h1 {
+ font-size: 1.2rem;
+ line-height: 2.5;
+ padding: 0 1.5rem;
+ }
+
+ ul {
+ li {
+ a {
+ padding: .35rem 1.5rem .35rem 1.5rem;
+ line-height: 2.5;
+ }
+ }
+ }
+}
+
+main {
+ padding: 4rem 4rem 4rem 20rem;
+ margin: 0 auto;
+
+ article {
+
+ h1, h2, h3, h4, h5 {
+ font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
+ font-weight: bold;
+ }
+
+ h1 {
+ font-size: 3rem;
+ line-height: 2;
+ }
+
+ h2 {
+ border-top: 1px dotted #c1c5c8;
+ font-size: 1.8;
+ margin-top: 36px;
+ padding-top: 36px;
+ font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
+ }
+
+ kbd {
+ display: inline-block;
+ padding: 3px 5px;
+ line-height: 10px;
+ color: #444d56;
+ vertical-align: middle;
+ background-color: #fafbfc;
+ border: 1px solid #c6cbd1;
+ border-bottom-color: rgb(198, 203, 209);
+ border-bottom-color: #959da5;
+ border-radius: 3px;
+ box-shadow: inset 0 -1px 0 #959da5;
+ }
+
+ pre {
+ padding: 16px;
+ overflow: auto;
+ line-height: 1.45;
+ background-color: #f6f8fa;
+ border-radius: 3px;
+ }
+
+ pre > code {
+ background: none;
+ }
+
+ code {
+ padding: .2em .4em;
+ margin: 0;
+ background-color: rgba(27,31,35,.05);
+ border-radius: 3px;
+ }
+
+ ul {
+ li {
+ padding: .25rem 0;
+ margin-left: 1rem;
+ }
+ }
+
+ p {
+ margin-bottom: 1rem;
+ }
+ }
+}
+
+footer {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: lightgreen;
+}
diff --git a/docs/blacklist.md b/docs/blacklist.md
new file mode 100644
index 0000000..b854c07
--- /dev/null
+++ b/docs/blacklist.md
@@ -0,0 +1,21 @@
+---
+title: Blacklist
+---
+
+# Blacklist
+
+The blacklist allows you to disable the plugin for certain pages by URL patterns.
+For instance, you could use `"*.slack.com"` to disable the plugin on all Slack channels.
+In addition, you can also specify path patterns, such as `"example.com/mail/*"`.
+
+```json
+{
+ "blacklist": [
+ "*.slack.com",
+ "example.com/mail/*"
+ ]
+}
+```
+
+You can toggle Vim Vixen between disabled and enabled with
+shift+Esc.
diff --git a/docs/console_commands.md b/docs/console_commands.md
new file mode 100644
index 0000000..272ea0e
--- /dev/null
+++ b/docs/console_commands.md
@@ -0,0 +1,92 @@
+---
+title: Console commands
+---
+
+# Console commands
+
+Vim Vixen provides a console for `ex`-style commands, similar to Vimperator.
+
+Open the console with :. Or populate it with initial values using
+o/O, t/T, or
+w/W.
+
+## `:open`
+
+The `:open` command operates two different ways, depending on the parameter.
+When the parameter is a URL, it's opened in the current tab.
+
+```
+:open http://github.com/ueokande
+```
+
+Otherwise, the current tab opens a search page with the supplied string (defaults to Google).
+
+```
+:open How to contribute to Vim-Vixen
+```
+
+To use a search engine other than the default, specify the search engine to use as the first parameter.
+
+```
+:open yahoo How to contribute to Vim-Vixen
+```
+
+To adjust the default search-engine and add/remove search engines, see the [search engines](./search_engines.html) section.
+
+## `:tabopen`
+
+Open a URL or search-engine query in a new tab.
+
+## `:quit` or `:q`
+
+Close the current tab.
+
+## `:quitall` or `:qa`
+
+Close all tabs.
+
+## `:bdelete`
+
+Close a certain tab.
+
+You can add `!` to the end of the command to close a tab even if it is pinned:
+
+```
+:bdelete!
+```
+
+## `:bdeletes`
+
+Close tabs matching the specified keywords.
+
+You can add `!` to the end of the command to close pinned tabs:
+
+```
+:bdeletes!
+```
+
+## `:winopen`
+
+Open a URL or search-engine query in a new window.
+
+## `:buffer`
+
+Select tabs by URL or title keywords.
+
+## `:addbookmark`
+
+Create a bookmark from the current URL.
+
+```
+:addbookmark My bookmark title
+```
+
+The keymap a is a convenient way to create a bookmark for the
+current page. It populates the console with `:addbookmark` and the title of
+the current page.
+
+## `:set`
+
+The `:set` command can be used to temporarily override properties in the
+console. See the [properties](./properties.html) section for more details on
+the available properties.
diff --git a/docs/index.md b/docs/index.md
index 335f668..7917645 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,60 @@
+---
+title: Vim Vixen
+---
+
# Vim Vixen
Vim Vixen is a Firefox add-on which allows you to easily navigate the web by
keyboard. Since version 57, Firefox has migrated to the WebExtensions API and
has dropped support for legacy add-ons. Vim Vixen is a new choice for Vim users
since it uses the WebExtensions API.
+
+## Getting started
+
+### Install Vim Vixen
+
+Vim Vixen is supported on Firefox 60 ESR. Please latest version of stable ESR
+from the [download page](https://www.mozilla.org/en-US/firefox/).
+You can install Vim Vixen from [Firefox add-ons (addons.mozilla.org)][AMO], and
+manage installed addon-ons on Firefox preferences `about:preferences`.
+
+### Quick start
+
+After installation, you can control Firefox with vim-like keymaps. To scroll a
+page in the browser, press k, j, h and
+l keys. You can scroll to the top or the bottom of a page by
+gg and G.
+
+To select a left and right of current tab, use K and J
+respectively. To close current tab, use d and to restore closed
+tabs, use u.
+
+To open a link, press f to enter the **follow mode** to select a
+link. Then you can select links by alphabetic keys.
+
+See also [Keymaps](./keymaps.html) for more detailed of keymaps.
+
+### Using commands
+
+Vim Vixen supports command line to run commands that control tabs and opens a
+tab. To open command line, press :.
+
+To open a tab with URL, use `open` command as the following:
+
+```
+:open https://github.com/ueokande/vimvixen
+```
+
+or search keywords with search engine (such as Google) like:
+
+```
+:open How to use Vim
+```
+
+You can see completed commands on [Console commands](./console_commands.html).
+
+## Copyright
+
+Copyright © 2017-2019 by Shin'ya Ueoka
+
+[AMO]: https://addons.mozilla.org/en-US/firefox/addon/vim-vixen/
diff --git a/docs/keymaps.md b/docs/keymaps.md
new file mode 100644
index 0000000..9ae0c98
--- /dev/null
+++ b/docs/keymaps.md
@@ -0,0 +1,97 @@
+---
+title: Keymaps
+---
+
+# Keymaps
+
+Keymaps are configurable in the add-on's preferences by navigating to `about:addons` and selecting "Extensions".
+The default mappings are as follows:
+
+## Scrolling
+
+- k: scroll up
+- j: scroll down
+- h: scroll left
+- l: scroll right
+- Ctrl+U: scroll up half a page
+- Ctrl+D: scroll down half a page
+- Ctrl+B: scroll up a page
+- Ctrl+F: scroll down a page
+- gg: scroll to the top of a page
+- G: scroll to the bottom of a page
+- 0: scroll to the leftmost part of a page
+- $: scroll to the rightmost part of a page
+- m: set a mark for the current position
+- ': jump to a marked position
+
+Lowercase marks (`[a-z]`) store the position of the current tab. Uppercase and
+numeric marks (`[A-Z0-9]`) store the position and the tab.
+
+## Select and manage tabs
+
+- d: delete the current tab and select the tab to its right
+- D: delete the current tab and select the tab to its left
+- !d: delete a pinned tab
+- u: reopen a close tab
+- r: reload the current tab
+- R: reload the current tab, bypassing the cache
+- K or gT: select the previous tab
+- J or gt: select the next tab
+- g0: select the first tab
+- g$: select the last tab
+- Ctrl+6: open the previously-selected tab
+- zp: pin the curent tab tab
+- zd: duplicate the current tab
+
+## Console
+
+- :: open the console
+- o, t, w: open a page in the current tab, a new tab, or new window
+- O, T, W: similar to o, t, w, but using the current URL
+- b: select tabs by URL or title
+- a: add the current page to your bookmarks
+
+See the [console commands](./console_commands.html) section for a more detailed description.
+
+## Zoom
+
+- zi: zoom in
+- zo: zoom out
+- zz: zoom neutral (reset)
+
+## Navigation
+
+- f: follow links in the page in the current tab
+- F: follow links in the page in a new tab
+- H: go back in history
+- L: go forward in history
+- [[, ]]: find a link to the previous/next page and open it
+- gu: go to the parent directory
+- gU: go to the root directory
+- gi: focus the first input field
+
+Vim Vixen can be configured to follow links opened in tabs in the background
+instead of switching to a new tab immediately. To do this, you'll need to update
+the config file: change the `"background"` property of the `"follow.start"`
+action to `true`, e.g.:
+
+```json
+{
+ "keymaps": {
+ "F": { "type": "follow.start", "newTab": true, "background": true }
+ }
+}
+```
+
+## Misc
+
+- y: copy the URL of the current tab to the clipboard
+- p: open the clipboard's URL in the current tab
+- P: open the clipboard's URL in new tab
+- Shift+Esc: enable or disable the add-on in the current tab
+- /: start searching for text in the page
+- n: find the next search result in the page
+- N: find the previous search result in the page
+- gf: view the source of the current tab
+
+
diff --git a/docs/properties.md b/docs/properties.md
new file mode 100644
index 0000000..1f62ff4
--- /dev/null
+++ b/docs/properties.md
@@ -0,0 +1,52 @@
+---
+title: Properties
+---
+
+# Properties
+
+Vim Vixen can be configured by defining settings in a JSON document, e.g.:
+
+```json
+{
+ "properties": {
+ "complete": "sbh"
+ }
+}
+```
+
+Properties can be temporarily overridden by using the `:set` command in the
+console.
+
+The following properties are available:
+
+## `smoothscroll`
+
+Enable/disable smooth scrolling.
+
+```
+:set smoothscroll " enable smooth scrolling
+:set nosmoothscroll " disable smooth scrolling
+```
+
+## `hintchars`
+
+Set hint characters.
+
+```
+:set hintchars=0123456789
+```
+
+## `complete`
+
+Set completion items on `open`, `tabopen`, and `winopen` commands.
+The allowed value is character sequence of `s`, `b`, or `h`.
+Hit Tab or Shift+Tab to select an item from the completion list.
+Each character represents the following:
+
+- `s`: search engines
+- `b`: bookmark items
+- `h`: history items.
+
+```
+:set complete=sbh
+```
diff --git a/docs/search_engines.md b/docs/search_engines.md
new file mode 100644
index 0000000..9436bf2
--- /dev/null
+++ b/docs/search_engines.md
@@ -0,0 +1,27 @@
+---
+title: Search engines
+---
+
+# Search engines
+
+Vim Vixen supports searching with search engines such as Google and Yahoo.
+
+You can configure search engines, including the default search engine, in the add-on's preferences.
+The URLs specified in `"engines"` must contain a `{}`-placeholder, which will be
+replaced with the search keyword parameters of the command.
+
+```json
+{
+ "search": {
+ "default": "google",
+ "engines": {
+ "google": "https://google.com/search?q={}",
+ "yahoo": "https://search.yahoo.com/search?p={}",
+ "bing": "https://www.bing.com/search?q={}",
+ "duckduckgo": "https://duckduckgo.com/?q={}",
+ "twitter": "https://twitter.com/search?q={}",
+ "wikipedia": "https://en.wikipedia.org/w/index.php?search={}"
+ }
+ }
+}
+```