feat: Add Credits & Attribution page

- add credits.njk
- add credits.css
- add tooltips.js
- add link in footer

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+_site/

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "BloomValleyNursery",
+  "name": "bloomvalleydemo.dlseitz.dev",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

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">

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"

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"

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>

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"

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"

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);
+    });
+});

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;
+}