feat: links and categories

src/lib/feedview/feed/Category.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import KeyValue from "$lib/KeyValue.svelte";
+  import type { Category } from "./feedTypes";
+  export let categories: Category[] = [];
+</script>
+
+{#each categories as category}
+  <KeyValue keys={["scheme", "term"]} values={[category.scheme, category.term]} compact={true} />
+{/each}

src/lib/feedview/feed/Feed.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+  import Collapsible from "$lib/Collapsible.svelte";
   import KeyValue from "$lib/KeyValue.svelte";
   import { appStore } from "$lib/store";
+  import Category from "./Category.svelte";
+  import Links from "./Links.svelte";
   $: feed = $appStore.currentFeed?.feed;
   $: link = feed.link.find((l: any) => l.rel === "self");
 </script>
@@ -13,4 +16,10 @@
       compact={true}
     />
   </div>
+  <Collapsible header="Links" level="3">
+    <Links links={feed.link} />
+  </Collapsible>
+  <Collapsible header="Category" level="3">
+    <Category categories={feed.category} />
+  </Collapsible>
 {/if}

src/lib/feedview/feed/Links.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Link } from "./feedTypes";
+  export let links: Link[] = [];
+</script>
+
+<table>
+  {#each links as link}
+    <tr>
+      <td class="key">{link.rel}: </td><td
+        ><a id={crypto.randomUUID()} target="_blank" href={link.href}>{link.href}</a></td
+      >
+    </tr>
+  {/each}
+</table>
+
+<style>
+  .key {
+    width: 8vw;
+  }
+  td {
+    padding: 0.3rem;
+  }
+</style>

src/lib/feedview/feed/feedTypes.ts

@@ -0,0 +1,18 @@
+export type Category = {
+  scheme: string;
+  term: string;
+};
+
+export type Link = {
+  rel: string;
+  href: string;
+};
+
+export type Feed = {
+  id: string;
+  title: string;
+  link: Link[];
+  category: Category[];
+  updated: string;
+  entry: any;
+};