[amberly-d]

feat(frontend): add dynamic course OG metadata and ShareButton

Summary

Open Graph / Twitter metadata

• Splits app/courses/[id]/page.tsx into a server component that exports
  generateMetadata and course-detail-content.tsx, which keeps the existing
  client-side learning-context logic unchanged.
• generateMetadata fetches the course from the API (5-minute revalidation,
  best-effort with a safe fallback) and emits:
  • title and a truncated description
  • canonical URL
  • openGraph (website, site name, title, description, image)
  • twitter (summary_large_image)
  • the course thumbnailUrl when present, otherwise /og-default.png
• Root layout now sets metadataBase (from NEXT_PUBLIC_SITE_URL, default
  http://localhost:3000), a title template and default OG/Twitter metadata.

ShareButton

• New components/ui/share-button.tsx built on the existing Button:
  • Uses navigator.share() when available.
  • Falls back to navigator.clipboard.writeText() with a toast and a
    “Copied” state.
  • Treats a cancelled native share sheet as a no-op and handles clipboard
    failures.
• Added to the course detail header and replaces the clipboard-only handler in
  the certificate card (shares the certificate verification URL).

Default image

• Adds public/og-default.png, 1200×630, with the ByteChain Academy name and
  the “Learn Web3 in 5-minute bites” tagline.

Closes #291

Notes

app/learners/[username]/page.tsx does not exist in this repository and there
is no username/XP API to back it, so learner-profile OG tags are not included in
this PR. They should be added together with that page.

Testing

• npm ci in frontend/ succeeds.
• npx eslint on every changed file — passes.
• npx tsc --noEmit with the pre-existing app/profile/page.tsx parse error
  temporarily repaired reports only pre-existing errors in
  certificates, profile, settings, quiz-manager-panel, checkbox and
  input; no errors in the new or changed files.
• The default image is a valid 1200×630 RGB PNG.