feat: add remote follow

CHANGES.md

@@ -6,6 +6,15 @@ Version 0.4.0
 
 To be released.
 
+### @fedify/botkit
+
+ -  Added remote follow button.  [[#10], [#14] by Hyeonseo Kim]
+
+     -  Added Follow button and modal on main page.
+     -  Added `POST /follow` route to handle remote follow action.
+
+[#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",

packages/botkit/deno.json

@@ -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/package.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/src/components/FollowButton.tsx

@@ -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();
+          }
+        `,
+        }}
+      />
+    </>
+  );
+}