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

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