From 2c8fa09baa434b03dfef00f12023adc46be691d9 Mon Sep 17 00:00:00 2001 From: Amit Afre Date: Tue, 26 May 2026 08:50:05 +0100 Subject: [PATCH 1/3] fix(blog): add copy buttons to prompts hub + fix recommendation numbering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Prompts hub: add a Copy button to each dark code block in the agentic workflow section so users can copy prompt text with one click. Best builders: change

to

for recommendation labels — prose-lg was adding large top margins to h3 elements, misaligning the green numbered circles. --- .../components/blog/AIResumePromptsHub.tsx | 48 +++++++++++++++++-- .../blog/BestFreeResumeBuilders2026.tsx | 2 +- 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx b/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx index 034966db..87c73541 100644 --- a/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx +++ b/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import { Link } from "react-router-dom"; import BlogLayout from "../BlogLayout"; import RevealSection from "../shared/RevealSection"; @@ -337,6 +338,44 @@ Do not compliment the draft. Only flag problems and provide the corrected text.` }, ]; +function CopyButton({ text }: { text: string }) { + const [copied, setCopied] = useState(false); + + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(text); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch (err) { + console.error("Failed to copy:", err); + } + }; + + return ( + + ); +} + const PRIVACY_ROWS = [ { provider: "Claude", @@ -569,9 +608,12 @@ export default function AIResumePromptsHub() {

{step.title}

{step.description}

- 
-                      {step.code}
-
+
+ + 
+                        {step.code}
+
+
))} diff --git a/resume-builder-ui/src/components/blog/BestFreeResumeBuilders2026.tsx b/resume-builder-ui/src/components/blog/BestFreeResumeBuilders2026.tsx index c64ebcaf..806e729e 100644 --- a/resume-builder-ui/src/components/blog/BestFreeResumeBuilders2026.tsx +++ b/resume-builder-ui/src/components/blog/BestFreeResumeBuilders2026.tsx @@ -603,7 +603,7 @@ export default function BestFreeResumeBuilders2026() { {i + 1}
-

{rec.scenario}

+

{rec.scenario}

Pick: {rec.link ? ( From 86b87dafb2488e87ff0c5d10c0100457014a72a1 Mon Sep 17 00:00:00 2001 From: Amit Afre Date: Tue, 26 May 2026 08:55:06 +0100 Subject: [PATCH 2/3] refactor(blog): use shared CopyablePrompt for hub workflow prompts Replace custom dark pre/code blocks with the shared CopyablePrompt component used by all other prompt pages. Consistent copy-to-clipboard UX across the blog. Update test assertion to match new markup. --- .../src/__tests__/AIResumePromptsHub.test.tsx | 2 +- .../components/blog/AIResumePromptsHub.tsx | 49 ++----------------- 2 files changed, 6 insertions(+), 45 deletions(-) diff --git a/resume-builder-ui/src/__tests__/AIResumePromptsHub.test.tsx b/resume-builder-ui/src/__tests__/AIResumePromptsHub.test.tsx index ee4201c2..62e07887 100644 --- a/resume-builder-ui/src/__tests__/AIResumePromptsHub.test.tsx +++ b/resume-builder-ui/src/__tests__/AIResumePromptsHub.test.tsx @@ -150,7 +150,7 @@ describe("AIResumePromptsHub", () => { ).toBeInTheDocument(); }); - expect(container.querySelectorAll("pre code")).toHaveLength(5); + expect(screen.getAllByRole("heading", { level: 4, name: "Prompt" })).toHaveLength(5); expect( screen.getByRole("table", { name: /AI resume privacy controls by provider/i, diff --git a/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx b/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx index 87c73541..bd780ce4 100644 --- a/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx +++ b/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx @@ -1,6 +1,6 @@ -import { useState } from "react"; import { Link } from "react-router-dom"; import BlogLayout from "../BlogLayout"; +import CopyablePrompt from "../shared/CopyablePrompt"; import RevealSection from "../shared/RevealSection"; const REVIEW_DATE = "2026-05-25"; @@ -338,44 +338,6 @@ Do not compliment the draft. Only flag problems and provide the corrected text.` }, ]; -function CopyButton({ text }: { text: string }) { - const [copied, setCopied] = useState(false); - - const handleCopy = async () => { - try { - await navigator.clipboard.writeText(text); - setCopied(true); - setTimeout(() => setCopied(false), 2000); - } catch (err) { - console.error("Failed to copy:", err); - } - }; - - return ( - - ); -} - const PRIVACY_ROWS = [ { provider: "Claude", @@ -608,11 +570,10 @@ export default function AIResumePromptsHub() {

{step.title}

{step.description}

-
- - 
-                        {step.code}
-
+
+ + {step.code} +
))} From 991b6c545749fd0d5c13ae28ca7338014b79728f Mon Sep 17 00:00:00 2001 From: Amit Afre Date: Tue, 26 May 2026 09:08:52 +0100 Subject: [PATCH 3/3] fix(blog): use instead of for prompt content More semantically correct for copy-paste prompt snippets. --- resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx b/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx index bd780ce4..57ff4445 100644 --- a/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx +++ b/resume-builder-ui/src/components/blog/AIResumePromptsHub.tsx @@ -572,7 +572,7 @@ export default function AIResumePromptsHub() {

{step.description}

- {step.code} + {step.code}