From e0265ba2705ba5a2d8e5da745c9b93fbf27b7b5f Mon Sep 17 00:00:00 2001
From: Altrius <tom.b.2k2@gmail.com>
Date: Tue, 5 Sep 2023 00:27:36 +0100
Subject: [PATCH] the theme system works, but the only way to configure it is
 through browser storage

---
 app.vue                                   |  6 ++-
 components/CoreUI/CustomBadge.vue         | 12 ++++-
 components/Header.vue                     | 58 +++++++++++++++++++----
 components/VideoContainer.vue             | 10 ++--
 components/VideoFeed.vue                  | 24 ++++++----
 public/2018_Linus_Tech_Tips_logo_grey.svg |  2 +-
 tailwind.config.js                        |  3 +-
 7 files changed, 87 insertions(+), 28 deletions(-)

diff --git a/app.vue b/app.vue
index 83ea766..b0315d7 100644
--- a/app.vue
+++ b/app.vue
@@ -1,11 +1,15 @@
 <template>
-  <div class="bg-zinc-900 text-zinc-200">
+  <div :class="`bg-${cfg ? cfg.theme.greyscale : 'zinc'}-900 text-${cfg ? cfg.theme.greyscale : 'zinc'}-200`">
     <Header />
     <NuxtPage />
     <Footer />
   </div>
 </template>
 
+<script setup>
+const cfg = useState('uconf')
+</script>
+
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 
diff --git a/components/CoreUI/CustomBadge.vue b/components/CoreUI/CustomBadge.vue
index a848035..08d0927 100644
--- a/components/CoreUI/CustomBadge.vue
+++ b/components/CoreUI/CustomBadge.vue
@@ -7,9 +7,17 @@
 </template>
 
 <script setup>
+const cfg = useState('uconf')
 const props = defineProps(['id', 'class', 'innerclass', 'label', 'color', 'text'])
-const base = ref(props.color ? props.color : 'poppy')
-const textBase = ref(props.text ? props.text : 'poppy')
+const base = ref(props.color ? props.color : (cfg.value ? cfg.value.theme.primary : 'poppy'))
+const textBase = ref(props.text ? props.text : (cfg.value ? cfg.value.theme.primary : 'poppy'))
+
+useAsyncData(() => {
+  base.value = props.color ? props.color : (cfg.value ? cfg.value.theme.primary : 'poppy')
+  textBase.value = props.text ? props.text : (cfg.value ? cfg.value.theme.primary : 'poppy')
+}, {
+  watch: [cfg, props]
+})
 
 const i = props.class ? props.class : ''
 const o = props.innerclass ? props.innerclass : ''
diff --git a/components/Header.vue b/components/Header.vue
index 518bd06..b671dc6 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -9,6 +9,32 @@ const route = useRoute()
 const profile = useState('uprofile', () => undefined)
 const history = useState('history', () => new Map())
 const banners = useState('banners', () => [])
+const cfg = useState('uconf', () => {
+  return {
+    theme: {
+      name: 'poppy',
+      primary: 'poppy',
+      greyscale: 'zinc'
+    }
+  }
+})
+
+onMounted(() => {
+  function getConfig () {
+    const raw = window.localStorage.getItem('cfgix')
+    if (raw) {
+      cfg.value = JSON.parse(raw)
+    } else {
+      window.localStorage.setItem('cfgix', JSON.stringify(cfg.value))
+    }
+  }
+
+  try {
+    getConfig()
+  } catch (e) {
+    console.error(e)
+  }
+})
 
 useAsyncData(async () => {
   const bannerReq = await (await fetch('/api/v1/banners')).json()
@@ -133,6 +159,13 @@ await useAsyncData(() => {
           click: () => {
             window.open('https://ko-fi.com/altrius', '_blank')
           }
+        },
+        {
+          label: 'Join Our Discord',
+          icon: 'i-mdi-discord',
+          click: () => {
+            window.open('https://discord.gg/sVQm5f35VF', '_blank')
+          }
         }
       ]
     ]
@@ -164,6 +197,13 @@ await useAsyncData(() => {
           click: () => {
             window.open('https://ko-fi.com/altrius', '_blank')
           }
+        },
+        {
+          label: 'Join Our Discord',
+          icon: 'i-mdi-discord',
+          click: () => {
+            window.open('https://discord.gg/sVQm5f35VF', '_blank')
+          }
         }
       ]
     ]
@@ -228,7 +268,7 @@ function openVideo (id) {
 
 </script>
 <template>
-  <div class="shadow-sm shadow-black bg-zinc-800 w-100 flex-col">
+  <div :class="`shadow-sm shadow-black bg-${cfg.theme.greyscale}-800 w-100 flex-col`">
     <template v-for="(banner, index) in banners" :key="index">
       <Banner v-if="banner.show" :pid="banner.pid" :fixed="banner.fixed" :bg="banner.bg" :fg="banner.fg">
         <p>
@@ -242,13 +282,13 @@ function openVideo (id) {
     <div class="flex w-100">
       <a
         href="/"
-        class="uppercase pt-1 pb-1 pl-5 pr-5 text-zinc-100 hover:text-primary-500 hover:bg-zinc-600 transition-all drop-shadow-xl"
+        :class="`uppercase pt-1 pb-1 pl-5 pr-5 text-${cfg.theme.greyscale}-100 hover:text-${cfg.theme.primary}-500 hover:bg-${cfg.theme.greyscale}-600 transition-all drop-shadow-xl`"
       >
         <img class="w-32" src="https://cdn.thewandb.com/assets/WANDB_darkBackground.svg">
       </a>
       <a
         href="/"
-        class="uppercase pt-1 pb-1 pl-5 pr-5 text-zinc-100 hover:text-primary-500 hover:bg-zinc-600 transition-all drop-shadow-xl"
+        :class="`uppercase pt-1 pb-1 pl-5 pr-5 text-${cfg.theme.greyscale}-100 hover:text-${cfg.theme.primary}-500 hover:bg-${cfg.theme.greyscale}-600 transition-all drop-shadow-xl`"
       >
         <h3 class="py-3 text-l transition-all">
           Video Feed
@@ -256,7 +296,7 @@ function openVideo (id) {
       </a>
       <!-- <a
         href="/contributors"
-        class="uppercase pt-2 pb-2 pl-5 pr-5 text-slate-100 hover:text-primary-500 hover:bg-zinc-600 transition-all drop-shadow-xl"
+        :class="`uppercase pt-1 pb-1 pl-5 pr-5 text-${cfg.theme.greyscale}-100 hover:text-${cfg.theme.primary}-500 hover:bg-${cfg.theme.greyscale}-600 transition-all drop-shadow-xl`"
       >
         <h3 class="hover:font-bold py-3 text-l transition-all">
           Contributors
@@ -264,7 +304,7 @@ function openVideo (id) {
       </a> -->
       <a
         href="/cast"
-        class="uppercase mr-auto pt-1 pb-1 pl-5 pr-5 text-zinc-100 hover:text-primary-500 hover:bg-zinc-600 transition-all drop-shadow-xl"
+        :class="`uppercase pt-1 pb-1 pl-5 pr-5 mr-auto text-${cfg.theme.greyscale}-100 hover:text-${cfg.theme.primary}-500 hover:bg-${cfg.theme.greyscale}-600 transition-all drop-shadow-xl`"
       >
         <h3 class="h-fit py-3 text-center text-l transition-all">
           Cast
@@ -273,8 +313,10 @@ function openVideo (id) {
 
       <template v-if="profile">
         <UDropdown :items="items">
-          <UButton color="none" trailing-icon="i-heroicons-chevron-down-20-solid">
-            <UAvatar :src="profile.avatar_url" alt="Avatar" /> {{ profile.username }}
+          <UButton :class="`rounded-none hover:bg-${cfg.theme.greyscale}-600 text-${cfg.theme.greyscale}-100`" color="none" trailing-icon="i-heroicons-chevron-down-20-solid">
+            <UAvatar :src="profile.avatar_url" alt="Avatar" /> <p :class="`text-${cfg.theme.greyscale}-100`">
+              {{ profile.username }}
+            </p>
             <template #item="{ item }">
               <template v-if="item">
                 <UIcon v-if="item.icon" :name="item.icon" class="w-4 h-4" />
@@ -303,7 +345,7 @@ function openVideo (id) {
         <UInput
           v-model="query"
           variant="outline"
-          color="white"
+          :color="cfg.theme.greyscale"
           icon="i-heroicons-magnifying-glass-20-solid"
           size="sm"
           placeholder="Search..."
diff --git a/components/VideoContainer.vue b/components/VideoContainer.vue
index c108677..95f61f9 100644
--- a/components/VideoContainer.vue
+++ b/components/VideoContainer.vue
@@ -2,7 +2,7 @@
 import style from './Video.module.css'
 
 const sb = useSupabaseClient()
-
+const cfg = useState('uconf')
 const csm = useState('csm')
 const issueURI = ref('https://github.com/TheWANDatabase/Website/issues/new')
 const props = defineProps({
@@ -109,9 +109,9 @@ const { pending } = useAsyncData(async () => {
         </template>
       </UCard>
     </USlideover>
-    <NuxtLink class="shadow-sm shadow-black w-fit overflow-hidden min-h-16 m-1 bg-zinc-700 text-primary-500 rounded-lg pt-2 hover:bg-primary-700 hover:text-primary-100 transition-all font-semibold" :href="`/videos/${data.id}`">
-      <div class="w-80 m-2 h-72">
-        <img class="w-max mx-auto rounded-md my-0" style="width: 300px; height: auto; object-fit: cover;" :src="data.thumbnail">
+    <NuxtLink :class="`shadow-sm shadow-black w-fit overflow-hidden min-h-16 m-1 bg-${cfg.theme.greyscale}-800 text-${cfg.theme.primary}-400 rounded-lg pt-2 hover:bg-${cfg.theme.primary}-700 hover:text-${cfg.theme.primary}-100 transition-all font-semibold`" :href="`/videos/${data.id}`">
+      <div class="w-80 m-2 h-80">
+        <img class="w-max mx-auto rounded-md -mt-2 mb-1" style="object-fit: cover;" :src="data.thumbnail">
         <h1 class="text-xl mx-2 h-16 my-0">
           {{ data.title }}
         </h1>
@@ -121,7 +121,7 @@ const { pending } = useAsyncData(async () => {
           </UTooltip>
 
           <UTooltip v-if="data.cast.length > 0" text="Click to open the preview panel">
-            <UButton label="Open" variant="ghost" @click.prevent="popoverOpen = true">
+            <UButton :color="cfg.theme.primary" label="Open" variant="ghost" @click.prevent="popoverOpen = true">
               <UAvatarGroup class="mr-auto ml-0" size="md" :max="data.cast.length > 3 ? 2 : 3">
                 <template v-for="(c, i) in data.cast" :key="i">
                   <UAvatar class="object-cover" :src="c.mug" :alt="c.label" />
diff --git a/components/VideoFeed.vue b/components/VideoFeed.vue
index 9914bb5..f28a877 100644
--- a/components/VideoFeed.vue
+++ b/components/VideoFeed.vue
@@ -8,6 +8,7 @@ const episodeCount = ref(0)
 const cst = useState('cst', () => [])
 const csm = useState('csm', () => new Map())
 const config = useRuntimeConfig()
+const cfg = useState('uconf')
 const xsm = ref([])
 const loading = ref(false)
 const orderOptions = ref([
@@ -153,40 +154,41 @@ infinite()
 
 <template>
   <div class="flex-col">
-    <div class="shadow-sm shadow-black z-10 flex-col mt-3 mx-auto mb-2 bg-zinc-800 rounded justify-evenly max-w-fit sticky top-1" style="top: 0.25rem;">
+    <div :class="`shadow-sm shadow-black z-10 flex-col mt-3 mx-auto mb-2 bg-${cfg.theme.greyscale}-800 rounded justify-evenly max-w-fit sticky top-1`" style="top: 0.25rem;">
       <div class="flex p-2">
         <div class="w-42 flex-col my-auto mr-4 justify-evenly">
           <span class="flex w-56 justify-between my-1">
-            <p class="text-slate-400 h-5 inline align-middle">Enable infinity scrolling</p>
+            <p :class="`text-${cfg.theme.greyscale}-400 h-5 inline align-middle`">Enable infinity scrolling</p>
             <UTooltip text="Enable Infinity Scroll">
-              <UToggle v-model="allowInfinite" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" />
+              <UToggle v-model="allowInfinite" :color="cfg.theme.primary" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" :ui="{inactive: `bg-${cfg.theme.greyscale}-200 dark:bg-${cfg.theme.greyscale}-700`}" />
             </UTooltip>
           </span>
           <span class="flex w-56 justify-between my-1">
-            <p class="text-slate-400 h-5 inline align-middle">Hide Content Warnings</p>
+            <p :class="`text-${cfg.theme.greyscale}-400 h-5 inline align-middle`">Hide Content Warnings</p>
             <UTooltip text="Hide videos with content warnings">
-              <UToggle v-model="filters.hideCW" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" />
+              <UToggle v-model="filters.hideCW" :color="cfg.theme.primary" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" :ui="{inactive: `bg-${cfg.theme.greyscale}-200 dark:bg-${cfg.theme.greyscale}-700`}" />
             </UTooltip>
           </span>
           <span class="flex w-56 justify-between my-1">
-            <p class="text-slate-400 h-5 inline align-middle">Hide Corrupted Content</p>
+            <p :class="`text-${cfg.theme.greyscale}-400 h-5 inline align-middle`">Hide Corrupted Content</p>
             <UTooltip text="Hide corrupted videos">
-              <UToggle v-model="filters.hideCorrupt" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" />
+              <UToggle v-model="filters.hideCorrupt" :color="cfg.theme.primary" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" :ui="{inactive: `bg-${cfg.theme.greyscale}-200 dark:bg-${cfg.theme.greyscale}-700`}" />
             </UTooltip>
           </span>
         </div>
         <div class="flex-col mb-auto mt-0">
           <div class="flex max-w-fit mt-3 mx-auto mb-2 p-2 justify-evenly">
             <UTooltip text="Only show videos after this date">
-              <UInput v-model="filters.startDate" type="date" />
+              <UInput v-model="filters.startDate" :color="cfg.theme.primary" type="date" />
             </UTooltip>
             <div class="mx-5" />
             <UTooltip text="Only show videos before this date">
-              <UInput v-model="filters.endDate" type="date" />
+              <UInput v-model="filters.endDate" :color="cfg.theme.primary" type="date" />
             </UTooltip>
             <div class="mx-5" />
             <USelectMenu
               v-model="filters.order"
+              :color="cfg.theme.primary"
               :options="orderOptions"
             >
               <template #label>
@@ -205,6 +207,7 @@ infinite()
               placeholder="Select Cast Members"
               searchable
               class="w-72 min-w-fit"
+              :color="cfg.theme.primary"
               :ui="{
                 width: 'w-72'
               }"
@@ -226,6 +229,7 @@ infinite()
               :loading="loading"
               icon="i-heroicons-magnifying-glass-20-solid"
               variant="soft"
+              :color="cfg.theme.primary"
               @click="filter"
             />
           </div>
@@ -246,7 +250,7 @@ infinite()
     </div>
     <div class="flex align-middle mx-auto w-fit my-5">
       <InfiniteLoading v-if="fd.length > 19 && allowInfinite" @infinite="infinite" />
-      <UButton v-else-if="fd.length > 19 && !allowInfinite" :loading="loading" label="Load More" @click="infinite" />
+      <UButton v-else-if="fd.length > 19 && !allowInfinite" :loading="loading" :color="cfg.theme.primary" label="Load More" @click="infinite" />
     </div>
   </div>
 </template>
diff --git a/public/2018_Linus_Tech_Tips_logo_grey.svg b/public/2018_Linus_Tech_Tips_logo_grey.svg
index 5c17bdf..b6260ca 100644
--- a/public/2018_Linus_Tech_Tips_logo_grey.svg
+++ b/public/2018_Linus_Tech_Tips_logo_grey.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
-  <path fill="#3a3a3a"
+  <path fill="#ffffff"
     d="M356.81 146.42c-2.953-15.584-7.877-30.478-14.58-44.37-7.088-14.694-16.152-28.252-26.785-40.404-12.103-13.835-26.251-25.834-42.02-35.45C246.174 9.582 214.185 0 180 0c-24.834 0-48.508 5.056-70.05 14.191-17.081 7.242-32.79 17.085-46.7 28.973C24.582 76.205 0 125.272 0 180s24.583 103.8 63.25 136.83c6.88 5.88 14.194 11.254 21.908 16.058 27.561 17.158 60.056 27.107 94.843 27.107 24.835 0 48.51-5.056 70.051-14.192 17.08-7.243 32.79-17.085 46.7-28.973 38.667-33.04 63.25-82.106 63.25-136.83 0-11.478-1.126-22.694-3.19-33.58zM63.25 294.35C34.373 264.872 16.548 224.527 16.548 180S34.373 95.13 63.25 65.65v228.7zm186.8-113.24v146.6c-21.234 10.09-44.98 15.751-70.051 15.751-26.456 0-51.422-6.324-73.531-17.484l131.91-42.861v-49.103l-128.43 41.73V32.302c21.233-10.088 44.978-15.75 70.05-15.75 25.803 0 50.197 6 71.897 16.647l-130.27 42.33v49.103l35.023-11.382v135.04l46.7-15.178V98.081l93.4-30.346 1.51-.49c11.245 11.79 20.748 25.246 28.09 40l-111.32 36.166v49.105zm46.7 113.24V165.93l44.188-14.356c1.62 9.237 2.514 18.724 2.514 28.424 0 44.526-17.825 84.871-46.702 114.35z" />
 </svg>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index e9554af..ba0947d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -86,7 +86,8 @@ module.exports = {
   },
   safelist: [
     {
-      pattern: /(bg|text|border|shadow)-(scorch|golden|poppy)+/
+      pattern: /(bg|text|border|shadow)-(scorch|golden|poppy|slate|gray|zinc|neutral|stone|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)+/,
+      variants: ['hover']
     }
   ]
 }