abqari 1.1.0

data/app/assets/js/carousel.js

@@ -0,0 +1,39 @@
+// Vanilla-JS carousel for the _carousel partial. No Bootstrap dependency,
+// no inline scripts — works under the strict 'self'-only CSP.
+//
+// Each `[data-carousel]` element has slides marked `.carousel__slide`
+// (one with `.is-active` initially), prev/next buttons, and a position
+// counter. Arrow keys also navigate when the carousel has focus.
+(function () {
+  document.querySelectorAll('[data-carousel]').forEach(initCarousel);
+
+  function initCarousel(root) {
+    var slides = Array.prototype.slice.call(root.querySelectorAll('.carousel__slide'));
+    if (slides.length < 2) return;
+
+    var counter = root.querySelector('[data-carousel-current]');
+    var current = Math.max(0, slides.findIndex(function (s) { return s.classList.contains('is-active'); }));
+
+    function show(index) {
+      var next = (index + slides.length) % slides.length;
+      slides[current].classList.remove('is-active');
+      slides[current].setAttribute('aria-hidden', 'true');
+      slides[next].classList.add('is-active');
+      slides[next].setAttribute('aria-hidden', 'false');
+      current = next;
+      if (counter) counter.textContent = String(current + 1);
+    }
+
+    var prevBtn = root.querySelector('[data-carousel-prev]');
+    var nextBtn = root.querySelector('[data-carousel-next]');
+    if (prevBtn) prevBtn.addEventListener('click', function () { show(current - 1); });
+    if (nextBtn) nextBtn.addEventListener('click', function () { show(current + 1); });
+
+    // Keyboard navigation when the carousel (or anything inside) has focus.
+    root.setAttribute('tabindex', '0');
+    root.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowLeft')  { e.preventDefault(); show(current - 1); }
+      if (e.key === 'ArrowRight') { e.preventDefault(); show(current + 1); }
+    });
+  }
+})();

data/app/assets/js/contact-button.js

@@ -0,0 +1,28 @@
+// Click handler for the contact button. Reassembles the email address
+// from data-user + data-domain attributes on click and opens the user's
+// mail client via mailto:.
+//
+// Defence against email harvesters: the full address never appears as a
+// single string in the page HTML, and the `mailto:` prefix isn't present
+// either — both are constructed in memory after the user gestures, so a
+// bot scraping static HTML can't reconstruct anything to spam.
+//
+// Loaded with `defer` from _contact_button.html.erb. Uses event delegation
+// so a layout that renders multiple buttons still works with one handler.
+(function () {
+  document.addEventListener('click', function (e) {
+    var btn = e.target.closest('.contact-button[data-user][data-domain]');
+    if (!btn) return;
+    e.preventDefault();
+    var user = btn.dataset.user;
+    var domain = btn.dataset.domain;
+    if (user && domain) {
+      var href = 'mailto:' + user + '@' + domain;
+      var subject = btn.dataset.subject;
+      if (subject) {
+        href += '?subject=' + encodeURIComponent(subject);
+      }
+      window.location.href = href;
+    }
+  });
+})();

data/app/assets/js/random-pool.js

@@ -0,0 +1,44 @@
+/* random-pool.js — runtime randomness for static sites.
+ *
+ * Used by the "From the archive" (random_post) and "From the gallery"
+ * (random_photo) home modules to pick a different card on each page
+ * load. The server renders a small pool of candidates inside each
+ * `[data-random-pool]` container, with all but the first marked
+ * `hidden`. This script:
+ *
+ *   1. Picks one random child of each pool to reveal, hides the rest.
+ *   2. Runs once on initial DOM ready.
+ *   3. Re-runs on the `pageshow` event so back/forward cache restores
+ *      also re-roll instead of showing the same card the user just
+ *      saw.
+ *
+ * Progressive enhancement: with JS disabled, the first child of the
+ * pool stays visible (the server-rendered fallback). No layout shift
+ * — the pool's height is determined by the visible card, not the pool
+ * itself, since hidden children take no space.
+ */
+(function () {
+  function pick(pool) {
+    var items = pool.children;
+    if (items.length <= 1) return;
+    var chosen = Math.floor(Math.random() * items.length);
+    for (var i = 0; i < items.length; i++) {
+      items[i].hidden = (i !== chosen);
+    }
+  }
+
+  function refresh() {
+    var pools = document.querySelectorAll('[data-random-pool]');
+    for (var i = 0; i < pools.length; i++) pick(pools[i]);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', refresh);
+  } else {
+    refresh();
+  }
+  // `pageshow` fires on initial load AND on back/forward cache
+  // restore — the latter is exactly when a static page would
+  // otherwise show the same card the user just navigated away from.
+  window.addEventListener('pageshow', refresh);
+})();

data/app/assets/js/search-init.js

@@ -0,0 +1,11 @@
+// Initialises the Pagefind UI inside #abqari-search. The pagefind-ui.js
+// runtime is loaded earlier in the document, so PagefindUI is defined by
+// the time this runs. Loaded with `defer` so it executes after parsing.
+window.addEventListener('DOMContentLoaded', function () {
+  if (typeof PagefindUI === 'undefined') return;
+  new PagefindUI({
+    element: '#abqari-search',
+    showSubResults: true,
+    showImages: false
+  });
+});

data/app/assets/js/theme-toggle.js

@@ -0,0 +1,39 @@
+// Click handler for the theme toggle. The bootstrap script in <head>
+// already hydrated `data-theme` from localStorage before render to avoid
+// a flash of the wrong theme; this script handles the user gesture and
+// keeps the button's aria-pressed state in sync with the active theme.
+//
+// Loaded with `defer` so it attaches after parsing. The bootstrap is
+// what prevents FOUC; this script handles state changes.
+(function () {
+  function isDark() {
+    var t = document.documentElement.getAttribute('data-theme');
+    if (t === 'dark') return true;
+    if (t === 'light') return false;
+    // No explicit choice yet — fall back to the system preference.
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  function syncPressed() {
+    var pressed = isDark() ? 'true' : 'false';
+    document.querySelectorAll('[data-theme-toggle]').forEach(function (btn) {
+      btn.setAttribute('aria-pressed', pressed);
+    });
+  }
+
+  function flip() {
+    var next = isDark() ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    try { localStorage.setItem('theme', next); } catch (e) {}
+    syncPressed();
+  }
+
+  // Initial sync — the server-rendered HTML had aria-pressed="false" as a
+  // default; correct it to match the resolved theme as soon as we run.
+  syncPressed();
+
+  document.addEventListener('click', function (e) {
+    var trigger = e.target.closest('[data-theme-toggle]');
+    if (trigger) flip();
+  });
+})();

data/app/assets/js/viz-tag-bubble.js

@@ -0,0 +1,108 @@
+// Tag Bubble — circle pack of tags sized by post count.
+// Loads /visualizations/tag-bubble.json (pre-built at site build time)
+// and renders into #viz-container. Colors come from a fixed palette;
+// stroke and text use currentColor so light/dark themes flow through.
+(function () {
+  'use strict';
+
+  var PALETTE = ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f',
+                 '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ac',
+                 '#d37295', '#fabfd2'];
+
+  document.addEventListener('DOMContentLoaded', function () {
+    var container = document.getElementById('viz-container');
+    var loading = document.getElementById('viz-loading');
+    var tooltip = document.getElementById('viz-tooltip');
+    if (!container) return;
+
+    fetch('/visualizations/tag-bubble.json', { cache: 'no-cache' })
+      .then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
+      .then(function (data) { render(data, container, loading, tooltip); })
+      .catch(function (e) {
+        if (loading) loading.textContent = 'Failed to load: ' + e.message;
+      });
+  });
+
+  function render(data, container, loading, tooltip) {
+    if (loading) loading.style.display = 'none';
+
+    if (!data.tags || data.tags.length === 0) {
+      container.innerHTML = '<div class="viz-empty"><p>No tags yet — add posts with <code>tags:</code> in front matter.</p></div>';
+      return;
+    }
+
+    var rect = container.getBoundingClientRect();
+    var width = rect.width;
+    var height = Math.max(rect.height, 400);
+    var size = Math.min(width, height);
+
+    var svg = d3.select(container)
+      .append('svg')
+      .attr('viewBox', [0, 0, width, height])
+      .attr('role', 'img')
+      .attr('aria-label', 'Tag bubble chart showing ' + data.tags.length + ' tags sized by post count');
+
+    var g = svg.append('g')
+      .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
+
+    var root = d3.hierarchy({ children: data.tags })
+      .sum(function (d) { return d.note_count || 0; })
+      .sort(function (a, b) { return b.value - a.value; });
+
+    d3.pack().size([size * 0.9, size * 0.9]).padding(6)(root);
+
+    var node = g.selectAll('g')
+      .data(root.leaves())
+      .join('g')
+      .attr('transform', function (d) {
+        return 'translate(' + (d.x - size * 0.45) + ',' + (d.y - size * 0.45) + ')';
+      });
+
+    node.append('circle')
+      .attr('r', function (d) { return d.r; })
+      .attr('fill', function (d, i) { return PALETTE[i % PALETTE.length]; })
+      .attr('fill-opacity', 0.7)
+      .attr('stroke', 'currentColor')
+      .attr('stroke-opacity', 0.3)
+      .style('cursor', 'pointer')
+      .on('mouseenter', function (event, d) {
+        if (!tooltip) return;
+        tooltip.innerHTML = '<strong>' + escapeHtml(d.data.name) + '</strong><br>' +
+                            d.data.note_count + ' post' + (d.data.note_count === 1 ? '' : 's');
+        tooltip.style.display = 'block';
+      })
+      .on('mousemove', function (event) {
+        if (!tooltip) return;
+        tooltip.style.left = (event.pageX + 12) + 'px';
+        tooltip.style.top = (event.pageY + 12) + 'px';
+      })
+      .on('mouseleave', function () {
+        if (tooltip) tooltip.style.display = 'none';
+      })
+      .on('click', function (event, d) {
+        window.location = '/tags/' + slugify(d.data.name) + '/';
+      });
+
+    node.append('text')
+      .attr('dy', '0.3em')
+      .attr('text-anchor', 'middle')
+      .attr('pointer-events', 'none')
+      .style('font-size', function (d) {
+        return Math.max(8, Math.min(d.r / 2.5, 18)) + 'px';
+      })
+      .style('fill', 'currentColor')
+      .text(function (d) {
+        return d.r > 22 ? d.data.name : '';
+      });
+  }
+
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+
+  function slugify(s) {
+    return String(s).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+  }
+})();

data/app/assets/js/viz-tag-cooccurrence.js

@@ -0,0 +1,125 @@
+// Tag Co-occurrence — chord diagram of which tags appear together.
+// Loads /visualizations/tag-cooccurrence.json. Each arc on the outer ring
+// is a tag; ribbons between arcs show how many posts share both tags.
+(function () {
+  'use strict';
+
+  var PALETTE = ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f',
+                 '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ac',
+                 '#d37295', '#fabfd2'];
+
+  document.addEventListener('DOMContentLoaded', function () {
+    var container = document.getElementById('viz-container');
+    var loading = document.getElementById('viz-loading');
+    var tooltip = document.getElementById('viz-tooltip');
+    if (!container) return;
+
+    fetch('/visualizations/tag-cooccurrence.json', { cache: 'no-cache' })
+      .then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
+      .then(function (data) { render(data, container, loading, tooltip); })
+      .catch(function (e) {
+        if (loading) loading.textContent = 'Failed to load: ' + e.message;
+      });
+  });
+
+  function render(data, container, loading, tooltip) {
+    if (loading) loading.style.display = 'none';
+
+    if (!data.tags || data.tags.length < 2) {
+      container.innerHTML = '<div class="viz-empty"><p>Need at least two tags with overlap to render a chord diagram.</p></div>';
+      return;
+    }
+
+    // Filter out tags that never co-occur with anything (otherwise they
+    // appear as solo arcs with no ribbons, which is just visual noise).
+    var keep = data.tags.map(function (_, i) {
+      return data.matrix[i].some(function (v, j) { return v > 0 && i !== j; });
+    });
+    var tags = data.tags.filter(function (_, i) { return keep[i]; });
+    var matrix = data.matrix
+      .filter(function (_, i) { return keep[i]; })
+      .map(function (row) { return row.filter(function (_, j) { return keep[j]; }); });
+
+    if (tags.length < 2) {
+      container.innerHTML = '<div class="viz-empty"><p>No tag co-occurrences yet. Tag posts with multiple tags to see overlap here.</p></div>';
+      return;
+    }
+
+    var rect = container.getBoundingClientRect();
+    var width = rect.width;
+    var height = Math.max(rect.height, 500);
+    var outerRadius = Math.min(width, height) * 0.5 - 80;
+    var innerRadius = outerRadius - 12;
+
+    var svg = d3.select(container)
+      .append('svg')
+      .attr('viewBox', [-width / 2, -height / 2, width, height])
+      .attr('role', 'img')
+      .attr('aria-label', 'Chord diagram of ' + tags.length + ' tags');
+
+    var chord = d3.chord().padAngle(0.04).sortSubgroups(d3.descending);
+    var chords = chord(matrix);
+
+    var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
+    var ribbon = d3.ribbon().radius(innerRadius);
+
+    var color = function (i) { return PALETTE[i % PALETTE.length]; };
+
+    // Outer arcs (tags)
+    var group = svg.append('g').selectAll('g').data(chords.groups).join('g');
+
+    group.append('path')
+      .attr('fill', function (d) { return color(d.index); })
+      .attr('stroke', 'currentColor')
+      .attr('stroke-opacity', 0.2)
+      .attr('d', arc)
+      .style('cursor', 'pointer')
+      .on('click', function (event, d) {
+        window.location = '/tags/' + slugify(tags[d.index]) + '/';
+      });
+
+    group.append('text')
+      .each(function (d) { d.angle = (d.startAngle + d.endAngle) / 2; })
+      .attr('dy', '0.35em')
+      .attr('transform', function (d) {
+        return 'rotate(' + (d.angle * 180 / Math.PI - 90) + ') ' +
+               'translate(' + (outerRadius + 8) + ') ' +
+               (d.angle > Math.PI ? 'rotate(180)' : '');
+      })
+      .attr('text-anchor', function (d) { return d.angle > Math.PI ? 'end' : 'start'; })
+      .style('font-size', '11px')
+      .style('fill', 'currentColor')
+      .text(function (d) { return tags[d.index]; });
+
+    // Inner ribbons (co-occurrences)
+    svg.append('g').attr('fill-opacity', 0.6)
+      .selectAll('path').data(chords).join('path')
+      .attr('d', ribbon)
+      .attr('fill', function (d) { return color(d.source.index); })
+      .attr('stroke', 'currentColor')
+      .attr('stroke-opacity', 0.15)
+      .on('mouseenter', function (event, d) {
+        if (!tooltip) return;
+        tooltip.innerHTML = '<strong>' + escapeHtml(tags[d.source.index]) +
+                            '</strong> ↔ <strong>' + escapeHtml(tags[d.target.index]) + '</strong><br>' +
+                            d.source.value + ' shared post' + (d.source.value === 1 ? '' : 's');
+        tooltip.style.display = 'block';
+      })
+      .on('mousemove', function (event) {
+        if (!tooltip) return;
+        tooltip.style.left = (event.pageX + 12) + 'px';
+        tooltip.style.top = (event.pageY + 12) + 'px';
+      })
+      .on('mouseleave', function () { if (tooltip) tooltip.style.display = 'none'; });
+  }
+
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+
+  function slugify(s) {
+    return String(s).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+  }
+})();

data/app/assets/js/viz-topic-constellation.js

@@ -0,0 +1,142 @@
+// Topic Constellation — force-directed graph of posts connected by shared tags.
+// Loads /visualizations/topic-constellation.json. Each node is a post; links
+// connect posts that share at least one tag, with thickness proportional to
+// the number of shared tags. Drag to explore; click a node to navigate.
+(function () {
+  'use strict';
+
+  var PALETTE = ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f',
+                 '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ac',
+                 '#d37295', '#fabfd2'];
+
+  document.addEventListener('DOMContentLoaded', function () {
+    var container = document.getElementById('viz-container');
+    var loading = document.getElementById('viz-loading');
+    var tooltip = document.getElementById('viz-tooltip');
+    if (!container) return;
+
+    fetch('/visualizations/topic-constellation.json', { cache: 'no-cache' })
+      .then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
+      .then(function (data) { render(data, container, loading, tooltip); })
+      .catch(function (e) {
+        if (loading) loading.textContent = 'Failed to load: ' + e.message;
+      });
+  });
+
+  function render(data, container, loading, tooltip) {
+    if (loading) loading.style.display = 'none';
+
+    if (!data.nodes || data.nodes.length === 0) {
+      container.innerHTML = '<div class="viz-empty"><p>No posts yet — write some posts and tag them to populate the constellation.</p></div>';
+      return;
+    }
+
+    // Color each node by its first tag for visual grouping. Posts without
+    // tags get a neutral grey.
+    var tagColor = {};
+    var nextColor = 0;
+    data.nodes.forEach(function (n) {
+      var first = (n.tags || [])[0];
+      if (first && !(first in tagColor)) {
+        tagColor[first] = PALETTE[nextColor % PALETTE.length];
+        nextColor += 1;
+      }
+    });
+
+    var rect = container.getBoundingClientRect();
+    var width = rect.width;
+    var height = Math.max(rect.height, 500);
+
+    var svg = d3.select(container)
+      .append('svg')
+      .attr('viewBox', [-width / 2, -height / 2, width, height])
+      .attr('role', 'img')
+      .attr('aria-label', 'Topic constellation: ' + data.nodes.length + ' posts connected by shared tags')
+      .style('cursor', 'grab');
+
+    var linksLayer = svg.append('g').attr('stroke', 'currentColor').attr('stroke-opacity', 0.3);
+    var nodesLayer = svg.append('g');
+
+    // Defensive copies — d3.force mutates these.
+    var nodes = data.nodes.map(function (n) { return Object.assign({}, n); });
+    var links = data.links.map(function (l) { return Object.assign({}, l); });
+
+    var maxWeight = d3.max(links, function (l) { return l.weight; }) || 1;
+
+    var simulation = d3.forceSimulation(nodes)
+      .force('link', d3.forceLink(links).id(function (d) { return d.id; }).distance(70).strength(0.2))
+      .force('charge', d3.forceManyBody().strength(-180))
+      .force('center', d3.forceCenter(0, 0))
+      .force('collide', d3.forceCollide(14));
+
+    var link = linksLayer.selectAll('line').data(links).join('line')
+      .attr('stroke-width', function (d) { return Math.max(1, d.weight * 1.5); });
+
+    var node = nodesLayer.selectAll('g').data(nodes).join('g').style('cursor', 'pointer');
+
+    node.append('circle')
+      .attr('r', 8)
+      .attr('fill', function (d) {
+        var first = (d.tags || [])[0];
+        return first ? tagColor[first] : '#999';
+      })
+      .attr('fill-opacity', 0.85)
+      .attr('stroke', 'currentColor')
+      .attr('stroke-opacity', 0.4)
+      .attr('stroke-width', 1.5);
+
+    node.append('text')
+      .attr('dx', 12)
+      .attr('dy', 4)
+      .style('font-size', '11px')
+      .style('fill', 'currentColor')
+      .style('pointer-events', 'none')
+      .text(function (d) { return truncate(d.title, 32); });
+
+    node.on('mouseenter', function (event, d) {
+        if (!tooltip) return;
+        tooltip.innerHTML = '<strong>' + escapeHtml(d.title) + '</strong>' +
+          (d.tags && d.tags.length ? '<br>tags: ' + d.tags.map(escapeHtml).join(', ') : '');
+        tooltip.style.display = 'block';
+      })
+      .on('mousemove', function (event) {
+        if (!tooltip) return;
+        tooltip.style.left = (event.pageX + 12) + 'px';
+        tooltip.style.top = (event.pageY + 12) + 'px';
+      })
+      .on('mouseleave', function () {
+        if (tooltip) tooltip.style.display = 'none';
+      })
+      .on('click', function (event, d) { window.location = d.id; })
+      .call(d3.drag()
+        .on('start', function (event, d) {
+          if (!event.active) simulation.alphaTarget(0.3).restart();
+          d.fx = d.x; d.fy = d.y;
+        })
+        .on('drag', function (event, d) { d.fx = event.x; d.fy = event.y; })
+        .on('end', function (event, d) {
+          if (!event.active) simulation.alphaTarget(0);
+          d.fx = null; d.fy = null;
+        }));
+
+    simulation.on('tick', function () {
+      link
+        .attr('x1', function (d) { return d.source.x; })
+        .attr('y1', function (d) { return d.source.y; })
+        .attr('x2', function (d) { return d.target.x; })
+        .attr('y2', function (d) { return d.target.y; });
+      node.attr('transform', function (d) { return 'translate(' + d.x + ',' + d.y + ')'; });
+    });
+  }
+
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+
+  function truncate(s, n) {
+    s = String(s);
+    return s.length <= n ? s : s.slice(0, n - 1) + '…';
+  }
+})();

data/app/icons/bluesky.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M5.6 3.3C8.36 5.36 11.32 9.55 12.4 11.8c1.08-2.25 4.04-6.44 6.8-8.5C21.18 1.83 24 0.5 24 3.71c0 .64-.37 5.4-.59 6.17-.74 2.69-3.48 3.37-5.93 2.96 4.27.72 5.36 3.13 3.01 5.54-4.46 4.58-6.41-1.15-6.91-2.62-.09-.27-.13-.4-.13-.29 0-.11-.05.02-.13.29-.5 1.47-2.45 7.2-6.91 2.62-2.35-2.41-1.26-4.82 3.01-5.54-2.45.41-5.19-.27-5.93-2.96C0.27 9.11-.1 4.35-.1 3.71c0-3.21 2.82-1.88 5.7.59z" transform="translate(0.1 0.5)"/>
+</svg>

data/app/icons/github.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55 0-.27-.01-1.18-.02-2.14-3.2.7-3.88-1.36-3.88-1.36-.52-1.34-1.28-1.7-1.28-1.7-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.45-2.27 1.18-3.07-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.17a10.96 10.96 0 0 1 5.74 0c2.19-1.48 3.15-1.17 3.15-1.17.62 1.57.23 2.73.11 3.02.74.8 1.18 1.82 1.18 3.07 0 4.4-2.69 5.37-5.25 5.65.41.36.78 1.06.78 2.13 0 1.54-.01 2.78-.01 3.16 0 .31.21.67.8.55C20.71 21.39 24 17.08 24 12 24 5.65 18.85.5 12 .5Z"/>
+</svg>

data/app/icons/linkedin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12Zm1.78 13.02H3.56V9h3.55v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.72C24 .77 23.2 0 22.22 0Z"/>
+</svg>

data/app/icons/mail.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <rect x="3" y="5" width="18" height="14" rx="2"/>
+  <path d="m3 7 9 6 9-6"/>
+</svg>

data/app/icons/mastodon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M21.58 13.91c-.29 1.5-2.62 3.14-5.29 3.46-1.39.17-2.76.32-4.22.25-2.39-.11-4.27-.57-4.27-.57 0 .23.01.45.04.66.31 2.36 2.34 2.5 4.27 2.57 1.94.07 3.67-.48 3.67-.48l.08 1.76s-1.36.73-3.79.86c-1.34.07-3.01-.04-4.95-.55-4.21-1.12-4.93-5.6-5.04-10.15-.04-1.35-.02-2.62-.02-3.69 0-4.65 3.05-6.01 3.05-6.01 1.54-.71 4.18-1 6.93-1.03h.07c2.74.03 5.39.32 6.93 1.03 0 0 3.04 1.36 3.04 6.01 0 0 .04 3.43-.42 5.88M18 8.6c0-1.16-.3-2.07-.89-2.74-.61-.67-1.41-1.01-2.41-1.01-1.14 0-2.01.43-2.6 1.31l-.59.99-.6-.99c-.59-.88-1.45-1.31-2.59-1.31-1 0-1.81.34-2.41 1.01-.6.67-.89 1.58-.89 2.74v5.62h2.21V8.77c0-1.16.49-1.75 1.47-1.75 1.08 0 1.62.71 1.62 2.1v3.04h2.18V9.12c0-1.39.54-2.1 1.62-2.1.98 0 1.47.59 1.47 1.75v5.45H18V8.6Z"/>
+</svg>

data/app/icons/moon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+</svg>

data/app/icons/rss.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M4 4v3.5a12.5 12.5 0 0 1 12.5 12.5H20A16 16 0 0 0 4 4Zm0 6v3.5a6.5 6.5 0 0 1 6.5 6.5H14A10 10 0 0 0 4 10Zm2.5 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/>
+</svg>

data/app/icons/sun.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <circle cx="12" cy="12" r="4"/>
+  <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
+</svg>

data/app/icons/x.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231L18.244 2.25Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z"/>
+</svg>