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

+<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

+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

+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