feat: new theme (#196)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Barbapapazes

app.config.ts

@@ -1,100 +1,60 @@
 export default defineAppConfig({
   ui: {
     primary: 'yellow',
-    gray: 'zinc',
-    divider: {
-      border: {
-        base: 'flex border-zinc-200 dark:border-zinc-800',
-      },
-    },
-    badge: {
+    gray: 'cool',
+    button: {
+      base: 'transition ease-in',
       color: {
         gray: {
-          solid: 'ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 text-zinc-700 dark:text-zinc-200 bg-zinc-50 dark:bg-zinc-800',
+          solid: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
         },
       },
     },
-    button: {
+    select: {
       base: 'transition ease-in',
       color: {
-        white: {
-          solid: 'shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 text-zinc-900 dark:text-white bg-white hover:bg-zinc-50 disabled:bg-white dark:bg-zinc-900 dark:hover:bg-zinc-800/50 dark:disabled:bg-zinc-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-        },
-        gray: {
-          solid: 'shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 text-zinc-700 dark:text-zinc-200 bg-zinc-50 hover:bg-zinc-100 disabled:bg-zinc-50 dark:bg-zinc-800 dark:hover:bg-zinc-700/50 dark:disabled:bg-zinc-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-          ghost: 'text-zinc-700 dark:text-zinc-200 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-        },
+        gray: { outline: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50' },
       },
     },
     buttonGroup: {
       shadow: 'shadow-none',
     },
-    tooltip: {
-      background: 'bg-white dark:bg-zinc-900',
-      color: 'text-zinc-900 dark:text-white',
-      ring: 'ring-1 ring-zinc-200 dark:ring-zinc-800',
-    },
-    kbd: {
-      base: 'inline-flex items-center justify-center text-zinc-900 dark:text-white',
-      background: 'bg-zinc-100 dark:bg-zinc-800',
-      ring: 'ring-1 ring-zinc-300 dark:ring-zinc-700 ring-inset',
-    },
     card: {
       base: 'transition ease-in duration-150',
-      background: 'bg-white dark:bg-zinc-900',
-      divide: 'divide-y divide-zinc-200 dark:divide-zinc-800',
-      ring: 'ring-1 ring-zinc-200 dark:ring-zinc-700',
+
     },
     input: {
+      base: 'transition ease-in',
       color: {
-        white: {
-          outline: 'shadow-none bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400',
-        },
-        placeholder: 'placeholder-zinc-400 dark:placeholder-zinc-500',
-      },
-    },
-    select: {
-      placeholder: 'text-zinc-900 dark:text-white',
-      color: {
-        white: {
-          outline: 'shadow-none bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400',
+        gray: {
+          outline: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
         },
       },
     },
     selectMenu: {
-      background: 'bg-white dark:bg-zinc-800',
-      ring: 'ring-1 ring-zinc-200 dark:ring-zinc-700',
       option: {
         base: 'cursor-pointer',
-        color: 'text-zinc-900 dark:text-white',
-        active: 'bg-zinc-100 dark:bg-zinc-900',
       },
     },
-    avatar: {
-      background: 'bg-zinc-100 dark:bg-zinc-800',
-      rounded: 'rounded-full',
-      text: 'font-medium leading-none text-zinc-900 dark:text-white truncate',
-      placeholder: 'font-medium leading-none text-zinc-500 dark:text-zinc-400 truncate',
-    },
-    popover: {
-      background: 'bg-white dark:bg-zinc-900',
-      ring: 'ring-1 ring-zinc-200 dark:ring-zinc-800',
-    },
   },
   website: {
     search: {
       groups: [
+        /**
+         * End / is very important since we use startsWith
+         * Without, page /blog will be in the wrong group
+         */
         {
           name: 'Articles',
-          path: '/resources',
+          path: '/resources/',
         },
         {
           name: 'Blog',
-          path: '/blog',
+          path: '/blog/',
         },
         {
           name: 'Packages',
-          path: '/packages',
+          path: '/packages/',
         },
       ],
     },
@@ -181,7 +141,6 @@ export default defineAppConfig({
             },
           ],
         },
-        {},
       ],
     },
     socials: {

app.vue

@@ -1,15 +1,38 @@
 <script lang="ts" setup>
+import { joinURL } from 'ufo'
+
+const site = useSiteConfig()
+
+useHead({
+  titleTemplate: title => title ? `${title} ${site.separator} ${site.name}` : `${site.name}: Unleash JavaScript\'s Potential`,
+  htmlAttrs: {
+    lang: site.defaultLocale,
+    dir: 'ltr',
+    class: 'scroll-smooth',
+  },
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'theme-color', content: '#ECDC5A' },
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.svg' },
+  ],
+})
+
 useSeoMeta({
-  ogImage: 'https://unjs.io/og/home.jpg',
+  ogSiteName: site.name,
+  ogImage: joinURL(site.url, '/og/home.jpg'),
   ogImageWidth: 1440,
   ogImageHeight: 810,
+  ogType: 'website',
+  twitterCard: 'summary_large_image',
   twitterSite: '@unjsio',
-  twitterImage: 'https://unjs.io/og/home.jpg',
+  twitterImage: joinURL(site.url, '/og/home.jpg'),
 })
 </script>
 
 <template>
-  <Html lang="en" dir="ltr" class="scroll-smooth">
+  <Html>
     <Head>
       <SchemaOrgOrganization
         logo="/favicon.svg"
@@ -20,12 +43,19 @@ useSeoMeta({
       />
       <SchemaOrgWebSite :potential-action="[defineSearchAction({ target: '/search?q={search_term_string}' })]" />
       <RobotMeta />
-      <Link rel="icon" href="/favicon.svg" />
     </Head>
-    <Body class="container mx-auto xl:max-w-7xl px-4 py-4 md:py-8 bg-primary font-sans">
+    <Body class="font-sans dark:bg-gray-900">
+      <NuxtLoadingIndicator color="#ECDC5A" />
+
       <AppHeader />
-      <NuxtPage />
+
+      <div class="px-4 container mx-auto xl:max-w-7xl">
+        <NuxtPage />
+      </div>
+
       <AppFooter />
+
+      <UNotifications />
     </Body>
   </Html>
 </template>

assets/app.css

@@ -1,47 +1,26 @@
-@font-face {
-  font-family: "Nunito";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  src: url("/assets/fonts/nunito.ttf") format("truetype");
-}
-
 ::-webkit-scrollbar {
   width: 0.6em;
   height: 0.6em;
-  background: transparent;
+  @apply bg-transparent;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: transparent
-}
-
-:is(.gray-scrollbar, pre)::-webkit-scrollbar-track {
- @apply bg-zinc-100 rounded-full
+  @apply bg-gray-100;
 }
 
 ::-webkit-scrollbar-thumb {
- @apply rounded-md bg-white
-}
-
-:is(.gray-scrollbar, pre)::-webkit-scrollbar-thumb {
- @apply bg-zinc-400/20
+  border-radius: 0.6em;
+  @apply bg-gray-300 hover:bg-gray-400;
 }
 
-::-webkit-scrollbar-thumb:hover {
- @apply bg-zinc-100
-}
-
-:is(.gray-scrollbar, pre)::-webkit-scrollbar-thumb:hover {
- @apply bg-zinc-500/20
-}
-
-::-webkit-scrollbar-thumb:active {
- @apply bg-zinc-200
-}
+.dark {
+  & ::-webkit-scrollbar-track {
+    @apply bg-gray-800;
+  }
 
-:is(.gray-scrollbar, pre)::-webkit-scrollbar-thumb:active {
- @apply bg-zinc-600/20
+  & ::-webkit-scrollbar-thumb {
+    @apply bg-gray-700 hover:bg-gray-600;
+  }
 }
 
 :is(h1, h2, h3, h4, h5, h6) {

components/Main.vue

@@ -0,0 +1,9 @@
+<template>
+  <main class="min-h-[calc(100vh-4rem)] py-8 md:py-16">
+    <div v-if="$slots.header" class="mb-8 lg:mb-16">
+      <slot name="header" />
+    </div>
+
+    <slot />
+  </main>
+</template>

components/app/AppColorModeImage.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  dark: string
+  light: string
+}>()
+</script>
+
+<template>
+  <img :src="light" class="dark:hidden" v-bind="$attrs">
+  <img :src="dark" class="hidden dark:block" v-bind="$attrs">
+</template>

components/app/AppFooter.vue

@@ -1,40 +1,57 @@
 <script lang="ts" setup>
 const website = useWebsite()
 
-const uiButton = { color: { gray: { ghost: 'hover:bg-primary/10 dark:hover:bg-primary/90' } } }
+const colorMode = useColorMode()
+const toggleTheme = function () {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+}
+
+const uiButton = { color: { gray: { ghost: 'text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-primary/60 dark:hover:bg-primary/40' } } }
 </script>
 
 <template>
-  <footer class="px-6 pt-20 pb-20 md:pb-30 flex flex-col gap-12 md:gap-20 rounded-2xl border border-zinc-100 bg-white">
-    <div class="flex flex-col md:flex-row gap-12 md:gap-25">
-      <div class="grow flex flex-col gap-6">
-        <NuxtLink to="/" class="block">
-          <AppLogo />
-        </NuxtLink>
-        <p class="max-w-lg text-sm md:text-base text-zinc-600 italic">
-          {{ website.footer.quote }}
-        </p>
-        <ul class="flex gap-8">
+  <div class="border-t border-gray-100 dark:border-gray-800">
+    <footer class="container mx-auto max-w-7xl px-4 md:px-6 pt-20 pb-20 md:pb-30 flex flex-col gap-12 md:gap-20">
+      <div class="grid md:grid-cols-2 gap-y-6 gap-x-12 md:gap-x-25">
+        <div class="grow flex flex-col gap-6 max-w-sm">
+          <NuxtLink to="/" class="block">
+            <AppLogo />
+          </NuxtLink>
+          <p class="max-w-lg text-sm md:text-base text-gray-500 dark:text-gray-400 italic">
+            {{ website.footer.quote }}
+          </p>
+        </div>
+        <ul class="flex gap-2">
           <li v-for="social in website.socials" :key="social.name">
             <UButton :rel="social.rel" :target="social.target" :to="social.url" :icon="social.icon" :aria-label="`Follow us on ${social.name}`" size="xl" variant="ghost" color="gray" :ui="{ icon: { xl: 'md:w-7 md:h-7' }, ...uiButton }" />
           </li>
         </ul>
-      </div>
-      <nav class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-10 text-[1.125rem]">
-        <div v-for="list in website.footer.menu" :key="list.title" class="flex flex-col gap-4">
-          <p class="font-bold">
-            {{ list.title }}
-          </p>
-          <ul class="flex flex-col gap-3">
-            <li v-for="item in list.items" :key="item.url">
-              <NuxtLink :to="item.url" :rel="item.rel" :target="item.target" class="hover:underline underline-offset-8">
-                {{ item.title }}
-              </NuxtLink>
-            </li>
-          </ul>
+        <nav class="mt-6 md:mt-0 md:justify-self-end md:col-start-2 md:row-start-1 grid grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-6 md:gap-10 text-[1.125rem]">
+          <div v-for="list in website.footer.menu" :key="list.title" class="flex flex-col gap-4">
+            <p class="font-bold text-gray-950 dark:text-gray-50">
+              {{ list.title }}
+            </p>
+            <ul class="flex flex-col gap-3 text-gray-500 dark:text-gray-400">
+              <li v-for="item in list.items" :key="item.url">
+                <NuxtLink :to="item.url" :rel="item.rel" :target="item.target" class="hover:underline underline-offset-8">
+                  {{ item.title }}
+                </NuxtLink>
+              </li>
+            </ul>
+          </div>
+        </nav>
+
+        <div class="place-self-center md:place-self-end">
+          <ClientOnly>
+            <UTooltip :text="$colorMode.value === 'dark' ? 'Light Mode' : 'Dark Mode'">
+              <UButton size="xl" variant="ghost" color="gray" square :trailing-icon="$colorMode.value === 'dark' ? 'i-heroicons-sun' : 'i-heroicons-moon'" :ui="uiButton" aria-label="Toggle Theme" @click="toggleTheme">
+                {{ $colorMode.value === 'dark' ? 'Light' : 'Dark' }}
+              </UButton>
+            </UTooltip>
+          </ClientOnly>
         </div>
-      </nav>
-    </div>
-    <AppFooterLicense class="text-sm text-zinc-400 text-center" />
-  </footer>
+      </div>
+      <AppFooterLicense class="text-sm dark:text-gray-400 text-center" />
+    </footer>
+  </div>
 </template>