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

Blueskyの外部公開

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

ubanis(Bluesky) (@ubanis.com)

futanari artist R18 絵を描きます サイト ubanis.com 各種リンク https://linkat.blue/ubanis.com Blueskyにアップした絵 bsky.app/profile/did:plc:lmftezsq52hi53taz762s7pc/feed/aaalx2yzi3h5u

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