feat: implement item pages

README.md

@@ -10,6 +10,6 @@ Information from YouTube API is also added to the database for videos.
 
 - [x] Build with Jekyll
   - [ ] Revamp index page
-  - [ ] Provide an item page for each API item
+  - [x] Provide an item page for each API item
 - [ ] Add unit tests
 - [ ] Add code coverage

gh-pages-template/_config.yml

@@ -0,0 +1,2 @@
+---
+site-js: []  # disable crowdin for this site

gh-pages-template/_includes/image_modal.html

@@ -0,0 +1,74 @@
+<!-- Image Gallery Modal -->
+<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen">
+    <div class="modal-content bg-dark">
+      <div class="modal-header border-0">
+        <h5 class="modal-title" id="imageModalLabel">Image Gallery</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body d-flex align-items-center justify-content-center position-relative p-0">
+        <button type="button" class="btn btn-light position-absolute start-0 ms-3 rounded-circle" id="modal-prev-btn" style="z-index: 1050; width: 50px; height: 50px;">
+          <span class="material-symbols-outlined">chevron_left</span>
+        </button>
+        <img id="modal-image" src="" alt="" class="img-fluid" style="max-height: 90vh; max-width: 100%;">
+        <button type="button" class="btn btn-light position-absolute end-0 me-3 rounded-circle" id="modal-next-btn" style="z-index: 1050; width: 50px; height: 50px;">
+          <span class="material-symbols-outlined">chevron_right</span>
+        </button>
+      </div>
+      <div class="modal-footer border-0 justify-content-center">
+        <span id="modal-counter">1 / 1</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+// Image modal functionality
+(function() {
+    let currentImages = [];
+    let currentIndex = 0;
+
+    const modal = document.getElementById('imageModal');
+    const modalImage = document.getElementById('modal-image');
+    const modalCounter = document.getElementById('modal-counter');
+    const prevBtn = document.getElementById('modal-prev-btn');
+    const nextBtn = document.getElementById('modal-next-btn');
+
+    function updateImage() {
+        if (currentImages.length === 0) return;
+        modalImage.src = currentImages[currentIndex];
+        modalCounter.textContent = `${currentIndex + 1} / ${currentImages.length}`;
+    }
+
+    function showPrev() {
+        currentIndex = (currentIndex - 1 + currentImages.length) % currentImages.length;
+        updateImage();
+    }
+
+    function showNext() {
+        currentIndex = (currentIndex + 1) % currentImages.length;
+        updateImage();
+    }
+
+    // Event listeners
+    prevBtn.addEventListener('click', showPrev);
+    nextBtn.addEventListener('click', showNext);
+
+    // Keyboard navigation
+    document.addEventListener('keydown', function(e) {
+        if (modal.classList.contains('show')) {
+            if (e.key === 'ArrowLeft') showPrev();
+            else if (e.key === 'ArrowRight') showNext();
+        }
+    });
+
+    // Global function to open modal
+    globalThis.openImageModal = function(images, index) {
+        currentImages = images;
+        currentIndex = index;
+        updateImage();
+        const bsModal = new bootstrap.Modal(modal);
+        bsModal.show();
+    };
+})();
+</script>

gh-pages-template/assets/js/character_detail.js

@@ -0,0 +1,46 @@
+/**
+ * character_detail.js
+ * Renders a single character detail page.
+ * Depends on item_detail.js being loaded first.
+ */
+
+function renderCharacter(data) {
+    document.title = (data.name || "Character") + " – GameDB";
+    document.getElementById("character-name").textContent = data.name || "Unknown Character";
+
+    // Mug shot
+    const mugEl = document.getElementById("character-mug");
+    const mugPlaceholder = document.getElementById("character-mug-placeholder");
+    const mugUrl = data.mug_shot?.url
+        ? igdbImageUrl(data.mug_shot.url, "t_cover_big_2x")
+        : null;
+    if (mugUrl) {
+        mugEl.src = mugUrl;
+        mugEl.alt = data.name || "";
+        mugEl.style.display = "";
+    } else {
+        mugPlaceholder.style.display = null;
+        mugPlaceholder.style.removeProperty("display");
+    }
+
+    // Badges / meta
+    const badgesEl = document.getElementById("character-badges");
+
+    if (data.character_gender?.name) {
+        badgesEl.appendChild(makeBadge(data.character_gender.name, "bg-info text-dark"));
+    }
+    if (data.character_species?.name) {
+        badgesEl.appendChild(makeBadge(data.character_species.name, "bg-secondary"));
+    }
+
+    // Games
+    if (data.games && data.games.length > 0) {
+        const section = document.getElementById("character-games-section");
+        section.classList.remove("d-none");
+        renderGameList(document.getElementById("character-games"), data.games);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    loadItemDetail("characters", renderCharacter);
+});

gh-pages-template/assets/js/collection_detail.js

@@ -0,0 +1,28 @@
+/**
+ * collection_detail.js
+ * Renders a single collection (series) detail page.
+ * Depends on item_detail.js being loaded first.
+ */
+
+function renderCollection(data) {
+    document.title = (data.name || "Series") + " – GameDB";
+    document.getElementById("collection-name").textContent = data.name || "Unknown Series";
+
+    // IGDB link
+    if (data.url) {
+        const igdbLink = document.getElementById("collection-igdb-link");
+        igdbLink.href = data.url;
+        igdbLink.classList.remove("d-none");
+    }
+
+    // Games
+    if (data.games && data.games.length > 0) {
+        const section = document.getElementById("collection-games-section");
+        section.classList.remove("d-none");
+        renderGameList(document.getElementById("collection-games"), data.games);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    loadItemDetail("collections", renderCollection);
+});

gh-pages-template/assets/js/franchise_detail.js

@@ -0,0 +1,28 @@
+/**
+ * franchise_detail.js
+ * Renders a single franchise detail page.
+ * Depends on item_detail.js being loaded first.
+ */
+
+function renderFranchise(data) {
+    document.title = (data.name || "Franchise") + " – GameDB";
+    document.getElementById("franchise-name").textContent = data.name || "Unknown Franchise";
+
+    // IGDB link
+    if (data.url) {
+        const igdbLink = document.getElementById("franchise-igdb-link");
+        igdbLink.href = data.url;
+        igdbLink.classList.remove("d-none");
+    }
+
+    // Games
+    if (data.games && data.games.length > 0) {
+        const section = document.getElementById("franchise-games-section");
+        section.classList.remove("d-none");
+        renderGameList(document.getElementById("franchise-games"), data.games);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    loadItemDetail("franchises", renderFranchise);
+});