requarks · TimoKruth · Apr 4, 2022 · Jun 5, 2022 · Jun 5, 2022 · Aug 1, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,7 +8,7 @@
     "vue"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "i18n-ally.localesPaths": [
     "server/locales"

diff --git a/client/components/admin/admin-theme.vue b/client/components/admin/admin-theme.vue
@@ -51,7 +51,6 @@
                     persistent-hint
                     :hint='$t(`admin:theme.darkModeHint`)'
                     )
-
               v-card.mt-3.animated.fadeInUp.wait-p1s
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title.subtitle-1 {{$t(`admin:theme.options`)}}
@@ -65,32 +64,16 @@
                     persistent-hint
                     hint='Select whether the table of contents is shown on the left, right or not at all.'
                     )
+                  v-range-slider(
+                    prepend-icon='mdi-menu-open'
+                    label='Heading Levels in ToC'
+                    v-model='tocRange'
+                    :min='1'
+                    :max='6'
+                    :tick-labels='["H1", "H2", "H3", "H4", "H5", "H6"]'
+                    hint='Select which levels of the toc are displayed.'
+                  )
             v-flex(lg6 xs12)
-              //- v-card.animated.fadeInUp.wait-p2s
-              //-   v-toolbar(color='teal', dark, dense, flat)
-              //-     v-toolbar-title.subtitle-1 {{$t('admin:theme.downloadThemes')}}
-              //-     v-spacer
-              //-     v-chip(label, color='white', small).teal--text coming soon
-              //-   v-data-table(
-              //-     :headers='headers',
-              //-     :items='themes',
-              //-     hide-default-footer,
-              //-     item-key='value',
-              //-     :items-per-page='1000'
-              //-   )
-              //-     template(v-slot:item='thm')
-              //-       td
-              //-         strong {{thm.item.text}}
-              //-       td
-              //-         span {{ thm.item.author }}
-              //-       td.text-xs-center
-              //-         v-progress-circular(v-if='thm.item.isDownloading', indeterminate, color='blue', size='20', :width='2')
-              //-         v-btn(v-else-if='thm.item.isInstalled && thm.item.installDate < thm.item.updatedAt', icon)
-              //-           v-icon.blue--text mdi-cached
-              //-         v-btn(v-else-if='thm.item.isInstalled', icon)
-              //-           v-icon.green--text mdi-check-bold
-              //-         v-btn(v-else, icon)
-              //-           v-icon.grey--text mdi-cloud-download
 
               v-card.animated.fadeInUp.wait-p2s
                 v-toolbar(color='primary', dark, dense, flat)
@@ -150,6 +133,10 @@ export default {
       config: {
         theme: 'default',
         darkMode: false,
+        tocDepth: {
+          min: 1,
+          max: 2
+        },
         iconset: '',
         tocPosition: 'left',
         injectCSS: '',
@@ -160,6 +147,18 @@ export default {
     }
   },
   computed: {
+    tocRange: {
+      get() {
+        var range = [this.config.tocDepth.min, this.config.tocDepth.max]
+        return range
+      },
+      set(value) {
+        this.config.tocDepth = {
+          min: parseInt(value[0]),
+          max: parseInt(value[1])
+        }
+      }
+    },
     darkMode: sync('site/dark'),
     headers() {
       return [
@@ -213,6 +212,7 @@ export default {
             theme: this.config.theme,
             iconset: this.config.iconset,
             darkMode: this.darkMode,
+            tocDepth: this.config.tocDepth,
             tocPosition: this.config.tocPosition,
             injectCSS: this.config.injectCSS,
             injectHead: this.config.injectHead,

diff --git a/client/components/editor.vue b/client/components/editor.vue
@@ -145,6 +145,10 @@ export default {
       type: Number,
       default: 0
     },
+    tocOptions: {
+      type: String,
+      default: ''
+    },
     checkoutDate: {
       type: String,
       default: new Date().toISOString()
@@ -172,7 +176,9 @@ export default {
         tags: '',
         title: '',
         css: '',
-        js: ''
+        js: '',
+        tocDepth: 0,
+        useDefaultTocDepth: false
       }
     }
   },
@@ -191,6 +197,8 @@ export default {
         this.path !== this.$store.get('page/path'),
         this.savedState.title !== this.$store.get('page/title'),
         this.savedState.description !== this.$store.get('page/description'),
+        this.savedState.tocDepth !== this.$store.get('page/tocDepth@min') + (this.$store.get('page/tocDepth@max') * 10),
+        this.savedState.useDefaultTocDepth !== this.$store.get('page/useDefaultTocDepth'),
         this.savedState.tags !== this.$store.get('page/tags'),
         this.savedState.isPublished !== this.$store.get('page/isPublished'),
         this.savedState.publishStartDate !== this.$store.get('page/publishStartDate'),
@@ -224,9 +232,15 @@ export default {
     this.$store.set('page/title', this.title)
     this.$store.set('page/scriptCss', this.scriptCss)
     this.$store.set('page/scriptJs', this.scriptJs)
-
     this.$store.set('page/mode', 'edit')
 
+    const tocOptions = JSON.parse(Buffer.from(this.tocOptions, 'base64').toString())
+    this.$store.set('page/tocDepth', {
+      min: tocOptions.min,
+      max: tocOptions.max
+    })
+    this.$store.set('page/useDefaultTocDepth', tocOptions.useDefault)
+
     this.setCurrentSavedState()
 
     this.checkoutDateActive = this.checkoutDate
@@ -304,6 +318,8 @@ export default {
                 $publishStartDate: Date
                 $scriptCss: String
                 $scriptJs: String
+                $tocDepth: RangeInput
+                $useDefaultTocDepth: Boolean
                 $tags: [String]!
                 $title: String!
               ) {
@@ -320,6 +336,8 @@ export default {
                     publishStartDate: $publishStartDate
                     scriptCss: $scriptCss
                     scriptJs: $scriptJs
+                    tocDepth: $tocDepth
+                    useDefaultTocDepth: $useDefaultTocDepth
                     tags: $tags
                     title: $title
                   ) {
@@ -349,6 +367,8 @@ export default {
               publishStartDate: this.$store.get('page/publishStartDate') || '',
               scriptCss: this.$store.get('page/scriptCss'),
               scriptJs: this.$store.get('page/scriptJs'),
+              tocDepth: this.$store.get('page/tocDepth'),
+              useDefaultTocDepth: this.$store.get('page/useDefaultTocDepth'),
               tags: this.$store.get('page/tags'),
               title: this.$store.get('page/title')
             }
@@ -392,7 +412,6 @@ export default {
             this.$root.$emit('saveConflict')
             throw new Error(this.$t('editor:conflict.warning'))
           }
-
           let resp = await this.$apollo.mutate({
             mutation: gql`
               mutation (
@@ -408,6 +427,8 @@ export default {
                 $publishStartDate: Date
                 $scriptCss: String
                 $scriptJs: String
+                $tocDepth: RangeInput
+                $useDefaultTocDepth: Boolean
                 $tags: [String]
                 $title: String
               ) {
@@ -425,6 +446,8 @@ export default {
                     publishStartDate: $publishStartDate
                     scriptCss: $scriptCss
                     scriptJs: $scriptJs
+                    tocDepth: $tocDepth
+                    useDefaultTocDepth: $useDefaultTocDepth
                     tags: $tags
                     title: $title
                   ) {
@@ -454,6 +477,8 @@ export default {
               publishStartDate: this.$store.get('page/publishStartDate') || '',
               scriptCss: this.$store.get('page/scriptCss'),
               scriptJs: this.$store.get('page/scriptJs'),
+              tocDepth: this.$store.get('page/tocDepth'),
+              useDefaultTocDepth: this.$store.get('page/useDefaultTocDepth'),
               tags: this.$store.get('page/tags'),
               title: this.$store.get('page/title')
             }
@@ -536,7 +561,9 @@ export default {
         tags: this.$store.get('page/tags'),
         title: this.$store.get('page/title'),
         css: this.$store.get('page/scriptCss'),
-        js: this.$store.get('page/scriptJs')
+        js: this.$store.get('page/scriptJs'),
+        tocDepth: this.$store.get('page/tocDepth@min') + (this.$store.get('page/tocDepth@max') * 10),
+        useDefaultTocDepth: this.$store.get('page/useDefaultTocDepth')
       }
     },
     injectCustomCss: _.debounce(css => {

diff --git a/client/components/editor/editor-modal-properties.vue b/client/components/editor/editor-modal-properties.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-  v-dialog(
+v-dialog(
     v-model='isShown'
     persistent
     width='1000'
@@ -19,9 +19,9 @@
     v-card(tile)
       v-tabs(color='white', background-color='blue darken-1', dark, centered, v-model='currentTab')
         v-tab {{$t('editor:props.info')}}
+        v-tab {{$t('editor:props.toc')}}
         v-tab {{$t('editor:props.scheduling')}}
         v-tab(:disabled='!hasScriptPermission') {{$t('editor:props.scripts')}}
-        v-tab(disabled) {{$t('editor:props.social')}}
         v-tab(:disabled='!hasStylePermission') {{$t('editor:props.styles')}}
         v-tab-item(transition='fade-transition', reverse-transition='fade-transition')
           v-card-text.pt-5
@@ -90,6 +90,24 @@
               hide-no-data
               :search-input.sync='newTagSearch'
               )
+        v-tab-item(transition='fade-transition', reverse-transition='fade-transition')
+          v-card-text
+            .overline.pb-5 {{$t('editor:props.tocTitle')}}
+            v-switch(
+              :label='$t(`editor:props.tocUseDefault`)'
+              v-model='useDefaultTocDepth'
+            )
+            v-range-slider(
+              :disabled='useDefaultTocDepth'
+              prepend-icon='mdi-menu-open'
+              :label='$t(`editor:props.tocHeadingLevels`)'
+              v-model='tocDepth'
+              :min='1'
+              :max='6'
+              :tick-labels='["H1", "H2", "H3", "H4", "H5", "H6"]'
+              )
+            .text-caption.pl-8.grey--text {{$t('editor:props.tocHeadingLevelsHint')}}
+
         v-tab-item(transition='fade-transition', reverse-transition='fade-transition')
           v-card-text
             .overline {{$t('editor:props.publishState')}}
@@ -196,43 +214,6 @@
           .editor-props-codeeditor-hint
             .caption {{$t('editor:props.htmlHint')}}
 
-        v-tab-item(transition='fade-transition', reverse-transition='fade-transition')
-          v-card-text
-            .overline {{$t('editor:props.socialFeatures')}}
-            v-switch(
-              :label='$t(`editor:props.allowComments`)'
-              v-model='isPublished'
-              color='primary'
-              :hint='$t(`editor:props.allowCommentsHint`)'
-              persistent-hint
-              inset
-              )
-            v-switch(
-              :label='$t(`editor:props.allowRatings`)'
-              v-model='isPublished'
-              color='primary'
-              :hint='$t(`editor:props.allowRatingsHint`)'
-              persistent-hint
-              disabled
-              inset
-              )
-            v-switch(
-              :label='$t(`editor:props.displayAuthor`)'
-              v-model='isPublished'
-              color='primary'
-              :hint='$t(`editor:props.displayAuthorHint`)'
-              persistent-hint
-              inset
-              )
-            v-switch(
-              :label='$t(`editor:props.displaySharingBar`)'
-              v-model='isPublished'
-              color='primary'
-              :hint='$t(`editor:props.displaySharingBarHint`)'
-              persistent-hint
-              inset
-              )
-
         v-tab-item(:transition='false', :reverse-transition='false')
           .editor-props-codeeditor-title
             .overline {{$t('editor:props.css')}}
@@ -255,6 +236,7 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js'
 import 'codemirror/mode/css/css.js'
 
 /* global siteLangs, siteConfig */
+// eslint-disable-next-line no-useless-escape
 const filenamePattern = /^(?![\#\/\.\$\^\=\*\;\:\&\?\(\)\[\]\{\}\"\'\>\<\,\@\!\%\`\~\s])(?!.*[\#\/\.\$\^\=\*\;\:\&\?\(\)\[\]\{\}\"\'\>\<\,\@\!\%\`\~\s]$)[^\#\.\$\^\=\*\;\:\&\?\(\)\[\]\{\}\"\'\>\<\,\@\!\%\`\~\s]*$/
 
 export default {
@@ -276,10 +258,10 @@ export default {
       currentTab: 0,
       cm: null,
       rules: {
-          required: value => !!value || 'This field is required.',
-          path: value => {
-            return filenamePattern.test(value) || 'Invalid path. Please ensure it does not contain special characters, or begin/end in a slash or hashtag string.'
-          }
+        required: value => !!value || 'This field is required.',
+        path: value => {
+          return filenamePattern.test(value) || 'Invalid path. Please ensure it does not contain special characters, or begin/end in a slash or hashtag string.'
+        }
       }
     }
   },
@@ -297,6 +279,19 @@ export default {
     isPublished: sync('page/isPublished'),
     publishStartDate: sync('page/publishStartDate'),
     publishEndDate: sync('page/publishEndDate'),
+    tocDepth: {
+      get() {
+        const tocDepth = this.$store.get('page/tocDepth')
+        return [tocDepth.min, tocDepth.max]
+      },
+      set(value) {
+        this.$store.set('page/tocDepth', {
+          min: parseInt(value[0]),
+          max: parseInt(value[1])
+        })
+      }
+    },
+    useDefaultTocDepth: sync('page/useDefaultTocDepth'),
     scriptJs: sync('page/scriptJs'),
     scriptCss: sync('page/scriptCss'),
     hasScriptPermission: get('page/[email protected]'),
@@ -328,7 +323,7 @@ export default {
       if (this.cm) {
         this.cm.toTextArea()
       }
-      if (newValue === 2) {
+      if (newValue === 3) {
         this.$nextTick(() => {
           setTimeout(() => {
             this.loadEditor(this.$refs.codejs, 'html')

diff --git a/client/graph/admin/theme/theme-mutation-save.gql b/client/graph/admin/theme/theme-mutation-save.gql
@@ -1,6 +1,6 @@
-mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $tocPosition: String, $injectCSS: String, $injectHead: String, $injectBody: String) {
+mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $tocPosition: String, $tocDepth: RangeInput!, $injectCSS: String, $injectHead: String, $injectBody: String) {
   theming {
-    setConfig(theme: $theme, iconset: $iconset, darkMode: $darkMode, tocPosition: $tocPosition, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
+    setConfig(theme: $theme, iconset: $iconset, darkMode: $darkMode, tocPosition: $tocPosition, tocDepth: $tocDepth, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
       responseResult {
         succeeded
         errorCode

diff --git a/client/graph/admin/theme/theme-query-config.gql b/client/graph/admin/theme/theme-query-config.gql
@@ -4,6 +4,10 @@ query {
       theme
       iconset
       darkMode
+      tocDepth {
+        min
+        max
+      }
       tocPosition
       injectCSS
       injectHead

diff --git a/client/store/page.js b/client/store/page.js
@@ -17,6 +17,11 @@ const state = {
   editor: '',
   mode: '',
   scriptJs: '',
+  tocDepth: {
+    min: 1,
+    max: 2
+  },
+  useDefaultTocDepth: true,
   scriptCss: '',
   effectivePermissions: {
     comments: {