Embedding status posts from another Bearblog – A parenthetical departure

Embedding status posts from another Bearblog

11 Jul, 2026

I shared in Weeknotes 2026-18:

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<br>This pulls the feed, caches it for an hour, and adds a CORS header so it can be embedded on another Bearblog.

export default {<br>async fetch(request, env, ctx) {<br>const TARGET = "https://user-status.bearblog.dev/feed/";<br>const cache = caches.default;

let response = await cache.match(TARGET);<br>if (response) return response;

response = await fetch(TARGET, {<br>headers: {<br>"User-Agent": "feed-fetcher/1.0"<br>});<br>const body = await response.text();

const cachedResponse = new Response(body, {<br>headers: {<br>"Content-Type": response.headers.get("Content-Type") || "application/xml",<br>"Access-Control-Allow-Origin": "*",<br>"Cache-Control": "public, max-age=3600",<br>},<br>});

ctx.waitUntil(cache.put(TARGET, cachedResponse.clone()));<br>return cachedResponse;<br>};

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

Loading...

Add to bottom of the same page<br>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.

fetch("https://worker-name.user.workers.dev")<br>.then(r => r.text())<br>.then(str => new DOMParser().parseFromString(str, "application/xml"))<br>.then(xml => {<br>const entries = [...xml.querySelectorAll("entry")];

if (entries.length === 0) {<br>document.getElementById("posts").innerHTML = "No posts found.";<br>return;

const now = new Date();

const items = entries.map(entry => {<br>const link = entry.querySelector("link").getAttribute("href");<br>const content = entry.querySelector("content").textContent;<br>const title = entry.querySelector("title").textContent;<br>const published = entry.querySelector("published").textContent;<br>const date = new Date(published);

const isToday = date.getDate() === now.getDate() &&<br>date.getMonth() === now.getMonth() &&<br>date.getFullYear() === now.getFullYear();

const hours = date.getHours().toString().padStart(2, '0');<br>const minutes = date.getMinutes().toString().padStart(2, '0');<br>const timeStr = `${hours}:${minutes}`;

const dateStr = date.toLocaleDateString("en-GB", {<br>day: "2-digit",<br>month: "short",<br>year: "numeric",<br>});

const timestamp = isToday ? `Today @ ${timeStr}` : `${dateStr} @ ${timeStr}`;

return `

${timestamp}<br>${title}<br>${content}

`;<br>}).join("");

document.getElementById("posts").innerHTML = `${items}`;<br>})<br>.catch(() => {<br>document.getElementById("posts").innerHTML = "Posts failed to load.";<br>});

Re: My theme v3<br>On the homepage, replace:

## These days

{{ posts | tag:status | content:True | limit:10 }}

[View more small thoughts](/status/) →

With:

## These days

Loading...

[View more small thoughts](https://user-status.bearblog.dev/) →

And then add the script at the end of the homepage.

#bearblog