feat: accept URL from form or searchParam

astro.config.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  output: "server",
+});

package.json

@@ -1,5 +1,13 @@
 {
+  "scripts": {
+    "start": "astro dev"
+  },
   "devDependencies": {
     "astro": "^2.4.4"
+  },
+  "dependencies": {
+    "@astro-reactive/form": "^0.8.1",
+    "@astro-reactive/validator": "^0.3.4",
+    "@extractus/article-extractor": "^7.2.15"
   }
 }

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/pages/index.astro

@@ -0,0 +1,32 @@
+---
+import Form, { FormGroup } from "@astro-reactive/form";
+import { Validators } from "@astro-reactive/validator";
+import { extract } from "@extractus/article-extractor";
+import getParams from "../utils/get-params";
+
+const params = getParams(Astro.url);
+const url = params?.url;
+const article = extract(url);
+
+const form = new FormGroup([
+  {
+    type: "text",
+    name: "url",
+    value: url || "",
+    placeholder: "Put the URL here",
+    validators: [Validators.required, Validators.minLength(11)],
+  },
+]);
+---
+
+<Form
+  formGroups={form}
+  showValidationHints
+  submitControl={{
+    type: "submit",
+    name: "submit",
+    value: "Get cozy!",
+  }}
+/>
+
+{article ? <p>{JSON.stringify(article)}</p> : "<hr />"}

src/utils/get-params.ts

@@ -0,0 +1,16 @@
+export default function getParams(
+  url: URL
+): { [key: string]: string } | undefined {
+  if (url.search === "") return;
+
+  return Object.fromEntries(
+    url.search
+      .replace("?", "")
+      .split("&")
+      .map((paramstr) => paramstr.split("="))
+      .map(([key, value]) => [
+        key,
+        decodeURIComponent(value?.replace(/\+/g, "%20")),
+      ])
+  );
+}