fedizinefest/scripts/zines.js

let zines = [
  /*  {
    "name": "",
    "site": "",
    "format": "",
    "blurb": ""
  },
*/
  {
    name: "Artcollisions",
    site: "https://vis.social/@artcollisions",
    format: "physical/digital",
    blurb: "Further cozy adventures of CC and friends, textile art characters",
  },
  {
    name: "Cammie",
    site: "https://worshipthesquid.tumblr.com/",
    format: "physical/digital",
    blurb:
      "Mortsafe is a little biro zine about fungal zombies, non-human or gestalt minds, and life continuing differently after death :)",
  },
  {
    name: "Ashley McQuaid",
    site: "eightofpentacles.com",
    format: "physical",
    blurb:
      "I am leaning towards making a miniature field guide of the birds, mammals, and plants that live on my favorite trail. Back and forth on whether I want to include some personal narrative but pen & pencil drawings of critters for sure",
  },
  {
    name: "xyzzy",
    site: "https://xyzzyzzyzx.xyz/",
    format: "digital",
    blurb:
      "a perzine about my experience in a conservative catholic high school, called “shut up & eat your dirt”",
  },
  {
    name: "Pesto Jaguar",
    site: "https://sunny.garden/@pestojaguar",
    format: "digital",
    blurb:
      "abstract, absurd, surreal, experimental?... Perhaps comics-adjacent or sciFi-adjacent?... some manner of weird zine, mainly images with some text like experimental prose or poetry, even?... Around 20 pages in A5. No 'AI' or image/text generation, just human made digital art.",
  },
  {
    name: "bouncinglime",
    format: "physical/digital",
    blurb:
      "four postcards printed on cardstock (physical) or for printing on cardstock (digital) in black-and-white that can be colored and otherwise decorated and sent out!",
  },
  {
    name: "lee",
    site: "https://leecat.art",
    format: "physical",
    blurb: "2 color hand-printed zine with pictures of my dog",
  },
  {
    name: "Em/mett",
    site: "https://proteanart.xyz",
    format: "physical/digital",
    blurb:
      "So You Want To Be A Pen Pal minizine. About being a pen pal for incarcerated folks! And beginner advocacy work!",
  },
  {
    name: "Mythical Type",
    site: "https://mythicaltype.com/zines/",
    format: "physical",
    blurb:
      "“Text Message Moods” is an 8-page mini zine that illustrates what text message conversations look like, depending on people’s moods. Hand-drawn, printed in color on white paper.",
  },
  {
    name: "Acin Fals",
    site: "https://shadowfals.carrd.co/",
    format: "digital",
    blurb:
      "romantic m/m flash fiction with a theme of transitions, seasons, and/or memories",
  },
  {
    name: "play in progress",
    site: "https://mastodon.art/@playinprogress",
    format: "physical/digital",
    blurb:
      "a fold-out formal experiment combining letter shapes and ink drawings",
  },
  {
    name: "riotmuffin",
    format: "physical/digital",
    blurb:
      "I’m gonna try to do that George Floyd uprising alternate history I was thinking about last time, but I might also do something else. In any case, it’ll be SHORTER than last years honker lol",
  },
  {
    name: "Léa V.T.",
    site: "https://mastodon.art/@leavt",
    format: "physical/digital",
    blurb: `I made a small comic this summer and i'd like to print it in zine form with bonus illustrations and prep sketches. It's about a bunch of kids living in a dieselpunk junkyard racing wacky vehicles. Friends become enemies and enemies become friends, lots of vroom vroom. <a href="https://mastodon.art/@leavt/113056897528979869">preview</a>`,
  },
  {
    name: "Aaron El Sabrout",
    site: "https://toreachpoise.itch.io",
    format: "physical/digital",
    blurb:
      "new collection of poetry on nature, leftist politics, and transness!",
  },
  {
    name: "goblin jane",
    site: "https://thewellandthetree.com/",
    format: "physical/digital",
    blurb:
      "tiny tales of wandering thru interdimensional portals, meeting new friends big and small, and making stone soup.",
  },
  {
    name: "Limnetic Villains",
    site: "https://limneticvillains.bandcamp.com",
    format: "digital",
    blurb:
      "A fake 1970s punk zine, including interviews, photos, reviews, fake adverts for products and bands that don't exist, in the style of the time.",
  },
  {
    name: "Wetdryvac",
    site: "https://wetdryvac.net",
    format: "digital",
    blurb:
      "The Vac is a contract/consent ethicist with forays into art, music, literature, and whatever else strikes its fancy. This usually means being somewhere under a cat.",
  },
  {
    name: "Evel",
    site: "https://evel.life",
    format: "digital",
    blurb: "About severe disability with a bit extra on being a caregiver",
  },
];

function makeZine({ name, blurb, format, site, fedi }) {
  let zine = document.createElement("li");

  let h2 = document.createElement("h2");
  if (site) {
    let a = document.createElement("a");
    a.innerHTML = name;
    a.href = site;
    h2.append(a);
  } else {
    h2.innerHTML = name;
  }
  zine.append(h2);

  let p = document.createElement("p");
  p.innerHTML = " is making a " + format + " zine:";
  zine.append(p);

  let bq = document.createElement("blockquote");
  let bqP = document.createElement("p");
  bqP.innerHTML = blurb;
  bq.append(bqP);
  zine.append(bq);

  return zine;
}

function makeZinePage(zines) {
  let zineContainer = document.getElementById("zine-container");

  for (let i = 0; i < zines.length; i++) {
    zineContainer.append(makeZine(zines[i]));
  }

  let zineCounter = document.getElementById("zine-count");
  let total = zines.length;
  let physical = zines.filter(
    (zine) => zine.format == "physical" || zine.format == "physical/digital"
  ).length;
  let digital = zines.filter(
    (zine) => zine.format == "digital" || zine.format == "physical/digital"
  ).length;

  let p = document.createElement("p");
  p.innerHTML =
    total +
    " artists. " +
    physical +
    " physical zines. " +
    digital +
    " digital zines.";
  zineCounter.append(p);
}

fetch("./zines2025.json")
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => makeZinePage(data))
  .catch((error) => console.error("Failed to fetch data:", error));