A searchable timeline

dxnn · dxnn · commit abb08feb10de · 2025-04-26T13:21:10.000-04:00
diff --git a/docs/search/index.html b/docs/search/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Search TorontoJS Events</title>
+  <style>
+    .date {
+      font-family: monospace;
+    }
+    .event_details {
+      background-color: rgb(247, 253, 255);
+      margin: 2em;
+      padding: 1em;
+    }
+  </style>
+</head>
+<body>
+  <div><p>Search: <input id="search" /></p></div>
+  <div><ul id="timeline"></ul></div>
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/docs/search/main.js b/docs/search/main.js
@@ -0,0 +1,57 @@
+const el = document.getElementById.bind(document)
+const events = []
+const renderAll = throttle(renderEvents)
+
+function throttle(fun, wait = 100) { // throttle but call it again at the end
+  let throttled
+  return function(...args) {
+    if(throttled) return false
+    throttled = true
+    setTimeout(() => { throttled = false; fun(...args) }, wait)
+    fun(...args)
+  }
+}
+
+function renderEvents() {
+  let search = el('search').value.toLowerCase()
+  let str = ''
+  events.filter(e => (e.title+e.details).toLowerCase().includes(search)).forEach(event => {
+    str += eventTemplate(event)
+  })
+  el('timeline').innerHTML = str
+}
+
+function eventTemplate(event) {
+  return `
+    <details>
+      <summary><span class="date">${new Date(event.startDate).toLocaleString('en-CA', {year: 'numeric', month: 'short', day: '2-digit'})}</span> :: ${event.title}</summary>
+      <p class="tags">Tags: ${event.tags.join(', ')}</p>
+      <p class="hosts">Hosts: ${event.hosts.join(', ')}</p>
+      <p class="image">${event.image ? `<img src="${event.image}">` : ''}</p>
+      <div class="event_details">${event.details.replace(/\n/g, '<br>')}</div>
+    </details>`
+}
+
+function fetchAll(data) {
+  data.forEach(eventStub => {
+    const srcPath = `events/${eventStub.file}`
+    fetchJSON(srcPath, event => {
+      event.time = (new Date(event.startDate)).getTime()
+      events.push(event)
+      events.sort((a, b) => b.time - a.time) // wasteful
+      renderAll()
+    })
+  })
+}
+
+function fetchJSON(srcPath, callback) {
+  const prefix = 'https://raw.githubusercontent.com/torontojs/historical-archive/main/src/data/'
+  fetch(prefix + srcPath)
+  .then(resp => resp.json())
+  .then(data => callback(data))
+  .catch(err => console.error('Fetch went awry', err, srcPath, callback))
+}
+
+// init
+fetchJSON('directory.json', fetchAll)
+el('search').addEventListener('input', renderAll)
