fix(blog): copy buttons on prompts hub + numbering fix#552
Conversation
…ring 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 <h3> to <p> for recommendation labels — prose-lg was adding large top margins to h3 elements, misaligning the green numbered circles.
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.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces static code blocks with a reusable CopyablePrompt component in the AI Resume Prompts Hub and updates the corresponding test assertions. Additionally, it improves heading semantics in the Best Free Resume Builders component. The reviewer suggested using a semantically correct <code> tag instead of a <span> within the new CopyablePrompt wrapper to improve accessibility and SEO.
| <CopyablePrompt title="Prompt" copyText={step.code}> | ||
| <span className="whitespace-pre-wrap">{step.code}</span> | ||
| </CopyablePrompt> |
There was a problem hiding this comment.
Using a tag instead of a is more semantically correct for representing code snippets or prompts, which improves accessibility for screen readers and SEO.
Suggested change
<CopyablePrompt title="Prompt" copyText={step.code}>
<span className="whitespace-pre-wrap">{step.code}</span>
</CopyablePrompt>
<CopyablePrompt title="Prompt" copyText={step.code}>
<code className="whitespace-pre-wrap">{step.code}</code>
</CopyablePrompt>
There was a problem hiding this comment.
@gemini-code-assist Good catch — applied in 991b6c5. <code> is more semantic for copy-paste prompt snippets.
There was a problem hiding this comment.
Understood. Since the change has already been applied and verified, no further action is required on this thread.
More semantically correct for copy-paste prompt snippets.
1 participant
Summary
/blog/ai-resume-prompts-hub): Replace bare<pre><code>blocks with the sharedCopyablePromptcomponent so users can copy workflow prompts with one click — consistent with all other prompt blog pages/blog/best-free-resume-builders-2026): Change<h3>→<p>for recommendation labels in the "Our Honest Recommendation" section —prose-lgwas adding ~26px top margin to h3 elements, misaligning the green numbered circlesTest plan
/blog/ai-resume-prompts-hub→ "How to Build an AI Resume Workflow" — each of the 5 steps shows a Copy button, clicking copies prompt text, "Copied!" feedback appears for 2s/blog/best-free-resume-builders-2026→ "Our Honest Recommendation" — green numbered circles are tightly aligned with bold text, no large gaps