Initial commit

Author: Christopher Mühl

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+yarn.lock
+package-lock.json

components/CodeSwitcher.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="code-switcher">
+        <div class="tab-header">
+            <ul>
+                <li v-for="(name, shorthand) in languages"
+                    @click="selectedLanguage = shorthand"
+                    :class="{ active: selectedLanguage === shorthand }"
+                > {{ name }}
+                </li>
+            </ul>
+        </div>
+
+        <div class="tab-content"
+            v-for="(name, shorthand) in languages"
+            v-show="shorthand === selectedLanguage"
+        > 
+            <slot :name="shorthand"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        languages: Object
+    },
+
+    data () {
+        return {
+            selectedLanguage: 'js'
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

enhanceAppFile.js

@@ -0,0 +1 @@
+import './switcher.styl'

index.js

@@ -0,0 +1,18 @@
+const { resolve } = require('path')
+
+module.exports = (options, ctx) => ({
+    
+    name: 'vuepress-plugin-code-switcher',
+
+    enhanceAppFiles: resolve(__dirname, 'enhanceAppFile.js'),
+
+    plugins: [
+        [
+            '@vuepress/register-components',
+            {
+                componentsDir: resolve(__dirname, './components')
+            }
+        ]
+    ]
+
+})

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "vuepress-plugin-code-switcher",
+  "author": {
+    "name": "Christopher Mühl",
+    "email": "[email protected]",
+    "url": "https://padarom.io"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/padarom/vuepress-plugin-code-switcher"
+  },
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@vuepress/plugin-register-components": "^1.0.0-alpha.0"
+  }
+}

switcher.styl

@@ -0,0 +1,15 @@
+.code-switcher 
+    div[class*="language-"]::before
+        content ""
+
+    .tab-header
+        ul
+            padding 0
+
+        li
+            display inline-block
+            padding 0 10px
+            cursor pointer
+
+            &.active
+                font-weight bold