Fix footer + Add Posts preview + fix header + about + blog + index page

build/color-mode/color-scheme.js

@@ -0,0 +1,25 @@
+export default {
+  name: 'ColorScheme',
+  functional: true,
+  props: {
+    placeholder: String,
+    tag: {
+      type: String,
+      default: 'span'
+    }
+  },
+  render (createElement, { parent, data, props, children }) {
+    const { $colorMode } = parent
+
+    if (!$colorMode.unknown) {
+      return children
+    }
+    // transform props for <client-only>
+    props = {
+      placeholder: props.placeholder,
+      placeholderTag: props.tag
+    }
+
+    return createElement('client-only', { ...data, props }, children)
+  }
+}

build/color-mode/plugin.client.js

@@ -0,0 +1,106 @@
+import Vue from 'vue'
+import colorSchemeComponent from './color-scheme'
+
+Vue.component('ColorScheme', colorSchemeComponent)
+
+const storageKey = 'nuxt-color-mode'
+const colorMode = window['__NUXT_COLOR_MODE__']
+const getForcedColorMode = route => route.matched[0] && route.matched[0].components.default.options.colorMode
+
+export default function (ctx, inject) {
+  let data = ctx.nuxtState.colorMode
+  // For SPA mode or fallback
+  if (!data) {
+    data = {
+      preference: colorMode.preference,
+      value: colorMode.value,
+      unknown: false
+    }
+    const pageColorMode = getForcedColorMode(ctx.route)
+    if (pageColorMode) {
+      data.value = pageColorMode
+      data.forced = true
+      colorMode.addClass(pageColorMode)
+    }
+  }
+  // Get current page component
+  const $colorMode = new Vue({
+    data,
+    watch: {
+      preference (preference) {
+        if (this.forced) {
+          return
+        }
+        if (preference === 'system') {
+          this.value = colorMode.getColorScheme()
+          this._watchMedia()
+        } else {
+          this.value = preference
+        }
+
+        this._storePreference(preference)
+      },
+      value (newValue, oldValue) {
+        colorMode.removeClass(oldValue)
+        colorMode.addClass(newValue)
+      }
+    },
+    created () {
+      if (this.preference === 'system') {
+        this._watchMedia()
+      }
+      if (window.localStorage) {
+        this._watchStorageChange()
+      }
+    },
+    methods: {
+      _watchMedia () {
+        if (this._darkWatcher || !window.matchMedia) {
+          return
+        }
+
+        this._darkWatcher = window.matchMedia('(prefers-color-scheme: dark)')
+        this._darkWatcher.addListener((e) => {
+          if (!this.forced && this.preference === 'system') {
+            this.value = colorMode.getColorScheme()
+          }
+        })
+      },
+      _watchStorageChange () {
+        window.addEventListener('storage', (e) => {
+          if (e.key === storageKey) {
+            this.preference = e.newValue
+          }
+        })
+      },
+      _storePreference (preference) {
+        // Local storage to sync with other tabs
+        window.localStorage.setItem(storageKey, preference)
+      }
+    }
+  })
+
+  window.onNuxtReady(() => {
+    if ($colorMode.unknown) {
+      $colorMode.preference = colorMode.preference
+      $colorMode.value = colorMode.value
+      $colorMode.unknown = false
+    }
+    ctx.app.router.beforeEach((route, from, next) => {
+      const forcedColorMode = getForcedColorMode(route)
+
+      if (forcedColorMode && forcedColorMode !== 'system') {
+        $colorMode.value = forcedColorMode
+        $colorMode.forced = true
+      } else {
+        if (forcedColorMode === 'system') {
+          console.warn('You cannot force the colorMode to system at the page level.')
+        }
+        $colorMode.forced = false
+        $colorMode.value = $colorMode.preference === 'system' ? colorMode.getColorScheme() : $colorMode.preference
+      }
+      next()
+    })
+  })
+  inject('colorMode', $colorMode)
+}

build/color-mode/plugin.server.js

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import colorSchemeComponent from './color-scheme'
+
+Vue.component('ColorScheme', colorSchemeComponent)
+
+export default function (ctx, inject) {
+  const preference = 'system'
+
+  const colorMode = {
+    preference,
+    value: preference,
+    unknown: true,
+    forced: false
+  }
+
+  if (ctx.route.matched[0]) {
+    const pageColorMode = ctx.route.matched[0].components.default.options.colorMode
+    if (pageColorMode && pageColorMode !== 'system') {
+      colorMode.value = pageColorMode
+      colorMode.forced = true
+
+      ctx.app.head.bodyAttrs = ctx.app.head.bodyAttrs || {}
+      ctx.app.head.bodyAttrs['data-color-mode-forced'] = pageColorMode
+    } else if (pageColorMode === 'system') {
+      console.warn('You cannot force the colorMode to system at the page level.')
+    }
+  }
+
+  ctx.beforeNuxtRender(({ nuxtState }) => {
+    nuxtState.colorMode = colorMode
+  })
+
+  inject('colorMode', colorMode)
+}