Add support for tab containers (#1023)

Uses https://github.com/pskordilakis/vuepress-tabs.

Closes https://github.com/openhab/website/issues/183.

Update dependencies.

Signed-off-by: Yannick Schaus <github@schaus.net>

.vuepress/config.js

@@ -3,6 +3,7 @@ const DocsSidebarNavigation = require('./docs-sidebar.js')
 const fs = require ('fs-extra')
 const path = require('path')
 // const CopyWebpackPlugin = require('copy-webpack-plugin')
+const vuepressTabs = require('vuepress-tabs')
 
 const HighlightDsl = require('./highlight-dsl')
 const HighlightRules = require('./highlight-rules')
@@ -30,9 +31,17 @@ module.exports = {
   ],
   markdown: {
     config: (md) => {
+      vuepressTabs(md)
       md.options.linkify = true
       const highlight = md.options.highlight
       md.options.highlight = (str, lang) => {
+        if (!Prism.languages.dsl || !Prism.languages.rules) {
+          Prism.languages.dsl = HighlightDsl
+          Prism.languages.rules = HighlightRules
+        }
+
+        if (['nginx', 'bash', 'python', 'js', 'javascript', 'groovy'].indexOf(lang) >= 0) return highlight(str, lang)
+
         /* Simple heuristics to detect rules & other openHAB DSL code snippets and override the language */
         if (str.match(/\b(?:Color|Contact|Dimmer|Group|Number|Player|Rollershutter|Switch|Location|Frame|Default|Text|Group|Selection|Setpoint|Slider|Colorpicker|Chart|Webview|Mapview|Image|Video|Item|Thing|Bridge|Time|Type|Sitemap|sitemap)\b/)) {
           lang = 'dsl'
@@ -44,7 +53,7 @@ module.exports = {
           str.match(/received update/) || str.match(/changed.*(?:from|to)/) || str.match(/Channel.*triggered/) ||
           str.match(/\bval\b/) || str.match(/\bvar\b/) /* <-- dangerous! */) {
           
-          if (lang !== 'nginx' && lang !== 'shell') lang = 'rules'
+          lang = 'rules'
         }
         if (lang === 'shell' || lang === 'sh' || lang === 'shell_session') lang = 'bash'
         if (lang === 'conf') lang = 'dsl'
@@ -54,11 +63,6 @@ module.exports = {
         //   console.log(str)
         // }
 
-        if (!Prism.languages.dsl || !Prism.languages.rules) {
-          Prism.languages.dsl = HighlightDsl
-          Prism.languages.rules = HighlightRules
-        }
-
         return highlight(str, lang)
       }
     }

.vuepress/enhanceApp.js

@@ -0,0 +1,10 @@
+import Tabs from 'vue-tabs-component'
+
+export default ({
+  Vue, // the version of Vue being used in the VuePress app
+  options, // the options for the root Vue instance
+  router, // the router instance for the app
+  siteData // site metadata
+}) => {
+  Vue.use(Tabs)
+}

.vuepress/style.styl

@@ -1,3 +1,5 @@
+@require '~vuepress-tabs/dist/themes/default.styl'
+
 .navbar:not(.headroom--top):not(.transparent)
     box-shadow rgba(10%,10%,10%,25%) 0 0 10px
     background-color rgba(98%, 98%, 99%, 0.9) // linear-gradient(180deg,hsla(0,0%,100%,.3),hsla(0,0%,100%,.3) 95%,rgba(0,0,0,.05) 99%,rgba(0,0,0,.04))
@@ -105,3 +107,49 @@ a[href*='.openhab.org'] .outbound
 
 .custom-block.tip
     border-color #2196f3 !important
+
+/* Tweaks for vuepress-tabs */
+
+.vuepress-tabs
+    .tabs-component
+        .tabs-component-tab.is-active .tabs-component-tab-a
+                color black
+        .tabs-component-panel
+            margin-top -8.4rem
+            padding-top 8.4rem
+
+@media (min-width: 700px)
+    .vuepress-tabs
+        .tabs-component-tab
+            border solid 1px #bbb
+            &.is-active
+                border-bottom solid 1px #fff
+                z-index 2
+                transform translateY(0)
+        .tabs-component-panels
+            border solid 1px #bbb
+
+@media (max-width: 699px)
+    .vuepress-tabs
+        .tabs-component-tabs
+            border 0
+            align-items center
+            display flex
+            justify-content flex-start
+            margin-bottom -2px
+            padding-left -1rem
+        .tabs-component-tab
+            background-color #fff
+            border solid 1px #bbb
+            border-radius 3px 3px 0 0
+            margin-right .25em
+            transition transform .3s ease
+            &.is-active
+                border-bottom solid 1px #fff
+                z-index 2
+                transform translateY(0)
+        .tabs-component-panels
+            background-color #fff
+            border-top solid 1px #bbb
+            padding-top 0
+            margin-top 1px

package.json

@@ -19,6 +19,9 @@
   },
   "homepage": "https://github.com/openhab/openhab-docs#readme",
   "dependencies": {
-    "vuepress": "^0.14.8"
+    "vue-tabs-component": "^1.5.0",
+    "vuepress": "^0.14.11",
+    "vuepress-tabs": "^0.1.6",
+    "webpack-serve": "^3.1.1"
   }
 }