feat: content tabs

client/client-app.js

@@ -169,7 +169,6 @@ Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunk
 Vue.component('welcome', () => import(/* webpackChunkName: "welcome" */ './components/welcome.vue'))
 
 Vue.component('nav-footer', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/nav-footer.vue'))
-Vue.component('nav-sidebar', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/nav-sidebar.vue'))
 Vue.component('page', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/page.vue'))
 
 let bootstrap = () => {

client/themes/default/components/page.vue

@@ -249,11 +249,16 @@
 
 <script>
 import { StatusIndicator } from 'vue-status-indicator'
+import Tabset from './tabset.vue'
+import NavSidebar from './nav-sidebar.vue'
 import Prism from 'prismjs'
 import mermaid from 'mermaid'
 import { get } from 'vuex-pathify'
 import _ from 'lodash'
 import ClipboardJS from 'clipboard'
+import Vue from 'vue'
+
+Vue.component('tabset', Tabset)
 
 Prism.plugins.autoloader.languages_path = '/js/prism/'
 Prism.plugins.NormalizeWhitespace.setDefaults({
@@ -292,6 +297,7 @@ Prism.plugins.toolbar.registerButton('copy-to-clipboard', (env) => {
 
 export default {
   components: {
+    NavSidebar,
     StatusIndicator
   },
   props: {

client/themes/default/components/tabset.vue

@@ -0,0 +1,151 @@
+<template lang="pug">
+  .tabset.elevation-2
+    ul.tabset-tabs(ref='tabs')
+      slot(name='tabs')
+    .tabset-content(ref='content')
+      slot(name='content')
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentTab: 0
+    }
+  },
+  watch: {
+    currentTab (newValue, oldValue) {
+      this.setActiveTab()
+    }
+  },
+  methods: {
+    setActiveTab () {
+      this.$refs.tabs.childNodes.forEach((node, idx) => {
+        if (idx === this.currentTab) {
+          node.className = 'is-active'
+        } else {
+          node.className = ''
+        }
+      })
+      this.$refs.content.childNodes.forEach((node, idx) => {
+        if (idx === this.currentTab) {
+          node.className = 'tabset-panel is-active'
+        } else {
+          node.className = 'tabset-panel'
+        }
+      })
+    }
+  },
+  mounted () {
+    this.setActiveTab()
+    this.$refs.tabs.childNodes.forEach((node, idx) => {
+      node.addEventListener('click', ev => {
+        this.currentTab = [].indexOf.call(ev.target.parentNode.children, ev.target)
+      })
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+.tabset {
+  border-radius: 5px;
+  margin-top: 10px;
+
+  @at-root .theme--dark & {
+    background-color: #292929;
+  }
+
+  > .tabset-tabs {
+    padding-left: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    background: linear-gradient(to bottom, #FFF, #FAFAFA);
+    box-shadow: inset 0 -1px 0 0 #DDD;
+    border-radius: 5px 5px 0 0;
+    overflow: hidden;
+
+    @at-root .theme--dark & {
+      background: linear-gradient(to bottom, #424242, #333);
+      box-shadow: inset 0 -1px 0 0 #555;
+    }
+
+    > li {
+      display: block;
+      padding: 16px;
+      margin-top: 0;
+      cursor: pointer;
+      transition: color 1s ease;
+      border-right: 1px solid #FFF;
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 1px;
+      user-select: none;
+
+      @at-root .theme--dark & {
+        border-right-color: #555;
+      }
+
+      &.is-active {
+        background-color: #FFF;
+        margin-bottom: 0;
+        padding-bottom: 17px;
+        color: mc('blue', '700');
+
+        @at-root .theme--dark & {
+          background-color: #292929;
+          color: mc('blue', '300');
+        }
+      }
+
+      &:last-child {
+        border-right: none;
+
+        &.is-active {
+          border-right: 1px solid #EEE;
+
+          @at-root .theme--dark & {
+            border-right-color: #555;
+          }
+        }
+      }
+
+      &:hover {
+        background-color: rgba(#CCC, .1);
+
+        @at-root .theme--dark & {
+          background-color: rgba(#222, .25);
+        }
+
+        &.is-active {
+          background-color: #FFF;
+
+          @at-root .theme--dark & {
+            background-color: #292929;
+          }
+        }
+      }
+
+      & + li {
+        border-left: 1px solid #EEE;
+
+        @at-root .theme--dark & {
+          border-left-color: #222;
+        }
+      }
+    }
+  }
+
+  > .tabset-content {
+    .tabset-panel {
+      padding: 2px 16px 16px;
+      display: none;
+
+      &.is-active {
+        display: block;
+      }
+    }
+  }
+}
+</style>

client/themes/default/scss/app.scss

@@ -310,7 +310,7 @@
   // LISTS
   // ---------------------------------
 
-  ol, ul {
+  ol, ul:not(.tabset-tabs) {
     padding-top: 1rem;
     width: 100%;
 
@@ -471,7 +471,7 @@
     }
   }
 
-  ul {
+  ul:not(.tabset-tabs) {
     list-style: none;
     > li::before {
       position: absolute;
@@ -485,7 +485,7 @@
       }
     }
   }
-  ul, ol {
+  ol, ul:not(.tabset-tabs) {
     > li {
       position: relative;
       > p {

package.json

@@ -55,7 +55,7 @@
     "body-parser": "1.19.0",
     "chalk": "4.0.0",
     "cheerio": "1.0.0-rc.3",
-    "chokidar": "3.3.1",
+    "chokidar": "3.4.0",
     "clean-css": "4.2.3",
     "compression": "1.7.4",
     "connect-session-knex": "1.6.0",
@@ -292,9 +292,9 @@
     "vue2-animate": "2.1.3",
     "vuedraggable": "2.23.2",
     "vuescroll": "4.15.0",
-    "vuetify": "2.2.24",
+    "vuetify": "2.2.25",
     "vuetify-loader": "1.4.3",
-    "vuex": "3.2.0",
+    "vuex": "3.3.0",
     "vuex-pathify": "1.4.1",
     "vuex-persistedstate": "3.0.1",
     "webpack": "4.43.0",

server/modules/rendering/html-security/renderer.js

@@ -37,8 +37,10 @@ module.exports = {
           summary: ['class', 'style'],
           svg: ['width', 'height', 'viewbox', 'preserveaspectratio', 'style'],
           table: ['border', 'class', 'id', 'style', 'width'],
+          tabset: [],
           tbody: ['class', 'style'],
           td: ['align', 'class', 'colspan', 'rowspan', 'style', 'valign'],
+          template: ['v-slot:tabs', 'v-slot:content'],
           th: ['align', 'class', 'colspan', 'rowspan', 'style', 'valign'],
           thead: ['class', 'style'],
           tr: ['class', 'rowspan', 'style', 'align', 'valign'],

server/modules/rendering/html-tabset/definition.yml

@@ -0,0 +1,8 @@
+key: htmlTabset
+title: Tabsets
+description: Transform headers into tabs
+author: requarks.io
+icon: mdi-tab
+enabledDefault: true
+dependsOn: htmlCore
+props: {}

server/modules/rendering/html-tabset/renderer.js

@@ -0,0 +1,28 @@
+const _ = require('lodash')
+
+module.exports = {
+  async init($, config) {
+    for (let i = 1; i < 6; i++) {
+      $(`h${i}.tabset`).each((idx, elm) => {
+        let content = `<tabset>`
+        let tabs = []
+        let tabContents = []
+        $(elm).nextUntil(_.times(i, t => `h${t + 1}`).join(', '), `h${i + 1}`).each((hidx, hd) => {
+          tabs.push(`<li @click="switchTab(${hidx})">${$(hd).html()}</li>`)
+          let tabContent = ''
+          $(hd).nextUntil(_.times(i + 1, t => `h${t + 1}`).join(', ')).each((cidx, celm) => {
+            tabContent += $.html(celm)
+            $(celm).remove()
+          })
+          console.info(tabContent)
+          tabContents.push(`<div class="tabset-panel">${tabContent}</div>`)
+          $(hd).remove()
+        })
+        content += `<template v-slot:tabs>${tabs.join('')}</template>`
+        content += `<template v-slot:content>${tabContents.join('')}</template>`
+        content += `</tabset>`
+        $(elm).replaceWith($(content))
+      })
+    }
+  }
+}

server/views/page.pug

@@ -25,6 +25,6 @@ block body
       nav-mode=config.nav.mode
       )
       template(slot='contents')
-        div(v-pre)!= page.render
+        div!= page.render
   if injectCode.body
     != injectCode.body

yarn.lock

@@ -4602,10 +4602,10 @@ cheerio@1.0.0-rc.3:
     lodash "^4.15.0"
     parse5 "^3.0.1"
 
-chokidar@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
-  integrity sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==
+chokidar@3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
+  integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==
   dependencies:
     anymatch "~3.1.1"
     braces "~3.0.2"
@@ -4613,7 +4613,7 @@ chokidar@3.3.1:
     is-binary-path "~2.1.0"
     is-glob "~4.0.1"
     normalize-path "~3.0.0"
-    readdirp "~3.3.0"
+    readdirp "~3.4.0"
   optionalDependencies:
     fsevents "~2.1.2"
 
@@ -11834,10 +11834,10 @@ picomatch@^2.0.5:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
   integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
 
-picomatch@^2.0.7:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.1.1.tgz#ecdfbea7704adb5fe6fb47f9866c4c0e15e905c5"
-  integrity sha512-OYMyqkKzK7blWO/+XZYP6w8hH0LDvkBvdvKukti+7kqYFCiEAk+gI3DWnryapc0Dau05ugGTy0foQ6mqn4AHYA==
+picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
@@ -13486,12 +13486,12 @@ readdirp@^3.1.1:
   dependencies:
     picomatch "^2.0.4"
 
-readdirp@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
-  integrity sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
   dependencies:
-    picomatch "^2.0.7"
+    picomatch "^2.2.1"
 
 realpath-native@^2.0.0:
   version "2.0.0"
@@ -16036,10 +16036,10 @@ vuetify-loader@1.4.3:
   dependencies:
     loader-utils "^1.2.0"
 
-vuetify@2.2.24:
-  version "2.2.24"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.2.24.tgz#2bd560a9a04f418b3fc4d5d5faccb707daadb612"
-  integrity sha512-CHgKR+DqrH6dPlJnqO7JEHgs2a/dMEheS1bYPN9pC4NXJLfFZdt1LTO9nRa86kgcVowxR0LIZnL5bfLfPH8kMQ==
+vuetify@2.2.25:
+  version "2.2.25"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.2.25.tgz#d2d57a52c3694a9982a49ec1a39e397b1a317294"
+  integrity sha512-sW//1OM2mH/tPmVm00fUKVZYOTooBh1/LSpOzIYCrHOZOL2JA3/3zM7zn7gyiJJzRTBklk5C+6YPI8lqz07d4g==
 
 vuex-pathify@1.4.1:
   version "1.4.1"
@@ -16056,10 +16056,10 @@ vuex-persistedstate@3.0.1:
     deepmerge "^4.2.2"
     shvl "^2.0.0"
 
-vuex@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.2.0.tgz#86da7f26c3e131ff374870580109145a640ee5a8"
-  integrity sha512-qBZGJJ1gUNWZbfZlH7ylIPwENg3R0Ckpq+qPexF065kOMOt1Ixt8WDJmtssVv7OhepWD0+Qie7pOS8f0oQy1JA==
+vuex@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.3.0.tgz#665b4630ea1347317139fcc5cb495aab3ec5e513"
+  integrity sha512-1MfcBt+YFd20DPwKe0ThhYm1UEXZya4gVKUvCy7AtS11YAOUR+9a6u4fsv1Rr6ePZCDNxW/M1zuIaswp6nNv8Q==
 
 w3c-hr-time@^1.0.1:
   version "1.0.1"