feat: new bsky - fedi page

public/favicon.svg

@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
-  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
-  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
-  <defs>
-    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#000"/>
-      <stop offset="1" stop-color="#000" stop-opacity="0"/>
-    </linearGradient>
-  </defs>
-	<style>
-    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
-  </style>
-</svg>

public/following_accounts.csv

@@ -0,0 +1,38 @@
+Account address, Show boosts, Notify on new posts, Languages
+sarahjeong.bsky.social@bsky.brid.gy, true, false, 
+jay.bsky.team@bsky.brid.gy, true, false, 
+b0rk.jvns.ca@bsky.brid.gy, true, false, 
+seldo.com@bsky.brid.gy, true, false, 
+nerdy.dev@bsky.brid.gy, true, false, 
+wongmjane.com@bsky.brid.gy, true, false, 
+samuel.bsky.team@bsky.brid.gy, true, false, 
+garrywatters.bsky.social@bsky.brid.gy, true, false, 
+laurenshof.online@bsky.brid.gy, true, false, 
+bell.bz@bsky.brid.gy, true, false, 
+matrix.org@bsky.brid.gy, true, false, 
+timbl.bsky.social@bsky.brid.gy, true, false, 
+cheeaun.com@bsky.brid.gy, true, false, 
+edavis.dev@bsky.brid.gy, true, false, 
+tylersticka.com@bsky.brid.gy, true, false, 
+sjoy.lol@bsky.brid.gy, true, false, 
+ohhelloana.blog@bsky.brid.gy, true, false, 
+arathorn.net@bsky.brid.gy, true, false, 
+jamesravey.me@bsky.brid.gy, true, false, 
+edent.tel@bsky.brid.gy, true, false, 
+nandi.dads.lol@bsky.brid.gy, true, false, 
+jensimmons.bsky.social@bsky.brid.gy, true, false, 
+gri.gs@bsky.brid.gy, true, false, 
+btp.dev@bsky.brid.gy, true, false, 
+jacobhands.com@bsky.brid.gy, true, false, 
+malstrom.me@bsky.brid.gy, true, false, 
+n4ze3m.com@bsky.brid.gy, true, false, 
+shuuji3.xyz@bsky.brid.gy, true, false, 
+intenttoship.dev@bsky.brid.gy, true, false, 
+haoqun.dev@bsky.brid.gy, true, false, 
+element.io@bsky.brid.gy, true, false, 
+e18e.dev@bsky.brid.gy, true, false, 
+danabra.mov@bsky.brid.gy, true, false, 
+heydonworks.bsky.social@bsky.brid.gy, true, false, 
+ayco.io@bsky.brid.gy, true, false, 
+danielroe.dev@bsky.brid.gy, true, false, 
+patak.dev@bsky.brid.gy, true, false, 

src/layouts/Layout.astro

@@ -1,6 +1,7 @@
 ---
 import './variables.css'
 import './reset.css'
+import './common.css'
 import Head from '../components/Head.astro'
 import Nav from '../components/Nav.astro'
 import links from '../constants/links'

src/layouts/common.css

@@ -0,0 +1,4 @@
+.astro-code {
+  padding: 1em;
+  border-radius: 1em;
+}

src/pages/index.astro

@@ -56,8 +56,8 @@ import now from '../constants/now'
           body="Download and peruse my skills and experience"
         />
       </ul>
-      <Footer />
     </section>
+    <Footer />
   </main>
 </Layout>
 

src/pages/showcase.astro

@@ -16,6 +16,11 @@ import Card from '../components/Card.astro'
       >.
     </p>
     <ul>
+      <Card
+        href="/tech-bsky-fedi"
+        title="Tech Bsky ↔ Fedi"
+        body="Celebrating bsky folks who bridged their accounts to the fediverse!"
+      />
       <Card
         newTab
         href="https://www.npmjs.com/package/@ayco/astro-sw"

src/pages/tech-bsky-fedi.astro

@@ -0,0 +1,138 @@
+---
+import { Code } from 'astro:components'
+import Footer from '../components/Footer.astro'
+import Layout from '../layouts/Layout.astro'
+import importedCode from '../../public/following_accounts.csv?raw'
+
+const csvToArray = (content: string) => {
+  return content
+    .split('\n')
+    .slice(1)
+    .map((str) => str.split(',')[0])
+}
+
+const accounts = csvToArray(importedCode)
+
+const accountObjects = accounts
+  .map((account) => {
+    const bskyHandle = account?.replace('@bsky.brid.gy', '')
+    const url = `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile/?actor=${bskyHandle}`
+
+    return account
+      ? {
+          bskyHandle,
+          fediHandle: account,
+          url,
+        }
+      : null
+  })
+  .filter((acct) => !!acct)
+
+const urls = accountObjects.map((account) => account.url)
+const promises = urls.map((url) => fetch(url))
+const responses = await Promise.all(promises)
+const data = await Promise.all(responses.map((response) => response.json()))
+
+console.log(accountObjects)
+
+const title = 'Tech Bsky ↔ Fedi'
+const description =
+  'Celebrating bsky folks who bridged their accounts to the fediverse!'
+---
+
+<Layout title={title}>
+  <main>
+    <h1>{title}</h1>
+
+    <p><em>{description}</em></p>
+
+    <p>
+      A lot of tech accounts are now active in Bsky. Some of them opted to be
+      bridged to the Fediverse via <a href="https://fed.brid.gy">fed.brid.gy</a>
+      -- so we can also follow them from any ActivityPub powered social platforms.
+    </p>
+
+    <p>
+      On this page, I upload my handpicked tech Bsky accounts that are currently
+      bridged to the Fedi. Feel free <a
+        href="mailto:ayo@ayco.io?subject=Re:%20Tech%20bsky%20<->%20fedi"
+        >send a mail</a
+      > to request adding accounts I missed.
+    </p>
+
+    <p>
+      If you are on bsky and want to be bridged too, please follow <a
+        href="https://bsky.app/profile/ap.brid.gy"
+        target="_blank">@ap.brid.gy</a
+      >.
+    </p>
+
+    <p>
+      If you are on fedi and want to follow the accounts here, scroll to the <a
+        href="#how">bottom of the page</a
+      > for a handy `.csv` file you can upload to your chosen fedi platform.
+    </p>
+
+    <h2>Accounts ({accountObjects.length})</h2>
+
+    <table>
+      <tr>
+        <th>Avatar</th>
+        <th>Bsky</th>
+        <th>Fedi</th>
+      </tr>
+      {
+        accountObjects.map((account, index) => (
+          <tr>
+            <td>
+              <img
+                src={data[index].avatar}
+                alt={`${account.bskyHandle}'s avatar`}
+              />
+            </td>
+            <td>
+              <span>{account.bskyHandle}</span>
+            </td>
+            <td>
+              <span>{account.fediHandle}</span>
+            </td>
+          </tr>
+        ))
+      }
+    </table>
+
+    <h2 id="how">How how how?</h2>
+
+    <p>
+      Download the <a href="following_accounts.csv">.csv file</a> or copy the content
+      below and save in a file. Then, upload to your fedi account provider.
+    </p>
+
+    <p>
+      If you're on Mastodon, this functionality is found in:<br /><small
+        >Preferences -&gt; Import and export -&gt; Import</small>
+    </p>
+
+    <h2>Full <code>.csv</code> content</h2>
+
+    <Code code={importedCode} />
+
+    <Footer />
+  </main>
+</Layout>
+
+<style>
+  td img {
+    border-radius: 5px;
+    width: 50px;
+    height: 50px;
+  }
+  td span {
+    font-size: small;
+  }
+  table th,
+  table td {
+    padding: 0.5em;
+    border: 1px solid gray;
+  }
+</style>