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

build/App.js

@@ -8,8 +8,9 @@ import NuxtBuildIndicator from './components/nuxt-build-indicator'
 import '..\\src\\assets\\css\\tailwind.css'
 
 import _6f6c098b from '..\\src\\templates\\layouts\\default.vue'
+import _1a3aec5f from '..\\src\\templates\\layouts\\dev.vue'
 
-const layouts = { "_default": sanitizeComponent(_6f6c098b) }
+const layouts = { "_default": sanitizeComponent(_6f6c098b),"_dev": sanitizeComponent(_1a3aec5f) }
 
 export default {
   render (h, props) {

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

build/components/index.js

@@ -1,9 +1,9 @@
 export { default as Footer } from '../..\\src\\components\\Footer.vue'
-export { default as GoToTop } from '../..\\src\\components\\GoToTop.vue'
 export { default as Header } from '../..\\src\\components\\Header.vue'
-export { default as LangSwitcher } from '../..\\src\\components\\LangSwitcher.vue'
+export { default as HomePost } from '../..\\src\\components\\HomePost.vue'
+export { default as Post } from '../..\\src\\components\\Post.vue'
 
 export const LazyFooter = import('../..\\src\\components\\Footer.vue' /* webpackChunkName: "components_Footer" */).then(c => c.default || c)
-export const LazyGoToTop = import('../..\\src\\components\\GoToTop.vue' /* webpackChunkName: "components_GoToTop" */).then(c => c.default || c)
 export const LazyHeader = import('../..\\src\\components\\Header.vue' /* webpackChunkName: "components_Header" */).then(c => c.default || c)
-export const LazyLangSwitcher = import('../..\\src\\components\\LangSwitcher.vue' /* webpackChunkName: "components_LangSwitcher" */).then(c => c.default || c)
+export const LazyHomePost = import('../..\\src\\components\\HomePost.vue' /* webpackChunkName: "components_HomePost" */).then(c => c.default || c)
+export const LazyPost = import('../..\\src\\components\\Post.vue' /* webpackChunkName: "components_Post" */).then(c => c.default || c)

build/index.js

@@ -14,6 +14,8 @@ import { setContext, getLocation, getRouteData, normalizeError } from './utils'
 
 import nuxt_plugin_plugin_030ac950 from 'nuxt_plugin_plugin_030ac950' // Source: .\\components\\plugin.js (mode: 'all')
 import nuxt_plugin_axios_63fe537b from 'nuxt_plugin_axios_63fe537b' // Source: .\\axios.js (mode: 'all')
+import nuxt_plugin_pluginserver_7dcd890e from 'nuxt_plugin_pluginserver_7dcd890e' // Source: .\\color-mode\\plugin.server.js (mode: 'server')
+import nuxt_plugin_pluginclient_18141786 from 'nuxt_plugin_pluginclient_18141786' // Source: .\\color-mode\\plugin.client.js (mode: 'client')
 
 // Component: <ClientOnly>
 Vue.component(ClientOnly.name, ClientOnly)
@@ -59,7 +61,7 @@ async function createApp(ssrContext, config = {}) {
   // here we inject the router and store to all child components,
   // making them available everywhere as `this.$router` and `this.$store`.
   const app = {
-    head: {"title":"artsite","meta":[{"charset":"utf-8"},{"name":"viewport","content":"width=device-width, initial-scale=1"},{"hid":"description","name":"description","content":""}],"link":[{"rel":"icon","type":"image\u002Fx-icon","href":"\u002Ffavicon.ico"}],"style":[],"script":[]},
+    head: {"title":"artsite","meta":[{"charset":"utf-8"},{"name":"viewport","content":"width=device-width, initial-scale=1"},{"hid":"description","name":"description","content":""}],"link":[{"rel":"icon","type":"image\u002Fx-icon","href":"\u002Ffavicon.ico"}],"style":[],"script":[{"hid":"nuxt-color-mode-script","innerHTML":"!function (){\"use strict\";var e=window,s=document,o=s.documentElement,a=[\"dark\",\"light\"],t=window.localStorage.getItem(\"nuxt-color-mode\")||\"system\",c=\"system\"===t?l():t,i=s.body.getAttribute(\"data-color-mode-forced\");function r(e){var s=\"\"+e+\"-mode\";o.classList?o.classList.add(s):o.className+=\" \"+s}function n(s){return e.matchMedia(\"(prefers-color-scheme\"+s+\")\")}function l(){if(e.matchMedia&&\"not all\"!==n(\"\").media)for(var s of a)if(n(\":\"+s).matches)return s;return\"dark\"}i&&(c=i),r(c),e[\"__NUXT_COLOR_MODE__\"]={preference:t,value:c,getColorScheme:l,addClass:r,removeClass:function(e){var s=\"\"+e+\"-mode\";o.classList?o.classList.remove(s):o.className=o.className.replace(new RegExp(s,\"g\"),\"\")}}}();\n","pbody":true}],"__dangerouslyDisableSanitizersByTagID":{"nuxt-color-mode-script":["innerHTML"]}},
 
     router,
     nuxt: {
@@ -181,6 +183,14 @@ async function createApp(ssrContext, config = {}) {
     await nuxt_plugin_axios_63fe537b(app.context, inject)
   }
 
+  if (process.server && typeof nuxt_plugin_pluginserver_7dcd890e === 'function') {
+    await nuxt_plugin_pluginserver_7dcd890e(app.context, inject)
+  }
+
+  if (process.client && typeof nuxt_plugin_pluginclient_18141786 === 'function') {
+    await nuxt_plugin_pluginclient_18141786(app.context, inject)
+  }
+
   // Lock enablePreview in context
   if (process.static && process.client) {
     app.context.enablePreview = function () {

build/router.js

@@ -4,6 +4,8 @@ import { interopDefault } from './utils'
 import scrollBehavior from './router.scrollBehavior.js'
 
 const _3829e6ee = () => interopDefault(import('..\\src\\templates\\pages\\about.vue' /* webpackChunkName: "templates/pages/about" */))
+const _35b3d65e = () => interopDefault(import('..\\src\\templates\\pages\\blog.vue' /* webpackChunkName: "templates/pages/blog" */))
+const _12f401b6 = () => interopDefault(import('..\\src\\templates\\pages\\dev.vue' /* webpackChunkName: "templates/pages/dev" */))
 const _57e1c1b3 = () => interopDefault(import('..\\src\\templates\\pages\\index.vue' /* webpackChunkName: "templates/pages/index" */))
 
 // TODO: remove in Nuxt 3
@@ -26,6 +28,14 @@ export const routerOptions = {
     path: "/about",
     component: _3829e6ee,
     name: "about"
+  }, {
+    path: "/blog",
+    component: _35b3d65e,
+    name: "blog"
+  }, {
+    path: "/dev",
+    component: _12f401b6,
+    name: "dev"
   }, {
     path: "/",
     component: _57e1c1b3,

build/routes.json

@@ -6,6 +6,20 @@
     "chunkName": "templates/pages/about",
     "_name": "_3829e6ee"
   },
+  {
+    "name": "blog",
+    "path": "/blog",
+    "component": "C:\\\\Users\\\\arthu\\\\Documents\\\\Workspace\\\\artsite\\\\src\\\\templates\\\\pages\\\\blog.vue",
+    "chunkName": "templates/pages/blog",
+    "_name": "_35b3d65e"
+  },
+  {
+    "name": "dev",
+    "path": "/dev",
+    "component": "C:\\\\Users\\\\arthu\\\\Documents\\\\Workspace\\\\artsite\\\\src\\\\templates\\\\pages\\\\dev.vue",
+    "chunkName": "templates/pages/dev",
+    "_name": "_12f401b6"
+  },
   {
     "name": "index",
     "path": "/",

build/vetur/tags.json

@@ -5,22 +5,22 @@
   "LazyFooter": {
     "description": "Auto imported from components/Footer.vue"
   },
-  "GoToTop": {
-    "description": "Auto imported from components/GoToTop.vue"
-  },
-  "LazyGoToTop": {
-    "description": "Auto imported from components/GoToTop.vue"
-  },
   "Header": {
     "description": "Auto imported from components/Header.vue"
   },
   "LazyHeader": {
     "description": "Auto imported from components/Header.vue"
   },
-  "LangSwitcher": {
-    "description": "Auto imported from components/LangSwitcher.vue"
+  "HomePost": {
+    "description": "Auto imported from components/HomePost.vue"
   },
-  "LazyLangSwitcher": {
-    "description": "Auto imported from components/LangSwitcher.vue"
+  "LazyHomePost": {
+    "description": "Auto imported from components/HomePost.vue"
+  },
+  "Post": {
+    "description": "Auto imported from components/Post.vue"
+  },
+  "LazyPost": {
+    "description": "Auto imported from components/Post.vue"
   }
 }