[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>
   );
-}
+}

src/components/meta-form.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Globe } from "lucide-react";
+import { extractMetaData } from "@/app/actions";
+
+interface MetaData {
+  title: string;
+  description: string;
+}
+
+export function MetaForm() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [metaData, setMetaData] = useState<MetaData | null>(null);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setLoading(true);
+    setError(null);
+    setMetaData(null);
+
+    const formData = new FormData(event.currentTarget);
+    const url = formData.get("url") as string;
+
+    const result = await extractMetaData(url);
+
+    if (result.error) {
+      setError(result.error);
+    } else if (result.data) {
+      setMetaData(result.data);
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div className="w-full space-y-6">
+      <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row items-center gap-3">
+        <div className="relative w-full">
+          <Globe className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+          <Input
+            name="url"
+            type="url"
+            placeholder="https://example.com"
+            required
+            className="pl-10 h-12 text-base rounded-lg shadow-sm"
+          />
+        </div>
+        <Button type="submit" disabled={loading} className="w-full sm:w-auto h-12 px-8 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-semibold transition-all">
+          {loading ? "Extracting..." : "Extract"}
+        </Button>
+      </form>
+
+      {error && (
+        <Card className="bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-500/30">
+          <CardContent className="p-4">
+            <p className="text-red-600 dark:text-red-400 text-center">{error}</p>
+          </CardContent>
+        </Card>
+      )}
+
+      {metaData && (
+        <Card className="w-full shadow-lg rounded-lg">
+          <CardHeader>
+            <CardTitle className="text-xl text-gray-800 dark:text-white">Extraction Results</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <h3 className="font-semibold text-gray-700 dark:text-gray-300">Meta Title</h3>
+              <p className="text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 p-3 rounded-md mt-1">
+                {metaData.title || "Not found"}
+              </p>
+            </div>
+            <div>
+              <h3 className="font-semibold text-gray-700 dark:text-gray-300">Meta Description</h3>
+              <p className="text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 p-3 rounded-md mt-1">
+                {metaData.description || "Not found"}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}