Header text

We invite you to come be a part of this project. Leave your thoughts on articles curated below.
Or, get in touch above to get published with VoyagerBug .

The Co-Creation Project

Embed

<div id="filtered-blog"></div>

<style>
  #filtered-blog{width:100%;margin:0 auto;max-width:1200px}
  #filtered-blog .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
  #filtered-blog .card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #eee;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
  #filtered-blog .card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
  #filtered-blog .thumb{width:100%;height:200px;object-fit:cover;background:#f4f4f4}
  #filtered-blog .content{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
  #filtered-blog h3{margin:0;font-size:1.1rem;line-height:1.35;color:#222}
  #filtered-blog .excerpt{margin:0;color:#555;font-size:.95rem;line-height:1.5;flex:1}
  #filtered-blog .meta{color:#999;font-size:.85rem}
  #filtered-blog .empty{text-align:center;color:#666;padding:40px 0}
</style>

<script>
(async () => {
  /* ====== CONFIG ====== */
  const BLOG_INDEX = '/blog';                 // blog listing page
  const KEYWORDS = ['aroundthetable'];        // match in FINAL url (canonical/og:url) or path
  const MAX_LIST_PAGES = 5;                   // crawl /blog, /blog?p=1..4
  const MAX_POSTS = 12;
  /* ==================== */

  const mount = document.getElementById('filtered-blog');
  const u = (href) => new URL(href, location.origin);
  const fetchHTML = async (url) => {
    const res = await fetch(url, { credentials: 'include' });
    if (!res.ok) throw new Error('Fetch failed: ' + url);
    const text = await res.text();
    return new DOMParser().parseFromString(text, 'text/html');
  };

  const listPages = [BLOG_INDEX, ...Array.from({length: MAX_LIST_PAGES-1}, (_,i)=>`${BLOG_INDEX}?p=${i+1}`)];

  // 1) Collect candidate post links from list pages
  const candidateURLs = [];
  for (const lp of listPages) {
    try {
      const doc = await fetchHTML(lp);
      const anchors = Array.from(doc.querySelectorAll('a[href^="/blog/"], a[href*="/blog/"]'));
      anchors.forEach(a => {
        const href = a.getAttribute('href'); if (!href) return;
        const abs = u(href);
        if (abs.origin === location.origin) candidateURLs.push(abs.href);
      });
    } catch(e) { /* ignore bad list pages */ }
  }
  // de-dupe
  const uniqueCandidates = Array.from(new Set(candidateURLs)).slice(0, 60);

  if (!uniqueCandidates.length) {
    mount.innerHTML = '<p class="empty">No posts found on the blog index.</p>';
    return;
  }

  // 2) Visit each post, read canonical/og:url THEN filter by keyword
  const pick = (d, sel, attr='content') => d.querySelector(sel)?.getAttribute(attr) || '';
  const readMeta = async (href) => {
    try {
      const d = await fetchHTML(href);
      const canonical = pick(d, 'link[rel="canonical"]', 'href') || pick(d, 'meta[property="og:url"]') || href;
      const finalURL = u(canonical).href;
      const path = u(finalURL).pathname.toLowerCase();
      const hasKeyword = KEYWORDS.some(k => path.includes(k.toLowerCase()));
      const title = pick(d, 'meta[property="og:title"]') || d.querySelector('title')?.textContent || path.split('/').pop();
      const img = pick(d, 'meta[property="og:image"]') || '';
      const desc = pick(d, 'meta[property="og:description"]') || '';
      const dateISO = pick(d, 'meta[property="article:published_time"]') || d.querySelector('time[datetime]')?.getAttribute('datetime') || '';
      return { ok: true, hasKeyword, finalURL, title, img, desc, dateISO };
    } catch {
      return { ok: false, hasKeyword: false };
    }
  };

  const metas = await Promise.all(uniqueCandidates.map(readMeta));
  const filtered = metas.filter(m => m.ok && m.hasKeyword).slice(0, MAX_POSTS);

  if (!filtered.length) {
    mount.innerHTML = '<p class="empty">No matching posts yet (filter looks for "aroundthetable" in the post’s canonical URL).</p>';
    return;
  }

  // 3) Render cards
  const placeholder = 'https://via.placeholder.com/800x500?text=Post';
  const fmtDate = (iso) => {
    if (!iso) return '';
    const d = new Date(iso); if (isNaN(d)) return '';
    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
  };

  const cards = filtered.map(m => `
    <a class="card" href="${m.finalURL}" target="_blank" rel="noopener">
      <img class="thumb" src="${m.img || placeholder}" alt="">
      <div class="content">
        <h3>${m.title}</h3>
        <p class="excerpt">${(m.desc || '').replace(/<[^>]*>?/gm,'').slice(0,160)}${(m.desc && m.desc.length>160)?'…':''}</p>
        <div class="meta">${fmtDate(m.dateISO)}</div>
      </div>
    </a>
  `).join('');

  mount.innerHTML = `<div class="grid">${cards}</div>`;
})();
</script>


VoyagerBug

VoyagerBug is reinventing board games with smart technology—our app-mediated games use tagged components and a rollable display board with sensors to track moves, simulate actions, and keep score in real time. With one smart board powering an entire series of games, players enjoy unique, easy-to-learn experiences without rulebook overload, bringing board games into more homes and onto the table more often.