Flipbox Documentation Theme for VuePress

This is the VuePress theme used for Flipbox.

Setup

1. Require VuePress and the Flipbox theme in your project

   npm install -D vuepress
   npm install -D vuepress-theme-flipbox

2. Set config values in .vuepress/config.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"
}