Add support for tab containers

Related to openhab/openhab-docs#1023 Uses https://github.com/pskordilakis/vuepress-tabs. Closes openhab#183. Update dependencies. Signed-off-by: Yannick Schaus <github@schaus.net>
ghys · Aug 9, 2019 · 733e34d · 733e34d
1 parent d9ac2a8
commit 733e34d
Show file tree

Hide file tree

Showing 5 changed files with 5,321 additions and 4,234 deletions.
diff --git a/.vuepress/config.js b/.vuepress/config.js
@@ -8,6 +8,7 @@ const AddonsVoice = require('./addons-voice.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')
@@ -36,9 +37,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/)) {
           if (!str.match(/\b(?:private|public|protected|class|implements|extends|thing-type|thing-description|channel-type)\b/)) {
@@ -52,7 +61,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'
@@ -62,11 +71,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)
       }
     }

diff --git a/.vuepress/enhanceApp.js b/.vuepress/enhanceApp.js
@@ -1,9 +1,12 @@
+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)
     if (typeof window !== 'undefined') {
       const Headroom = require('headroom.js')
       Vue.prototype.Headroom = Headroom

diff --git a/.vuepress/style.styl b/.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))
@@ -104,3 +106,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