[dyad] Added keyword highlighting - wrote 3 file(s)

src/components/keyword-highlighter.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+
+interface KeywordHighlighterProps {
+  text: string;
+  keyword: string | null | undefined;
+}
+
+export function KeywordHighlighter({ text, keyword }: KeywordHighlighterProps) {
+  if (!keyword || !text || keyword.trim() === "") {
+    return <>{text}</>;
+  }
+
+  const escapedKeyword = keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+  const regex = new RegExp(`(${escapedKeyword})`, "gi");
+  const parts = text.split(regex);
+
+  return (
+    <>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <mark
+            key={i}
+            className="bg-yellow-200 text-yellow-900 dark:bg-yellow-700 dark:text-yellow-50 rounded px-1 mx-px font-semibold"
+          >
+            {part}
+          </mark>
+        ) : (
+          part
+        )
+      )}
+    </>
+  );
+}

src/components/meta-form.tsx

@@ -29,6 +29,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ImageAltDisplay } from "./image-alt-display";
 import { TabIndicator } from "./tab-indicator";
 import { getLengthIndicatorColor, type IndicatorColor } from "@/lib/analysis";
+import { KeywordHighlighter } from "./keyword-highlighter";
 
 interface MetaData {
   title: string;
@@ -259,6 +260,7 @@ export function MetaForm() {
                         title={editableTitle}
                         description={editableDescription}
                         url={url}
+                        keyword={metaData.keyword}
                       />
                     </div>
                     {metaData.image && (
@@ -331,7 +333,14 @@ export function MetaForm() {
                         />
                       ) : (
                         <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[40px] break-words">
-                          {editableTitle || "Not found"}
+                          {editableTitle ? (
+                            <KeywordHighlighter
+                              text={editableTitle}
+                              keyword={metaData.keyword}
+                            />
+                          ) : (
+                            "Not found"
+                          )}
                         </p>
                       )}
                     </div>
@@ -385,7 +394,14 @@ export function MetaForm() {
                         />
                       ) : (
                         <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[100px] break-words">
-                          {editableDescription || "Not found"}
+                          {editableDescription ? (
+                            <KeywordHighlighter
+                              text={editableDescription}
+                              keyword={metaData.keyword}
+                            />
+                          ) : (
+                            "Not found"
+                          )}
                         </p>
                       )}
                     </div>

src/components/serp-preview.tsx

@@ -1,14 +1,21 @@
 "use client";
 
 import { Globe } from "lucide-react";
+import { KeywordHighlighter } from "./keyword-highlighter";
 
 interface SerpPreviewProps {
   title: string;
   description: string;
   url: string;
+  keyword?: string | null;
 }
 
-export function SerpPreview({ title, description, url }: SerpPreviewProps) {
+export function SerpPreview({
+  title,
+  description,
+  url,
+  keyword,
+}: SerpPreviewProps) {
   const formatUrl = (fullUrl: string) => {
     try {
       let formattedUrl = fullUrl;
@@ -18,7 +25,7 @@ export function SerpPreview({ title, description, url }: SerpPreviewProps) {
       const urlObject = new URL(formattedUrl);
       const path = urlObject.pathname === "/" ? "" : urlObject.pathname;
       // remove trailing slash
-      const displayPath = path.endsWith('/') ? path.slice(0, -1) : path;
+      const displayPath = path.endsWith("/") ? path.slice(0, -1) : path;
       return `${urlObject.hostname}${displayPath}`;
     } catch (error) {
       return fullUrl;
@@ -41,11 +48,16 @@ export function SerpPreview({ title, description, url }: SerpPreviewProps) {
         </div>
       </div>
       <h3 className="text-xl text-blue-600 dark:text-blue-400 mt-2 truncate font-medium">
-        {title || "Meta Title Preview"}
+        <KeywordHighlighter text={title || "Meta Title Preview"} keyword={keyword} />
       </h3>
       <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
-        {description ||
-          "This is where the meta description will be displayed. It provides a brief summary of the page's content for search engine users."}
+        <KeywordHighlighter
+          text={
+            description ||
+            "This is where the meta description will be displayed. It provides a brief summary of the page's content for search engine users."
+          }
+          keyword={keyword}
+        />
       </p>
     </div>
   );