dereklseitz/BloomValleyNursery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add dynamic page indicator to nav links.

Browse Source 
-  add {currentPage} to front matter of page templates
This commit is contained in:
Derek L. Seitz
2025-08-30 19:46:32 -05:00
parent c7e69de42c
commit 95280b5973
9 changed files with 37 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/_includes/footer.njk Normal file
View File

@@ -0,0 +1,104 @@
<!-- Footer Section -->
<footer role="contentinfo">
<div id="newsletter-container">
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
<form id="newsletter-form">
<input
type="email"
id="email-input"
aria-label="Enter your email to Subscribe"
placeholder="Subscribe@BloomValleyNursery.com"
/>
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
Subscribe Now!
</button>
</form>
</div>
<div id="footer-nav">
<ul>
<li><a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a></li>
<li><a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a></li>
<li><a href="/about/" {% if currentPage == 'about' %}class="current-page" aria-current="page"{% endif %}>About Us</a></li>
<li><a href="/community/" {% if currentPage == 'community' %}class="current-page" aria-current="page"{% endif %}>Community Events</a></li>
</ul>
</div>
<div id="social-media">
<p>Check us out on social media!</p>
<ul class="social-icons">
<li id="pinterest">
<a href="#" aria-label="Follow us on Pinterest"
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
<li id="facebook">
<a href="#" aria-label="Follow us on Facebook"
><i class="fa-brands fa-facebook fa-lg"></i
></a>
</li>
<li id="instagram">
<a href="#" aria-label="Follow us on Instagram"
><i class="fa-brands fa-instagram fa-lg"></i
></a>
</li>
<li id="twitter">
<a href="#" aria-label="Follow us on X (Twitter)"
><i class="fa-brands fa-square-x-twitter fa-lg"></i
></a>
</li>
<li id="youtube">
<a href="#" aria-label="View our Youtube channel"
><i class="fa-brands fa-youtube fa-lg"></i
></a>
</li>
</ul>
</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">
<div class="modal-content">
<span class="close-modal" id="alert-close-btn">&times;</span>
<p id="alert-message"></p>
<button id="alert-ok-button">OK</button>
</div>
</div>
<!-- Modal for Shopping Cart -->
<div id="cart-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal">&times;</span>
<h2>Your Shopping Cart</h2>
<ul id="cart-items"></ul> <!-- Dynamically populated -->
<p id="cart-total"></p> <!-- Sub-total will appear here -->
<div class="modal-buttons">
<button id="clear-cart-modal-btn">Clear Cart</button>
<button id="process-order-modal-btn">Process Order</button>
</div>
</div>
</div>
<!-- Modal for Item Added -->
<div id="item-added-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal" id="item-added-close">&times;</span>
<p id="item-added-message"></p> <!-- Dynamically set message -->
</div>
</div>
<!-- Confirmation Modal -->
<div id="confirmation-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal" id="confirmation-close-btn">&times;</span>
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
<button id="confirmation-confirm-btn">Confirm</button>
<button id="confirmation-close-btn">Close</button>
</div>
</div>
<!-- Final Confirmation Modal -->
<div id="final-confirmation-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal" id="final-confirmation-close-btn">&times;</span>
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
<button id="final-confirmation-close-btn">Close</button>
</div>
</div>