[dyad] Created a meta tag extractor app - wrote 5 file(s), added cheerio package(s)

src/app/actions.ts

@@ -0,0 +1,47 @@
+"use server";
+
+import * as cheerio from "cheerio";
+
+export async function extractMetaData(url: string) {
+  if (!url) {
+    return { error: "URL is required." };
+  }
+
+  let formattedUrl = url;
+  if (!/^https?:\/\//i.test(url)) {
+    formattedUrl = `https://${url}`;
+  }
+
+  try {
+    const response = await fetch(formattedUrl, {
+      headers: {
+        "User-Agent":
+          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
+      },
+    });
+
+    if (!response.ok) {
+      return { error: `Failed to fetch URL. Status: ${response.status}` };
+    }
+
+    const html = await response.text();
+    const $ = cheerio.load(html);
+
+    const title =
+      $('meta[property="og:title"]').attr("content") ||
+      $("title").text() ||
+      "No title found";
+    const description =
+      $('meta[property="og:description"]').attr("content") ||
+      $('meta[name="description"]').attr("content") ||
+      "No description found";
+
+    return { data: { title, description } };
+  } catch (error) {
+    console.error(error);
+    if (error instanceof Error && error.message.includes('Invalid URL')) {
+        return { error: "The provided URL is not valid. Please check and try again." };
+    }
+    return { error: "An unexpected error occurred while fetching the URL." };
+  }
+}

src/app/page.tsx

@@ -1,12 +1,21 @@
 import { MadeWithDyad } from "@/components/made-with-dyad";
+import { MetaForm } from "@/components/meta-form";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-1 items-center sm:items-start">
-        <h1>Blank page</h1>
+    <div className="grid grid-rows-[1fr_auto] items-center justify-items-center min-h-screen p-4 sm:p-8 font-[family-name:var(--font-geist-sans)] bg-gray-50 dark:bg-gray-900">
+      <main className="flex flex-col gap-8 row-start-1 items-center w-full max-w-2xl">
+        <div className="text-center space-y-2">
+          <h1 className="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-white">
+            Meta Tag Extractor
+          </h1>
+          <p className="text-gray-600 dark:text-gray-300">
+            Enter a URL to extract its meta title and description.
+          </p>
+        </div>
+        <MetaForm />
       </main>
       <MadeWithDyad />
     </div>
   );
-}
+}