Update home page and components to integrate with discover navigation

src/components/PageHeader.vue

@@ -31,12 +31,22 @@
     info?: string | Array<string>;
     link?: string;
     shortList?: boolean;
+    sectionType?: "list" | "discover";
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    sectionType: "list"
+  });
 
   const urlify = computed(() => {
-    return `/list/${props.title.toLowerCase().replace(" ", "_")}`;
+    const normalizedTitle = props.title
+      .toLowerCase()
+      .replace(/'s\b/g, "") // Remove possessive 's
+      .replace(/[^\w\d\s-]/g, "") // Remove special characters (keep word chars, dashes, digits, spaces)
+      .replace(/\s+/g, "_") // Replace spaces with underscores
+      .replace(/-/g, "_") // Replace dash with underscore
+      .replace(/_+/g, "_"); // Replace multiple underscores with single underscore
+    return `/${props.sectionType}/${normalizedTitle}`;
   });
 
   const prettify = computed(() => {

src/components/ResultsSection.vue

@@ -1,6 +1,8 @@
 <template>
   <div ref="resultSection" class="resultSection">
-    <page-header v-bind="{ title, info, shortList }" />
+    <page-header
+      v-bind="{ title, info, shortList, sectionType: props.sectionType }"
+    />
 
     <div
       v-if="!loadedPages.includes(1) && loading == false"
@@ -40,9 +42,12 @@
     title: string;
     apiFunction: (page: number) => Promise<IList>;
     shortList?: boolean;
+    sectionType?: "list" | "discover";
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    sectionType: "list"
+  });
 
   const results: Ref<ListResults> = ref([]);
   const page: Ref<number> = ref(1);

src/pages/HomePage.vue

@@ -2,38 +2,40 @@
   <section>
     <LandingBanner />
 
-    <div v-for="list in lists" :key="list.title">
     <ResultsSection
-        :api-function="list.apiFunction"
+      :api-function="getRequests"
-        :title="list.title"
+      title="Requests"
       :short-list="true"
     />
-    </div>
+
+    <ResultsSection
+      :api-function="() => getTmdbMovieListByName('now_playing')"
+      title="Now playing"
+      :short-list="true"
+      section-type="list"
+    />
+
+    <DiscoverMinimal />
+
+    <ResultsSection
+      :api-function="() => getTmdbMovieListByName('upcoming')"
+      title="Upcoming"
+      :short-list="true"
+      section-type="list"
+    />
+
+    <ResultsSection
+      :api-function="() => getTmdbMovieListByName('popular')"
+      title="Popular"
+      :short-list="true"
+      section-type="list"
+    />
   </section>
 </template>
 
 <script setup lang="ts">
   import LandingBanner from "@/components/LandingBanner.vue";
   import ResultsSection from "@/components/ResultsSection.vue";
+  import DiscoverMinimal from "@/components/DiscoverMinimal.vue";
   import { getRequests, getTmdbMovieListByName } from "../api";
-  import type ISection from "../interfaces/ISection";
-
-  const lists: ISection[] = [
-    {
-      title: "Requests",
-      apiFunction: getRequests
-    },
-    {
-      title: "Now playing",
-      apiFunction: () => getTmdbMovieListByName("now_playing")
-    },
-    {
-      title: "Upcoming",
-      apiFunction: () => getTmdbMovieListByName("upcoming")
-    },
-    {
-      title: "Popular",
-      apiFunction: () => getTmdbMovieListByName("popular")
-    }
-  ];
 </script>