From eafb640077dc3123b3ab2243e6b05b282daff1da Mon Sep 17 00:00:00 2001
From: moebiusmania <moebiusmania@gmail.com>
Date: Fri, 16 Aug 2024 10:51:16 +0200
Subject: [PATCH] feat: revert theme switcher to be client side

---
 README.md                  |  2 +
 app.vue                    | 97 +++++++++++++++++++++-----------------
 components/Header.vue      |  6 +--
 components/PostPreview.vue |  2 +-
 middleware/theme.global.ts | 15 ------
 nuxt.config.ts             |  4 +-
 6 files changed, 61 insertions(+), 65 deletions(-)
 delete mode 100644 middleware/theme.global.ts

diff --git a/README.md b/README.md
index 69ee43a14..031beb03c 100644
--- a/README.md
+++ b/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:
diff --git a/app.vue b/app.vue
index 0d675f4c0..f3da2b4e5 100644
--- a/app.vue
+++ b/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 />
diff --git a/components/Header.vue b/components/Header.vue
index b34625735..f2f92e329 100644
--- a/components/Header.vue
+++ b/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"
diff --git a/components/PostPreview.vue b/components/PostPreview.vue
index 3f0ba9507..3525c003d 100644
--- a/components/PostPreview.vue
+++ b/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;
diff --git a/middleware/theme.global.ts b/middleware/theme.global.ts
deleted file mode 100644
index 0bf1dedd4..000000000
--- a/middleware/theme.global.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export default defineNuxtRouteMiddleware((to, from) => {
-  const conditions = [
-    Object.keys(from.query).length,
-    !Object.keys(to.query).length,
-    from.path !== to.path,
-  ];
-  if (conditions.every((condition) => condition)) {
-    return navigateTo({
-      path: to.path,
-      hash: to.hash,
-      params: to.params,
-      query: from.query,
-    });
-  }
-});
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e27b1953f..00ce9e42a 100644
--- a/nuxt.config.ts
+++ b/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"],
     },
   },
-});
+});
\ No newline at end of file