feat: copy button on blog pages and getting started pages#487
Conversation
Deploying ddev-com-front-end with
|
| Latest commit: |
0cde7e0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c07e114e.ddev-com-front-end.pages.dev |
| Branch Preview URL: | https://20251213-bmartinez-copybutto.ddev-com-front-end.pages.dev |
|
So this version is different from #121 since it still relies on the shiki plugin directly. The way it works is through a custom transformer plugin that lets that copy button come in. #121 replaced shiki for the astroExpressiveCode which astro starlight and other popular astro packages use, but that also changes how the terminal looked in a few different places. |
There was a problem hiding this comment.
This looks nice and works fine for me in Safari and Firefox, but three things seem odd:
- Each code block is preceded with an unnecessary
---. Maybe that’s an untransformed Markdown horizontal rule? - The horizontal padding for the code block’s text and copy button is inconsistent.
- It’s a little strange to copy sample terminal output and not the commands you would want to copy and paste. I assume there’s no way to toggle the copy feature for each code block or limit the copyable chunk of text?
Sorry for the deranged-looking arrows but this is what I’m referring to in context:
|
|
Thanks @bmartinez287! I realize the copy area is an annoying thing to deal with, it just seems like a minor barrier to someone getting started. Do you think it’s possible to match the padding on blog post pages? That looks more optically correct to me (example): 
That left padding would ideally match the right side (1), with a little bit of padding at the bottom of the window so a one-line example still gets even spacing to the right and bottom of the copy button (2). (You could probably scoot the copy button up slightly and aim to align the baseline of the code and copy text.) Nitpicky again but it’d feel more balanced and better match the other less-fancy code blocks. |
|
yeah. that sounds good. |
stasadev
left a comment
There was a problem hiding this comment.
Looks good to me, one small nitpick, can we better support horizontal scrolling? The copy button should always remain in the upper right corner:
|
So great that this is going to land, big improvement! |
|
One more thing: we don't need copy in mobile:
The button overlaps with the code. |
acf93d6 to
14a14be
Compare
Fixed it:
Fixed it, no copy for any width below 768px:
I also tried to fix it, but without success. I think we can live with it. |
| // Regex to find the symbol at the start of a line (or start of string), globally | ||
| const search = new RegExp(`^${searchSymbol} `, "gm") | ||
| return code.replaceAll(search, `<span class="prompt">${symbol} </span>`) | ||
| return code.replaceAll(search, "") |
There was a problem hiding this comment.
Losing this visible prompt is unfortunate, but if we have to sacrifice it, that is OK.
I'll make one last attempt to get it back.
All good now, prompt symbol is back, and Claude Code helped me with fixing copy for: Now it copies only
|
stasadev
left a comment
There was a problem hiding this comment.
Looks good to me, please check again and give a second approval.
rfay
left a comment
There was a problem hiding this comment.
I looked at the result in a blog post and in get-started and they both looked great, but I'm not much of a web expert.
|
Thank you for making this happen @bmartinez287 ! Thanks for still paying attention @mattstein ! |
The Issue
Adds a copy button for code.
Use Gemini to determine how to integrate it with the getting-started page.
Manual Testing
Review at, for example: