Merge pull request #13 from dodok8/dodok8-fronted-followers

Author: dahlia

CHANGES.md

@@ -35,10 +35,17 @@ To be released.
      -  Added `Create` class.
      -  Added `MemoryCachedRepository` class.
 
+ -  Added web frontend followers page.  [[#2], [#13] by Hyeonseo Kim]
+
+     -  Added `/followers` route that displays a list of bot followers.
+     -  Made follower count on the main page clickable, linking to `/followers`.
+
  -  Upgraded Fedify to 1.8.8.
 
+[#2]: https://github.com/fedify-dev/botkit/issues/2
 [#7]: https://github.com/fedify-dev/botkit/issues/7
 [#8]: https://github.com/fedify-dev/botkit/pull/8
+[#13]: https://github.com/fedify-dev/botkit/pull/13
 
 ### @fedify/botkit-sqlite
 

packages/botkit/src/components/Follower.tsx

@@ -0,0 +1,67 @@
+// BotKit by Fedify: A framework for creating ActivityPub bots
+// Copyright (C) 2025 Hong Minhee <https://hongminhee.org/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+/** @jsx react-jsx */
+/** @jsxImportSource hono/jsx */
+import { type Actor, getActorHandle, Link } from "@fedify/fedify/vocab";
+import type { Session } from "../session.ts";
+
+export interface FollowerProps {
+  readonly actor: Actor;
+  readonly session: Session<unknown>;
+}
+
+export async function Follower({ actor, session }: FollowerProps) {
+  const { context } = session;
+  const author = actor;
+  const authorIcon = await actor?.getIcon({
+    documentLoader: context.documentLoader,
+    contextLoader: context.contextLoader,
+    suppressError: true,
+  });
+  const authorHandle = await getActorHandle(author);
+
+  return (
+    <article>
+      <header>
+        {author?.id
+          ? (
+            <hgroup>
+              {authorIcon?.url && (
+                <img
+                  src={authorIcon.url instanceof Link
+                    ? authorIcon.url.href?.href
+                    : authorIcon.url.href}
+                  width={authorIcon.width ?? undefined}
+                  height={authorIcon.height ?? undefined}
+                  alt={authorIcon.name?.toString() ?? undefined}
+                  style="float: left; margin-right: 1em; height: 64px;"
+                />
+              )}
+              <h3>
+                <a href={author.url?.href?.toString() ?? author.id.href}>
+                  {author.name}
+                </a>
+              </h3>{" "}
+              <p>
+                <span style="user-select: all;">{authorHandle}</span>
+              </p>
+            </hgroup>
+          )
+          : <em>(Deleted account)</em>}
+      </header>
+    </article>
+  );
+}

packages/botkit/src/pages.tsx

@@ -31,6 +31,7 @@ import { decode } from "html-entities";
 import type { BotImpl } from "./bot-impl.ts";
 import { Layout } from "./components/Layout.tsx";
 import { Message } from "./components/Message.tsx";
+import { Follower } from "./components/Follower.tsx";
 import { getMessageClass, isMessageObject, textXss } from "./message-impl.ts";
 import type { MessageClass } from "./message.ts";
 import type { Uuid } from "./repository.ts";
@@ -142,9 +143,11 @@ app.get("/", async (c) => {
             </a>{" "}
             &middot;{" "}
             <span>
-              {followersCount === 1
-                ? `1 follower`
-                : `${followersCount.toLocaleString("en")} followers`}
+              <a href="/followers">
+                {followersCount === 1
+                  ? `1 follower`
+                  : `${followersCount.toLocaleString("en")} followers`}
+              </a>
             </span>{" "}
             &middot;{" "}
             <span>
@@ -206,6 +209,45 @@ app.get("/", async (c) => {
   );
 });
 
+app.get("/followers", async (c) => {
+  const { bot } = c.env;
+  const ctx = bot.federation.createContext(c.req.raw, c.env.contextData);
+  const session = bot.getSession(ctx);
+  const followersCount = await bot.repository.countFollowers();
+  const followers = await Array.fromAsync(bot.repository.getFollowers());
+
+  const url = new URL(c.req.url);
+  const activityLink = ctx.getActorUri(bot.identifier);
+  const feedLink = new URL("/feed.xml", url);
+
+  return c.html(
+    <Layout
+      bot={bot}
+      host={url.host}
+      activityLink={activityLink}
+      feedLink={feedLink}
+    >
+      <header class="container">
+        <h1>
+          <a href="/">&larr;</a>{" "}
+          {followersCount === 1
+            ? `1 follower`
+            : `${followersCount.toLocaleString("en")} followers`}
+        </h1>
+      </header>
+      <main class="container">
+        {followers.map((follower, index) => (
+          <Follower
+            key={follower.id?.href ?? index}
+            actor={follower}
+            session={session}
+          />
+        ))}
+      </main>
+    </Layout>,
+  );
+});
+
 app.get("/tags/:hashtag", async (c) => {
   const hashtag = c.req.param("hashtag");
   const { bot } = c.env;