inherentlee/beall-greenhouses-market
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto populate nav and footer

Browse Source
This commit is contained in:
Lee Cattarin
2025-12-28 12:41:27 -08:00
parent 09b1d2975b
commit 5ec64cfda7
4 changed files with 72 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
2025/solstice/index.html
View File

@ -15,6 +15,10 @@
<meta property="og:description" content="Solstice Market at the Beall Greenhouses" /> <meta property="og:description" content="Solstice Market at the Beall Greenhouses" />
<meta property="og:image" content="/img/logo-light.png" /> <meta property="og:image" content="/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" /> <meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/scripts/nav.js" defer></script>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="/styles/main.css"> <link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/nav.css"> <link rel="stylesheet" href="/styles/nav.css">
@ -23,10 +27,7 @@
<body> <body>
<div id="content"> <div id="content">
<header> <header>
<nav> <nav id="top-nav"><!-- auto-populated by nav.js --></nav>
<a href="/">↩ back home</a>
<a href="/directory">🧺 all markets</a>
</nav>
<img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme"> <img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme"> <img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
@ -122,21 +123,6 @@
</div> </div>
</main> </main>
</div> </div>
<footer> <footer id="footer"><!-- auto-populated by nav.js --></footer>
<div id="contacts">
<p>
Website questions or feedback?
<a href="mailto:lee.cattarin@gmail.com?cc=montanahawke@gmail.com&subject=Beall%20Greenhouses%20Market">
email Lee
</a>
</p>
<p>Market questions?
<a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses%20Market">
email Hawke
</a>
</p>
</div>
<p>brought to you in 2025</p>
</footer>
</body> </body>
</html> </html>

26
directory/index.html
View File

@ -15,6 +15,10 @@
<meta property="og:description" content="Directory | Markets at the Beall Greenhouses" /> <meta property="og:description" content="Directory | Markets at the Beall Greenhouses" />
<meta property="og:image" content="/img/logo-light.png" /> <meta property="og:image" content="/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" /> <meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/scripts/nav.js" defer></script>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="/styles/main.css"> <link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/nav.css"> <link rel="stylesheet" href="/styles/nav.css">
@ -24,10 +28,7 @@
<body> <body>
<div id="content"> <div id="content">
<header> <header>
<nav> <nav id="top-nav"><!-- auto-populated by nav.js --></nav>
<a href="/">↩ back home</a>
<a id="current-page" href="/directory">🧺 all markets</a>
</nav>
<img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme"> <img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme"> <img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
@ -46,21 +47,6 @@
</main> </main>
</div> </div>
<footer> <footer id="footer"><!-- auto-populated by nav.js --></footer>
<div id="contacts">
<p>
Website questions or feedback?
<a href="mailto:lee.cattarin@gmail.com?cc=montanahawke@gmail.com&subject=Beall%20Greenhouses%20Market">
email Lee
</a>
</p>
<p>Market questions?
<a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses%20Market">
email Hawke
</a>
</p>
</div>
<p>brought to you in 2026</p>
</footer>
</body> </body>
</html> </html>

25
index.html
View File

@ -15,6 +15,10 @@
<meta property="og:description" content="Markets at the Beall Greenhouses" /> <meta property="og:description" content="Markets at the Beall Greenhouses" />
<meta property="og:image" content="/img/logo-light.png" /> <meta property="og:image" content="/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" /> <meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/scripts/nav.js" defer></script>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="/styles/main.css"> <link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/nav.css"> <link rel="stylesheet" href="/styles/nav.css">
@ -23,9 +27,7 @@
<body> <body>
<div id="content"> <div id="content">
<header> <header>
<nav> <nav id="top-nav">
<a id="current-page" href="/">↩ back home</a>
<a href="/directory">🧺 all markets</a>
</nav> </nav>
<img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme"> <img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
@ -38,21 +40,6 @@
<p>We've just completed a successful <a href="/2025/solstice">Solstice 2025</a> market. Stay tuned for more!</p> <p>We've just completed a successful <a href="/2025/solstice">Solstice 2025</a> market. Stay tuned for more!</p>
</main> </main>
</div> </div>
<footer> <footer id="footer"><!-- auto-populated by nav.js --></footer>
<div id="contacts">
<p>
Website questions or feedback?
<a href="mailto:lee.cattarin@gmail.com?cc=montanahawke@gmail.com&subject=Beall%20Greenhouses%20Market">
email Lee
</a>
</p>
<p>Market questions?
<a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses%20Market">
email Hawke
</a>
</p>
</div>
<p>brought to you in 2026</p>
</footer>
</body> </body>
</html> </html>

54
scripts/nav.js Normal file
View File

@ -0,0 +1,54 @@
/* Top nav */
const navItems = [
{
href: "/",
name: "↩ back home"
},
{
href: "/directory/",
name: "🧺 all markets"
}
];
const populateNav = function() {
let nav = document.getElementById("top-nav");
let path = window.location.pathname;
console.log(path);
for (const item of navItems) {
let a = document.createElement("a");
a.href = item.href;
a.innerHTML = item.name;
if (item.href === path) a.id = "current-page";
nav.append(a);
}
}
populateNav();
/* Footer */
const footerHTML = `
<div id="contacts">
<p>
Website questions or feedback?
<a href="mailto:lee.cattarin@gmail.com?cc=montanahawke@gmail.com&subject=Beall%20Greenhouses%20Market">
email Lee
</a>
</p>
<p>Market questions?
<a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses%20Market">
email Hawke
</a>
</p>
</div>
<p>brought to you in 2025</p>
`
const populateFooter = function() {
let footer = document.getElementById("footer");
footer.innerHTML = footerHTML;
}
populateFooter();