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

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" />