Merge pull request #14 from dodok8/dodok8-remote-follow

Author: dahlia

CHANGES.md

@@ -6,6 +6,23 @@ Version 0.4.0
 
 To be released.
 
+### @fedify/botkit
+
+ -  Added a remote follow button to the web interface.
+    [[#10], [#14] by Hyeonseo Kim]
+
+     -  Added a Follow button on the bot's profile page that allows users to
+        follow the bot from their own fediverse instance without manual
+        searching.
+     -  When clicked, the button opens a modal dialog where users can enter
+        their fediverse handle (e.g., `@username@instance.com`).
+     -  The feature uses WebFinger to discover the user's instance and
+        automatically redirects to the appropriate follow page using the OStatus
+        subscribe protocol.
+
+[#10]: https://github.com/fedify-dev/botkit/issues/10
+[#14]: https://github.com/fedify-dev/botkit/pull/14
+
 
 Version 0.3.0
 -------------

deno.json

@@ -8,7 +8,7 @@
     "temporal"
   ],
   "imports": {
-    "@fedify/fedify": "jsr:@fedify/fedify@^1.8.8",
+    "@fedify/fedify": "jsr:@fedify/fedify@1.9.0-dev.1516+8f42bff1",
     "@logtape/logtape": "jsr:@logtape/logtape@^1.0.4",
     "@std/fs": "jsr:@std/fs@^1.0.19",
     "@std/path": "jsr:@std/path@^1.1.1",

deno.lock

@@ -23,6 +23,7 @@
     "markdown-it": "npm:markdown-it@^14.1.0",
     "mime-db": "npm:mime-db@^1.54.0",
     "tsdown": "npm:tsdown@^0.12.8",
+    "url-template": "npm:url-template@^3.1.1",
     "uuid": "npm:uuid@^11.1.0",
     "xss": "npm:xss@^1.0.15"
   },

packages/botkit/deno.json

@@ -94,6 +94,7 @@
     "html-entities": "^2.6.0",
     "markdown-it": "^14.1.0",
     "mime-db": "^1.54.0",
+    "url-template": "^3.1.1",
     "uuid": "^11.1.0",
     "x-forwarded-fetch": "catalog:",
     "xss": "^1.0.15"

packages/botkit/package.json

@@ -0,0 +1,63 @@
+/** @jsxImportSource hono/jsx */
+import type { BotImpl } from "../bot-impl.ts";
+
+export interface FollowButtonProps {
+  readonly bot: BotImpl<unknown>;
+}
+
+export function FollowButton({ bot }: FollowButtonProps) {
+  return (
+    <>
+      <button
+        id="follow-btn"
+        type="button"
+        style="padding: 0.5rem 1rem; background: var(--pico-primary); color: var(--pico-primary-inverse); border: none; border-radius: 0.25rem; cursor: pointer;"
+        onclick="showFollowModal()"
+      >
+        Follow
+      </button>
+      <dialog id="follow-modal">
+        <article style="width: 400px;">
+          <header style="display: flex; align-items: center; justify-content:space-between">
+            <h3>Follow {bot.name ?? bot.username}</h3>
+            <button
+              aria-label="Close"
+              rel="prev"
+              type="button"
+              onclick="closeFollowModal()"
+            />
+          </header>
+          <main>
+            <p>Enter your fediverse handle to follow this account:</p>
+            <form action="/follow" method="post">
+              <input
+                type="text"
+                id="fediverse-handle"
+                name="handle"
+                placeholder="@username@instance.com"
+                required
+                style="width: 100%; margin-bottom: 1rem;"
+              />
+              <button type="submit" style="width: 100%;">
+                Follow
+              </button>
+            </form>
+          </main>
+        </article>
+      </dialog>
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+          function showFollowModal() {
+            document.getElementById('follow-modal').showModal();
+          }
+          
+          function closeFollowModal() {
+            document.getElementById('follow-modal').close();
+          }
+        `,
+        }}
+      />
+    </>
+  );
+}