2020-09-20 09:15:59 +00:00
# docsify Build
2020-11-27 12:45:16 +00:00
2020-09-20 09:15:59 +00:00
## My opinion
2020-11-27 12:45:16 +00:00
2020-09-20 09:15:59 +00:00
docsify was the easiest to setup as it's pretty much the same markdown as VuePress.
### 😄 Good
2020-11-27 12:45:16 +00:00
2020-09-20 09:15:59 +00:00
- Really easy to setup & deploy
- index.html direct access
- Provides 3 other themes than the Vue default one
### 😕 Bad
2020-11-27 12:45:16 +00:00
2020-09-20 09:15:59 +00:00
- Requires JavaScript
2020-09-12 23:39:09 +00:00
- Internationalization is not documented and tough to setup
2020-09-20 09:15:59 +00:00
- The full text search is pretty bad
- The docsify-cli is really basic
### 😫 Ugly
2020-11-27 12:45:16 +00:00
2020-09-20 09:15:59 +00:00
- The pure theme
## How does it work?
2020-11-27 12:45:16 +00:00
2020-09-20 09:15:59 +00:00
Here is the built website architecture:
2020-11-27 12:45:16 +00:00
2020-09-20 09:15:59 +00:00
- [`index.html` ](./templates/index.html )
2020-11-27 12:45:16 +00:00
- A basic HTML file that will build the pages dynamically from the others files using the docsify JS library
2020-09-20 09:15:59 +00:00
- [`_sidebar.md` ](./templates/_sidebar.md.handlebars )
2020-11-27 12:45:16 +00:00
- The sidebar configuration which is really easy to setup
2020-09-20 09:15:59 +00:00
- `readme.md`
2020-11-27 12:45:16 +00:00
- The main page content
2020-09-20 09:15:59 +00:00
All the other pages are markdown files that are carefully put under their folder (e.g. `screenshot/disable-shadow.md` ). Assets are stored at the same level.
It is deployed as is on Netlify!
I also added some plugins ([JS libs in the index.html file](./templates/index.html#L27)):
2020-11-27 12:45:16 +00:00
2020-09-20 09:15:59 +00:00
- [prismjs prism-bash ](https://docsify.js.org/#/language-highlight ) for language highliting
- [docsify search ](https://docsify.js.org/#/plugins?id=full-text-search ) to get a full text search
- [docsify zoom-image ](https://docsify.js.org/#/plugins?id=zoom-image ) to add Medium zoom on images
- [docsify copy-to-clipboard ](https://docsify.js.org/#/plugins?id=copy-to-clipboard ) to... Copy code
## Try locally
2020-11-27 12:45:16 +00:00
2020-09-20 09:15:59 +00:00
### 🏗 Install
```sh
yarn install
```
### 🚀 Usage
This will build the [defaults.yml file ](../../defaults.yml ) and run a docsify server on http://localhost:3000/. Sources of the website are available in the `docs` folder.
```sh
yarn start
```
### 🚧 Run unit tests
```sh
yarn test
```
