Blueskyのポストをサイトに表示する

Blueskyの外部公開

Blueskyの公開用webインターフェースが実装されログインしなくても投稿やプロフィールページを見ることができるようになった。

ubanis(Bluesky) (@ubanis.com)

futanari artist R18 ふたなり絵を描きます 絵 My Bluesky arts https://tinyurl.com/ubanisart Drawpile https://tinyurl.com/drawpile Links https://woosh.link/ubanis.com

https://bsky.app/profile/ubanis.com

それに加えてポストのRSSが配信されるようになったので、それを取得してサイトで表示するようにした。

RSSのURLは profile/ユーザーのDID/rss のアドレスになっている。

bsky.app

https://bsky.app/profile/did:plc:lmftezsq52hi53taz762s7pc/rss

RSSを読み込む

最初はRSSからjsonへの変換をrss-to-jsonで行おうとしたものの変換はできるものの表示できないので外部APIを利用することにした。

GitHub - nasa8x/rss-to-json: RSS and Atom feed generator for Node.js

RSS and Atom feed generator for Node.js. Contribute to nasa8x/rss-to-json development by creating an account on GitHub.

https://github.com/nasa8x/rss-to-json

rss-to-jsonはfetchではなくaxiosを使っているのが原因かもしれない(よくわかってないので詳しい方教えて下さい)

move from axios to fetch · Issue #65 · nasa8x/rss-to-json

Currently, fetch is available in Node.js natively. From other side axios doesn't work at serverless env (Cloudflare workers as an example) It would be nice to move from axios to builtin fetch

https://github.com/nasa8x/rss-to-json/issues/65

RSSからjsonへの変換はrss2json.comを利用する。無料版では１時間に１回RSSが更新される。

RSS to JSON Converter online - rss2json.com

Free online API to convert RSS to JSON

https://rss2json.com

Svelteのコード

以下はsvelteのコード。

<script>
  import { onMount } from "svelte";
  import { fade, slide } from "svelte/transition";
  let promise = new Promise(() => {});
  onMount(() => {
    promise = (async () => {
      const res = await fetch("rss2jsonのapi URL");
      const data = res.json();
      return data;
    })();
  });
</script>

<div class="break-all rounded-xl bg-(color:--bg-base-color) pb-4">
  <h2 class="rounded-t-xl bg-blue-500 p-2 text-lg font-bold leading-8 text-white">Bluesky</h2>
  {#await promise}
    <p
      transition:slide
      on:introstart={() => (visible = false)}
      on:outroend={() => (visible = true)}
    >
      読み込み中...
    </p>
  {:then data}
    <div class="loaded" in:fade>
      <h3 class="bg-slate-300 p-2 text-base text-black underline">
        <a href={data.feed.link}>{data.feed.title}</a>
      </h3>
      {#each data.items as item}
        <p class="border-b border-dotted border-(color:--border-color) px-3 py-3 text-base">
          {item.description}

          <time class="pt-2 text-sm block">{item.pubDate} + 9h</time>
          <a
            class="hover:text-(color:--text-linkhover-color) text-(color:--text-link-color) text-sm pt-2"
            href={item.link}
            target="_blank">[ポスト元]</a
          >
        </p>
      {/each}
    </div>
  {:catch error}
    <p>ERROR {error.message}</p>
  {/await}
</div>

完成品

実際に動作しているものは以下のようになる。(Astroの構造上ブログ用スタイルシートがコンポーネントに適用されてレイアウトがおかしいのはご了承ください。正しい表示なのはプロフィールページにあります。)

プロフィール

へび右曲がりはubanisによるふたなりサイトです

https://ubanis.com/profile