feat: ✨ add automatic webmentions for statuses

Jak2k · Mar 24, 2024 · fb6e283 · fb6e283
1 parent c1d09ba
commit fb6e283
Showing 1 changed file with 101 additions and 66 deletions.
diff --git a/src/pages/status/create.astro b/src/pages/status/create.astro
@@ -4,77 +4,112 @@ import Base from "../../layouts/Base.astro";
 
 export const prerender = false;
 
-if (Astro.request.method === "POST") {
-    // get ASTRO_USER_SECRET from the environment variables
-    if (
-        Astro.request.headers.get("Authorization") !==
-        `Bearer ${process.env.ASTRO_USER_SECRET}`
-    ) {
-        return new Response("Unauthorized", { status: 401 });
+async function sendWebmention(url: string): Promise<void> {
+  // Escape the URL (excluding protocol)
+  const escapedUrl = encodeURIComponent(url.split("://")[1] || url);
+
+  // Build the request URL
+  const requestUrl = `https://webmention.app/check/?url=${escapedUrl}`;
+
+  try {
+    const response = await fetch(requestUrl, {
+      method: "POST",
+    });
+
+    if (!response.ok) {
+      throw new Error(`Request failed with status: ${response.status}`);
     }
 
-    const formData = await Astro.request.formData();
-    const text = formData.get("text");
-    const timestamp = new Date();
-    const replyTo = formData.get("replyTo");
-    const likeOf = formData.get("likeOf");
-    const repostOf = formData.get("repostOf");
-
-    if (
-        typeof text === "string" &&
-        typeof replyTo === "string" &&
-        typeof likeOf === "string" &&
-        typeof repostOf === "string"
-    ) {
-        await db
-            .insert(Status)
-            .values({ text, timestamp, replyTo, likeOf, repostOf });
+    console.log("Webmention sent successfully!");
+  } catch (error) {
+    console.error("Error sending Webmention:", error);
+  }
+}
+
+if (Astro.request.method === "POST") {
+  // get ASTRO_USER_SECRET from the environment variables
+  if (
+    Astro.request.headers.get("Authorization") !==
+    `Bearer ${process.env.ASTRO_USER_SECRET}`
+  ) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const formData = await Astro.request.formData();
+  const text = formData.get("text");
+  const timestamp = new Date();
+  const replyTo = formData.get("replyTo");
+  const likeOf = formData.get("likeOf");
+  const repostOf = formData.get("repostOf");
+
+  if (
+    typeof text === "string" &&
+    typeof replyTo === "string" &&
+    typeof likeOf === "string" &&
+    typeof repostOf === "string"
+  ) {
+    await db
+      .insert(Status)
+      .values({ text, timestamp, replyTo, likeOf, repostOf });
+
+    if (import.meta.env.MODE === "production") {
+      // get latest status
+      const statuses = await db.select().from(Status);
+
+      const latestStatus = statuses.sort(
+        (a, b) => b.timestamp - a.timestamp
+      )[0];
+      const id = latestStatus.id;
+      const url = `https://jak2k.schwanenberg.name/status/${id}`;
+      console.log("Sending webmention to", url);
+      await sendWebmention(url);
     }
+  }
 }
 ---
 
 <Base title="Create Post" description="Create a new post">
-    <form method="POST" style="display: grid">
-        <label for="text">Text</label>
-        <textarea id="text" name="text" text-black></textarea>
-
-        <label for="replyTo">Reply To</label>
-        <input id="replyTo" name="replyTo" type="text" text-black />
-
-        <label for="likeOf">Like Of</label>
-        <input id="likeOf" name="likeOf" type="text" text-black />
-
-        <label for="repostOf">Repost Of</label>
-        <input id="repostOf" name="repostOf" type="text" text-black />
-
-        <button type="submit">Submit</button>
-    </form>
-
-    <!-- Auth -->
-    <script type="module">
-        const form = document.querySelector("form");
-        form.addEventListener("submit", async (event) => {
-            event.preventDefault();
-            const formData = new FormData(form);
-            const response = await fetch(location.pathname, {
-                method: "POST",
-                headers: {
-                    Authorization: `Bearer ${localStorage.getItem("ASTRO_USER_SECRET")}`,
-                },
-                body: formData,
-            });
-            if (response.ok) {
-                alert("Post created!");
-
-                // clear form
-                form.reset();
-            } else {
-                alert("Failed to create post");
-
-                // show input to enter ASTRO_USER_SECRET
-                const ASTRO_USER_SECRET = prompt("Enter ASTRO_USER_SECRET");
-                localStorage.setItem("ASTRO_USER_SECRET", ASTRO_USER_SECRET);
-            }
-        });
-    </script>
+  <form method="POST" style="display: grid">
+    <label for="text">Text</label>
+    <textarea id="text" name="text" text-black></textarea>
+
+    <label for="replyTo">Reply To</label>
+    <input id="replyTo" name="replyTo" type="text" text-black />
+
+    <label for="likeOf">Like Of</label>
+    <input id="likeOf" name="likeOf" type="text" text-black />
+
+    <label for="repostOf">Repost Of</label>
+    <input id="repostOf" name="repostOf" type="text" text-black />
+
+    <button type="submit">Submit</button>
+  </form>
+
+  <!-- Auth -->
+  <script type="module">
+    const form = document.querySelector("form");
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      const formData = new FormData(form);
+      const response = await fetch(location.pathname, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("ASTRO_USER_SECRET")}`,
+        },
+        body: formData,
+      });
+      if (response.ok) {
+        alert("Post created!");
+
+        // clear form
+        form.reset();
+      } else {
+        alert("Failed to create post");
+
+        // show input to enter ASTRO_USER_SECRET
+        const ASTRO_USER_SECRET = prompt("Enter ASTRO_USER_SECRET");
+        localStorage.setItem("ASTRO_USER_SECRET", ASTRO_USER_SECRET);
+      }
+    });
+  </script>
 </Base>