From 88baeb2a4aae0efc5a599b306279be6e9b59c3fa Mon Sep 17 00:00:00 2001
From: afterlifepro <vielle.dev@proton.me>
Date: Mon, 11 Aug 2025 18:31:45 +0100
Subject: [PATCH] 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
---
 .../home/feeds/{Bluesky.astro => Feed.astro}  |  60 ++++--
 src/components/home/feeds/Feeds.astro         | 177 ------------------
 src/components/home/feeds/Github.astro        |   5 -
 .../home/feeds/{BskyPost.astro => Post.astro} |   0
 src/components/home/feeds/Tangled.astro       |   5 -
 src/components/home/feeds/atproto.ts          |   5 +
 src/pages/index.astro                         |  14 +-
 7 files changed, 55 insertions(+), 211 deletions(-)
 rename src/components/home/feeds/{Bluesky.astro => Feed.astro} (55%)
 delete mode 100644 src/components/home/feeds/Feeds.astro
 delete mode 100644 src/components/home/feeds/Github.astro
 rename src/components/home/feeds/{BskyPost.astro => Post.astro} (100%)
 delete mode 100644 src/components/home/feeds/Tangled.astro

diff --git a/src/components/home/feeds/Bluesky.astro b/src/components/home/feeds/Feed.astro
similarity index 55%
rename from src/components/home/feeds/Bluesky.astro
rename to src/components/home/feeds/Feed.astro
index 79b621e..297def5 100644
--- a/src/components/home/feeds/Bluesky.astro
+++ b/src/components/home/feeds/Feed.astro
@@ -1,8 +1,9 @@
 ---
+import boxLR from "/assets/box-lr.png";
 import { socials } from "/site-config";
 import { is } from "@atcute/lexicons";
 import { AppBskyFeedPost } from "@atcute/bluesky";
-import BskyPost, { type Author } from "./BskyPost.astro";
+import Post, { type Author } from "./Post.astro";
 import { client } from "./atproto";
 
 const { ok, data } = await client.get("app.bsky.feed.getAuthorFeed", {
@@ -29,8 +30,8 @@ let posts: { record: AppBskyFeedPost.Main; author: Author }[] = data.feed
     return {
       record: is(AppBskyFeedPost.mainSchema, x.post.record)
         ? x.post.record
-        // never type bc it gets filtered out
-        : undefined as never,
+        : // never type bc it gets filtered out
+          (undefined as never),
       author: {
         did: x.post.author.did,
         displayName: x.post.author.displayName,
@@ -42,22 +43,47 @@ let posts: { record: AppBskyFeedPost.Main; author: Author }[] = data.feed
   .filter((x) => x.record);
 ---
 
-<h1>Bsky</h1>
-<ul>
-  {
-    posts.map((x) => (
-      <li>
-        <BskyPost post={x.record} author={x.author} />
-      </li>
-    ))
-  }
-</ul>
+<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>
-  ul {
-    padding-inline: 2em;
-    li {
-      margin-block-end: 1em;
+  /* 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>
diff --git a/src/components/home/feeds/Feeds.astro b/src/components/home/feeds/Feeds.astro
deleted file mode 100644
index 3ce30da..0000000
--- a/src/components/home/feeds/Feeds.astro
+++ /dev/null
@@ -1,177 +0,0 @@
----
-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>
diff --git a/src/components/home/feeds/Github.astro b/src/components/home/feeds/Github.astro
deleted file mode 100644
index 9a1ea05..0000000
--- a/src/components/home/feeds/Github.astro
+++ /dev/null
@@ -1,5 +0,0 @@
----
-
----
-
-<h3>gh</h3>
diff --git a/src/components/home/feeds/BskyPost.astro b/src/components/home/feeds/Post.astro
similarity index 100%
rename from src/components/home/feeds/BskyPost.astro
rename to src/components/home/feeds/Post.astro
diff --git a/src/components/home/feeds/Tangled.astro b/src/components/home/feeds/Tangled.astro
deleted file mode 100644
index 2483633..0000000
--- a/src/components/home/feeds/Tangled.astro
+++ /dev/null
@@ -1,5 +0,0 @@
----
-
----
-
-<h4>tangled.sh</h4>
diff --git a/src/components/home/feeds/atproto.ts b/src/components/home/feeds/atproto.ts
index 5770e27..09f20a6 100644
--- a/src/components/home/feeds/atproto.ts
+++ b/src/components/home/feeds/atproto.ts
@@ -5,11 +5,16 @@ import {
   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({
   methods: {
     plc: new PlcDidDocumentResolver(),
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 73077f1..3939cc9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 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
@@ -17,7 +17,7 @@ sdk;
     <!-- now playing -->
     <NowPlaying />
     <!-- feeds -->
-    <Feeds />
+    <Feed />
     <!-- blog -->
     <section class="blog">blog</section>
   </main>
@@ -40,8 +40,8 @@ sdk;
     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;
@@ -50,7 +50,7 @@ sdk;
         grid-template:
           ". landing ." min-content
           "playing playing playing" min-content
-          ". feeds ." 1fr
+          ". feed ." 1fr
           / auto minmax(30ch, 50ch) auto;
 
         & :global(.blog) {
@@ -66,8 +66,8 @@ sdk;
         grid-area: playing;
       }
 
-      & :global(.feeds) {
-        grid-area: feeds;
+      & :global(.feed) {
+        grid-area: feed;
       }
 
       & :global(.blog) {
-- 
2.51.2