feat: refactor-index (#769)

* refactored index

* refactored index

* lint

* changes following comments

---------

Co-authored-by: oivan-plenty <[email protected]>

apps/server/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "display": "Server",
   "compilerOptions": {
+    "resolveJsonModule": true,
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "composite": false,
     "declaration": false,

apps/web/components/ui/HeroCarousel/HeroCarousel.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { HeroItem } from './types';
+import { HeroContentProps } from './types';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Navigation, Pagination } from 'swiper/modules';
 const { handleArrows, onSlideChange } = useCarousel();
@@ -25,7 +25,7 @@ import '@/assets/libraries/swiper/navigation.min.css';
 import '@/assets/libraries/swiper/pagination.min.css';
 
 const { heroItemProps } = defineProps<{
-  heroItemProps: HeroItem[];
+  heroItemProps: HeroContentProps[];
 }>();
 
 const enableModules = computed(() => heroItemProps.length > 1);

apps/web/components/ui/HeroCarousel/types.ts

@@ -7,7 +7,7 @@ export type SizeKey = 'lg' | 'md' | 'sm' | 'xs';
 
 export type Sizes = Record<SizeKey, { width: string; height: string }>;
 
-export type HeroItem = {
+export type HeroContentProps = {
   image?: string;
   alt?: string;
   tagline?: string;
@@ -21,8 +21,3 @@ export type HeroItem = {
   backgroundSizes: Sizes;
   actualBackgroundSize: SizeKey;
 };
-
-export type HeroCarouselProps = {
-  background: { image: string; sizes: Sizes };
-  hero: HeroItem[];
-};

apps/web/components/ui/HeroContent/HeroContent.vue

@@ -37,10 +37,10 @@
 </template>
 
 <script setup lang="ts">
-import { HeroItem, SizeKey } from '../HeroCarousel/types';
+import { HeroContentProps, SizeKey } from '../HeroCarousel/types';
 
 defineProps<{
-  heroItemProps: HeroItem;
+  heroItemProps: HeroContentProps;
   currentSizeKey: SizeKey;
 }>();
 </script>

apps/web/components/ui/MediaCard/types.ts

@@ -1,4 +1,4 @@
-export type MediaItem = {
+export type MediaItemProps = {
   text: string;
   image: string;
   alt: string;

apps/web/composables/useHomepageData/homepageTemplateData.json

@@ -0,0 +1,74 @@
+{
+  "id": 100,
+  "hero": [
+    {
+      "image": {
+        "lg": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/homepage-hero-headphones.avif",
+        "md": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-md.avif",
+        "sm": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-sm.avif",
+        "xs": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-xs.avif",
+        "alt": "Headphones"
+      },
+      "tagline": "Feel the music",
+      "taglineColor": "#000000",
+      "heading": "Your Sound, Elevated",
+      "headingColor": "#000000",
+      "description": "Immerse yourself in rich, crystal-clear audio with our cutting-edge headphones. Designed for the ultimate listening experience, whether you're a casual listener or an audiophile. Discover the perfect blend of style, comfort, and sound quality that elevates your music to new heights.\n\n",
+      "descriptionColor": "#000000",
+      "callToAction": "Order Now",
+      "link": ""
+    },
+    {
+      "image": {
+        "lg": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/homepage-hero-headphones.avif",
+        "md": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-md.avif",
+        "sm": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-sm.avif",
+        "xs": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-xs.avif",
+        "alt": "Headphones"
+      },
+      "tagline": "Experience Sound Freedom",
+      "taglineColor": "#000000",
+      "heading": "Wireless. Effortless. Seamless.",
+      "headingColor": "#000000",
+      "description": "Unleash your audio with our state-of-the-art wireless earbuds. Designed for all-day comfort and uncompromised sound quality, these earbuds deliver crisp highs and deep bass, letting you enjoy your music without any distractions. Discover freedom with a perfect fit, long battery life, and intuitive controls.",
+      "descriptionColor": "#000000",
+      "callToAction": "Shop Earbuds",
+      "link": ""
+    },
+    {
+      "image": {
+        "lg": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/homepage-hero-headphones.avif",
+        "md": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-md.avif",
+        "sm": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-sm.avif",
+        "xs": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-xs.avif",
+        "alt": "Headphones"
+      },
+      "tagline": "Amplify Your Space",
+      "taglineColor": "#000000",
+      "heading": "Big Sound, Compact Design",
+      "headingColor": "#000000",
+      "description": "Transform your space with our portable speakers that pack a punch. Crafted for superior sound performance, these speakers are perfect for home or on the go. With easy connectivity and a sleek design, elevate your listening experience whether you're indoors or outdoors.",
+      "descriptionColor": "#000000",
+      "callToAction": "Browse Speakers",
+      "link": ""
+    }
+  ],
+  "valueProposition": [
+    {
+      "text": "<div class='flex flex-col mt-5 sm:mt-20 mt-0 sm:p-0 p-5 text-center sm:text-left'><span class='text-xl font-bold mb-2'>Experience the Future of Sound</span><h2 class='text-2xl font-semibold mb-4'>Redefine Your Listening Experience</h2><p class='typography-text-sm md:typography-text-lg mb-6 padding-right-desktop'>Our latest collection of headphones is designed to deliver unparalleled audio precision, with deep bass, clear highs, and an immersive experience for every genre of music. Combining sleek design, comfort, and cutting-edge technology, these headphones are made for those who refuse to compromise on sound quality.</p><ul class='list-disc list-inside typography-text-sm md:typography-text-lg '><li>Premium, studio-quality sound</li><li>Comfortable fit for extended listening</li><li>Long-lasting battery life</li><li>Seamless wireless connectivity</li></ul></div>",
+      "image": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
+      "alt": "Headphones",
+      "alignment": "left"
+    }
+  ],
+  "featured": [
+    {
+      "headline": "",
+      "categoryId": 1
+    },
+    {
+      "headline": "",
+      "categoryId": 2
+    }
+  ]
+}

apps/web/composables/useHomepageData/useHomepageData.ts

@@ -0,0 +1,81 @@
+import { ref, watch, computed } from 'vue';
+import { HeroContentProps, SizeKey } from '~/components/ui/HeroCarousel/types';
+import { MediaItemProps } from '~/components/ui/MediaCard/types';
+import { useCategoryTree, useCategoryTemplate } from '~/composables';
+import homepageTemplateData from './homepageTemplateData.json';
+
+const resolveImage = (imageSizes: Record<SizeKey, string>, sizeKey: SizeKey): string => {
+  return imageSizes[sizeKey] || '';
+};
+
+export default async function useHomepageData() {
+  const viewport = useViewport();
+  const { data: categoryTree } = useCategoryTree();
+  const recommendedProductsCategoryId = ref('');
+
+  const runtimeConfig = useRuntimeConfig();
+  const homepageTemplate = ref(homepageTemplateData);
+
+  const homepageCategoryId = runtimeConfig.public.homepageCategoryId;
+  const { fetchCategoryTemplate } = useCategoryTemplate();
+
+  if (typeof homepageCategoryId === 'number') {
+    const { data } = await fetchCategoryTemplate(homepageCategoryId);
+    const parsedData = JSON.parse(data);
+    if (parsedData) {
+      homepageTemplate.value = {
+        id: parsedData.id,
+        hero: parsedData.hero || [],
+        valueProposition: parsedData.valueProposition,
+        featured: parsedData.featured,
+      };
+    }
+  }
+
+  const getCurrentSizeKey = (): SizeKey => viewport.breakpoint.value as SizeKey;
+
+  const mediaData = computed(() =>
+    homepageTemplate.value.valueProposition.map((media: MediaItemProps) => ({
+      image: media.image,
+      text: media.text,
+      alignment: media.alignment,
+      alt: media.alt,
+    })),
+  );
+
+  const formattedHeroItems = computed<HeroContentProps[]>(() => {
+    const currentSizeKey = getCurrentSizeKey();
+    return homepageTemplate.value.hero.map((item) => {
+      return {
+        image: resolveImage(item.image, currentSizeKey),
+        tagline: item.tagline || '',
+        heading: item.heading || '',
+        description: item.description || '',
+        callToAction: item.callToAction || '',
+        link: item.link || '',
+        backgroundSizes: {
+          lg: { width: '4000', height: '600' },
+          md: { width: '1024', height: '600' },
+          sm: { width: '640', height: '752' },
+          xs: { width: '250', height: '250' },
+        },
+        actualBackgroundSize: currentSizeKey,
+      } as HeroContentProps;
+    });
+  });
+
+  watch(
+    () => categoryTree.value,
+    () => {
+      const firstCategoryId = categoryTree.value?.[0]?.id;
+      if (firstCategoryId) recommendedProductsCategoryId.value = firstCategoryId.toString();
+    },
+    { immediate: true },
+  );
+
+  return {
+    formattedHeroItems,
+    mediaData,
+    recommendedProductsCategoryId,
+  };
+}