From 9f97c763bc5a2d3337aa1659e0bf1e37843c4cd4 Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sat, 13 Sep 2025 20:21:51 -0600
Subject: [PATCH 01/12] Home Page

---
 app/Http/Controllers/HomeController.php       |  23 ++
 app/Services/HomeStatisticsService.php        |  60 +++++
 ...er_science_resources_difficulty_to_set.php |   7 +-
 .../js/Components/ApplicationHeaderLogo.vue   |   4 +-
 resources/js/Components/CoverflowGallery.vue  | 217 +++++++++++++++
 resources/js/Components/Navigation/Navbar.vue |   2 +-
 resources/js/Pages/Home.vue                   | 252 ++++++++++++++++++
 routes/web.php                                |   5 +-
 8 files changed, 564 insertions(+), 6 deletions(-)
 create mode 100644 app/Http/Controllers/HomeController.php
 create mode 100644 app/Services/HomeStatisticsService.php
 create mode 100644 resources/js/Components/CoverflowGallery.vue
 create mode 100644 resources/js/Pages/Home.vue

diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
new file mode 100644
index 00000000..ff43bb59
--- /dev/null
+++ b/app/Http/Controllers/HomeController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Services\HomeStatisticsService;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class HomeController extends Controller
+{
+    public function __construct(
+        protected HomeStatisticsService $homeStatistics
+    ){}
+
+    public function show()
+    {
+        $stats = $this->homeStatistics->getStatistics();
+
+        return Inertia::render('Home',
+            $stats
+        );
+    }
+}
diff --git a/app/Services/HomeStatisticsService.php b/app/Services/HomeStatisticsService.php
new file mode 100644
index 00000000..467343d3
--- /dev/null
+++ b/app/Services/HomeStatisticsService.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\ComputerScienceResource;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Storage;
+
+class HomeStatisticsService
+{
+    public function __construct()
+    {
+
+    }
+
+    function getPublicUrl(?string $path): ?string {
+        return $path ? Storage::disk('public')->url($path) : null;
+    }
+
+    private function resourceTop(): Collection
+    {
+        return DB::table('computer_science_resources')
+            ->whereNotNull('image_path')
+            ->limit(10)
+            ->get()
+            ->map(fn($res) => [
+                'id' => $res->id,
+                'image_url' => $this->getPublicUrl($res->image_path),
+            ]);
+    }
+
+    private function resourcesCount(): int
+    {
+        return DB::table('computer_science_resources')->count();
+    }
+
+    private function topTopics(): Collection
+    {
+        return DB::table('tag_frequencies')->where('type','topics_tags')
+            ->orderByDesc('count')->limit(10)->get();
+    }
+
+    private function topicsCount(): int
+    {
+        return DB::table('tag_frequencies')->where('type','topics_tags')->count();
+    }
+
+
+    public function getStatistics()
+    {
+        return array(
+            "resources_top" => $this->resourceTop(),
+            "resources_count" => $this->resourcesCount(),
+            "topics_count" => $this->topicsCount(),
+            "topics_top" => $this->topTopics()
+        );
+    }
+
+}
diff --git a/database/migrations/2025_09_06_223541_change_computer_science_resources_difficulty_to_set.php b/database/migrations/2025_09_06_223541_change_computer_science_resources_difficulty_to_set.php
index 4092301a..b22dcf7a 100644
--- a/database/migrations/2025_09_06_223541_change_computer_science_resources_difficulty_to_set.php
+++ b/database/migrations/2025_09_06_223541_change_computer_science_resources_difficulty_to_set.php
@@ -22,7 +22,12 @@ public function up(): void
 
     public function down(): void
     {
-        // Rollback: rename back and revert type
+        // Keep only the first value from the SET
+        DB::statement("
+            UPDATE computer_science_resources
+            SET difficulties = SUBSTRING_INDEX(difficulties, ',', 1)
+        ");
+
         DB::statement("
             ALTER TABLE computer_science_resources
             CHANGE difficulties difficulty ENUM(
diff --git a/resources/js/Components/ApplicationHeaderLogo.vue b/resources/js/Components/ApplicationHeaderLogo.vue
index 12705d91..e2719d60 100644
--- a/resources/js/Components/ApplicationHeaderLogo.vue
+++ b/resources/js/Components/ApplicationHeaderLogo.vue
@@ -1,4 +1,4 @@
 <template>
-    <img src="/images/LogoTitle.svg" alt="Computer Science Resources" class="h-10 sm:h-12 w-auto block dark:hidden" />
-    <img src="/images/LogoTitleDark.svg" alt="Computer Science Resources" class="h-10 sm:h-12 w-auto hidden dark:block" />
+    <img src="/images/LogoTitle.svg" alt="Computer Science Resources" class="h-7 sm:h-12 w-auto block dark:hidden" />
+    <img src="/images/LogoTitleDark.svg" alt="Computer Science Resources" class="h-7 sm:h-12 w-auto hidden dark:block" />
 </template>
diff --git a/resources/js/Components/CoverflowGallery.vue b/resources/js/Components/CoverflowGallery.vue
new file mode 100644
index 00000000..524e8118
--- /dev/null
+++ b/resources/js/Components/CoverflowGallery.vue
@@ -0,0 +1,217 @@
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
+
+const props = defineProps({
+  images: { type: Array, required: true }, // array of string URLs
+  autoplay: { type: [Boolean, Number], default: true }, // enable by default
+  autoSpeed: { type: Number, default: 0.06 }, // slides per second
+  loop: { type: Boolean, default: true },
+  centerScale: { type: Number, default: 1 },
+  sideScale: { type: Number, default: 0.9 },
+  spacing: { type: Number, default: 220 },
+  height: { type: [Number, String], default: 360 }
+})
+
+const current = ref(0)
+const root = ref(null)
+const containerWidth = ref(0)
+let rafId = null
+let lastTs = 0
+
+// compute slide width so exactly three slides can fit comfortably
+const slideGap = 14 // px gap between slides (slightly smaller gap)
+const slideWidthPx = computed(() => {
+  const w = containerWidth.value || 0
+  const numericHeight = typeof props.height === 'number' ? props.height : parseFloat(String(props.height)) || 360
+  if (!w) return Math.min(numericHeight, 360)
+  // More conservative calculation: start from a strict one-third then reserve
+  // extra gap space so three slides fit with breathing room.
+  const rawThird = Math.floor(w / 3)
+  const reserved = Math.ceil(slideGap * 1.8)
+  const raw = Math.max(48, rawThird - reserved)
+  // ensure we don't exceed the visual height or become tiny
+  const clamped = Math.max(64, Math.min(raw, numericHeight))
+  return clamped
+})
+
+const spacingPx = computed(() => {
+  return slideWidthPx.value + slideGap
+})
+
+const styleRoot = computed(() => ({
+  '--height': typeof props.height === 'number' ? `${props.height}px` : props.height,
+  '--slide-w': `${slideWidthPx.value}px`,
+  '--gap': `${slideGap}px`
+}))
+
+const tick = (ts) => {
+  const n = props.images.length
+  if (!props.autoplay || n <= 1) { pause(); return }
+  if (!lastTs) lastTs = ts
+  const dt = (ts - lastTs) / 1000
+  lastTs = ts
+  const nextVal = current.value + (props.autoSpeed * dt)
+  if (props.loop && n > 0) {
+    current.value = ((nextVal % n) + n) % n
+  } else {
+    current.value = Math.min(n - 1, nextVal)
+  }
+  rafId = requestAnimationFrame(tick)
+}
+
+const play = () => {
+  if (!props.autoplay) return
+  cancelAnimationFrame(rafId)
+  lastTs = 0
+  rafId = requestAnimationFrame(tick)
+}
+const pause = () => { cancelAnimationFrame(rafId); rafId = null }
+
+const clampIndex = (i) => {
+  const n = props.images.length
+  if (props.loop) {
+    return ((i % n) + n) % n
+  }
+  return Math.max(0, Math.min(n - 1, i))
+}
+
+// (spacingPx is computed above as slideWidth + gap)
+
+const slideStyle = (i) => {
+  const n = props.images.length
+  let d = i - current.value
+  if (props.loop) {
+    if (d > n / 2) d -= n
+    if (d < -n / 2) d += n
+  }
+  const absd = Math.abs(d)
+
+  const rotateY = 0
+  const translateX = d * spacingPx.value
+  const translateZ = 0
+
+  // Smooth scale and opacity based on distance to the current index
+  const scale = props.sideScale + (props.centerScale - props.sideScale) * Math.max(0, 1 - Math.min(absd, 1))
+
+  // Center fully visible; neighbors fade to 0.7 at distance 1; beyond 1 -> 0
+  // Show center and immediate neighbors strongly.
+  // Also show second neighbors faintly so a third image is visible when layout clips.
+  let opacity = 0
+  if (absd <= 1) {
+    opacity = 1 - 0.3 * absd
+  } else if (absd <= 2) {
+    // second neighbor: subtle presence
+    opacity = 0.25 - 0.08 * (absd - 1)
+  } else {
+    opacity = 0
+  }
+
+  const transform = `translate(-50%, -50%) translateX(${translateX}px) translateZ(${translateZ}px) rotateY(${rotateY}deg) scale(${scale})`
+  return {
+    transform,
+    opacity,
+    zIndex: 1000 - Math.round(absd * 10),
+    pointerEvents: opacity < 0.02 ? 'none' : 'auto'
+  }
+}
+
+let measure
+onMounted(() => {
+  // measure container width and listen for resizes
+  measure = () => { containerWidth.value = root.value ? root.value.clientWidth : 0 }
+  measure()
+  window.addEventListener('resize', measure)
+  // observe the root for layout changes (images/font load)
+  const ro = new ResizeObserver(measure)
+  if (root.value) ro.observe(root.value)
+  ;(root.value || {}).__ro = ro
+  play()
+})
+
+onBeforeUnmount(() => {
+  pause()
+  window.removeEventListener('resize', measure)
+  if (root.value && root.value.__ro) {
+    try { root.value.__ro.disconnect() } catch (e) {}
+    delete root.value.__ro
+  }
+})
+
+watch(() => props.autoplay, () => { pause(); play() })
+</script>
+
+<template>
+  <div class="coverflow-root" ref="root" :style="styleRoot">
+    <div class="coverflow-viewport" :style="{ '--count': images.length }">
+      <div
+        v-for="(url, i) in images"
+        :key="i"
+        class="coverflow-slide"
+        :class="{ active: i === current }"
+        :style="slideStyle(i)"
+      >
+        <img :src="url" :alt="`image ${i+1}`" draggable="false" />
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+.coverflow-root {
+  --height: 360px;
+  position: relative;
+  height: var(--height);
+  user-select: none;
+  overflow: hidden;
+  margin: 0 auto;
+  max-width: 1100px;
+  width: 100%;
+}
+.coverflow-viewport {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* fade edges gently so second neighbors remain visible */
+  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, rgba(0,0,0,0));
+  mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, rgba(0,0,0,0));
+}
+.coverflow-slide {
+  position: absolute;
+  /* width driven by JS via --slide-w; fallback to height-based sizing */
+  width: var(--slide-w, min(calc(var(--height) * 1.1), 92vw));
+  height: var(--height);
+  left: 50%;
+  top: 50%;
+  transition: transform 0s linear, opacity 400ms ease;
+  border-radius: 12px;
+  box-shadow: 0 18px 40px rgba(10,10,20,0.35);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #111;
+}
+.coverflow-slide img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  -webkit-user-drag: none;
+}
+.coverflow-slide.active{
+  box-shadow: 0 30px 60px rgba(10,10,20,0.5);
+}
+/* controls removed for a minimalist conveyor style */
+
+@media (max-width: 900px){
+}
+@media (max-width: 480px){
+  .coverflow-root { --height: 200px }
+}
+</style>
diff --git a/resources/js/Components/Navigation/Navbar.vue b/resources/js/Components/Navigation/Navbar.vue
index 7dd947ea..b46081e2 100644
--- a/resources/js/Components/Navigation/Navbar.vue
+++ b/resources/js/Components/Navigation/Navbar.vue
@@ -26,7 +26,7 @@ const { isDark, toggleDark } = useDarkMode();
                 <div class="flex">
                     <!-- Logo -->
                     <div class="shrink-0 flex items-center">
-                        <Link :href="route('resources.index')">
+                        <Link :href="route('home.show')">
                             <ApplicationHeaderLogo class="block h-9 w-auto max-w-[250px] sm:max-w-64 md:max-w-72 lg:max-w-80 xl:max-w-96 mr-2" />
                         </Link>
                     </div>
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
new file mode 100644
index 00000000..ad897cca
--- /dev/null
+++ b/resources/js/Pages/Home.vue
@@ -0,0 +1,252 @@
+<script setup>
+import { computed } from "vue";
+import { Icon } from '@iconify/vue'
+import AppLayout from "@/Layouts/AppLayout.vue";
+import { Head } from "@inertiajs/vue3";
+import CoverflowGallery from "@/Components/CoverflowGallery.vue";
+import { Link } from "@inertiajs/vue3";
+import SecondaryButton from "@/Components/SecondaryButton.vue";
+import ApplicationLogo from "@/Components/ApplicationLogo.vue";
+
+const props = defineProps({
+    resources_top: Object,
+    resources_count: Number,
+    topics_count: Number,
+    topics_top: Object,
+});
+
+// Build an array of image URLs for the coverflow component
+const galleryImages = computed(() => {
+    if (!Array.isArray(props.resources_top)) return [];
+    return props.resources_top.map((r) => r.image_url).filter(Boolean);
+});
+
+// Build a clean array of top topics
+const topTopics = computed(() => {
+    const list = Array.isArray(props.topics_top) ? props.topics_top : [];
+    return list
+        .map((t) => ({ id: t.tag, name: t.tag, count: t.count ?? null }))
+        .filter((t) => !!t.name);
+});
+
+const fmt = (n) => new Intl.NumberFormat().format(Number(n || 0));
+</script>
+
+<template>
+    <AppLayout title="Home">
+        <Head>
+            <title>Computer Science Resources.com</title>
+            <meta
+                name="description"
+                content="Discover the best computer science and software engineering resources, organized for the developer community."
+            />
+            <meta
+                property="og:title"
+                content="Computer Science Resources.com"
+            />
+            <meta
+                property="og:description"
+                content="Discover the best computer science and software engineering resources, organized for the developer community."
+            />
+            <meta property="og:type" content="website" />
+            <meta property="og:image" content="/images/og-image.png" />
+            <meta
+                property="og:url"
+                content="https://computerscienceresources.com/"
+            />
+            <meta
+                property="og:site_name"
+                content="Computer Science Resources.com"
+            />
+            <link
+                rel="canonical"
+                href="https://computerscienceresources.com/"
+            />
+        </Head>
+        <div
+            class="bg-gradient-to-b from-primary/10 to-white dark:from-gray-900 dark:to-gray-800 min-h-screen py-12"
+        >
+            <div class="max-w-5xl mx-auto px-4">
+                <!-- Hero Section -->
+                <section class="text-center mb-12">
+                    <h1
+                        class="text-5xl md:text-6xl font-extrabold text-primary mb-3 tracking-tight"
+                    >
+                        Computer Science Resources.com
+                    </h1>
+                    <p
+                        class="text-lg md:text-xl text-gray-700 dark:text-gray-300 mb-4 max-w-3xl mx-auto"
+                    >
+                        Discover curated computer science and software
+                        engineering resources—organized by and for the developer
+                        community.
+                    </p>
+                    <!-- Coverflow Gallery -->
+                    <div class="mb-8">
+                        <CoverflowGallery
+                            v-if="galleryImages && galleryImages.length"
+                            :images="galleryImages"
+                            :autoplay="true"
+                            :auto-speed="0.26"
+                            :height="240"
+                        />
+                    </div>
+
+                        <!-- Explore Resources CTA -->
+                        <div class="flex justify-center mb-6">
+                            <Link :href="route('resources.index')">
+                                <SecondaryButton class="px-6 py-3 text-lg md:text-xl font-semibold">
+                                    Explore Resources
+                                </SecondaryButton>
+                            </Link>
+                        </div>
+
+                    <p
+                        class="mt-2 text-2xl md:text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-4"
+                    >
+                        Over
+                        <span class="text-primary">{{
+                            fmt(props.resources_count)
+                        }}</span>
+                        resources, covering over
+                        <span class="text-primary">{{
+                            fmt(props.topics_count)
+                        }}</span>
+                        topics.
+                    </p>
+
+                    <div
+                        v-if="topTopics.length"
+                        class="flex flex-wrap justify-center gap-2 md:gap-3 mb-9"
+                    >
+                        <span
+                            v-for="t in topTopics"
+                            :key="t.id"
+                            class="px-3 py-1.5 rounded-full bg-primary/10 text-primaryDark dark:text-primary border border-primary/20 text-sm md:text-base hover:bg-primary/15 transition-colors"
+                            title="Top topic"
+                        >
+                            {{ t.name }}
+                        </span>
+                    </div>
+                </section>
+
+                <div class="mt-20">
+                    <!-- Why Section -->
+                    <section
+                    class="bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 mb-12"
+                    >
+                        <h2
+                        class="text-3xl font-bold text-primary mb-4 text-center"
+                        >
+                            Why Computer Science Resources Matter
+                        </h2>
+                        <p class="text-lg text-center text-gray-700 dark:text-gray-300 mb-4">
+                            <b>In short:</b> Having access to high-quality resources is
+                            essential for growth and innovation.
+                        </p>
+
+                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
+                            <!-- Hidden Gems -->
+                            <div class="flex flex-col items-center text-center gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                <div class="bg-primary/10 text-primary rounded-full p-3">
+                                    <Icon icon="mdi:star-outline" class="w-7 h-7" />
+                                </div>
+                                <h3 class="text-lg font-semibold text-primary">Hidden Gems</h3>
+                                <p class="text-sm text-gray-600 dark:text-gray-400">Curated, lesser-known resources with big value.</p>
+                            </div>
+
+                            <!-- Keeping up with Industry Trends -->
+                            <div class="flex flex-col items-center text-center gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                <div class="bg-primary/10 text-primary rounded-full p-3">
+                                    <Icon icon="mdi:trending-up" class="w-7 h-7" />
+                                </div>
+                                <h3 class="text-lg font-semibold text-primary">Industry Trends</h3>
+                                <p class="text-sm text-gray-600 dark:text-gray-400">Keep current with tools, frameworks, and best practices.</p>
+                            </div>
+
+                            <!-- Community Reviewed -->
+                            <div class="flex flex-col items-center text-center gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                <div class="bg-primary/10 text-primary rounded-full p-3">
+                                    <Icon icon="mdi:account-group" class="w-7 h-7" />
+                                </div>
+                                <h3 class="text-lg font-semibold text-primary">Community Reviewed</h3>
+                                <p class="text-sm text-gray-600 dark:text-gray-400">Ratings and notes from contributors to help you choose.</p>
+                            </div>
+
+                            <!-- Discover New Concentrations -->
+                            <div class="flex flex-col items-center text-center gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                <div class="bg-primary/10 text-primary rounded-full p-3">
+                                    <Icon icon="mdi:compass" class="w-7 h-7" />
+                                </div>
+                                <h3 class="text-lg font-semibold text-primary">Discover Concentrations</h3>
+                                <p class="text-sm text-gray-600 dark:text-gray-400">Explore niche topics and career-focused learning paths.</p>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+
+                <!-- For You Section -->
+                <section class="my-12">
+                    <div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8">
+                        <h2 class="text-3xl font-bold text-primary mb-4 text-center">Computer Science Resources for You</h2>
+                        <p class="text-center text-gray-700 dark:text-gray-300 mb-6 max-w-2xl mx-auto">Whether you're teaching, starting out, leading a team, or managing projects, find curated resources tailored to your role.</p>
+
+                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mt-6 items-start">
+                            <!-- Logo column: spans 1 on md+, full width above -->
+                            <div class="flex items-center justify-center md:justify-start p-4">
+                                <ApplicationLogo class="w-32 h-auto" />
+                            </div>
+
+                            <!-- Role cards: span remaining columns -->
+                            <div class="md:col-span-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                                <!-- Tech Lead -->
+                                <div class="flex flex-col items-start gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                    <h3 class="text-lg font-semibold text-primary">Tech Lead</h3>
+                                    <p class="text-sm text-gray-600 dark:text-gray-400">Find advanced guides, architecture patterns, and resources to level up your engineering leadership and spot gaps in your stack or team skills.</p>
+                                </div>
+
+                                <!-- Software Engineer -->
+                                <div class="flex flex-col items-start gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                    <h3 class="text-lg font-semibold text-primary">Software Engineer</h3>
+                                    <p class="text-sm text-gray-600 dark:text-gray-400">Find deep-dive tutorials, performance tips, testing patterns, and hands-on examples to solve real-world engineering problems.</p>
+                                </div>
+
+                                <!-- Project Manager -->
+                                <div class="flex flex-col items-start gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                    <h3 class="text-lg font-semibold text-primary">Project Manager</h3>
+                                    <p class="text-sm text-gray-600 dark:text-gray-400">Access practical templates, planning guides, and communication patterns to keep technical projects on track and stakeholders aligned.</p>
+                                </div>
+
+                                <!-- Teacher -->
+                                <div class="flex flex-col items-start gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                    <h3 class="text-lg font-semibold text-primary">Teacher</h3>
+                                    <p class="text-sm text-gray-600 dark:text-gray-400">Discover structured curricula, lesson plans, slide decks and affordable course materials to support engaging, standards-aligned classes.</p>
+                                </div>
+
+                                <!-- University Student -->
+                                <div class="flex flex-col items-start gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                    <h3 class="text-lg font-semibold text-primary">University Student</h3>
+                                    <p class="text-sm text-gray-600 dark:text-gray-400">Supplement coursework with practical labs, reference guides, and project ideas to deepen concepts and prepare for internships.</p>
+                                </div>
+
+                                <!-- Children -->
+                                <div class="flex flex-col items-start gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                    <h3 class="text-lg font-semibold text-primary">Children</h3>
+                                    <p class="text-sm text-gray-600 dark:text-gray-400">Kid-friendly projects and interactive resources that introduce computing concepts through play and guided activities.</p>
+                                </div>
+
+                                <!-- Other occupation -->
+                                <div class="flex flex-col items-start gap-3 p-5 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                    <h3 class="text-lg font-semibold text-primary">Other Occupational Professional</h3>
+                                    <p class="text-sm text-gray-600 dark:text-gray-400">Practical guides showing how programming and automation can help in your daily workflows. Such as reporting or data analysis.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/routes/web.php b/routes/web.php
index 5cb65b28..e6ec46fb 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\CommentController;
 use App\Http\Controllers\ComputerScienceResourceController;
+use App\Http\Controllers\HomeController;
 use App\Http\Controllers\ResourceEditsController;
 use App\Http\Controllers\ResourceReviewController;
 use App\Http\Controllers\TagFrequencyController;
@@ -51,8 +52,8 @@
 // Public
 // -----------------------
 Route::middleware('guest.or.verified')->group(function () {
-    Route::get('/', function () {
-        return redirect('/resources');
+    Route::controller(HomeController::class)->group(function () {
+        Route::get('/', 'show')->name('home.show');
     });
 
     Route::get('/about', function () {

From 7a5af245a8128868397fe841197862054aeeb8b5 Mon Sep 17 00:00:00 2001
From: AllanKoder <74692833+AllanKoder@users.noreply.github.com>
Date: Sun, 14 Sep 2025 02:22:17 +0000
Subject: [PATCH 02/12] Apply automatic changes

---
 app/Http/Controllers/HomeController.php |  3 +--
 app/Services/HomeStatisticsService.php  | 29 ++++++++++---------------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index ff43bb59..722d51c7 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -3,14 +3,13 @@
 namespace App\Http\Controllers;
 
 use App\Services\HomeStatisticsService;
-use Illuminate\Http\Request;
 use Inertia\Inertia;
 
 class HomeController extends Controller
 {
     public function __construct(
         protected HomeStatisticsService $homeStatistics
-    ){}
+    ) {}
 
     public function show()
     {
diff --git a/app/Services/HomeStatisticsService.php b/app/Services/HomeStatisticsService.php
index 467343d3..c03de640 100644
--- a/app/Services/HomeStatisticsService.php
+++ b/app/Services/HomeStatisticsService.php
@@ -2,19 +2,16 @@
 
 namespace App\Services;
 
-use App\Models\ComputerScienceResource;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Storage;
 
 class HomeStatisticsService
 {
-    public function __construct()
-    {
-
-    }
+    public function __construct() {}
 
-    function getPublicUrl(?string $path): ?string {
+    public function getPublicUrl(?string $path): ?string
+    {
         return $path ? Storage::disk('public')->url($path) : null;
     }
 
@@ -24,7 +21,7 @@ private function resourceTop(): Collection
             ->whereNotNull('image_path')
             ->limit(10)
             ->get()
-            ->map(fn($res) => [
+            ->map(fn ($res) => [
                 'id' => $res->id,
                 'image_url' => $this->getPublicUrl($res->image_path),
             ]);
@@ -37,24 +34,22 @@ private function resourcesCount(): int
 
     private function topTopics(): Collection
     {
-        return DB::table('tag_frequencies')->where('type','topics_tags')
+        return DB::table('tag_frequencies')->where('type', 'topics_tags')
             ->orderByDesc('count')->limit(10)->get();
     }
 
     private function topicsCount(): int
     {
-        return DB::table('tag_frequencies')->where('type','topics_tags')->count();
+        return DB::table('tag_frequencies')->where('type', 'topics_tags')->count();
     }
 
-
     public function getStatistics()
     {
-        return array(
-            "resources_top" => $this->resourceTop(),
-            "resources_count" => $this->resourcesCount(),
-            "topics_count" => $this->topicsCount(),
-            "topics_top" => $this->topTopics()
-        );
+        return [
+            'resources_top' => $this->resourceTop(),
+            'resources_count' => $this->resourcesCount(),
+            'topics_count' => $this->topicsCount(),
+            'topics_top' => $this->topTopics(),
+        ];
     }
-
 }

From 09959e385cec15f60f9a68e550083abd92b2bd80 Mon Sep 17 00:00:00 2001
From: Allan Kong <74692833+AllanKoder@users.noreply.github.com>
Date: Sat, 13 Sep 2025 20:24:49 -0600
Subject: [PATCH 03/12] Update
 database/migrations/2025_09_06_223541_change_computer_science_resources_difficulty_to_set.php

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 ...23541_change_computer_science_resources_difficulty_to_set.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/database/migrations/2025_09_06_223541_change_computer_science_resources_difficulty_to_set.php b/database/migrations/2025_09_06_223541_change_computer_science_resources_difficulty_to_set.php
index b22dcf7a..6be509b3 100644
--- a/database/migrations/2025_09_06_223541_change_computer_science_resources_difficulty_to_set.php
+++ b/database/migrations/2025_09_06_223541_change_computer_science_resources_difficulty_to_set.php
@@ -26,6 +26,7 @@ public function down(): void
         DB::statement("
             UPDATE computer_science_resources
             SET difficulties = SUBSTRING_INDEX(difficulties, ',', 1)
+            WHERE difficulties IS NOT NULL AND difficulties != ''
         ");
 
         DB::statement("

From a2492d439db126341a68691ef073ab9ad8e7a207 Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sat, 13 Sep 2025 20:26:46 -0600
Subject: [PATCH 04/12] nits

---
 resources/js/Components/CoverflowGallery.vue | 12 ++++++------
 resources/js/Pages/Home.vue                  |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/js/Components/CoverflowGallery.vue b/resources/js/Components/CoverflowGallery.vue
index 524e8118..01fd7650 100644
--- a/resources/js/Components/CoverflowGallery.vue
+++ b/resources/js/Components/CoverflowGallery.vue
@@ -18,6 +18,7 @@ const root = ref(null)
 const containerWidth = ref(0)
 let rafId = null
 let lastTs = 0
+let roRef = null
 
 // compute slide width so exactly three slides can fit comfortably
 const slideGap = 14 // px gap between slides (slightly smaller gap)
@@ -123,18 +124,17 @@ onMounted(() => {
   measure()
   window.addEventListener('resize', measure)
   // observe the root for layout changes (images/font load)
-  const ro = new ResizeObserver(measure)
-  if (root.value) ro.observe(root.value)
-  ;(root.value || {}).__ro = ro
+  roRef = new ResizeObserver(measure)
+  if (root.value) roRef.observe(root.value)
   play()
 })
 
 onBeforeUnmount(() => {
   pause()
   window.removeEventListener('resize', measure)
-  if (root.value && root.value.__ro) {
-    try { root.value.__ro.disconnect() } catch (e) {}
-    delete root.value.__ro
+  if (roRef) {
+    try { roRef.disconnect() } catch (e) {}
+    roRef = null
   }
 })
 
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index ad897cca..43d886a4 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -5,8 +5,8 @@ import AppLayout from "@/Layouts/AppLayout.vue";
 import { Head } from "@inertiajs/vue3";
 import CoverflowGallery from "@/Components/CoverflowGallery.vue";
 import { Link } from "@inertiajs/vue3";
-import SecondaryButton from "@/Components/SecondaryButton.vue";
 import ApplicationLogo from "@/Components/ApplicationLogo.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
 
 const props = defineProps({
     resources_top: Object,
@@ -95,9 +95,9 @@ const fmt = (n) => new Intl.NumberFormat().format(Number(n || 0));
                         <!-- Explore Resources CTA -->
                         <div class="flex justify-center mb-6">
                             <Link :href="route('resources.index')">
-                                <SecondaryButton class="px-6 py-3 text-lg md:text-xl font-semibold">
+                                <PrimaryButton class="px-6 py-3 text-lg md:text-xl font-semibold">
                                     Explore Resources
-                                </SecondaryButton>
+                                </PrimaryButton>
                             </Link>
                         </div>
 

From 33075dcf56c0b156ff59caa8c83e75b2110e2119 Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sun, 21 Sep 2025 19:03:34 -0600
Subject: [PATCH 05/12] Sitemap

---
 app/Console/Commands/GenerateSitemap.php      |  49 +++
 .../ComputerScienceResourceController.php     |  29 +-
 .../ComputerScienceResourceService.php        |  28 ++
 composer.json                                 |   1 +
 composer.lock                                 | 396 +++++++++++++++++-
 5 files changed, 490 insertions(+), 13 deletions(-)
 create mode 100644 app/Console/Commands/GenerateSitemap.php

diff --git a/app/Console/Commands/GenerateSitemap.php b/app/Console/Commands/GenerateSitemap.php
new file mode 100644
index 00000000..4fcb6228
--- /dev/null
+++ b/app/Console/Commands/GenerateSitemap.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Models\ComputerScienceResource;
+use Illuminate\Console\Command;
+use Spatie\Sitemap\Sitemap;
+use Spatie\Sitemap\Tags\Url;
+
+class GenerateSitemap extends Command
+{
+    protected $signature = 'sitemap:generate';
+    protected $description = 'Generate the sitemap.xml file';
+
+    public function handle()
+    {
+        $sitemap = Sitemap::create()
+            ->add(Url::create('/')) // homepage
+            ->add(Url::create('/about')) // about page example
+            ->add(Url::create('/login'))
+            ->add(Url::create('/register'));
+
+        // Add each resource page to the sitemap with last modification date if available
+        // Limit to a maximum of 30,000 resources
+        $limit = 30000;
+        $count = 0;
+
+        $query = ComputerScienceResource::query()->orderBy('id')->limit($limit);
+        foreach ($query->cursor() as $resource) {
+            if ($count >= $limit) {
+                break;
+            }
+
+            $lastMod = $resource->updated_at ?? $resource->created_at;
+
+            $sitemap->add(
+                Url::create(route('resources.show', ['slug' => $resource->slug]))
+                    ->setLastModificationDate($lastMod)
+            );
+
+            $count++;
+        }
+
+        // Write to public/ so it's directly accessible
+        $sitemap->writeToFile(public_path('sitemap.xml'));
+
+        $this->info('Sitemap generated successfully!');
+    }
+}
diff --git a/app/Http/Controllers/ComputerScienceResourceController.php b/app/Http/Controllers/ComputerScienceResourceController.php
index f68085d2..9752c727 100644
--- a/app/Http/Controllers/ComputerScienceResourceController.php
+++ b/app/Http/Controllers/ComputerScienceResourceController.php
@@ -27,21 +27,26 @@ public function __construct(
      */
     public function index(Request $request)
     {
-        $query = ComputerScienceResource::query();
-
-        // Apply all filters and sorting
-        $filters = $request->query();
-        $query = $this->filterService->applyFilters($query, $filters);
+        try {
+            $data = $this->resourceService->getIndexData($request);
 
-        // Paginate with appended query params
-        $resources = $query->paginate(20)->appends($request->query());
+            return Inertia::render('Resources/Index', $data);
+        } catch (Throwable $e) {
+            Log::error('Error loading resources index', [
+                'user_id' => Auth::id(),
+                'query' => $request->query(),
+                'error' => $e->getMessage(),
+                'trace' => $e->getTraceAsString(),
+            ]);
 
-        $news = NewsPost::limit(10)->get();
+            // Return an empty page with an error flash so the UI can show a message
+            session()->flash('error', 'Unable to load resources right now.');
 
-        return Inertia::render('Resources/Index', [
-            'resources' => $resources,
-            'news_posts' => $news,
-        ]);
+            return Inertia::render('Resources/Index', [
+                'resources' => ComputerScienceResource::query()->paginate(1),
+                'news_posts' => collect(),
+            ]);
+        }
     }
 
     /**
diff --git a/app/Services/ComputerScienceResourceService.php b/app/Services/ComputerScienceResourceService.php
index 3b62b7cf..dfc10e1b 100644
--- a/app/Services/ComputerScienceResourceService.php
+++ b/app/Services/ComputerScienceResourceService.php
@@ -5,6 +5,7 @@
 use App\Exceptions\Resources\ResourceAlreadyCreatedException;
 use App\Exceptions\Resources\ResourceInvalidTabException;
 use App\Models\ComputerScienceResource;
+use App\Models\NewsPost;
 use App\Models\ResourceEdits;
 use App\Models\ResourceReview;
 use App\Services\SortingManagers\ResourceSortingManager;
@@ -24,8 +25,35 @@ public function __construct(
         protected UpvoteService $upvoteService,
         protected ResourceReviewService $reviewService,
         protected ResourceSortingManager $resourceSortingManager,
+        protected ComputerScienceResourceFilter $filterService,
     ) {}
 
+    /**
+     * Get data for the resources index page (filters, pagination, news)
+     *
+     * @return array{
+     *     resources: \Illuminate\Contracts\Pagination\LengthAwarePaginator,
+     *     news_posts: \Illuminate\Database\Eloquent\Collection
+     * }
+     */
+    public function getIndexData(Request $request): array
+    {
+        $query = ComputerScienceResource::query();
+
+        // Apply filters and sorting through the dedicated filter service
+        $filters = $request->query();
+        $query = $this->filterService->applyFilters($query, $filters);
+
+        $resources = $query->paginate(20)->appends($request->query());
+
+        $news = NewsPost::limit(10)->get();
+
+        return [
+            'resources' => $resources,
+            'news_posts' => $news,
+        ];
+    }
+
     /**
      * Create a new ComputerScienceResource
      *
diff --git a/composer.json b/composer.json
index 0fd4f140..cb5bcdc8 100644
--- a/composer.json
+++ b/composer.json
@@ -23,6 +23,7 @@
         "shiftonelabs/laravel-cascade-deletes": "^2.0",
         "spatie/laravel-activitylog": "^4.10",
         "spatie/laravel-backup": "^9.3",
+        "spatie/laravel-sitemap": "^7.3",
         "spatie/laravel-tags": "^4.9",
         "symfony/http-client": "^7.3",
         "symfony/mailgun-mailer": "^7.3",
diff --git a/composer.lock b/composer.lock
index 605faf11..ef0b30a2 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "e4dbfba9cfedc7e4d7d4745986019a8b",
+    "content-hash": "d5c060280727af15b29e77969312c209",
     "packages": [
         {
             "name": "anourvalar/eloquent-serialize",
@@ -5116,6 +5116,60 @@
             },
             "time": "2025-08-06T21:43:34+00:00"
         },
+        {
+            "name": "nicmart/tree",
+            "version": "0.9.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/nicmart/Tree.git",
+                "reference": "f5e17bf18d78cfb0666ebb9f956c3acd8d14229d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/nicmart/Tree/zipball/f5e17bf18d78cfb0666ebb9f956c3acd8d14229d",
+                "reference": "f5e17bf18d78cfb0666ebb9f956c3acd8d14229d",
+                "shasum": ""
+            },
+            "require": {
+                "php": "~8.0.0 || ~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0"
+            },
+            "require-dev": {
+                "ergebnis/composer-normalize": "^2.44.0",
+                "ergebnis/license": "^2.6.0",
+                "ergebnis/php-cs-fixer-config": "^6.28.1",
+                "fakerphp/faker": "^1.24.1",
+                "infection/infection": "~0.26.19",
+                "phpunit/phpunit": "^9.6.19",
+                "psalm/plugin-phpunit": "~0.19.0",
+                "vimeo/psalm": "^5.26.1"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Tree\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolò Martini",
+                    "email": "nicmartnic@gmail.com"
+                },
+                {
+                    "name": "Andreas Möller",
+                    "email": "am@localheinz.com"
+                }
+            ],
+            "description": "A basic but flexible php tree data structure and a fluent tree builder implementation.",
+            "support": {
+                "issues": "https://github.com/nicmart/Tree/issues",
+                "source": "https://github.com/nicmart/Tree/tree/0.9.0"
+            },
+            "time": "2024-11-22T15:36:01+00:00"
+        },
         {
             "name": "nikic/php-parser",
             "version": "v5.6.1",
@@ -6580,6 +6634,74 @@
             },
             "time": "2024-12-14T18:36:46+00:00"
         },
+        {
+            "name": "spatie/browsershot",
+            "version": "5.0.10",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/browsershot.git",
+                "reference": "9e5ae15487b3cdc3eb03318c1c8ac38971f60e58"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/browsershot/zipball/9e5ae15487b3cdc3eb03318c1c8ac38971f60e58",
+                "reference": "9e5ae15487b3cdc3eb03318c1c8ac38971f60e58",
+                "shasum": ""
+            },
+            "require": {
+                "ext-fileinfo": "*",
+                "ext-json": "*",
+                "php": "^8.2",
+                "spatie/temporary-directory": "^2.0",
+                "symfony/process": "^6.0|^7.0"
+            },
+            "require-dev": {
+                "pestphp/pest": "^3.0",
+                "spatie/image": "^3.6",
+                "spatie/pdf-to-text": "^1.52",
+                "spatie/phpunit-snapshot-assertions": "^4.2.3|^5.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\Browsershot\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be",
+                    "homepage": "https://github.com/freekmurze",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Convert a webpage to an image or pdf using headless Chrome",
+            "homepage": "https://github.com/spatie/browsershot",
+            "keywords": [
+                "chrome",
+                "convert",
+                "headless",
+                "image",
+                "pdf",
+                "puppeteer",
+                "screenshot",
+                "webpage"
+            ],
+            "support": {
+                "source": "https://github.com/spatie/browsershot/tree/5.0.10"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/spatie",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-05-15T07:10:57+00:00"
+        },
         {
             "name": "spatie/color",
             "version": "1.8.0",
@@ -6639,6 +6761,74 @@
             ],
             "time": "2025-02-10T09:22:41+00:00"
         },
+        {
+            "name": "spatie/crawler",
+            "version": "8.4.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/crawler.git",
+                "reference": "4f4c3ead439e7e57085c0b802bc4e5b44fb7d751"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/crawler/zipball/4f4c3ead439e7e57085c0b802bc4e5b44fb7d751",
+                "reference": "4f4c3ead439e7e57085c0b802bc4e5b44fb7d751",
+                "shasum": ""
+            },
+            "require": {
+                "guzzlehttp/guzzle": "^7.3",
+                "guzzlehttp/psr7": "^2.0",
+                "illuminate/collections": "^10.0|^11.0|^12.0",
+                "nicmart/tree": "^0.9",
+                "php": "^8.2",
+                "spatie/browsershot": "^5.0.5",
+                "spatie/robots-txt": "^2.0",
+                "symfony/dom-crawler": "^6.0|^7.0"
+            },
+            "require-dev": {
+                "pestphp/pest": "^2.0|^3.0",
+                "spatie/ray": "^1.37"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\Crawler\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be"
+                }
+            ],
+            "description": "Crawl all internal links found on a website",
+            "homepage": "https://github.com/spatie/crawler",
+            "keywords": [
+                "crawler",
+                "link",
+                "spatie",
+                "website"
+            ],
+            "support": {
+                "issues": "https://github.com/spatie/crawler/issues",
+                "source": "https://github.com/spatie/crawler/tree/8.4.3"
+            },
+            "funding": [
+                {
+                    "url": "https://spatie.be/open-source/support-us",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/spatie",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-05-20T09:00:51+00:00"
+        },
         {
             "name": "spatie/db-dumper",
             "version": "3.8.0",
@@ -7162,6 +7352,79 @@
             ],
             "time": "2025-02-14T09:55:51+00:00"
         },
+        {
+            "name": "spatie/laravel-sitemap",
+            "version": "7.3.7",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-sitemap.git",
+                "reference": "077b36c64bc4f373f4d95a1ac6ee1c0624acfdd3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-sitemap/zipball/077b36c64bc4f373f4d95a1ac6ee1c0624acfdd3",
+                "reference": "077b36c64bc4f373f4d95a1ac6ee1c0624acfdd3",
+                "shasum": ""
+            },
+            "require": {
+                "guzzlehttp/guzzle": "^7.8",
+                "illuminate/support": "^11.0|^12.0",
+                "nesbot/carbon": "^2.71|^3.0",
+                "php": "^8.2||^8.3||^8.4",
+                "spatie/crawler": "^8.0.1",
+                "spatie/laravel-package-tools": "^1.16.1",
+                "symfony/dom-crawler": "^6.3.4|^7.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.6.6",
+                "orchestra/testbench": "^9.0|^10.0",
+                "pestphp/pest": "^3.7.4",
+                "spatie/pest-plugin-snapshots": "^2.1",
+                "spatie/phpunit-snapshot-assertions": "^5.1.2",
+                "spatie/temporary-directory": "^2.2"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Spatie\\Sitemap\\SitemapServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\Sitemap\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Create and generate sitemaps with ease",
+            "homepage": "https://github.com/spatie/laravel-sitemap",
+            "keywords": [
+                "laravel-sitemap",
+                "spatie"
+            ],
+            "support": {
+                "source": "https://github.com/spatie/laravel-sitemap/tree/7.3.7"
+            },
+            "funding": [
+                {
+                    "url": "https://spatie.be/open-source/support-us",
+                    "type": "custom"
+                }
+            ],
+            "time": "2025-08-25T08:07:09+00:00"
+        },
         {
             "name": "spatie/laravel-tags",
             "version": "4.10.0",
@@ -7315,6 +7578,66 @@
             ],
             "time": "2025-02-20T15:51:22+00:00"
         },
+        {
+            "name": "spatie/robots-txt",
+            "version": "2.5.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/robots-txt.git",
+                "reference": "1b59dde3fd4e1b71967b40841369c6e9779282f3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/robots-txt/zipball/1b59dde3fd4e1b71967b40841369c6e9779282f3",
+                "reference": "1b59dde3fd4e1b71967b40841369c6e9779282f3",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.5.2"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\Robots\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Brent Roose",
+                    "email": "brent@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Determine if a page may be crawled from robots.txt and robots meta tags",
+            "homepage": "https://github.com/spatie/robots-txt",
+            "keywords": [
+                "robots-txt",
+                "spatie"
+            ],
+            "support": {
+                "issues": "https://github.com/spatie/robots-txt/issues",
+                "source": "https://github.com/spatie/robots-txt/tree/2.5.2"
+            },
+            "funding": [
+                {
+                    "url": "https://spatie.be/open-source/support-us",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/spatie",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-09-19T10:37:01+00:00"
+        },
         {
             "name": "spatie/temporary-directory",
             "version": "2.3.0",
@@ -7680,6 +8003,77 @@
             ],
             "time": "2024-09-25T14:21:43+00:00"
         },
+        {
+            "name": "symfony/dom-crawler",
+            "version": "v7.3.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/dom-crawler.git",
+                "reference": "efa076ea0eeff504383ff0dcf827ea5ce15690ba"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/dom-crawler/zipball/efa076ea0eeff504383ff0dcf827ea5ce15690ba",
+                "reference": "efa076ea0eeff504383ff0dcf827ea5ce15690ba",
+                "shasum": ""
+            },
+            "require": {
+                "masterminds/html5": "^2.6",
+                "php": ">=8.2",
+                "symfony/polyfill-ctype": "~1.8",
+                "symfony/polyfill-mbstring": "~1.0"
+            },
+            "require-dev": {
+                "symfony/css-selector": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\DomCrawler\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Eases DOM navigation for HTML and XML documents",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/dom-crawler/tree/v7.3.3"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-08-06T20:13:54+00:00"
+        },
         {
             "name": "symfony/error-handler",
             "version": "v7.3.2",

From 1556c3cf130fb4f181fb45fe0866d9c094d3e0c4 Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sun, 21 Sep 2025 19:32:54 -0600
Subject: [PATCH 06/12] Image improvement

---
 resources/js/Pages/Resources/Create.vue       |  15 ++
 .../Pages/Resources/Form/MandatoryFields.vue  | 196 +++++++++++---
 .../js/Pages/Resources/MandatoryFields.vue    | 255 ------------------
 3 files changed, 178 insertions(+), 288 deletions(-)
 delete mode 100644 resources/js/Pages/Resources/MandatoryFields.vue

diff --git a/resources/js/Pages/Resources/Create.vue b/resources/js/Pages/Resources/Create.vue
index edaa6f4f..9ca0b469 100644
--- a/resources/js/Pages/Resources/Create.vue
+++ b/resources/js/Pages/Resources/Create.vue
@@ -64,8 +64,23 @@ const navigateToStep = (step) => {
     scrollToForm();
 };
 
+const resetFormData = () => {
+    formData.name = "";
+    formData.platforms = [];
+    formData.page_url = "";
+    formData.image_file = null;
+    formData.pricing = "";
+    formData.difficulties = [];
+    formData.description = "";
+    formData.topic_tags = [];
+    formData.programming_language_tags = [];
+    formData.general_tags = [];
+};
+
+// Update resetForm to also clear the reactive formData
 const resetForm = () => {
     clearLocalStorage();
+    resetFormData();
     showReset.value = false;
     stepperValue.value = "1";
 };
diff --git a/resources/js/Pages/Resources/Form/MandatoryFields.vue b/resources/js/Pages/Resources/Form/MandatoryFields.vue
index 5e758007..9c315e1a 100644
--- a/resources/js/Pages/Resources/Form/MandatoryFields.vue
+++ b/resources/js/Pages/Resources/Form/MandatoryFields.vue
@@ -5,8 +5,9 @@ import MultiSelect from "primevue/multiselect";
 import PrimeVueFormError from "@/Components/Form/PrimeVueFormError.vue";
 import PictureInput from "vue-picture-input";
 import Select from "primevue/select";
-import { defineEmits, ref, watch } from "vue";
-import ConfirmationModal from '@/Components/ConfirmationModal.vue';
+import { defineEmits, nextTick, ref, watch } from "vue";
+import ConfirmationModal from "@/Components/ConfirmationModal.vue";
+import DialogModal from "@/Components/DialogModal.vue";
 import {
     platformsObject,
     pricingsObject,
@@ -27,16 +28,48 @@ const emit = defineEmits(["change", "next"]);
 
 const errors = ref({});
 const showDescriptionHelp = ref(false);
+const showImageError = ref(false);
+const imageErrorMessage = ref("");
 
-function onImageChange(event) {
-    const file = event.target.files[0];
+// ref to access the PictureInput component instance
+const pictureInput = ref(null);
+
+
+function onImageChange(_event) {
+    const file = pictureInput.value?.file ?? null;
     props.formData.image_file = file;
 }
 
-function onImageRemove(event) {
+function onImageRemove() {
+    // clear reactive state
     props.formData.image_file = null;
+
+    // also clear the PictureInput internals so the preview actually disappears
+    try {
+        if (pictureInput.value) {
+            if (typeof pictureInput.value.remove === "function") {
+                pictureInput.value.remove();
+            } else {
+                pictureInput.value.image = null;
+                pictureInput.value.file = null;
+            }
+        }
+    } catch (e) {
+        console.warn("Failed to clear pictureInput internals:", e);
+    }
 }
 
+function onImageError(err) {
+    console.error("PictureInput error:", err);
+    onImageRemove();
+
+    // Open dialog showing the error message (prefer err.message)
+    imageErrorMessage.value =
+        err?.message ||
+        JSON.stringify(err) ||
+        "An unknown image error occurred.";
+    showImageError.value = true;
+}
 
 const validateAndNext = async () => {
     try {
@@ -68,7 +101,8 @@ watch(
         <div class="space-y-4">
             <!-- Name Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                <label
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Name
                     <span class="text-red-500"> * </span>
                 </label>
@@ -78,15 +112,13 @@ watch(
                     placeholder="Enter the Name"
                     class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
                 />
-                <PrimeVueFormError
-                    v-if="errors.name"
-                    :errors="errors.name"
-                />
+                <PrimeVueFormError v-if="errors.name" :errors="errors.name" />
             </div>
 
             <!-- URL Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                <label
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Resource Website URL
                     <span class="text-red-500"> * </span>
                 </label>
@@ -103,9 +135,11 @@ watch(
 
             <!-- Image URL Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                <label
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Image Thumbnail</label
                 >
+                {{ props.formData.image_file }}
                 <PictureInput
                     ref="pictureInput"
                     width="220"
@@ -117,9 +151,30 @@ watch(
                     button-class="inline-flex items-center px-4 py-2 border border-primary rounded-md font-semibold text-xs text-primary uppercase tracking-widest hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 transition ease-in-out duration-150 mr-4"
                     removable
                     :prefill="props.formData.image_file"
+                    :alert-on-error="false"
                     @change="onImageChange"
                     @remove="onImageRemove"
+                    @error="onImageError"
                 />
+                <DialogModal
+                    :show="showImageError"
+                    @close="showImageError = false"
+                >
+                    <template #title>Error loading image</template>
+                    <template #content>
+                        <div class="text-sm text-gray-700 dark:text-gray-200">
+                            {{ imageErrorMessage }}
+                        </div>
+                    </template>
+                    <template #footer>
+                        <button
+                            @click="showImageError = false"
+                            class="px-4 py-2 bg-primary text-white rounded hover:bg-primaryDark transition"
+                        >
+                            Close
+                        </button>
+                    </template>
+                </DialogModal>
                 <PrimeVueFormError
                     v-if="errors.image_file"
                     :errors="errors.image_file"
@@ -128,7 +183,8 @@ watch(
 
             <div class="flex flex-col gap-1">
                 <!-- Resource Platforms Field -->
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                <label
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Resource Platforms
                     <span class="text-red-500"> * </span>
                 </label>
@@ -150,17 +206,29 @@ watch(
             <!-- Description Field -->
             <div class="flex flex-col gap-1">
                 <div class="flex items-center gap-2">
-                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">
+                    <label
+                        class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                    >
                         Description
                         <span class="text-red-500"> * </span>
                     </label>
-                    <button type="button" @click="showDescriptionHelp = true" class="focus:outline-none" title="Help: What makes a good description?">
-                        <Icon icon="mdi:help-circle-outline" class="w-5 h-5 text-primary hover:text-primaryDark" />
+                    <button
+                        type="button"
+                        @click="showDescriptionHelp = true"
+                        class="focus:outline-none"
+                        title="Help: What makes a good description?"
+                    >
+                        <Icon
+                            icon="mdi:help-circle-outline"
+                            class="w-5 h-5 text-primary hover:text-primaryDark"
+                        />
                     </button>
                 </div>
                 <Textarea
                     v-model="props.formData.description"
-                    :placeholder="`${props.formData.name || 'Resource Name'} is a...`"
+                    :placeholder="`${
+                        props.formData.name || 'Resource Name'
+                    } is a...`"
                     class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
                     rows="8"
                 />
@@ -168,41 +236,104 @@ watch(
                     v-if="errors.description"
                     :errors="errors.description"
                 />
-                <ConfirmationModal :show="showDescriptionHelp" @close="showDescriptionHelp = false">
+                <ConfirmationModal
+                    :show="showDescriptionHelp"
+                    @close="showDescriptionHelp = false"
+                >
                     <template #title>
                         What makes a good resource description?
                     </template>
                     <template #content>
                         <div class="space-y-3">
                             <p>
-                                <span class="font-semibold">We want details!</span> A good description should clearly explain what the resource is, who it's for, and what makes it valuable. Mention the format (podcast, platform, channel, etc.), the main topics covered, and any unique features or strengths. Imagine you're helping someone decide if this resource is right for them.
+                                <span class="font-semibold"
+                                    >We want details!</span
+                                >
+                                A good description should clearly explain what
+                                the resource is, who it's for, and what makes it
+                                valuable. Mention the format (podcast, platform,
+                                channel, etc.), the main topics covered, and any
+                                unique features or strengths. Imagine you're
+                                helping someone decide if this resource is right
+                                for them.
                             </p>
-                            <div class="border-l-4 border-primary pl-4 py-2 bg-secondary">
+                            <div
+                                class="border-l-4 border-primary pl-4 py-2 bg-secondary"
+                            >
                                 <div class="font-semibold mb-1">Example 1:</div>
                                 <div class="text-xs text-gray-700">
-                                    Soft Skills Engineering is a weekly advice podcast specifically designed for software developers who want to navigate the non-technical challenges of their careers. Hosted by experienced developers Dave Smith and Jamison Dance, the show addresses the interpersonal and professional situations that coding bootcamps and computer science programs typically don't cover.<br><br>
-                                    The podcast tackles practical workplace scenarios that software engineers encounter regularly, including salary negotiations, managing difficult colleagues, advancing into technical leadership roles, handling code review feedback diplomatically, and making strategic career decisions like when to change jobs or seek promotions. Episodes feature listener-submitted questions covering situations ranging from dealing with underperforming team members to managing the transition into management roles.
+                                    Soft Skills Engineering is a weekly advice
+                                    podcast specifically designed for software
+                                    developers who want to navigate the
+                                    non-technical challenges of their careers.
+                                    Hosted by experienced developers Dave Smith
+                                    and Jamison Dance, the show addresses the
+                                    interpersonal and professional situations
+                                    that coding bootcamps and computer science
+                                    programs typically don't cover.<br /><br />
+                                    The podcast tackles practical workplace
+                                    scenarios that software engineers encounter
+                                    regularly, including salary negotiations,
+                                    managing difficult colleagues, advancing
+                                    into technical leadership roles, handling
+                                    code review feedback diplomatically, and
+                                    making strategic career decisions like when
+                                    to change jobs or seek promotions. Episodes
+                                    feature listener-submitted questions
+                                    covering situations ranging from dealing
+                                    with underperforming team members to
+                                    managing the transition into management
+                                    roles.
                                 </div>
                             </div>
-                            <div class="border-l-4 border-primary pl-4 py-2 bg-secondary">
+                            <div
+                                class="border-l-4 border-primary pl-4 py-2 bg-secondary"
+                            >
                                 <div class="font-semibold mb-1">Example 2:</div>
                                 <div class="text-xs text-gray-700">
-                                    NeetCode is an online platform designed for coding interview preparation, particularly for FAANG and big tech companies. The platform provides a structured approach to preparing for coding interviews with curated problem sets and comprehensive learning resources.<br><br>
-                                    The platform's flagship offering is the NeetCode 150, which expands on the popular Blind 75 problem set by adding 75 additional problems, creating a comprehensive list for developers familiar with basic algorithms and data structures. The site includes video explanations, coding solutions, and systematic approaches to tackling technical interview questions across various difficulty levels and problem categories.<br><br>
-                                    NeetCode also maintains a popular YouTube channel known for its concise and straightforward explanations of common interview questions, with clear problem-solving strategies that are accessible to both beginners and experienced coders.
+                                    NeetCode is an online platform designed for
+                                    coding interview preparation, particularly
+                                    for FAANG and big tech companies. The
+                                    platform provides a structured approach to
+                                    preparing for coding interviews with curated
+                                    problem sets and comprehensive learning
+                                    resources.<br /><br />
+                                    The platform's flagship offering is the
+                                    NeetCode 150, which expands on the popular
+                                    Blind 75 problem set by adding 75 additional
+                                    problems, creating a comprehensive list for
+                                    developers familiar with basic algorithms
+                                    and data structures. The site includes video
+                                    explanations, coding solutions, and
+                                    systematic approaches to tackling technical
+                                    interview questions across various
+                                    difficulty levels and problem categories.<br /><br />
+                                    NeetCode also maintains a popular YouTube
+                                    channel known for its concise and
+                                    straightforward explanations of common
+                                    interview questions, with clear
+                                    problem-solving strategies that are
+                                    accessible to both beginners and experienced
+                                    coders.
                                 </div>
                             </div>
                         </div>
                     </template>
                     <template #footer>
-                        <button @click="showDescriptionHelp = false" class="px-4 py-2 bg-primary text-white rounded hover:bg-primaryDark transition">Close</button>
+                        <button
+                            @click="showDescriptionHelp = false"
+                            class="px-4 py-2 bg-primary text-white rounded hover:bg-primaryDark transition"
+                        >
+                            Close
+                        </button>
                     </template>
                 </ConfirmationModal>
             </div>
 
             <!-- Difficulty Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                <label
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Difficulty
                     <span class="text-red-500"> * </span>
                 </label>
@@ -222,7 +353,8 @@ watch(
 
             <!-- Pricing Field -->
             <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
+                <label
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Pricing
                     <span class="text-red-500"> * </span>
                 </label>
@@ -242,11 +374,9 @@ watch(
         </div>
         <!-- continue Button -->
         <div class="flex pt-6 justify-end">
-            <PrimaryButton
-                @click="validateAndNext"
-            >
+            <PrimaryButton @click="validateAndNext">
                 Next
-                <Icon class="ml-2" icon="mdi:arrow-right"/>
+                <Icon class="ml-2" icon="mdi:arrow-right" />
             </PrimaryButton>
         </div>
     </div>
diff --git a/resources/js/Pages/Resources/MandatoryFields.vue b/resources/js/Pages/Resources/MandatoryFields.vue
deleted file mode 100644
index 324b7a66..00000000
--- a/resources/js/Pages/Resources/MandatoryFields.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<script setup>
-import InputText from "primevue/inputtext";
-import Textarea from "primevue/textarea";
-import MultiSelect from "primevue/multiselect";
-import PrimeVueFormError from "@/Components/Form/PrimeVueFormError.vue";
-import PictureInput from "vue-picture-input";
-import Select from "primevue/select";
-import { defineEmits, ref, watch } from "vue";
-import ConfirmationModal from '@/Components/ConfirmationModal.vue';
-import {
-    platformsObject,
-    pricingsObject,
-    difficultiesObject,
-} from "@/Helpers/labels";
-import { resourceMandatoryFields } from "@/Helpers/validation";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import { Icon } from "@iconify/vue";
-
-const props = defineProps({
-    formData: {
-        type: Object,
-        required: true,
-    },
-});
-
-const emit = defineEmits(["change", "next"]);
-
-const errors = ref({});
-const showDescriptionHelp = ref(false);
-
-function onImageChange(event) {
-    const file = event.target.files[0];
-    props.formData.image_file = file;
-}
-
-function onImageRemove(event) {
-    props.formData.image_file = null;
-}
-
-
-const validateAndNext = async () => {
-    try {
-        await resourceMandatoryFields.validate(props.formData, {
-            abortEarly: false,
-        });
-        errors.value = {};
-        emit("next", props.formData);
-    } catch (e) {
-        const yupErrors = {};
-        e.inner.forEach((error) => {
-            yupErrors[error.path] = error.errors;
-        });
-        errors.value = yupErrors;
-    }
-};
-
-watch(
-    () => props.formData,
-    (newValue) => {
-        emit("change", newValue);
-    },
-    { deep: true }
-);
-</script>
-
-<template>
-    <div class="flex flex-col gap-4 w-full">
-        <div class="space-y-4">
-            <!-- Name Field -->
-            <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
-                    >Name
-                    <span class="text-red-500"> * </span>
-                </label>
-
-                <InputText
-                    v-model="props.formData.name"
-                    placeholder="Enter the Name"
-                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:text-gray-100"
-                />
-                <PrimeVueFormError
-                    v-if="errors.name"
-                    :errors="errors.name"
-                />
-            </div>
-
-            <!-- URL Field -->
-            <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
-                    >Resource Website URL
-                    <span class="text-red-500"> * </span>
-                </label>
-                <InputText
-                    v-model="props.formData.page_url"
-                    placeholder="Enter resource URL"
-                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
-                />
-                <PrimeVueFormError
-                    v-if="errors.page_url"
-                    :errors="errors.page_url"
-                />
-            </div>
-
-            <!-- Image URL Field -->
-            <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
-                    >Image Thumbnail</label
-                >
-                <div class="mt-1 w-fit border border-gray-300 dark:border-gray-800 rounded-md bg-white dark:bg-gray-900 p-3 flex items-center justify-center">
-                    <PictureInput
-                        ref="pictureInput"
-                        width="220"
-                        height="220"
-                        margin="16"
-                        accept="image/jpeg,image/png"
-                        size="0.4"
-                        remove-button-class="inline-flex items-center px-4 py-2 bg-primary border-0 rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-primary/90 focus:bg-primary/90 active:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150"
-                        button-class="inline-flex items-center px-4 py-2 border border-primary rounded-md font-semibold text-xs text-primary uppercase tracking-widest hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 transition ease-in-out duration-150 mr-4"
-                        removable
-                        :prefill="props.formData.image_file"
-                        @change="onImageChange"
-                        @remove="onImageRemove"
-                    />
-                </div>
-                <PrimeVueFormError
-                    v-if="errors.image_file"
-                    :errors="errors.image_file"
-                />
-            </div>
-
-            <div class="flex flex-col gap-1">
-                <!-- Resource Platforms Field -->
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
-                    >Resource Platforms
-                    <span class="text-red-500"> * </span>
-                </label>
-                <MultiSelect
-                    v-model="props.formData.platforms"
-                    :options="platformsObject"
-                    filter
-                    option-label="label"
-                    option-value="value"
-                    placeholder="Select Resource Platform"
-                    class="w-full dark:bg-gray-900 dark:text-gray-100 dark:border-gray-800"
-                />
-                <PrimeVueFormError
-                    v-if="errors.platforms"
-                    :errors="errors.platforms"
-                />
-            </div>
-
-            <!-- Description Field -->
-            <div class="flex flex-col gap-1">
-                <div class="flex items-center gap-2">
-                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">
-                        Description
-                        <span class="text-red-500"> * </span>
-                    </label>
-                    <button type="button" @click="showDescriptionHelp = true" class="focus:outline-none" title="Help: What makes a good description?">
-                        <Icon icon="mdi:help-circle-outline" class="w-5 h-5 text-primary hover:text-primaryDark" />
-                    </button>
-                </div>
-                <Textarea
-                    v-model="props.formData.description"
-                    :placeholder="`${props.formData.name || 'Resource Name'} is a...`"
-                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
-                    rows="8"
-                />
-                <PrimeVueFormError
-                    v-if="errors.description"
-                    :errors="errors.description"
-                />
-                <ConfirmationModal :show="showDescriptionHelp" @close="showDescriptionHelp = false">
-                    <template #title>
-                        What makes a good resource description?
-                    </template>
-                    <template #content>
-                        <div class="space-y-3">
-                            <p>
-                                <span class="font-semibold">We want details!</span> A good description should clearly explain what the resource is, who it's for, and what makes it valuable. Mention the format (podcast, platform, channel, etc.), the main topics covered, and any unique features or strengths. Imagine you're helping someone decide if this resource is right for them.
-                            </p>
-                            <div class="border-l-4 border-primary pl-4 py-2 bg-secondary">
-                                <div class="font-semibold mb-1">Example 1:</div>
-                                <div class="text-xs text-gray-700">
-                                    Soft Skills Engineering is a weekly advice podcast specifically designed for software developers who want to navigate the non-technical challenges of their careers. Hosted by experienced developers Dave Smith and Jamison Dance, the show addresses the interpersonal and professional situations that coding bootcamps and computer science programs typically don't cover.<br><br>
-                                    The podcast tackles practical workplace scenarios that software engineers encounter regularly, including salary negotiations, managing difficult colleagues, advancing into technical leadership roles, handling code review feedback diplomatically, and making strategic career decisions like when to change jobs or seek promotions. Episodes feature listener-submitted questions covering situations ranging from dealing with underperforming team members to managing the transition into management roles.
-                                </div>
-                            </div>
-                            <div class="border-l-4 border-primary pl-4 py-2 bg-secondary">
-                                <div class="font-semibold mb-1">Example 2:</div>
-                                <div class="text-xs text-gray-700">
-                                    NeetCode is an online platform designed for coding interview preparation, particularly for FAANG and big tech companies. The platform provides a structured approach to preparing for coding interviews with curated problem sets and comprehensive learning resources.<br><br>
-                                    The platform's flagship offering is the NeetCode 150, which expands on the popular Blind 75 problem set by adding 75 additional problems, creating a comprehensive list for developers familiar with basic algorithms and data structures. The site includes video explanations, coding solutions, and systematic approaches to tackling technical interview questions across various difficulty levels and problem categories.<br><br>
-                                    NeetCode also maintains a popular YouTube channel known for its concise and straightforward explanations of common interview questions, with clear problem-solving strategies that are accessible to both beginners and experienced coders.
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                    <template #footer>
-                        <button @click="showDescriptionHelp = false" class="px-4 py-2 bg-primary text-white rounded hover:bg-primaryDark transition">Close</button>
-                    </template>
-                </ConfirmationModal>
-            </div>
-
-            <!-- Difficulty Field -->
-            <div class="flex flex-col gap-1 ">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
-                    >Difficulty
-                    <span class="text-red-500"> * </span>
-                </label>
-                <MultiSelect
-                    v-model="props.formData.difficulties"
-                    :options="difficultiesObject"
-                    option-label="label"
-                    option-value="value"
-                    placeholder="Select Difficulty Level"
-                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
-                />
-                <PrimeVueFormError
-                    v-if="errors.difficulties"
-                    :errors="errors.difficulties"
-                />
-            </div>
-
-            <!-- Pricing Field -->
-            <div class="flex flex-col gap-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200"
-                    >Pricing
-                    <span class="text-red-500"> * </span>
-                </label>
-                <Select
-                    v-model="props.formData.pricing"
-                    :options="pricingsObject"
-                    option-label="label"
-                    option-value="value"
-                    placeholder="Select Pricing"
-                    class="mt-1 w-full border border-gray-300 dark:border-gray-800 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100"
-                />
-                <PrimeVueFormError
-                    v-if="errors.pricing"
-                    :errors="errors.pricing"
-                />
-            </div>
-        </div>
-        <!-- continue Button -->
-        <div class="flex pt-6 justify-end">
-            <PrimaryButton
-                @click="validateAndNext"
-            >
-                Next
-                <Icon class="ml-2" icon="mdi:arrow-right"/>
-            </PrimaryButton>
-        </div>
-    </div>
-</template>

From 78e930ff58d89ac03648644c5c2d980697f4c6a0 Mon Sep 17 00:00:00 2001
From: AllanKoder <74692833+AllanKoder@users.noreply.github.com>
Date: Mon, 22 Sep 2025 01:33:40 +0000
Subject: [PATCH 07/12] Apply automatic changes

---
 app/Console/Commands/GenerateSitemap.php                   | 1 +
 app/Http/Controllers/ComputerScienceResourceController.php | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/Console/Commands/GenerateSitemap.php b/app/Console/Commands/GenerateSitemap.php
index 4fcb6228..4b264f3f 100644
--- a/app/Console/Commands/GenerateSitemap.php
+++ b/app/Console/Commands/GenerateSitemap.php
@@ -10,6 +10,7 @@
 class GenerateSitemap extends Command
 {
     protected $signature = 'sitemap:generate';
+
     protected $description = 'Generate the sitemap.xml file';
 
     public function handle()
diff --git a/app/Http/Controllers/ComputerScienceResourceController.php b/app/Http/Controllers/ComputerScienceResourceController.php
index 9752c727..5fb38cc7 100644
--- a/app/Http/Controllers/ComputerScienceResourceController.php
+++ b/app/Http/Controllers/ComputerScienceResourceController.php
@@ -6,7 +6,6 @@
 use App\Exceptions\Resources\ResourceInvalidTabException;
 use App\Http\Requests\StoreResourceRequest;
 use App\Models\ComputerScienceResource;
-use App\Models\NewsPost;
 use App\Services\ComputerScienceResourceFilter;
 use App\Services\ComputerScienceResourceService;
 use Illuminate\Http\Request;

From 135783c87089203fb1b9005725fdeb1f32c5d5b6 Mon Sep 17 00:00:00 2001
From: Allan Kong <74692833+AllanKoder@users.noreply.github.com>
Date: Sun, 21 Sep 2025 19:34:40 -0600
Subject: [PATCH 08/12] Update app/Console/Commands/GenerateSitemap.php

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 app/Console/Commands/GenerateSitemap.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/Console/Commands/GenerateSitemap.php b/app/Console/Commands/GenerateSitemap.php
index 4b264f3f..091a16c1 100644
--- a/app/Console/Commands/GenerateSitemap.php
+++ b/app/Console/Commands/GenerateSitemap.php
@@ -15,10 +15,10 @@ class GenerateSitemap extends Command
 
     public function handle()
     {
-        $sitemap = Sitemap::create()
-            ->add(Url::create('/')) // homepage
-            ->add(Url::create('/about')) // about page example
-            ->add(Url::create('/login'))
+            ->add(Url::create(route('home'))) // homepage
+            ->add(Url::create(route('about'))) // about page example
+            ->add(Url::create(route('login')))
+            ->add(Url::create(route('register')));
             ->add(Url::create('/register'));
 
         // Add each resource page to the sitemap with last modification date if available

From 4378811816c3e98664faa179aea926d37b8e964f Mon Sep 17 00:00:00 2001
From: Allan Kong <74692833+AllanKoder@users.noreply.github.com>
Date: Sun, 21 Sep 2025 19:34:54 -0600
Subject: [PATCH 09/12] Update
 resources/js/Pages/Resources/Form/MandatoryFields.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 resources/js/Pages/Resources/Form/MandatoryFields.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/Pages/Resources/Form/MandatoryFields.vue b/resources/js/Pages/Resources/Form/MandatoryFields.vue
index 9c315e1a..43281eb7 100644
--- a/resources/js/Pages/Resources/Form/MandatoryFields.vue
+++ b/resources/js/Pages/Resources/Form/MandatoryFields.vue
@@ -139,7 +139,6 @@ watch(
                     class="block text-sm font-medium text-gray-700 dark:text-gray-200"
                     >Image Thumbnail</label
                 >
-                {{ props.formData.image_file }}
                 <PictureInput
                     ref="pictureInput"
                     width="220"

From 4df75f24124674da55923a40c17258ed4633ecae Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sun, 21 Sep 2025 19:36:42 -0600
Subject: [PATCH 10/12] sitemap

---
 app/Console/Commands/GenerateSitemap.php      | 6 +++---
 resources/js/Components/Navigation/Navbar.vue | 2 +-
 routes/web.php                                | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/Console/Commands/GenerateSitemap.php b/app/Console/Commands/GenerateSitemap.php
index 091a16c1..5bbab978 100644
--- a/app/Console/Commands/GenerateSitemap.php
+++ b/app/Console/Commands/GenerateSitemap.php
@@ -15,11 +15,11 @@ class GenerateSitemap extends Command
 
     public function handle()
     {
-            ->add(Url::create(route('home'))) // homepage
-            ->add(Url::create(route('about'))) // about page example
+        $sitemap = Sitemap::create()
+            ->add(Url::create(route('home')))
+            ->add(Url::create(route('about')))
             ->add(Url::create(route('login')))
             ->add(Url::create(route('register')));
-            ->add(Url::create('/register'));
 
         // Add each resource page to the sitemap with last modification date if available
         // Limit to a maximum of 30,000 resources
diff --git a/resources/js/Components/Navigation/Navbar.vue b/resources/js/Components/Navigation/Navbar.vue
index b46081e2..7122c997 100644
--- a/resources/js/Components/Navigation/Navbar.vue
+++ b/resources/js/Components/Navigation/Navbar.vue
@@ -26,7 +26,7 @@ const { isDark, toggleDark } = useDarkMode();
                 <div class="flex">
                     <!-- Logo -->
                     <div class="shrink-0 flex items-center">
-                        <Link :href="route('home.show')">
+                        <Link :href="route('home')">
                             <ApplicationHeaderLogo class="block h-9 w-auto max-w-[250px] sm:max-w-64 md:max-w-72 lg:max-w-80 xl:max-w-96 mr-2" />
                         </Link>
                     </div>
diff --git a/routes/web.php b/routes/web.php
index e6ec46fb..098f7046 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -53,7 +53,7 @@
 // -----------------------
 Route::middleware('guest.or.verified')->group(function () {
     Route::controller(HomeController::class)->group(function () {
-        Route::get('/', 'show')->name('home.show');
+        Route::get('/', 'show')->name('home');
     });
 
     Route::get('/about', function () {

From 3da731a3888647709738bf4bd3043f53c12a7778 Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sun, 21 Sep 2025 19:36:59 -0600
Subject: [PATCH 11/12] nextTick not used

---
 resources/js/Pages/Resources/Form/MandatoryFields.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Pages/Resources/Form/MandatoryFields.vue b/resources/js/Pages/Resources/Form/MandatoryFields.vue
index 43281eb7..da6d9d42 100644
--- a/resources/js/Pages/Resources/Form/MandatoryFields.vue
+++ b/resources/js/Pages/Resources/Form/MandatoryFields.vue
@@ -5,7 +5,7 @@ import MultiSelect from "primevue/multiselect";
 import PrimeVueFormError from "@/Components/Form/PrimeVueFormError.vue";
 import PictureInput from "vue-picture-input";
 import Select from "primevue/select";
-import { defineEmits, nextTick, ref, watch } from "vue";
+import { defineEmits, ref, watch } from "vue";
 import ConfirmationModal from "@/Components/ConfirmationModal.vue";
 import DialogModal from "@/Components/DialogModal.vue";
 import {

From d8dba998bf9b70bf733b4b7f26d7fc1f8318d8a0 Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sun, 21 Sep 2025 19:52:32 -0600
Subject: [PATCH 12/12] Fix test

---
 tests/Feature/ComputerScienceResourceFilterTest.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/Feature/ComputerScienceResourceFilterTest.php b/tests/Feature/ComputerScienceResourceFilterTest.php
index cc3e4e81..8ebfe300 100644
--- a/tests/Feature/ComputerScienceResourceFilterTest.php
+++ b/tests/Feature/ComputerScienceResourceFilterTest.php
@@ -91,7 +91,8 @@ public function test_cannot_filter_with_invalid_fields(string $field, mixed $inv
         $validData[$field] = $invalidValue;
 
         $response = $this->getJson(route('resources.index', $validData));
-        $response->assertStatus(422);
+        $response->assertSessionHas('error');
+        $response->assertStatus(200);
     }
 
     public static function filterProvider(): array