Add a optional download button on Code Blocks

[jy95]

Hello,

For code blocks, we already have a copy button so why not a button to download the code block into a file ?

For example :

```jsx title="/src/components/HelloCodeTitle.js" canDownload=true
function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}

When clicking on the download button, you get a file called HelloCodeTitle.js ( or src_components_HelloCodeTitle.js to keep it simple)

As showncast in my example, that behavior should be disabled by default, as not all code blocks are worthy to be download IHMO
(One open question is how to provide the MIME type to Blob or having by default application/text in case nothing was provided )

What do you think ?

Thanks in advance

[slorber]

🤷‍♂️ never seen that feature before and I don't really find it valuable. Do you have example doc sites doing this?

It's quite niche and you can implement it on your own site with swizzle. If it's not possible or complex (too much to swizzle) than we should focus on making it easier for you to add this button, but I don't think we want it to be a core feature unless we have at least a few users requesting it, and proof that it's a good UX.

[jy95]

IHMO, I think it isn't niche and could be interesting to be added.
I don't have specific examples in mind but I can see situations showing its value :

• https://mui.com/ : you want to download several variant of a Component & play with it locally
• You have multiple files to copy and it becomes annoying to copy them into files
• ...
  (It could be useful for Meta packages such as Jest that put bunch of code blocks - https://jestjs.io/docs/setup-teardown )

I don't think it is safe to swizzle the whole CodeBlock component just to add a button (in the docs usually you swizzle only a specific component such as Line or even CopyButton if you want for example to replace the icon ^^). It would be nice to have a Buttons components

npm run swizzle @docusaurus/theme-classic CodeBlock/Buttons

Then in swizzle :

import CopyButton from '@theme/CodeBlock/CopyButton';

function MyComponent() {

   return (
        <Buttons>
                {/* Original Copy Button from Docusaurus */}
                <CopyButton />
                {/* TODO Extra buttons */}
                <DownloadButton >
        </Buttons>
  )
}

[slorber]

IHMO, I think it isn't niche and could be interesting to be added.

If we have 5+ people asking for this we can consider it, once we have a proper understanding of the use-case, a design proposal and the bandwidth to implement it.

There's a canny feature request board where people can vote so it's a better place to collect interest.

Jest website maintainers (Simen and I) or other Meta sites haven't expressed interested in having this feature so far

It would be nice to have a Buttons components

That's much more likely to happen in the short term, I'm in favor of enabling users to implement their opinionated stuff, over providing everything out of the box 👍

[jy95]

Where is this canny feature request board ?

As I said above, I acknowledge that all codes blocks aren't worthy to be downloaded into files, thus the canDownload field.

In my mind, stuff like :

• examples configuration files (yaml, json, ...)
• queries (graphql, sql, ...)
• small files output (csv, ...)
• scripts (when introducing the notion of plugins, ...)
• ...

that are supported in prism are scenarios where such feature find its interests ...

That's much more likely to happen in the short term, I'm in favor of enabling users to implement their opinionated stuff, over providing everything out of the box

Open closed principle is welcome : some people might have funzy ideas such as a button to have a picture of the code with Carbon app

[slorber]

Where is this canny feature request board ?

Feature Requests in the sidebar: https://docusaurus.io/community/support

[jy95]

If looking for an example (in the future), I saw this on website https://bundlejs.com/