# 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, 
```

:::

(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"
}

Made with ❤️ by Ahmad Mostafa - @z3by