big reshuffling

assets/scripts/artists.js

@@ -0,0 +1,64 @@
+const makeArtist = function(artist) {
+  let container = document.createElement("div");
+  container.classList.add("artist");
+  container.id = artist.id;
+
+  /* artist img */
+  let imgDiv = document.createElement("div");
+  imgDiv.classList.add("fit-contain");
+  let img = document.createElement("img");
+  img.src = artist.img.src;
+  img.alt = artist.img.alt;
+  imgDiv.append(img);
+  container.append(imgDiv);
+
+  /* artist name */
+  let h3 = document.createElement("h3");
+  h3.innerHTML = artist.name;
+  container.append(h3);
+
+  /* artist bio */
+  let descDiv = document.createElement("div");
+  descDiv.classList.add("description");
+  let bio = document.createElement("p");
+  bio.innerHTML = artist.bio;
+  descDiv.append(bio);
+  
+  /* artist contact info */
+  let contacts = document.createElement("p");
+  for (let i = 0; i < artist.contact.length; i++) {
+    let a = document.createElement("a");
+    a.href = artist.contact[i].href;
+    a.innerHTML = artist.contact[i].title;
+    a.target = "_blank";
+    contacts.append(a);
+
+    if (i !== artist.contact.length - 1) contacts.append(" ● ");
+  }
+  descDiv.append(contacts);
+
+  container.append(descDiv);
+  return container;
+}
+
+let artistContainer = document.getElementById("artists");
+
+const makeArtistPage = function(artists) {
+  for (const artist of artists)
+    artistContainer.append(makeArtist(artist));
+}
+
+let script = document.currentScript;
+let artistsfile = script.dataset.artists;
+
+fetch(artistsfile)
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error(`HTTP error, status = ${response.status}`);
+    }
+    return response.json();
+  })
+  .then((artists) => makeArtistPage(artists))
+  .catch((error) => {
+    console.log(`Error: ${error.message}`);
+  });

assets/scripts/nav.js

@@ -0,0 +1,65 @@
+/* Top nav */
+const navItems = [
+  {
+    href: "/about/",
+    title: "ⓘ about"
+  },
+  {
+    href: "/events/",
+    title: "🗓 events"
+  }
+];
+
+const populateNav = function() {
+  let nav = document.getElementById("top-nav");
+  let path = window.location.pathname;
+
+  let home = document.createElement("a");
+  home.href = "/";
+  home.innerHTML = "↩ home";
+  if (path === "/") home.id = "current-page";
+  nav.append(home);
+
+  let ul = document.createElement("ul");
+
+  for (const item of navItems) {
+    let li = document.createElement("li");
+    let a = document.createElement("a");
+    a.href = item.href;
+    a.innerHTML = item.title;
+
+    if (item.href === path) a.id = "current-page";
+
+    li.append(a);
+    ul.append(li);
+  }
+
+  nav.append(ul);
+}
+
+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 2026</p>
+`
+
+const populateFooter = function() {
+  let footer = document.getElementById("footer");
+  footer.innerHTML = footerHTML;
+}
+
+populateFooter();