Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flipboxlabs/vuepress-theme-flipbox
VuePress theme used for Flipbox documentation
https://github.com/flipboxlabs/vuepress-theme-flipbox
Last synced: about 1 month ago
JSON representation
VuePress theme used for Flipbox documentation
- Host: GitHub
- URL: https://github.com/flipboxlabs/vuepress-theme-flipbox
- Owner: flipboxlabs
- License: mit
- Created: 2018-06-08T23:16:43.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-16T22:54:57.000Z (about 6 years ago)
- Last Synced: 2024-10-31T12:14:40.123Z (about 1 month ago)
- Language: Vue
- Homepage: https://www.npmjs.com/package/vuepress-theme-flipbox
- Size: 181 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-starred - flipboxlabs/vuepress-theme-flipbox - VuePress theme used for Flipbox documentation (others)
README
# Flipbox Documentation Theme for VuePress
This is the [VuePress](https://v0.vuepress.vuejs.org/) theme used for [Flipbox](https://flipboxdigital.com/).
## Setup
1. Require VuePress and the Flipbox theme in your project
```bash
npm install -D vuepress
npm install -D vuepress-theme-flipbox
```
2. Set config values in `.vuepress/config.js`:
```js
module.exports = {
// ...
theme: 'flipbox',
themeConfig: {
// ...
codeLanguages: {
php: 'PHP',
twig: 'Twig',
json: 'JSON',
// any other languages for the code toggles...
}
},
markdown: {
anchor: { level: [2, 3, 4] },
toc: { includeLevel: [3] },
config(md) {
md.use(require('vuepress-theme-flipbox/markup'))
}
}
}
```
## Code Toggles
You can create code toggles by wrapping multiple fenced code blocks with a `code` container:
::: code
``` php
echo "Hey, $name";
```
``` twig
Hey, {{ name }}
```
:::
(Use the same language handles defined by `themeConfig.codeLanguages` in `.vuepress/config.js`.)
## Theme
After ejecting VuePress, the customizations are:
- Add ButtonLink.vue
- Add CodeToggle.vue
- Add markup.js
- Add /styles/override.styl - Custom code
- Update /styles/config.styl
- Change colors (7 colors, add sidebar and codeBg)
- Add `php` and `twig` to $codeLang
- Add `@import '~@temp/override.styl'` at end
- Update /styles/code.styl - Custom styling
- Comment out `color #fff` for `.content pre code`
- Update enhanceApp.js - Custom code
- Run `npm login`
- Run `npm version <1.0.X>`
- Run `npm publish`
To dev locally, set the local theme dir as a dev dependency in the project's package.json
"devDependencies": {
...
"vuepress-theme-flipbox": "file:../path/to/theme/vuepress-theme-flipbox"
}