https://github.com/flipboxlabs/vuepress-theme-flipbox

VuePress theme used for Flipbox documentation
https://github.com/flipboxlabs/vuepress-theme-flipbox

Last synced: 4 days 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 (almost 6 years ago)
• Last Synced: 2024-10-31T12:14:40.123Z (8 days 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"

    }