feat: content rendering improvements + save fix

client/themes/default/components/nav-footer.vue

@@ -0,0 +1,72 @@
+<template lang="pug">
+  v-footer.justify-center(:color='bgColor', inset)
+    .caption.grey--text.text--darken-1
+      span(v-if='company && company.length > 0') {{ $t('common:footer.copyright', { company: company, year: currentYear, interpolation: { escapeValue: false } }) }} |&nbsp;
+      span {{ $t('common:footer.poweredBy') }} #[a(href='https://wiki.js.org', ref='nofollow') Wiki.js]
+
+    v-snackbar(
+      :color='notification.style'
+      bottom
+      right
+      multi-line
+      v-model='notificationState'
+    )
+      .text-xs-left
+        v-icon.mr-3(dark) {{ notification.icon }}
+        span {{ notification.message }}
+</template>
+
+<script>
+import { get, sync } from 'vuex-pathify'
+
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'grey lighten-3'
+    },
+    darkColor: {
+      type: String,
+      default: 'grey darken-3'
+    }
+  },
+  data() {
+    return {
+      currentYear: (new Date()).getFullYear()
+    }
+  },
+  computed: {
+    company: get('site/company'),
+    notification: get('notification'),
+    darkMode: get('site/dark'),
+    notificationState: sync('notification@isActive'),
+    bgColor() {
+      if (!this.darkMode) {
+        return this.color
+      } else {
+        return this.darkColor
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .v-footer {
+    a {
+      text-decoration: none;
+    }
+
+    &.altbg {
+      background: mc('theme', 'primary');
+
+      span {
+        color: mc('blue', '300');
+      }
+
+      a {
+        color: mc('blue', '200');
+      }
+    }
+  }
+</style>

client/themes/default/components/nav-sidebar.vue

@@ -0,0 +1,35 @@
+<template lang="pug">
+  v-list(dense, :class='color', :dark='dark')
+    v-list-tile.pt-2(href='/')
+      v-list-tile-avatar: v-icon home
+      v-list-tile-title Home
+    v-divider.my-2
+    v-subheader.pl-4 Navigation
+    v-list-tile
+      v-list-tile-avatar: v-icon stars
+      v-list-tile-title The Universe
+    v-list-tile
+      v-list-tile-avatar: v-icon directions_boat
+      v-list-tile-title Ships
+    v-list-tile
+      v-list-tile-avatar: v-icon local_airport
+      v-list-tile-title Airports
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    dark: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>

client/themes/default/components/page.vue

@@ -47,7 +47,7 @@
               .caption.grey--text.text--darken-1 {{ updatedAt | moment('calendar') }}
             v-spacer
             v-tooltip(left)
-              v-btn(icon, slot='activator', :href='"/e/" + path')
+              v-btn.btn-animate-edit(icon, slot='activator', :href='"/e/" + path')
                 v-icon(color='grey') edit
               span Edit Page
           v-divider

client/themes/default/scss/app.scss

@@ -87,16 +87,28 @@
   }
 
   code {
-    background-color: transparent;
+    background-color: rgba(mc('pink', '500'), .1);
+    padding: 0 5px;
+    color: mc('pink', '800');
     font-family: 'Source Code Pro', monospace;
     font-weight: normal;
     font-size: 1rem;
+    box-shadow: none;
 
     &::before, &::after {
       display: none;
     }
   }
 
+  ol, ul {
+    padding: 1rem 24px 0 24px;
+    list-style-position: inside;
+
+    li + li {
+      margin-top: .5rem;
+    }
+  }
+
   .prismjs{
     border: none;
     border-radius: 5px;
@@ -106,6 +118,9 @@
     margin: 1rem 24px;
 
     > code {
+      background-color: transparent;
+      padding: 0;
+      color: #FFF;
       box-shadow: initial;
       display: block;
       font-size: .85rem;