Embedding status posts from another Bearblog

Sylvia from departure.blog shares a method to embed status posts from one Bearblog into another using a Cloudflare Worker that fetches the Atom feed, adds CORS headers, and caches it for an hour. The worker script and embedding JavaScript are provided, with the latest 10 posts displayed on the homepage.

Embedding status posts from another Bearblog I shared in Weeknotes 2026-18 /weeknotes-2026-18/ puttering : I've been wanting to embed a second Bearblog's posts to my main Bearblog for a long time now and I finally figured out how to do it. My tiny posts are Powered by Bear ʕ•ᴥ•ʔ again and live over at status.departure.blog / sylvia-status.bearblog.dev. The latest 10 posts are embedded on my homepage with the help of Cloudfare Workers it pulls the Atom feed, adds the missing CORS header, and caches it . This is how I did it. I'm a JavaScript newb, so the scripts I'm sharing here were created with Claude's assistance. Create a worker to fetch the Atom feed - Log into Cloudfare Dashboard free for personal / hobby projects - Go to Compute Workers & Pages - Select Create Application in the top right - Select Start with Hello World - Name the worker or use the default gibberish, which is what I do - Select Deploy which redirects to the new worker's Overview page - Select Edit code in the top right - Delete everything in worker.js - Paste in the worker.js below update the Bearblog feed URL - Select Deploy in the top right Add to worker.js This pulls the feed, caches it for an hour, and adds a CORS header so it can be embedded on another Bearblog. js export default { async fetch request, env, ctx { const TARGET = "https://user-status.bearblog.dev/feed/"; const cache = caches.default; let response = await cache.match TARGET ; if response return response; response = await fetch TARGET, { headers: { "User-Agent": "feed-fetcher/1.0" } } ; const body = await response.text ; const cachedResponse = new Response body, { headers: { "Content-Type": response.headers.get "Content-Type" || "application/xml", "Access-Control-Allow-Origin": " ", "Cache-Control": "public, max-age=3600", }, } ; ctx.waitUntil cache.put TARGET, cachedResponse.clone ; return cachedResponse; } }; Embed the feed's posts into Bearblog - Create a Bearblog page - Paste the following HTML + JavaScript into the page update the Cloudfare Workers URL - Select Publish Add to where posts should display php < -- Embed status posts from another Bearblog -- <div id="posts" <p Loading...</p </div Add to bottom of the same page This pulls the worker's feed and renders it as HTML, following Bearblog's HTML structure and my preferred timestamp format. It finds the posts container and lists the posts within it. php < -- Embed status posts from another Bearblog -- <script fetch "https://worker-name.user.workers.dev" .then r = r.text .then str = new DOMParser .parseFromString str, "application/xml" .then xml = { const entries = ...xml.querySelectorAll "entry" ; if entries.length === 0 { document.getElementById "posts" .innerHTML = "<p No posts found.</p "; return; } const now = new Date ; const items = entries.map entry = { const link = entry.querySelector "link" .getAttribute "href" ; const content = entry.querySelector "content" .textContent; const title = entry.querySelector "title" .textContent; const published = entry.querySelector "published" .textContent; const date = new Date published ; const isToday = date.getDate === now.getDate && date.getMonth === now.getMonth && date.getFullYear === now.getFullYear ; const hours = date.getHours .toString .padStart 2, '0' ; const minutes = date.getMinutes .toString .padStart 2, '0' ; const timeStr = ${hours}:${minutes} ; const dateStr = date.toLocaleDateString "en-GB", { day: "2-digit", month: "short", year: "numeric", } ; const timestamp = isToday ? Today @ ${timeStr} : ${dateStr} @ ${timeStr} ; return <li data-tags="status" <span <i <time datetime="${published}" ${timestamp}</time </i </span <a href="${link}" ${title}</a <div ${content}</div </li ; } .join "" ; document.getElementById "posts" .innerHTML = <ul class="embedded blog-posts" style="margin-top: 0;" ${items}</ul ; } .catch = { document.getElementById "posts" .innerHTML = "<p Posts failed to load.</p "; } ; </script Re: My theme v3 /theme-v3/ home On the homepage, replace: <section class="status" These days {{ posts | tag:status | content:True | limit:10 }} View more small thoughts /status/ → </section With: <section class="status" These days < -- Embed status posts from another Bearblog -- <div id="posts" <p Loading...</p </div View more small thoughts https://user-status.bearblog.dev/ → </section And then add the script add-to-bottom-of-the-same-page at the end of the homepage.