feat: revert theme switcher to be client side

README.md

@@ -16,6 +16,8 @@ The contents are **my own personal thoughts and opinions**. Images and videos th
 - [rss](https://www.npmjs.com/package/rss) - utility to help create the RSS `.xml` file
 - [sitemap](https://www.npmjs.com/package/sitemap) - utility to help create the sitemap `.xml` file
 
+I'm also integrating with [Nuxt Studio](https://nuxt.studio/) to play a bit with **visual editing**, which comes pretty handy when editing/writing content from devices like the iPad Mini.
+
 ## Creating a new post
 
 With an NPM script:

app.vue

@@ -2,63 +2,72 @@
 import type { Ref } from "vue";
 import { SITE_TITLE, SITE_DESCRIPTION } from "@/utils/config";
 
-const route = useRoute()
-
 const themes: { [k: string]: string } = {
   dark: "sunset",
   light: "corporate",
 }
 
-const current: string = route.query.theme as string;
+const current: Ref<string> = ref("light");
+
+const theme: Ref<string> = ref(themes[current.value] || themes.light);
 
-const theme: Ref<string> = ref(themes[current] || themes.light);
+const changeTheme = () => {
+  current.value = current.value === "dark" ? "light" : "dark";
+  theme.value = themes[current.value] || themes.light;
+  // updateHead()
+  updateDocument(current.value);
+}
 
-const updateHead = () => {
-  const htmlAttrs = {
+const updateDocument = (update: string) => {
+  if (document) {
+    document.documentElement.setAttribute("data-theme", theme.value);
+    document.documentElement.className = update;
+  }
+}
+
+
+useHead({
+  title: SITE_TITLE,
+  meta: [
+    { name: "title", content: SITE_TITLE },
+    { name: "description", content: SITE_DESCRIPTION },
+  ],
+  // script: [
+  //   {
+  //     src: "https://platform.twitter.com/widgets.js",
+  //     crossorigin: "anonymous",
+  //     defer: true,
+  //     async: true,
+  //   },
+  // ],
+  link: [
+    { rel: "alternate", type: "application/rss+xml", href: "/rss.xml" },
+    { rel: "icon", type: "image/png", href: "/static/favicons/favicon.ico" },
+    {
+      rel: "icon",
+      type: "image/png",
+      sizes: "16x16",
+      href: "/static/favicons/favicon-16x16.png",
+    },
+    {
+      rel: "icon",
+      type: "image/png",
+      sizes: "32x32",
+      href: "/static/favicons/favicon-32x32.png",
+    },
+  ],
+  htmlAttrs: {
     lang: "it-IT",
     "data-theme": theme.value,
-    class: theme.value === themes.dark ? "dark" : "light",
-  };
-
-  return useHead({
-    title: SITE_TITLE,
-    meta: [
-      { name: "title", content: SITE_TITLE },
-      { name: "description", content: SITE_DESCRIPTION },
-    ],
-    // script: [
-    //   {
-    //     src: "https://platform.twitter.com/widgets.js",
-    //     crossorigin: "anonymous",
-    //     defer: true,
-    //     async: true,
-    //   },
-    // ],
-    link: [
-      { rel: "alternate", type: "application/rss+xml", href: "/rss.xml" },
-      { rel: "icon", type: "image/png", href: "/static/favicons/favicon.ico" },
-      {
-        rel: "icon",
-        type: "image/png",
-        sizes: "16x16",
-        href: "/static/favicons/favicon-16x16.png",
-      },
-      {
-        rel: "icon",
-        type: "image/png",
-        sizes: "32x32",
-        href: "/static/favicons/favicon-32x32.png",
-      },
-    ],
-    htmlAttrs,
-  });
-};
+    class: document && document.documentElement.classList.contains("dark") ? "dark" : "light",
+  }
+});
 
-updateHead();
+//updateDocument(current.value);
 </script>
 
 <template>
-  <Header :dark="current === 'dark'" />
+  <Header :dark="current === 'dark'" @change-theme="changeTheme" />
   <main>
     <Container>
       <NuxtPage />

components/Header.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { SITE_TITLE } from "@/utils/config";
 
+defineEmits(['changeTheme'])
+
 const nav: Array<{
   name: string,
   href: string
@@ -18,8 +20,6 @@ const nav: Array<{
 const { dark } = defineProps<{ dark: boolean }>();
 const route = useRoute();
 
-const toggleTheme = (dark: boolean) => dark ? route.path : `${route.path}?theme=dark`;
-
 const isActive = (href: string, route: any) => ["navitem", { "router-link-active": href === route.path }];
 </script>
 
@@ -33,7 +33,7 @@ const isActive = (href: string, route: any) => ["navitem", { "router-link-active
       <nav>
         <NuxtLink v-for="(item, index) in nav" :key="index" :class="isActive(item.href, route)" :href="item.href">{{
           item.name }}</NuxtLink>
-        <a class="navitem" aria-label="theme switcher" :href="toggleTheme(dark)" id="theme">
+        <a class="navitem" aria-label="theme switcher" href="#" id="theme" @click="$emit('changeTheme')">
           <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor">
             <path v-if="dark" class="sun" fill-rule="evenodd"
               d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"

components/PostPreview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
+import type { ParsedContent } from "@nuxt/content";
 
 defineProps<{
   post: ParsedContent;

nuxt.config.ts

@@ -3,7 +3,7 @@ export default defineNuxtConfig({
   app: {
     pageTransition: { name: "page", mode: "out-in" },
   },
-  modules: ["@nuxt/content", "@nuxthq/studio"],
+  modules: ["@nuxt/content", "@nuxthq/studio", "@nuxt/image"],
   experimental: {
     componentIslands: true,
   },
@@ -18,4 +18,4 @@ export default defineNuxtConfig({
       remarkPlugins: ["remark-reading-time"],
     },
   },
-});
+});