Remove tab system and make it only bluesky feed

this is bc i only post there and the other apis make me go insaine
i have had Enough of apis
i cannot be fucked anymore lmfao

src/components/home/feeds/Bluesky.astro

···
----
-import { socials } from "/site-config";
-import { is } from "@atcute/lexicons";
-import { AppBskyFeedPost } from "@atcute/bluesky";
-import BskyPost, { type Author } from "./BskyPost.astro";
-import { client } from "./atproto";
-
-const { ok, data } = await client.get("app.bsky.feed.getAuthorFeed", {
-  params: {
-    actor: socials.atproto.did,
-    limit: 100,
-  },
-});
-
-if (!ok) {
-  // error occoured
-  console.error(data.error, data.message);
-
-  return "Error 500: Internal server error fetching this feed. Try refreshing the page";
-}
-
-let posts: { record: AppBskyFeedPost.Main; author: Author }[] = data.feed
-  // make sure it was by me (exclude reposts)
-  .filter((x) => x.post.author.did === socials.atproto.did)
-  // makes sure its not a reply
-  .filter((x) => !x.reply)
-  // this list now includes original posts & quote skeets
-  .map((x) => {
-    return {
-      record: is(AppBskyFeedPost.mainSchema, x.post.record)
-        ? x.post.record
-        // never type bc it gets filtered out
-        : undefined as never,
-      author: {
-        did: x.post.author.did,
-        displayName: x.post.author.displayName,
-        handle: x.post.author.handle,
-        avatar: x.post.author.avatar,
-      },
-    };
-  })
-  .filter((x) => x.record);
----
-
-<h1>Bsky</h1>
-<ul>
-  {
-    posts.map((x) => (
-      <li>
-        <BskyPost post={x.record} author={x.author} />
-      </li>
-    ))
-  }
-</ul>
-
-<style>
-  ul {
-    padding-inline: 2em;
-    li {
-      margin-block-end: 1em;
-    }
-  }
-</style>

src/components/home/feeds/Feed.astro

···
+---
+import boxLR from "/assets/box-lr.png";
+import { socials } from "/site-config";
+import { is } from "@atcute/lexicons";
+import { AppBskyFeedPost } from "@atcute/bluesky";
+import Post, { type Author } from "./Post.astro";
+import { client } from "./atproto";
+
+const { ok, data } = await client.get("app.bsky.feed.getAuthorFeed", {
+  params: {
+    actor: socials.atproto.did,
+    limit: 100,
+  },
+});
+
+if (!ok) {
+  // error occoured
+  console.error(data.error, data.message);
+
+  return "Error 500: Internal server error fetching this feed. Try refreshing the page";
+}
+
+let posts: { record: AppBskyFeedPost.Main; author: Author }[] = data.feed
+  // make sure it was by me (exclude reposts)
+  .filter((x) => x.post.author.did === socials.atproto.did)
+  // makes sure its not a reply
+  .filter((x) => !x.reply)
+  // this list now includes original posts & quote skeets
+  .map((x) => {
+    return {
+      record: is(AppBskyFeedPost.mainSchema, x.post.record)
+        ? x.post.record
+        : // never type bc it gets filtered out
+          (undefined as never),
+      author: {
+        did: x.post.author.did,
+        displayName: x.post.author.displayName,
+        handle: x.post.author.handle,
+        avatar: x.post.author.avatar,
+      },
+    };
+  })
+  .filter((x) => x.record);
+---
+
+<section class="feed" style={`--box-lr-png: url("${boxLR.src}");`}>
+  <div class="feed-contents">
+    <h2>Bluesky 🦋</h2>
+    <ul>
+      {
+        posts.map((x) => (
+          <li>
+            <Post post={x.record} author={x.author} />
+          </li>
+        ))
+      }
+    </ul>
+
+    <style>
+      ul {
+        padding-inline: 2em;
+        li {
+          margin-block-end: 1em;
+        }
+      }
+    </style>
+  </div>
+</section>
+
+<style>
+  /* wrapper */
+  .feed {
+    height: calc(100vh - 40px - 2rem * 1.5);
+    @media (max-width: 90ch) {
+      height: 600px;
+    }
+
+    z-index: 0;
+
+    border-image: var(--box-lr-png) 0 10 fill / 0 20px / 10000px 20px round;
+  }
+
+  /* tab contents */
+  .feed-contents {
+    grid-area: contents;
+    overflow-y: auto;
+    min-height: 100%;
+  }
+</style>

src/components/home/feeds/Feeds.astro

···
----
-import Bluesky from "./Bluesky.astro";
-import Tangled from "./Tangled.astro";
-import Github from "./Github.astro";
-
-import IconBluesky from "/assets/icons/Bluesky.svg";
-import IconGit from "/assets/icons/Git.svg";
-import IconGithub from "/assets/icons/GitHub.svg";
-import boxLR from "/assets/box-lr.png";
-
-const tabs: {
-  id: string;
-  label: string;
-  icon?: ((_props: astroHTML.JSX.SVGAttributes) => any) | string;
-  content: (_props: Record<string, any>) => any;
-}[] = [
-  { id: "bsky", label: "Bluesky", icon: IconBluesky, content: Bluesky },
-  { id: "tangled", label: "Tangled", icon: IconGit, content: Tangled },
-  { id: "gh", label: "Github", icon: IconGithub, content: Github },
-];
----
-
-<section class="feeds" style={`--box-lr-png: url("${boxLR.src}");`}>
-  <!-- tabindex -1 disables tabbing onto this element
-       tabbing is disabled because when the element overflows its focusable
-       to scrub across children etc. which is a logical default
-       but in this case is annoying as scrubbing is already possible via the tabs
-        -->
-  <div
-    id="tab-container"
-    tabindex="-1"
-    role="tablist"
-    aria-label="Social media feed"
-  >
-    {
-      tabs.map((tab, i) => (
-        <div role="tab" aria-controls={"tab-contents-" + tab.id}>
-          <label>
-            <input
-              type="radio"
-              name="social-tab"
-              id={"tab-" + tab.id}
-              checked={i === 0}
-            />
-            {tab.icon &&
-              (typeof tab.icon === "string" ? (
-                <img src={tab.icon} alt="" />
-              ) : (
-                <tab.icon />
-              ))}
-            <span class="label">{tab.label}</span>
-          </label>
-        </div>
-      ))
-    }
-  </div>
-
-  <div class="feed-contents">
-    {
-      tabs.map(({ id, content: Content }) => (
-        <div
-          class="content"
-          id={"tab-contents-" + id}
-          aria-labelledby={"tab-" + id}
-          role="tabpanel"
-        >
-          <Content />
-        </div>
-      ))
-    }
-  </div>
-</section>
-
-<!-- god i want /ref/ combinators so fuckin bad
-   this could be so clean
-   `#tab-container :checked /data-tab-for/ .tab` -->
-<style
-  set:html={tabs
-    .map(
-      ({ id }) =>
-        `#tab-container:has([aria-controls="tab-contents-${id}"] :checked) + .feed-contents #tab-contents-${id} { display: var(--display, block); }`,
-    )
-    .join("\n")}
-></style>
-
-<style>
-  /* wrapper */
-  .feeds {
-    display: grid;
-    grid-template: "menu" auto "contents" 1fr / 1fr;
-    /* calculate header height and reduce the height accordingly */
-    /* screen height - margin&padding - h1 text */
-    height: calc(100vh - 40px - 2rem * 1.5);
-    @media (max-width: 90ch) {
-      height: 600px;
-    }
-
-    z-index: 0;
-
-    border-image-source: var(--box-lr-png);
-    border-image-slice: 0 10 fill;
-    border-image-width: 0 20px;
-    border-image-outset: 10000px 20px;
-    border-image-repeat: round;
-  }
-
-  /* tab menu */
-  #tab-container {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    overflow-x: auto;
-    scrollbar-width: none;
-
-    grid-area: menu;
-
-    border-bottom: 2px solid green;
-
-    label {
-      display: grid;
-      grid-template: "icon text" 1fr / auto auto;
-      flex-direction: row;
-      gap: 2.5px;
-      margin: 2.5px;
-      padding: 2.5px;
-
-      position: relative;
-      padding-bottom: 5px;
-      &::after {
-        content: "";
-        width: 100%;
-        height: 5px;
-        display: block;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-      }
-
-      &:has(:checked)::after {
-        background-color: blue;
-      }
-
-      &:focus-within {
-        outline: 1px solid red;
-      }
-
-      img,
-      svg {
-        width: 24px;
-        height: 24px;
-        grid-area: icon;
-      }
-
-      .label {
-        grid-area: text;
-      }
-
-      input {
-        /* visually hide it but dont remove from dom/accessibility tree for focus */
-        opacity: 0;
-        grid-area: icon;
-      }
-    }
-  }
-
-  /* tab contents */
-  .feed-contents {
-    grid-area: contents;
-    overflow-y: auto;
-    min-height: 100%;
-  }
-
-  .feed-contents .content {
-    display: none;
-  }
-</style>

src/components/home/feeds/Github.astro

···
----
-
----
-
-<h3>gh</h3>

src/components/home/feeds/Tangled.astro

···
----
-
----
-
-<h4>tangled.sh</h4>

src/components/home/feeds/atproto.ts

···
   PlcDidDocumentResolver,
   WebDidDocumentResolver,
 } from "@atcute/identity-resolver";
+import { socials } from "/site-config";
 
 export const client = new Client({
   handler: simpleFetchHandler({ service: "https://public.api.bsky.app" }),
+});
+
+export const pds = new Client({
+  handler: simpleFetchHandler({ service: socials.atproto.pds }),
 });
 
 export const docResolver = new CompositeDidDocumentResolver({

src/pages/index.astro

···
 ---
 import Base from "/components/Base.astro";
-import Feeds from "/components/home/feeds/Feeds.astro";
+import Feed from "/components/home/feeds/Feed.astro";
 import Landing from "/components/home/Landing.astro";
 import NowPlaying from "/components/home/playing/NowPlaying.astro";
 // start the sdk setup while other components and requests are ongoing
···
     <!-- now playing -->
     <NowPlaying />
     <!-- feeds -->
-    <Feeds />
+    <Feed />
     <!-- blog -->
     <section class="blog">blog</section>
   </main>
···
     main {
       display: grid;
       grid-template:
-        ". landing feeds blog ." min-content
-        ". playing feeds blog ." 1fr
+        ". landing feed blog ." min-content
+        ". playing feed blog ." 1fr
         / auto minmax(25ch, 50ch) minmax(25ch, 50ch) minmax(25ch, 50ch) auto;
       max-width: 100%;
         gap: 20px;
···
         grid-template:
           ". landing ." min-content
           "playing playing playing" min-content
-          ". feeds ." 1fr
+          ". feed ." 1fr
           / auto minmax(30ch, 50ch) auto;
 
         & :global(.blog) {
···
         grid-area: playing;
       }
 
-      & :global(.feeds) {
-        grid-area: feeds;
+      & :global(.feed) {
+        grid-area: feed;
       }
 
       & :global(.blog) {