Merge pull request #240 from rikp777/theme-logo

Feat: Add theme-aware logo

Author: zackha

app/app.config.ts

@@ -1,7 +1,9 @@
 // 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.',
+  },
   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

@@ -59,11 +59,7 @@ onClickOutside(onClickOutsideRef, event => {
         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>
+        <img class="rounded-lg max-lg:rounded-full bg-[#b31015] w-8 h-8" src="/logo.svg" alt="Logo" loading="lazy" title="logo" />
       </NuxtLink>
       <NuxtLink
         aria-label="Categories"

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(() => ({