├── .gitignore
├── .prettierignore
├── .prettierrc
├── README.md
├── netlify.toml
├── package.json
├── packages
├── demo
│ ├── .nvmrc
│ ├── LICENSE
│ ├── README.md
│ ├── docs
│ │ ├── .vuepress
│ │ │ ├── config.js
│ │ │ ├── public
│ │ │ │ ├── favicon.ico
│ │ │ │ ├── logo.png
│ │ │ │ └── robots.txt
│ │ │ └── styles
│ │ │ │ ├── index.styl
│ │ │ │ └── palette.styl
│ │ ├── README.md
│ │ ├── assets
│ │ │ ├── computer.jpeg
│ │ │ ├── emoji.jpeg
│ │ │ ├── tools.jpg
│ │ │ └── universe.jpeg
│ │ ├── extras
│ │ │ ├── contributing.md
│ │ │ └── license.md
│ │ ├── random
│ │ │ ├── dev.md
│ │ │ ├── emoji.md
│ │ │ ├── lorem.md
│ │ │ └── website.md
│ │ └── theme-configuration.md
│ ├── package-lock.json
│ ├── package.json
│ └── scripts
│ │ └── optimize.js
└── vuepress-theme-book
│ ├── .gitignore
│ ├── .prettierignore
│ ├── .prettierrc
│ ├── LICENSE
│ ├── README.md
│ ├── index.js
│ ├── package-lock.json
│ ├── package.json
│ ├── screenshot.png
│ └── styles
│ ├── index.styl
│ └── palette.styl
├── screenshot.png
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # .gitignore from https://github.com/github/gitignore/blob/master/Node.gitignore
2 |
3 | # Logs
4 | logs
5 | *.log
6 | npm-debug.log*
7 | yarn-debug.log*
8 | yarn-error.log*
9 | lerna-debug.log*
10 |
11 | # Diagnostic reports (https://nodejs.org/api/report.html)
12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
13 |
14 | # Runtime data
15 | pids
16 | *.pid
17 | *.seed
18 | *.pid.lock
19 |
20 | # Directory for instrumented libs generated by jscoverage/JSCover
21 | lib-cov
22 |
23 | # Coverage directory used by tools like istanbul
24 | coverage
25 | *.lcov
26 |
27 | # nyc test coverage
28 | .nyc_output
29 |
30 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
31 | .grunt
32 |
33 | # Bower dependency directory (https://bower.io/)
34 | bower_components
35 |
36 | # node-waf configuration
37 | .lock-wscript
38 |
39 | # Compiled binary addons (https://nodejs.org/api/addons.html)
40 | build/Release
41 |
42 | # Dependency directories
43 | node_modules/
44 | jspm_packages/
45 |
46 | # Snowpack dependency directory (https://snowpack.dev/)
47 | web_modules/
48 |
49 | # TypeScript cache
50 | *.tsbuildinfo
51 |
52 | # Optional npm cache directory
53 | .npm
54 |
55 | # Optional eslint cache
56 | .eslintcache
57 |
58 | # Microbundle cache
59 | .rpt2_cache/
60 | .rts2_cache_cjs/
61 | .rts2_cache_es/
62 | .rts2_cache_umd/
63 |
64 | # Optional REPL history
65 | .node_repl_history
66 |
67 | # Output of 'npm pack'
68 | *.tgz
69 |
70 | # Yarn Integrity file
71 | .yarn-integrity
72 |
73 | # dotenv environment variables file
74 | .env
75 | .env.test
76 |
77 | # parcel-bundler cache (https://parceljs.org/)
78 | .cache
79 | .parcel-cache
80 |
81 | # Next.js build output
82 | .next
83 | out
84 |
85 | # Nuxt.js build / generate output
86 | .nuxt
87 | dist
88 |
89 | # Gatsby files
90 | .cache/
91 | # Comment in the public line in if your project uses Gatsby and not Next.js
92 | # https://nextjs.org/blog/next-9-1#public-directory-support
93 | # public
94 |
95 | # vuepress build output
96 | .vuepress/dist
97 |
98 | # Serverless directories
99 | .serverless/
100 |
101 | # FuseBox cache
102 | .fusebox/
103 |
104 | # DynamoDB Local files
105 | .dynamodb/
106 |
107 | # TernJS port file
108 | .tern-port
109 |
110 | # Stores VSCode versions used for testing VSCode extensions
111 | .vscode-test
112 |
113 | # yarn v2
114 | .yarn/cache
115 | .yarn/unplugged
116 | .yarn/build-state.yml
117 | .yarn/install-state.gz
118 | .pnp.*
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | package.json
3 | package-lock.json
4 | public
5 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "tabWidth": 2,
3 | "useTabs": false,
4 | "semi": false
5 | }
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # VuePress theme - Gitbook inspired
2 |
3 | A [VuePress](https://vuepress.vuejs.org) theme inspired by [Gitbook](https://docs.gitbook.com/).
4 |
5 | 
6 |
7 | [Live demo](https://vuepress-theme-book.netlify.app)
8 |
9 | I really love their clean and minimalist style, so I decided to do a theme for VuePress.
10 |
11 | It is **not** 100% identical to a Gitbook page, some choices are made to respect VuePress limitations.
12 | It is based on `@vuepress/theme-default` and I only extend it.
13 |
14 | You can see a **live demo** on the [demo website](https://vuepress-theme-book.netlify.app)
15 |
16 | ## Using the Theme
17 |
18 | If you want to use this theme on your own project, please refers to the Theme Readme.
19 |
20 | ### [Go to the Theme Readme](./packages/vuepress-theme-book/README.md)
21 |
22 | ## Websites using this theme:
23 |
24 | - [The Wise Opportunist](https://opportunist.luseeds.com) by [luseeds](https://luseeds.com)
25 |
26 | Want to add your website too? Send me a PR. :v:
27 |
28 | ## Developing:
29 |
30 | This repo makes use of [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) to link packages together whilst developing.
31 | This means you can run the demo dev tasks whilst developing the theme package and see latest theme changes on the demo site.
32 | Here, you're at the entry point. You can find the demo under [packages/demo](./packages/demo) and the theme under [packages/vuepress-theme-book](./packages/vuepress-theme-book)
33 |
34 | ### Install dependencies
35 |
36 | `yarn`
37 |
38 | ### Run demo site in development mode
39 |
40 | `yarn develop`
41 |
42 | ### Build
43 |
44 | `yarn build`
45 |
46 | ## If you like it, please STAR it
47 |
48 | If you enjoy using it, please star it!
49 |
50 | ## Feedback
51 |
52 | Feel free to create an [issue](https://github.com/cyrilf/vuepress-theme-book/issues).
53 |
54 | ## Contributing
55 |
56 | I would be more than happy to receive feedback/issues/pull requests, so don't hesitate.
57 |
58 | - Check the [open issues](https://github.com/cyrilf/vuepress-theme-book/issues) or [open a new issue](https://github.com/cyrilf/vuepress-theme-book/issues/new) to start a discussion around your feature idea or the bug you found.
59 | - Fork [the repository](https://github.com/cyrilf/vuepress-theme-book), make changes and send a pull request
60 |
61 | ## License
62 |
63 | [MIT](https://github.com/cyrilf/vuepress-theme-book/blob/master/LICENSE)
64 |
65 | Thank you!
66 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | base = "packages/demo"
3 | command = "npm run build"
4 | publish = "docs/.vuepress/dist/"
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "develop": "yarn workspace demo develop",
5 | "build": "yarn workspace demo build",
6 | "optimize-images": "yarn workspace demo optimize",
7 | "patch": "yarn workspace vuepress-theme-book version --patch",
8 | "minor": "yarn workspace vuepress-theme-book version --minor",
9 | "major": "yarn workspace vuepress-theme-book version --major",
10 | "publish-theme": "yarn workspace vuepress-theme-book publish"
11 | },
12 | "workspaces": [
13 | "packages/*"
14 | ]
15 | }
--------------------------------------------------------------------------------
/packages/demo/.nvmrc:
--------------------------------------------------------------------------------
1 | v13.9.0
--------------------------------------------------------------------------------
/packages/demo/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2020 cyrilf
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/packages/demo/README.md:
--------------------------------------------------------------------------------
1 | # Vuepress Theme Book
2 |
3 | > A simple demo of the [vuepress-theme-book](https://github.com/cyrilf/vuepress-theme-book/tree/master/packages/vuepress-theme-book)
4 |
5 | The purpose of this demo is to showcase the [vuepress-theme-book](https://github.com/cyrilf/vuepress-theme-book/tree/master/packages/vuepress-theme-book).
6 |
7 | ## Tech
8 |
9 | This is based on [vuepress](https://vuepress.vuejs.org/).
10 | It's using the [vuepress-theme-book](https://github.com/cyrilf/vuepress-theme-book/tree/master/packages/vuepress-theme-book).
11 |
12 | To run it locally:
13 |
14 | ```
15 | npm run develop
16 | ```
17 |
18 | To build:
19 |
20 | ```
21 | npm run build
22 | ```
23 |
24 | It's deployed via [Netlify](https://netlify.com), see [netlify.toml](../../netlify.toml) file for configuration options.
25 |
26 | ---
27 |
28 | Oh, and it's support emoji :smile: :tada:
29 |
--------------------------------------------------------------------------------
/packages/demo/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
1 | const path = require("path")
2 |
3 | module.exports = {
4 | title: "Vuepress Theme Book",
5 | description: "A simple demo of the vuepress-theme-book",
6 | theme: "vuepress-theme-book",
7 | themeConfig: {
8 | logo: "/logo.png",
9 | searchPlaceholder: "Search...",
10 | lastUpdated: "Last Updated",
11 | docsRepo: "cyrilf/vuepress-theme-book/tree/master/packages/demo",
12 | docsDir: "docs",
13 | editLinks: true,
14 | editLinkText: "Edit this page on Github",
15 | nav: [
16 | { text: "Home", link: "/" },
17 | {
18 | text: "Github",
19 | link:
20 | "https://github.com/cyrilf/vuepress-theme-book/tree/master/packages/vuepress-theme-book"
21 | },
22 | {
23 | text: "Default Theme Config",
24 | link: "https://vuepress.vuejs.org/theme/default-theme-config.html"
25 | }
26 | ],
27 | sidebar: {
28 | "/": [
29 | {
30 | title: "",
31 | collapsable: false,
32 | sidebarDepth: 0,
33 | children: [["/", "Home"]]
34 | },
35 | {
36 | title: "",
37 | collapsable: false,
38 | sidebarDepth: 0,
39 | children: [["/theme-configuration", "Configuration 🔧"]]
40 | },
41 | {
42 | title: "Random",
43 | collapsable: false,
44 | children: [
45 | ["/random/dev", "Dev 💻"],
46 | ["/random/website", "Websites using this theme 👌"],
47 | ["/random/emoji", "Emoji 😃"],
48 | ["/random/lorem", "Lorem Ipsum 🌟"]
49 | ]
50 | },
51 | {
52 | title: "Extras",
53 | collapsable: false,
54 | children: [
55 | ["/extras/contributing", "Contributing ✨"],
56 | ["/extras/license", "License 📚"]
57 | ]
58 | }
59 | ]
60 | }
61 | },
62 | plugins: [
63 | [
64 | "vuepress-plugin-clean-urls",
65 | {
66 | normalSuffix: "/"
67 | }
68 | ]
69 | ],
70 | configureWebpack: {
71 | resolve: {
72 | alias: {
73 | "@assets": path.resolve(__dirname, "../assets")
74 | }
75 | }
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/packages/demo/docs/.vuepress/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyrilf/vuepress-theme-book/e7543a8e272e40b4d372d1dcb1ccb9ee5dcca66d/packages/demo/docs/.vuepress/public/favicon.ico
--------------------------------------------------------------------------------
/packages/demo/docs/.vuepress/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyrilf/vuepress-theme-book/e7543a8e272e40b4d372d1dcb1ccb9ee5dcca66d/packages/demo/docs/.vuepress/public/logo.png
--------------------------------------------------------------------------------
/packages/demo/docs/.vuepress/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
--------------------------------------------------------------------------------
/packages/demo/docs/.vuepress/styles/index.styl:
--------------------------------------------------------------------------------
1 | // Override style
--------------------------------------------------------------------------------
/packages/demo/docs/.vuepress/styles/palette.styl:
--------------------------------------------------------------------------------
1 | // Override colors
2 | $accentColor = #297abd
3 | $badgeTipColor = #c6b29b
--------------------------------------------------------------------------------
/packages/demo/docs/README.md:
--------------------------------------------------------------------------------
1 | # A simple demo of the `vuepress-theme-book`
2 |
3 |
4 |

5 |
6 |
7 | This demo showcases a [VuePress](https://vuepress.vuejs.org) theme inspired by [Gitbook](https://docs.gitbook.com/).
8 |
9 | I really love their clean and minimalist style, so I decided to do a theme for VuePress.
10 |
11 | It is **not** 100% identical to a Gitbook page, some choices are made to respect VuePress limitations.
12 |
13 | It is based on the [@vuepress/theme-default](https://vuepress.vuejs.org/theme/default-theme-config.html) and extends it.
14 | So you'll get all the great features it already provides! :tada:
15 |
16 | ## Installation
17 |
18 | You can add `vue-theme-book` to your current Vuepress project by running:
19 |
20 | ```bash
21 | npm install --save vuepress-theme-book
22 | # or yarn add vuepress-theme-book
23 | ```
24 |
25 | And then, in your `.vuepress/config.js` file simply add:
26 |
27 | ```js
28 | module.exports = {
29 | theme: "book",
30 | ...
31 | }
32 | ```
33 |
--------------------------------------------------------------------------------
/packages/demo/docs/assets/computer.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyrilf/vuepress-theme-book/e7543a8e272e40b4d372d1dcb1ccb9ee5dcca66d/packages/demo/docs/assets/computer.jpeg
--------------------------------------------------------------------------------
/packages/demo/docs/assets/emoji.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyrilf/vuepress-theme-book/e7543a8e272e40b4d372d1dcb1ccb9ee5dcca66d/packages/demo/docs/assets/emoji.jpeg
--------------------------------------------------------------------------------
/packages/demo/docs/assets/tools.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyrilf/vuepress-theme-book/e7543a8e272e40b4d372d1dcb1ccb9ee5dcca66d/packages/demo/docs/assets/tools.jpg
--------------------------------------------------------------------------------
/packages/demo/docs/assets/universe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyrilf/vuepress-theme-book/e7543a8e272e40b4d372d1dcb1ccb9ee5dcca66d/packages/demo/docs/assets/universe.jpeg
--------------------------------------------------------------------------------
/packages/demo/docs/extras/contributing.md:
--------------------------------------------------------------------------------
1 | ## Contributing
2 |
3 | I would be more than happy to receive feedback/issues/pull requests, so don't hesitate.
4 |
5 | - Check the [open issues](https://github.com/cyrilf/vuepress-theme-book/issues) or [open a new issue](https://github.com/cyrilf/vuepress-theme-book/issues/new) to start a discussion around your feature idea or the bug you found.
6 | - Fork [the repository](https://github.com/cyrilf/vuepress-theme-book), make changes and send a pull request
7 |
8 | 
9 |
10 | Thank you!
11 |
--------------------------------------------------------------------------------
/packages/demo/docs/extras/license.md:
--------------------------------------------------------------------------------
1 | # LICENSE
2 |
3 | The MIT License (MIT)
4 |
5 | Copyright (c) 2020 cyrilf
6 |
7 | Permission is hereby granted, free of charge, to any person obtaining a copy
8 | of this software and associated documentation files (the "Software"), to deal
9 | in the Software without restriction, including without limitation the rights
10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11 | copies of the Software, and to permit persons to whom the Software is
12 | furnished to do so, subject to the following conditions:
13 |
14 | The above copyright notice and this permission notice shall be included in all
15 | copies or substantial portions of the Software.
16 |
17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23 | SOFTWARE.
24 |
--------------------------------------------------------------------------------
/packages/demo/docs/random/dev.md:
--------------------------------------------------------------------------------
1 | # Development
2 |
3 | 
4 |
5 | In your `package.json` file you should have these two scripts
6 |
7 | ```json
8 | {
9 | "scripts": {
10 | "develop": "vuepress dev docs",
11 | "build": "vuepress build docs"
12 | }
13 | }
14 | ```
15 |
16 | To run your project locally you can simply run:
17 |
18 | ```bash
19 | npm run develop
20 | # or yarn develop
21 | ```
22 |
23 | To prepare a production build you can do:
24 |
25 | ```bash
26 | npm run build
27 | # or yarn build
28 | ```
29 |
--------------------------------------------------------------------------------
/packages/demo/docs/random/emoji.md:
--------------------------------------------------------------------------------
1 | # Emoji
2 |
3 | 
4 |
5 | In case you haven't notice yet, emoji are supported out-of-the-box.
6 |
7 | Yeah :tada:
8 | That's pretty neat! :ok_hand:
9 |
10 | And.. I'm already out of ideas.. :light_bulb:
11 |
--------------------------------------------------------------------------------
/packages/demo/docs/random/lorem.md:
--------------------------------------------------------------------------------
1 | # Lorem
2 |
3 | 
4 |
5 | And because I need some extra content, here is some [Lorem Ipsum](http://saganipsum.com/) text.
6 |
7 | At the edge of forever billions upon billions Orion's sword decipherment cosmic ocean how far away. Citizens of distant epochs made in the interiors of collapsing stars dream of the mind's eye Sea of Tranquility white dwarf bits of moving fluff. Two ghostly white figures in coveralls and helmets are softly dancing the sky calls to us vastness is bearable only through love from which we spring with pretty stories for which there's little good evidence concept of the number one.
8 |
9 | Radio telescope hearts of the stars a still more glorious dawn awaits the sky calls to us encyclopaedia galactica take root and flourish? How far away extraordinary claims require extraordinary evidence Sea of Tranquility with pretty stories for which there's little good evidence the ash of stellar alchemy emerged into consciousness. The ash of stellar alchemy invent the universe are creatures of the cosmos courage of our questions not a sunrise but a galaxyrise courage of our questions.
10 |
11 | Take root and flourish circumnavigated laws of physics encyclopaedia galactica Rig Veda the ash of stellar alchemy. Kindling the energy hidden in matter ship of the imagination prime number vanquish the impossible inconspicuous motes of rock and gas emerged into consciousness. Intelligent beings vastness is bearable only through love how far away two ghostly white figures in coveralls and helmets are softly dancing rich in heavy atoms invent the universe and billions upon billions upon billions upon billions upon billions upon billions upon billions.
12 |
--------------------------------------------------------------------------------
/packages/demo/docs/random/website.md:
--------------------------------------------------------------------------------
1 | # Websites using this theme
2 |
3 | - [The Wise Opportunist](https://opportunist.luseeds.com)
4 | - Yours?
5 |
6 | Want to add yours, feel free to send a PR. :v:
7 |
--------------------------------------------------------------------------------
/packages/demo/docs/theme-configuration.md:
--------------------------------------------------------------------------------
1 | ## Configuration
2 |
3 | There is no specific configuration for this theme.
4 | However, as we're extending the default theme you can configure all of their options.
5 |
6 | Find out more on [the default theme config page](https://v1.vuepress.vuejs.org/theme/default-theme-config.html)
7 | All these config can be added to your `.vuepress/config.js` file under the key `themeConfig`.
8 |
9 | Also, if you want to change the color palette, you can modify your `.vuepress/styles/palette.styl`.
10 | The available variables are (including the [default theme ones](https://v1.vuepress.vuejs.org/config/#palette-styl)):
11 |
12 | ```stylus
13 | // colors
14 | $accentColor = #3eaf7c
15 | $textColor = #3b454e
16 | $titleColor = #242a31
17 | $borderColor = #eaecef
18 | $sidebarHeaderColor = #697179
19 | $sidebarBgColor = #f5f7f9
20 | $lightDelimiterColor = #e6ecf1
21 | $codeBgColor = #282c34
22 | $arrowBgColor = #ccc
23 | $badgeTipColor = #42b983
24 | $badgeWarningColor = darken(#ffe564, 35%)
25 | $badgeErrorColor = #DA5961
26 |
27 | // layout
28 | $navbarHeight = 4rem
29 | $sidebarWidth = 18.625rem
30 | $contentWidth = 740px
31 | $homePageWidth = 960px
32 |
33 | // responsive breakpoints
34 | $MQNarrow = 959px
35 | $MQMobile = 719px
36 | $MQMobileNarrow = 419px
37 | ```
38 |
--------------------------------------------------------------------------------
/packages/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": "true",
3 | "name": "demo",
4 | "version": "1.0.0",
5 | "description": "A simple demo of the vuepress-theme-book",
6 | "license": "MIT",
7 | "directories": {
8 | "doc": "docs"
9 | },
10 | "scripts": {
11 | "develop": "vuepress dev docs",
12 | "build": "vuepress build docs",
13 | "optimize": "node scripts/optimize.js"
14 | },
15 | "dependencies": {
16 | "vuepress": "^1.4.0",
17 | "vuepress-plugin-clean-urls": "^1.1.1",
18 | "vuepress-theme-book": "^*"
19 | },
20 | "devDependencies": {
21 | "fs-extra": "^8.1.0",
22 | "glob": "^7.1.4",
23 | "sharp": "^0.32.6"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/demo/scripts/optimize.js:
--------------------------------------------------------------------------------
1 | const sharp = require("sharp")
2 | const glob = require("glob")
3 | const fs = require("fs-extra")
4 |
5 | console.log("Optimizing demo site images")
6 |
7 | const matches = glob.sync("**/**/*.{png,jpg,jpeg}")
8 | const MAX_WIDTH = 1800
9 | const QUALITY = 75
10 |
11 | Promise.all(
12 | matches.map(async (match) => {
13 | const stream = sharp(match)
14 | const info = await stream.metadata()
15 |
16 | if (info.width < MAX_WIDTH) {
17 | return
18 | }
19 |
20 | const optimizedName = match.replace(
21 | /(\..+)$/,
22 | (match, ext) => `-optimized${ext}`
23 | )
24 |
25 | await stream
26 | .resize(MAX_WIDTH)
27 | .jpeg({ quality: QUALITY })
28 | .toFile(optimizedName)
29 |
30 | return fs.rename(optimizedName, match)
31 | })
32 | )
33 |
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .cache
3 | .DS_Store
4 | src/.temp
5 | node_modules
6 | dist
7 | .env
8 | .env.*
9 | static/rss.xml
10 | docs/.vuepress/dist
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | package.json
3 | package-lock.json
4 | public
5 |
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "tabWidth": 2,
3 | "useTabs": false,
4 | "semi": false
5 | }
6 |
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2020 cyrilf
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/README.md:
--------------------------------------------------------------------------------
1 | # VuePress theme - Gitbook inspired
2 |
3 | A [VuePress](https://vuepress.vuejs.org) theme inspired by [Gitbook](https://docs.gitbook.com/).
4 |
5 | 
6 |
7 | [Live demo](https://vuepress-theme-book.netlify.app)
8 |
9 | I really love their clean and minimalist style, so I decided to do a theme for VuePress.
10 |
11 | It is **not** 100% identical to a Gitbook page, some choices are made to respect VuePress limitations.
12 | It is based on `@vuepress/theme-default` and only extend it.
13 |
14 | ## Installation
15 |
16 | `npm install --save-dev vuepress-theme-book`
17 |
18 | ## Usage
19 |
20 | In your `.vuepress/config.js` file simply add:
21 |
22 | ```js
23 | module.exports = {
24 | theme: "book",
25 | ...
26 | }
27 | ```
28 |
29 | ## Configuration
30 |
31 | There is no specific configuration for this theme.
32 | However, as we're extending the default theme you can configure all of their options.
33 |
34 | Find out more on [the default theme config page](https://v1.vuepress.vuejs.org/theme/default-theme-config.html)
35 | All these config can be added to your `.vuepress/config.js` file under the key `themeConfig`.
36 |
37 | Also, if you want to change the color palette, you can modify your `.vuepress/styles/palette.styl`.
38 | The available variables are (including the [default theme ones](https://v1.vuepress.vuejs.org/config/#palette-styl)):
39 |
40 | ```stylus
41 | // colors
42 | $accentColor = #3eaf7c
43 | $textColor = #3b454e
44 | $titleColor = #242a31
45 | $borderColor = #eaecef
46 | $sidebarHeaderColor = #697179
47 | $sidebarBgColor = #f5f7f9
48 | $lightDelimiterColor = #e6ecf1
49 | $codeBgColor = #282c34
50 | $arrowBgColor = #ccc
51 | $badgeTipColor = #42b983
52 | $badgeWarningColor = darken(#ffe564, 35%)
53 | $badgeErrorColor = #DA5961
54 |
55 | // layout
56 | $navbarHeight = 4rem
57 | $sidebarWidth = 18.625rem
58 | $contentWidth = 740px
59 | $homePageWidth = 960px
60 |
61 | // responsive breakpoints
62 | $MQNarrow = 959px
63 | $MQMobile = 719px
64 | $MQMobileNarrow = 419px
65 | ```
66 |
67 | ## License
68 |
69 | [MIT](https://github.com/cyrilf/vuepress-theme-book/blob/master/LICENSE)
70 |
71 | ## Contributing
72 |
73 | I would be more than happy to receive feedback/issues/pull request, so don't hesitate.
74 |
75 | - Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.
76 | - Fork repository, make changes and send a pull request
77 |
78 | Thank you!
79 |
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (themeConfig) => {
2 | // Will be useful when the right sidebar is developed.
3 | // In Gitbook, sub-headers are in a right sidebar, so the left one shouldn't
4 | // include them.
5 | //
6 | // themeConfig.sidebarDepth = themeConfig.sidebarDepth || 0
7 |
8 | return {
9 | extend: "@vuepress/theme-default",
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vuepress-theme-book",
3 | "version": "0.0.3",
4 | "lockfileVersion": 1
5 | }
6 |
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vuepress-theme-book",
3 | "author": "cyrilf",
4 | "version": "0.0.9",
5 | "description": "A Vuepress theme inspired by gitbook aesthetics",
6 | "main": "index.js",
7 | "keywords": [
8 | "vuepress",
9 | "theme",
10 | "gitbook",
11 | "vuepress-theme"
12 | ],
13 | "repository": {
14 | "type": "git",
15 | "url": "https://github.com/cyrilf/vuepress-theme-book.git"
16 | },
17 | "license": "MIT",
18 | "bugs": {
19 | "url": "https://github.com/cyrilf/vuepress-theme-book/issues"
20 | },
21 | "homepage": "https://vuepress-theme-book.netlify.app/",
22 | "dependencies": {},
23 | "devDependencies": {}
24 | }
25 |
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyrilf/vuepress-theme-book/e7543a8e272e40b4d372d1dcb1ccb9ee5dcca66d/packages/vuepress-theme-book/screenshot.png
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/styles/index.styl:
--------------------------------------------------------------------------------
1 | // NAVBAR
2 |
3 | body .navbar .site-name, h1, h2
4 | color: $titleColor
5 |
6 | // SEARCH BOX
7 |
8 | .navbar
9 | box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1)
10 | .links
11 | flex-direction: row-reverse
12 |
13 | .search-box
14 | font-size: 1rem
15 | border-radius: 3px
16 | margin: 0 0 0 1rem
17 |
18 | input
19 | font: inherit
20 | font-size: 0.9rem
21 | border: none
22 | margin: 0
23 | text-align: left
24 | border-radius: 3px
25 | padding-left: 2rem
26 |
27 | .suggestions
28 | border-radius: 0
29 | border-color: $lightDelimiterColor
30 | top: 2.25rem
31 |
32 | @media (min-width: $MQNarrow)
33 | &:before
34 | top: 50%
35 | left: 0
36 | height: $navbarHeight
37 | content: ""
38 | position: absolute
39 | transform: translateY(-50%)
40 | border-left: 1px solid $lightDelimiterColor
41 |
42 | input
43 | height: 100%
44 | background-size: 0.9rem
45 | background-position-y: 50%
46 |
47 | #search-form
48 | line-height: inherit
49 |
50 | // SIDEBAR
51 |
52 | .sidebar
53 | background-color: $sidebarBgColor
54 | padding-left: 1.5rem
55 |
56 | .sidebar-group
57 | color: $sidebarHeaderColor
58 | margin-bottom: 1.5rem
59 |
60 | .sidebar-heading, .sidebar-heading
61 | font-size: 0.75rem
62 | text-transform: uppercase
63 | color: $sidebarHeaderColor
64 | letter-spacing: 1.2px
65 | padding: 0.5rem 1.5rem 0.5rem 1rem
66 |
67 | li a.sidebar-link
68 | padding-left: 1.2rem
69 |
70 | .sidebar-links
71 | a.sidebar-link
72 | font-size: 0.9rem
73 | font-weight: 500
74 | line-height: 1.5
75 | padding: 0.5rem 1.5rem 0.5rem 1rem
76 | border: 1px solid transparent
77 | color: $textColor
78 |
79 | &:hover
80 | color: $textColor
81 | background-color: $lightDelimiterColor !important
82 |
83 | &.active
84 | border-color: $lightDelimiterColor
85 | border-right: none
86 | background-color: white
87 |
88 | .sidebar-links .sidebar-sub-headers a
89 | background-color: inherit
90 | border-color: transparent
91 |
92 | // H1
93 |
94 | h1
95 | padding-bottom: 2rem
96 | border-bottom: 2px solid $lightDelimiterColor
97 | font-size: 2rem
98 | font-weight: 500
99 | line-height: 1.5
100 |
101 | // Position the delimiting line above the h2
102 | // but it can cause an issue if the first h2 is directly afterwards the h1
103 |
104 | // h2
105 | // position: relative
106 | // border-bottom: none
107 |
108 | // &:before
109 | // bottom: 3.5rem
110 | // left: 0
111 | // width: 100%
112 | // height: 1px
113 | // content: ""
114 | // position: absolute
115 | // background-color: $lightDelimiterColor
116 | //
117 | //
118 |
119 | // PAGE NAV
120 |
121 | .page-nav .inner
122 | display: grid
123 | grid-column-gap: 1.5rem
124 | grid-template-areas: "previous next"
125 | grid-template-columns: 1fr 1fr
126 |
127 | span.prev, span.next
128 | display: flex
129 | align-items: center
130 | border: 1px solid $lightDelimiterColor
131 | grid-area: previous
132 | box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1)
133 | border-radius: 3px
134 | background-color: white
135 | padding-left: 1rem
136 |
137 | a
138 | flex: 1
139 | color: #242A31
140 | text-align: right
141 | padding: 1rem 1rem 1rem 0
142 |
143 | span.next
144 | grid-area: next
145 | padding-right: 1rem
146 | a
147 | text-align: left
148 |
--------------------------------------------------------------------------------
/packages/vuepress-theme-book/styles/palette.styl:
--------------------------------------------------------------------------------
1 | // You can extend it in your `.vuepress/styles/palette.styl` file
2 | // You have more variables available from the default theme.
3 | // Find them there: https://v1.vuepress.vuejs.org/config/#palette-styl
4 |
5 | $textColor = #3b454e
6 | $titleColor = #242a31
7 | $sidebarHeaderColor = #697179
8 | $sidebarBgColor = #f5f7f9
9 |
10 | $lightDelimiterColor = #e6ecf1
11 |
12 | $navbarHeight = 4rem
13 | $sidebarWidth = 18.625rem
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyrilf/vuepress-theme-book/e7543a8e272e40b4d372d1dcb1ccb9ee5dcca66d/screenshot.png
--------------------------------------------------------------------------------