├── .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 | ![screenshot](screenshot.png) 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 | book emoji 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 | ![tools](~@assets/tools.jpg) 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 | ![computer](~@assets/computer.jpeg) 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 | ![emoji](~@assets/emoji.jpeg) 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 | ![universe](~@assets/universe.jpeg) 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 | ![screenshot](screenshot.png) 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 --------------------------------------------------------------------------------