fix: legacy page view

client/components/admin/admin-extensions.vue

@@ -13,7 +13,7 @@
               v-alert.mb-4(outlined, color='error', icon='mdi-alert')
                 span New extensions cannot be installed at the moment. This feature is coming in a future release.
               v-expansion-panels.admin-extensions-exp(hover, popout)
-                v-expansion-panel(v-for='ext of extensions')
+                v-expansion-panel(v-for='ext of extensions', :key='`ext-` + ext.key')
                   v-expansion-panel-header(disable-icon-rotate)
                     span {{ext.title}}
                     template(v-slot:actions)
@@ -49,6 +49,7 @@ export default {
       config: {},
       extensions: [
         {
+          key: 'git',
           title: 'Git',
           description: 'Distributed version control system. Required for the Git storage module.',
           platforms: {
@@ -61,6 +62,7 @@ export default {
           installed: true
         },
         {
+          key: 'pandoc',
           title: 'Pandoc',
           description: 'Convert between markup formats. Required for converting from other formats such as MediaWiki, AsciiDoc, Textile and other wikis.',
           platforms: {
@@ -73,6 +75,7 @@ export default {
           installed: false
         },
         {
+          key: 'puppeteer',
           title: 'Puppeteer',
           description: 'Headless chromium browser for server-side rendering. Required for generating PDF versions of pages and render content elements on the server (e.g. Mermaid diagrams)',
           platforms: {
@@ -85,6 +88,7 @@ export default {
           installed: false
         },
         {
+          key: 'sharp',
           title: 'Sharp',
           description: 'Process and transform images. Required to generate thumbnails of uploaded images and perform transformations.',
           platforms: {

client/scss/legacy.scss

@@ -1,11 +1,39 @@
 @import "global";
 
 @import "./base/icons.scss";
+@import "./fonts/default.scss";
+@import '~katex/dist/katex.min.css';
+@import '~@mdi/font/css/materialdesignicons.css';
+
+.mdi {
+  font-family: 'Material Design Icons', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-flex;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
 
 html {
   box-sizing: border-box;
   background-color: mc('grey', '50');
-  font-size: 14px;
+  font-size: 15px;
 }
 *, *:before, *:after {
   box-sizing: inherit;
@@ -197,7 +225,7 @@ body {
   display: flex;
   align-items: stretch;
   min-height: calc(100vh - 64px);
-  height: 50vh;
+  height: 100%;
 
   &-container {
     flex-grow: 1;
@@ -205,10 +233,12 @@ body {
 }
 
 .sidebar {
-  width: 300px;
+  width: 256px;
   background-color: mc('blue', '700');
   color: #FFF;
   padding: 8px 0;
+  align-self: stretch;
+  flex-shrink: 0;
 
   .sidebar-link {
     height: 40px;
@@ -226,7 +256,7 @@ body {
     }
   }
 
-  i.material-icons {
+  i.mdi {
     width: 56px;
     padding-left: 8px;
   }
@@ -343,4 +373,5 @@ body {
 
 .contents {
   flex-grow: 1;
+  padding: 24px !important;
 }

server/controllers/common.js

@@ -416,12 +416,12 @@ router.get('/*', async (req, res, next) => {
           body: WIKI.config.theming.injectBody
         }
 
+        if (req.query.legacy || req.get('user-agent').indexOf('Trident') >= 0) {
           // -> Convert page TOC
-        if (!_.isString(page.toc)) {
+          if (_.isString(page.toc)) {
-          page.toc = JSON.stringify(page.toc)
+            page.toc = JSON.parse(page.toc)
           }
 
-        if (req.query.legacy || req.get('user-agent').indexOf('Trident') >= 0) {
           // -> Render legacy view
           res.render('legacy/page', {
             page,
@@ -430,6 +430,11 @@ router.get('/*', async (req, res, next) => {
             isAuthenticated: req.user && req.user.id !== 2
           })
         } else {
+          // -> Convert page TOC
+          if (!_.isString(page.toc)) {
+            page.toc = JSON.stringify(page.toc)
+          }
+
           // -> Inject comments variables
           if (WIKI.config.features.featurePageComments && WIKI.data.commentProvider.codeTemplate) {
             [

server/views/legacy/page.pug

@@ -14,21 +14,21 @@ block body
       span.header-login
         if !isAuthenticated
           a(href='/login', title='Login')
-            i.material-icons account_circle
+            i.mdi.mdi-account-circle
         else
           a(href='/logout', title='Logout')
-            i.material-icons logout
+            i.mdi.mdi-logout
     .main
       .sidebar
         each navItem in sidebar
-          if navItem.kind === 'link'
+          if navItem.k === 'link'
-            a.sidebar-link(href=navItem.target)
+            a.sidebar-link(href=navItem.t)
-              i.material-icons= navItem.icon
+              i.mdi(class=navItem.c)
-              span= navItem.label
+              span= navItem.l
-          else if navItem.kind === 'divider'
+          else if navItem.k === 'divider'
             .sidebar-divider
-          else if navItem.kind === 'header'
+          else if navItem.k === 'header'
-            .sidebar-title= navItem.label
+            .sidebar-title= navItem.l
       .main-container
         .page-header
           .page-header-left
@@ -38,21 +38,21 @@ block body
           //-   .page-header-right-title Last edited by
           //-   .page-header-right-author= page.authorName
           //-   .page-header-right-updated= page.updatedAt
-        .page-contents
+        .page-contents.v-content
           .contents
             div!= page.render
           if page.toc.length
             .toc
               .toc-title= t('page.toc')
               each tocItem, tocIdx in page.toc
-                a.toc-tile(href='#' + tocItem.anchor)
+                a.toc-tile(href=tocItem.anchor)
-                  i.material-icons arrow_right
+                  i.mdi.mdi-chevron-right
                   span= tocItem.title
                 if tocIdx < page.toc.length - 1 || tocItem.children.length
                   .toc-divider
                 each tocSubItem in tocItem.children
-                  a.toc-tile.inset(href='#' + tocSubItem.anchor)
+                  a.toc-tile.inset(href=tocSubItem.anchor)
-                    i.material-icons arrow_right
+                    i.mdi.mdi-chevron-right
                     span= tocSubItem.title
                   if tocIdx < page.toc.length - 1
                     .toc-divider.inset