Add copy button for code blocks on MD files - branch

[bmartinez287]

The Issue
Currently, blog posts don't have a copy button snippets of code. The DDev docs do but not ddev.com

How This PR Solves The Issue
Astro uses the astro-expressive-code plugin which provides that functionality.
https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/README.md

The image below is taken from this blog
https://ddev.com/blog/amd64-on-apple-silicon-ddev/

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	31f4998
Status:	✅  Deploy successful!
Preview URL:	https://5e950618.ddev-com-front-end.pages.dev
Branch Preview URL:	https://20231015-bmartinez287-mdcopy.ddev-com-front-end.pages.dev

View logs

[bmartinez287]

Here it is.

[rfay]

Congratulations! Of course you didn't have to re-do this but I'm glad you got it sorted out.

[rfay]

Working great, thanks!

[mattstein]

Thanks for having a look at it! I’m still seeing a different typeface and drop shadow I mentioned here, and a faux-window-button effect for the .ddev/commands/web/artisan file example:

[bmartinez287]

So the faux window shown in the pic comes from this plugin.
https://www.npmjs.com/package/@expressive-code/plugin-frames
https://www.npmjs.com/package/@expressive-code/plugin-frames#terminal-window-frames
Code blocks will be rendered as a terminal window if their language identifier matches one of the supported terminal languages bash, shell script, shell, sh, or zsh:
That piece of code has it because it does a ```bash

```bash
#!/bin/bash

This same plugin has the copy button. I have been trying to see if it can be extracted but that's tricky. It also tricky to remove those shadows styles I might look and see if any of the other ones might look closer to the nord we had.

[bmartinez287]

So after looking into this a little more the faux window seems more like a feature. I could go back through all 20 guides and change it so it looks appropriate if needed. But that's one feature that seems pretty bundled with it. Hard to turn off on its own. It would only show on very specific cases in which one had a bash, shell script, shell, sh, or zsh.

The shadow is gone. We could technically change the typeface, but I'm not sure it's worth it since they look pretty similar and Astro docs use the IBM one which is the one we are moving to.

I like how Astro as the file path on the top corner. Right now that feature is disabled because we haven't used it so it would display like this.

And yet I could see how that could be useful when trying to find where a file lives. But for backwards compatibility we can do that later or just do a pass on the blogs and get the file path and the faux window on or off.

[mattstein]

I’m all for adding a copy button and showing file paths when each is relevant and useful.

But I’m uncomfortable with the PR because it introduces a new way of handling code blocks that...

1. Creates differences in style between blog post fenced code blocks and the Terminal + AnimatedTerminal components that should ideally be as similar as possible.
2. Adds its own way of handling faux window treatments for terminal commands (vs. code snippets), which is exactly what the Terminal component is already doing.
3. Has no impact on the Get Started commands, which I think are the most urgent things we’d want people to be able to copy so they can have a smooth first experience with DDEV.

If we’re going to overhaul code blocks, I think we should do it consistently and thoroughly. This adds a copy button to some of them while also creating a hodgepodge.

[bmartinez287]

Makes sense. We could leave it here until a better alternative arrives or maybe we can figure how to do full replacement with it.

[rfay]

Where did we end up on this?

[bmartinez287]

We could get it to work on markdown files, but the quick-start page works differently. So we likely had to rework the quick-start page and make it into a markdown file instead of the current custom template.
Then, we might have to work around current and older blog posts to make them fully compatible with the new plugin syntax. They will work as they are, but for blogpost to be consistent we may have to modify some slightly.

[rfay]

So there's no reasonable path for this right now I guess? Was a great initiative.

[bmartinez287]

I'm looking at Astro new https://starlight.astro.build/getting-started/
starlight documentation theme and looking at what we can pull from there when it comes to the copy button and redoing some of the get started pages so they inherit the copy button and are not left behind.

[rfay]

Would love to see this move forward.