From aa44db20bf5bc979e5e16da7649359428987b2fe Mon Sep 17 00:00:00 2001
From: dereklseitz <derekseitz@dsnet.works>
Date: Sat, 30 Aug 2025 11:47:01 -0500
Subject: [PATCH] feat: Add Credits & Attribution page - add credits.njk - add
 credits.css - add tooltips.js - add link in footer

---
 .gitignore                |  3 +-
 package-lock.json         |  2 +-
 src/_includes/footer.html |  3 +-
 src/about.njk             |  2 +-
 src/community.njk         |  2 +-
 src/credits.njk           | 71 +++++++++++++++++++++++++++++++++++++++
 src/gallery.njk           |  2 +-
 src/index.njk             |  2 +-
 src/scripts/tooltips.js   | 47 ++++++++++++++++++++++++++
 src/styles/credits.css    | 49 +++++++++++++++++++++++++++
 10 files changed, 176 insertions(+), 7 deletions(-)
 create mode 100644 src/credits.njk
 create mode 100644 src/scripts/tooltips.js
 create mode 100644 src/styles/credits.css

diff --git a/.gitignore b/.gitignore
index 40b878d..d0e4835 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-node_modules/
\ No newline at end of file
+node_modules/
+_site/
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1dcaa5e..c333ca6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "BloomValleyNursery",
+  "name": "bloomvalleydemo.dlseitz.dev",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/src/_includes/footer.html b/src/_includes/footer.html
index 252289a..a131adc 100644
--- a/src/_includes/footer.html
+++ b/src/_includes/footer.html
@@ -50,7 +50,8 @@
             </li>
         </ul>
     </div>
-    <div id="copyright">&copy; 2025, Derek L. Seitz, <a href="https://dlseitz.dev">dlseitz.dev.</a></div>
+    
+    <div id="copyright">&copy; 2025, Derek L. Seitz, <a href="https://dlseitz.dev">dlseitz.dev</a>. Images used with permissions from <a href="/credits/" target="_blank" rel="noopener noreferrer">these contributors</a>.</div>
 </footer>
 <!-- Custom Newsletter Modal -->
 <div id="custom-alert" class="modal hidden">
diff --git a/src/about.njk b/src/about.njk
index a23d38d..0a7b69d 100644
--- a/src/about.njk
+++ b/src/about.njk
@@ -7,7 +7,7 @@ stylesheet:
     - "/styles/base.css"
     - "/styles/header-footer.css"
     - "/styles/about.css"
-fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js"
+fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 isLandingPage: false
 pageScripts:
     - "/scripts/feedback.js"
diff --git a/src/community.njk b/src/community.njk
index e97b19c..9b669cf 100644
--- a/src/community.njk
+++ b/src/community.njk
@@ -7,7 +7,7 @@ stylesheet:
     - "/styles/base.css"
     - "/styles/header-footer.css"
     - "/styles/community.css"
-fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js"
+fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 isLandingPage: false
 pageScripts:
     - "/scripts/cart.js"
diff --git a/src/credits.njk b/src/credits.njk
new file mode 100644
index 0000000..07cf669
--- /dev/null
+++ b/src/credits.njk
@@ -0,0 +1,71 @@
+---
+layout: base.njk
+metaDesc: "Credit & attribution for the contributors of this demo eCommerce website by Derek L. Seitz - dlseitz.dev"
+title: "Credits & Attribution - Bloom Valley Nursery Demo"
+stylesheet: 
+    - "/styles/variables.css"
+    - "/styles/base.css"
+    - "/styles/header-footer.css"
+    - "/styles/credits.css"
+fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
+isLandingPage: false
+pageScripts:
+    - "/scripts/tooltips.js"
+    - "/scripts/script.js"
+    - "/scripts/cart.js"
+    - "/scripts/newsletter.js"
+---
+
+<!-- "Credits & Attributions" Template -->
+<h1>Credits & Attributions</h1>
+<p>A heartfelt <strong>Thank You</strong> is extended to these creators and the platforms that host their work. Their royalty-free contributions to the public helped make this demo possible.</p> 
+<p id="tip-desc" class="visually-hidden">Preview shows a small version of the linked image.</p>
+
+<div>
+    <ul class="credits-list">
+    <!-- single credit  -->
+        <li class="credit">
+            <!-- inline fallback (always in DOM, hidden when JS enhances) -->
+            <div class="thumb">
+                <img class="thumb-inline"
+                    src=""
+                    alt=""
+                    width="40" height="24"
+                    loading="lazy" decoding="async">
+            </div>
+
+            <div class="meta">
+                <p>
+                    Photo by 
+                    <a class="creator" href=""
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        Creator Name
+                    </a>
+                    at 
+                    <a class="source" href="" 
+                        target="_blank" 
+                        rel="noopener noreferrer">
+                        Source Name
+                    </a>
+                    under 
+                    <a class="license" href="" 
+                        target="_blank" 
+                        rel="noopener noreferrer">
+                        License
+                    </a>
+                    .
+                </p>
+                <p class="small">
+                    <a class="source-link"
+                        href="" <!-- URL to original -->
+                        data-tooltip="" <!-- path to tooltip image -->
+                        aria-describedby="tip-desc"
+                        aria-haspopup="true" rel="noopener">
+                        View Original Here
+                    </a>
+                </p>
+            </div>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/src/gallery.njk b/src/gallery.njk
index 2e16e14..e74399e 100644
--- a/src/gallery.njk
+++ b/src/gallery.njk
@@ -7,7 +7,7 @@ stylesheet:
   - "/styles/base.css"
   - "/styles/header-footer.css"
   - "/styles/gallery.css"
-fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js"
+fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 isLandingPage: false
 pageScripts:
     - "/scripts/gallery-carousel.js"
diff --git a/src/index.njk b/src/index.njk
index 4d68687..6f6d0ca 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -7,7 +7,7 @@ stylesheet:
     - "/styles/base.css"
     - "/styles/header-footer.css"
     - "/styles/index.css"
-fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js"
+fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 isLandingPage: true
 pageScripts:
     - "/scripts/script.js"
diff --git a/src/scripts/tooltips.js b/src/scripts/tooltips.js
new file mode 100644
index 0000000..5398abe
--- /dev/null
+++ b/src/scripts/tooltips.js
@@ -0,0 +1,47 @@
+// JS for tooltip hover
+document.addEventListener("DOMContentLoaded", () => {
+    // Hide inline thumbs when JS is available
+    document.querySelectorAll(".thumb-inline").forEach(img => img.style.display = "none");
+
+    // Tooltip element
+    const tip = document.createElement("div");
+    tip.className = "thumb-tooltip";
+    document.body.appendChild(tip);
+
+    function positionTip(el) {
+        const rect = el.getBoundingClientRect();
+        const tipRect = tip.getBoundingClientRect();
+        let left = rect.left + window.scrollX;
+        if (left + tipRect.width > window.innerWidth) {
+            left = window.innerWidth - tipRect.width - 8; // small margin
+        }
+        tip.style.top = (rect.bottom + window.scrollY + 6) + "px";
+        tip.style.left = left + "px";
+    }
+
+
+    function show(e) {
+        const url = e.currentTarget.getAttribute("data-tooltip");
+        if (!url) return;
+
+        // Preload image to get natural size
+        const img = new Image();
+        img.onload = () => {
+        tip.style.width = img.naturalWidth + "px";
+        tip.style.height = img.naturalHeight + "px";
+        tip.style.backgroundImage = `url("${url}")`;
+        tip.style.display = "block";
+        positionTip(e.currentTarget);
+        };
+        img.src = url;
+    }
+
+    function hide() { tip.style.display = "none"; }
+
+    document.querySelectorAll("li.credit").forEach(item => {
+        item.addEventListener("mouseenter", show);
+        item.addEventListener("mouseleave", hide);
+        item.addEventListener("focusin", show);
+        item.addEventListener("focusout", hide);
+    });
+});
\ No newline at end of file
diff --git a/src/styles/credits.css b/src/styles/credits.css
new file mode 100644
index 0000000..872f2bf
--- /dev/null
+++ b/src/styles/credits.css
@@ -0,0 +1,49 @@
+/* CSS Style Rules for "Credits & Attributions" */
+.credits-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.credit {
+    display: flex;           /* thumb + text side by side */
+    align-items: flex-start;
+    gap: 0.5rem;             /* spacing between thumb and text */
+    margin-bottom: 1rem;
+}
+
+.thumb {
+  flex: 0 0 auto;          /* don’t stretch */
+}
+
+.thumb-inline {
+    display: block;          /* visible by default (no JS) */
+    max-width: 40px;         /* fallback size (from HTML attrs) */
+    height: auto;
+}
+
+.meta {
+    flex: 1 1 auto;
+    min-width: 0;            /* ensures text can wrap inside flexbox */
+    word-wrap: break-word;
+}
+
+.meta p {
+    margin: 0.25rem 0;
+}
+
+.meta .small {
+    font-size: 0.875rem;
+    color: #555;
+}
+
+.thumb-tooltip { /* background image is handled by JS */
+    position: absolute;
+    display: none;
+    background-repeat: no-repeat;
+    background-size: contain;   /* fit full image */
+    background-position: center;
+    border: 1px solid #ccc;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    z-index: 9999;
+}
\ No newline at end of file