# Embedding status posts from another Bearblog

> Source: <https://departure.blog/embedding-status-posts-from-another-bearblog/>
> Published: 2026-07-21 12:02:03+00:00

# 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.