[dyad] Added H1 tag extraction - wrote 3 file(s)

src/app/actions.ts

@@ -41,6 +41,7 @@ export async function extractMetaData(url: string) {
       $('meta[name="description"]').attr("content") ||
       "No description found";
     const image = $('meta[property="og:image"]').attr("content") || null;
+    const h1 = $('h1').first().text().trim() || "No H1 found";
 
     const faqData: FaqItem[] = [];
     $('script[type="application/ld+json"]').each((i, el) => {
@@ -78,6 +79,7 @@ export async function extractMetaData(url: string) {
         title,
         description,
         image,
+        h1,
         faq: faqData.length > 0 ? faqData : null,
       },
     };

src/components/meta-form.tsx

@@ -17,6 +17,7 @@ interface MetaData {
   title: string;
   description: string;
   image?: string | null;
+  h1: string;
   faq?: { question: string; answer: string }[] | null;
 }
 
@@ -28,15 +29,18 @@ export function MetaForm() {
 
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [isEditingDescription, setIsEditingDescription] = useState(false);
+  const [isEditingH1, setIsEditingH1] = useState(false);
 
   const [editableTitle, setEditableTitle] = useState("");
   const [editableDescription, setEditableDescription] = useState("");
+  const [editableH1, setEditableH1] = useState("");
   const [imageError, setImageError] = useState(false);
 
   useEffect(() => {
     if (metaData) {
       setEditableTitle(metaData.title);
       setEditableDescription(metaData.description);
+      setEditableH1(metaData.h1);
       setImageError(false);
     }
   }, [metaData]);
@@ -48,6 +52,7 @@ export function MetaForm() {
     setMetaData(null);
     setIsEditingTitle(false);
     setIsEditingDescription(false);
+    setIsEditingH1(false);
     setImageError(false);
 
     const result = await extractMetaData(url);
@@ -217,6 +222,55 @@ export function MetaForm() {
                     </p>
                   )}
                 </div>
+                <div>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-semibold text-card-foreground">
+                        H1 Heading
+                      </h3>
+                      <LengthIndicator
+                        length={editableH1.length}
+                        type="title"
+                      />
+                      <span className="text-sm text-muted-foreground">
+                        {editableH1.length} Characters
+                      </span>
+                    </div>
+                    <div className="flex items-center">
+                      <CopyButton textToCopy={editableH1} />
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setIsEditingH1(!isEditingH1)}
+                        className="h-8 w-8"
+                      >
+                        {isEditingH1 ? (
+                          <Check className="h-4 w-4" />
+                        ) : (
+                          <Edit className="h-4 w-4" />
+                        )}
+                        <span className="sr-only">
+                          {isEditingH1 ? "Done editing" : "Edit"}
+                        </span>
+                      </Button>
+                    </div>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-1 mb-2">
+                    The primary heading of the page, which should be unique.
+                  </p>
+                  {isEditingH1 ? (
+                    <Input
+                      value={editableH1}
+                      onChange={(e) => setEditableH1(e.target.value)}
+                      className="w-full"
+                      placeholder="H1 Heading"
+                    />
+                  ) : (
+                    <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[40px] break-words">
+                      {editableH1 || "Not found"}
+                    </p>
+                  )}
+                </div>
                 <div>
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2">

src/components/results-skeleton.tsx

@@ -52,6 +52,17 @@ export function ResultsSkeleton() {
               <Skeleton className="h-4 w-full mb-2" />
               <Skeleton className="h-10 w-full" />
             </div>
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <Skeleton className="h-5 w-24" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-8 w-8" />
+                  <Skeleton className="h-8 w-8" />
+                </div>
+              </div>
+              <Skeleton className="h-4 w-full mb-2" />
+              <Skeleton className="h-10 w-full" />
+            </div>
             <div>
               <div className="flex items-center justify-between mb-2">
                 <Skeleton className="h-5 w-36" />