[WIP] Fix copy to clipboard functionality in ProjectCard component

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Bug Description

The copy to clipboard functionality in the ProjectCard component has a bug where all copy buttons copy the same text (from the first card) instead of copying the text from their respective cards.

Root Cause

The issue is in features/twBlog/ProjectCard.tsx. The copyContent function uses document.getElementById("commandText") to find the text to copy. Since all ProjectCard instances use the same ID (id="commandText"), getElementById always returns the first element with that ID, causing all copy buttons to copy text from the first card.

Solution

Fix the copyContent function to use the command prop directly instead of querying the DOM:

const copyContent = async () => {
  try {
    if (command) {
      await navigator.clipboard.writeText(command);
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), 2000); // Reset after 2 seconds
    }
  } catch (err) {
    console.error("Failed to copy: ", err);
  }
};

Also remove the unnecessary id="commandText" attribute from the span element displaying the command text (around line 40).

Files to Change

• features/twBlog/ProjectCard.tsx

Expected Behavior After Fix

• Each copy button should copy the text from its own card
• The copied state indicator should work independently for each card
• No duplicate IDs in the DOM

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
blog	Ready	Preview, Comment	Jan 16, 2026 11:05am

[tg44]

@copilot Please continue with the fix!

[tg44]

@copilot Please continue with the fix!