feat: Change logo based on selected theme (light, dark) & update site configuration structure

Author: rikp777

app/app.config.ts

@@ -1,7 +1,13 @@
 // app/app.config.ts
 export default defineAppConfig({
-  siteName: 'NuxtCommerce',
-  siteDescription: 'NuxtCommerce is a dynamic e-commerce solution developed with Nuxt 3 and GraphQL, tailored for WooCommerce.',
+    site: {
+        name: 'NuxtCommerce',
+        description: 'NuxtCommerce is a dynamic e-commerce solution developed with Nuxt 3 and GraphQL, tailored for WooCommerce.',
+        logo: {
+            light: 'logo-light.svg',
+            dark: 'logo-dark.svg',
+        }
+    },
   ui: {
     primary: 'red',
     gray: 'neutral',

app/app.vue

@@ -1,25 +1,25 @@
 <!--app/app.vue-->
 <script setup lang="ts">
-const { siteName, siteDescription } = useAppConfig();
+const { name, description } = useAppConfig().site;
 
 useHead({
   htmlAttrs: {
     lang: 'en',
   },
-  titleTemplate: titleChunk => (titleChunk ? `${titleChunk} - ${siteName}` : siteName),
+  titleTemplate: titleChunk => (titleChunk ? `${titleChunk} - ${name}` : name),
 });
 
 useSeoMeta({
-  description: siteDescription,
+  description: description,
   ogType: 'website',
   ogImage: 'https://commerce.nuxt.dev/social-card.jpg',
-  ogSiteName: siteName,
+  ogSiteName: name,
   ogLocale: 'en_US',
   twitterCard: 'summary_large_image',
   twitterSite: '@zhatlen',
   twitterCreator: '@zhatlen',
   twitterImage: 'https://commerce.nuxt.dev/social-card.jpg',
-  keywords: `${siteName}, ecommerce, nuxt, woocommerce`,
+  keywords: `${name}, ecommerce, nuxt, woocommerce`,
   viewport: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover',
 });
 </script>

app/components/AppHeader.vue

@@ -1,6 +1,9 @@
 <script setup>
 const router = useRouter();
 const route = useRoute();
+const colorMode = useColorMode()
+const { light, dark } = useAppConfig().site.logo
+
 const searchQuery = ref((route.query.q || '').toString());
 const searchResults = ref([]);
 const isLoading = ref(false);
@@ -28,6 +31,11 @@ async function fetch() {
 
 onMounted(fetch);
 
+const logoUrl = computed(() => {
+  const logo = colorMode.value === 'dark' ? light : dark
+  return "/" + logo.replace(/^\/+/g, '')
+})
+
 const throttledFetch = useDebounceFn(async () => {
   await fetch();
 }, 300);
@@ -56,14 +64,18 @@ onClickOutside(onClickOutsideRef, event => {
   <div class="flex w-full flex-row items-center px-3 lg:px-5 h-[72px] lg:h-20 z-40 fixed bg-white/85 dark:bg-black/85 backdrop-blur-sm dark:backdrop-blur-lg">
     <div class="flex flex-row w-full flex-nowrap items-center gap-2">
       <NuxtLink
-        aria-label="Home"
-        class="flex items-center justify-center min-w-[52px] min-h-[52px] max-lg:min-w-12 max-lg:min-h-12 hover:bg-black/5 hover:dark:bg-white/15 max-lg:dark:bg-white/15 max-lg:bg-black/5 max-lg:hover:bg-black/10 max-lg:hover:dark:bg-white/20 rounded-2xl max-lg:rounded-full transition active:scale-95"
-        :to="localePath('/')">
-        <svg viewBox="0 0 30.72 30.72" class="rounded-lg max-lg:rounded-full bg-[#b31015] w-8 h-8">
-          <path
-            d="M -1e-4,1e-4 H 15.3296 C 14.7944,0.0047 14.2692,0.1464 13.8054,0.4117 13.334,0.6813 12.9429,1.0691 12.6707,1.536 L -1e-4,23.2893 Z m 15.3807,0 h 15.3392 v 5.1132 c -0.4077,-0.1874 -0.8524,-0.2855 -1.304,-0.2855 -0.5439,0 -1.0786,0.142 -1.5494,0.4116 -0.4711,0.2696 -0.8623,0.6577 -1.1341,1.1245 L 23.7908,11.4167 18.0395,1.536 C 17.7674,1.0691 17.376,0.6813 16.9048,0.4117 16.4411,0.1464 15.9158,0.0047 15.3806,1e-4 Z M 30.7198,13.6563 V 25.8989 H 26.6036 L 23.791,30.7198 H 11.8305 c 4.2401,-0.0117 7.3693,-1.8658 9.5244,-5.4729 l 5.2487,-9.0088 2.8114,-4.8214 z M 11.6157,25.8941 4.1115,25.8924 15.3602,6.5839 l 5.6126,9.6542 -3.7579,6.4525 c -1.4357,2.348 -3.0668,3.2035 -5.5992,3.2035 z"
-            fill="#ed3237" />
-        </svg>
+          aria-label="Home"
+          class="flex items-center justify-center min-w-[52px] min-h-[52px] max-lg:min-w-12 max-lg:min-h-12 hover:bg-black/5 hover:dark:bg-white/15 max-lg:dark:bg-white/15 max-lg:bg-black/5 max-lg:hover:bg-black/10 max-lg:hover:dark:bg-white/20 rounded-2xl max-lg:rounded-full transition active:scale-95 group"
+          :to="localePath('/')">
+          <div class="transform-gpu duration-200 ease-in-out group-hover:scale-[130%]">
+            <img
+                class="rounded-lg max-lg:rounded-full bg-[#b31015] w-8 h-8"
+                :src="logoUrl"
+                alt="Logo"
+                loading="lazy"
+                title="logo"
+            />
+          </div>
       </NuxtLink>
       <NuxtLink
         aria-label="Categories"

app/gql/queries/getProduct.ts

@@ -19,7 +19,7 @@ export const getProductQuery = gql`
             sourceUrl(size: LARGE)
           }
         }
-        allPaColor {
+        allPaStyle {
           nodes {
             name
           }
@@ -37,7 +37,7 @@ export const getProductQuery = gql`
                 image {
                   sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
                 }
-                allPaColor {
+                allPaStyle {
                   nodes {
                     name
                   }

app/pages/categories.vue

@@ -1,6 +1,6 @@
 <!--app/pages/categories.vue-->
 <script setup>
-const { siteName } = useAppConfig();
+const { name } = useAppConfig().site;
 const url = useRequestURL();
 const localePath = useLocalePath();
 
@@ -10,13 +10,13 @@ const canonical = url.origin + url.pathname;
 useSeoMeta({
   title: 'Categories',
   ogTitle: 'Categories',
-  description: `Browse product categories on ${siteName}.`,
-  ogDescription: `Browse product categories on ${siteName}.`,
+  description: `Browse product categories on ${name}.`,
+  ogDescription: `Browse product categories on ${name}.`,
   ogUrl: canonical,
   canonical,
-  keywords: `categories, ${siteName}`,
+  keywords: `categories, ${name}`,
   twitterTitle: 'Categories',
-  twitterDescription: `Browse product categories on ${siteName}.`,
+  twitterDescription: `Browse product categories on ${name}.`,
   ogImage: 'https://commerce.nuxt.dev/social-card.jpg',
   twitterImage: 'https://commerce.nuxt.dev/social-card.jpg',
 });

app/pages/favorites.vue

@@ -1,7 +1,7 @@
 <!--app/pages/favorites.vue-->
 <script setup>
 const { removeFromList, wishlist } = useWishlist();
-const { siteName } = useAppConfig();
+const { name } = useAppConfig().site;
 const url = useRequestURL();
 const localePath = useLocalePath();
 
@@ -10,13 +10,13 @@ const canonical = url.origin + url.pathname;
 useSeoMeta({
   title: 'Favorites',
   ogTitle: 'Favorites',
-  description: `Your favorite products saved on ${siteName}.`,
-  ogDescription: `Your favorite products saved on ${siteName}.`,
+  description: `Your favorite products saved on ${name}.`,
+  ogDescription: `Your favorite products saved on ${name}.`,
   ogUrl: canonical,
   canonical,
-  keywords: `favorites, wishlist, ${siteName}`,
+  keywords: `favorites, wishlist, ${name}`,
   twitterTitle: 'Favorites',
-  twitterDescription: `Your favorite products saved on ${siteName}.`,
+  twitterDescription: `Your favorite products saved on ${name}.`,
   ogImage: 'https://commerce.nuxt.dev/social-card.jpg',
   twitterImage: 'https://commerce.nuxt.dev/social-card.jpg',
   robots: 'noindex, nofollow',

app/pages/index.vue

@@ -1,7 +1,7 @@
 <!--app/pages/index.vue-->
 <script setup>
 const route = useRoute();
-const { siteName } = useAppConfig();
+const { name } = useAppConfig().site;
 const url = useRequestURL();
 const canonical = computed(() => {
   const base = `${url.origin}${url.pathname}`;
@@ -18,17 +18,17 @@ useHead(() => {
 
   let title = '';
   let description = '';
-  const keywords = new Set(['ecommerce', siteName]);
+  const keywords = new Set(['ecommerce', name]);
 
   if (category) {
     title = `${category} Products`;
-    description = `Browse ${category} products on ${siteName}.`;
+    description = `Browse ${category} products on ${name}.`;
     keywords.add(category);
   }
 
   if (q) {
     title = `Search results for "${q}"`;
-    description = `Search results for "${q}" on ${siteName}.`;
+    description = `Search results for "${q}" on ${name}.`;
     keywords.add(q);
   }
 

app/pages/product/[id].vue

@@ -58,7 +58,7 @@ const calculateDiscountPercentage = computed(() => {
   return Math.round(((salePriceValue - regularPriceValue) / regularPriceValue) * 100);
 });
 
-const { siteName } = useAppConfig();
+const { name } = useAppConfig();
 const url = useRequestURL();
 const canonical = url.origin + url.pathname;
 const image = computed(() => product.value?.image?.sourceUrl);
@@ -68,10 +68,10 @@ const plainDescription = computed(() => {
 });
 
 useHead(() => {
-  const title = product.value?.name || siteName;
+  const title = product.value?.name || name;
   const description = plainDescription.value;
   const img = image.value;
-  const keywords = [product.value?.name, product.value?.allPaStyle?.nodes?.[0]?.name, siteName].filter(Boolean).join(', ');
+  const keywords = [product.value?.name, product.value?.allPaStyle?.nodes?.[0]?.name, name].filter(Boolean).join(', ');
 
   return {
     title,
@@ -96,7 +96,7 @@ const productSchema = computed(() => ({
   description: plainDescription.value,
   image: image.value ? [image.value] : [],
   sku: product.value?.sku,
-  brand: { '@type': 'Brand', name: siteName },
+  brand: { '@type': 'Brand', name: name },
 }));
 
 useHead(() => ({
@@ -178,12 +178,12 @@ const { handleAddToCart, addToCartButtonStatus } = useCart();
                 :to="localePath(`/product/${vars.slug}-${product.sku.split('-')[0]}`)"
                 :class="[
                   'flex w-12 rounded-lg border-2 select-varitaion transition-all duration-200 bg-neutral-200 dark:bg-neutral-800',
-                  vars.allPaColor.nodes[0].name === product.allPaColor.nodes[0].name ? 'selected-varitaion' : 'border-[#9b9b9b] dark:border-[#8c8c8c]',
+                  vars.allPaStyle.nodes[0].name === product.allPaStyle.nodes[0].name ? 'selected-varitaion' : 'border-[#9b9b9b] dark:border-[#8c8c8c]',
                 ]">
                 <NuxtImg
-                  :alt="vars.allPaColor.nodes[0].name"
+                  :alt="vars.allPaStyle.nodes[0].name"
                   :src="vars.image.sourceUrl"
-                  :title="vars.allPaColor.nodes[0].name"
+                  :title="vars.allPaStyle.nodes[0].name"
                   class="rounded-md border-2 border-white dark:border-black" />
               </NuxtLink>
             </div>