Docs: Add a way to download .yaml files of application examples directly

[rrosa24]

As a user just getting started with AICA Studio, I would like to easily download the yaml file from the docs examples and use the "upload application .yaml" feature in the application manager to add the example applications into my AICA Studio, as opposed to copying the YAML, creating a new application, and pasting the yaml into the code section.

FYI @domire8 @eeberhard @SprGrf

[eeberhard]

Nice idea! To make sure we don't have to duplicate the content of the examples, we should either:

1. Put the example in the code block, and make the content of the code block downloadable
2. Put the example in a file in the repo under static site content, and then render the code block and the download link from that source file

The first is not something that is commonly seen, and our site generator Docusaurus does not support this kind of function for code blocks.

(You can see a discussion on this topic here and can vote on the related feature request if you want to prioritize it here)

For the second option, it should be more possible. Using something like https://github.com/christian-bromann/docusaurus-theme-github-codeblock or https://github.com/jknoxville/remark-code-snippets we could render code from example files in the repo and then also [download](/path/to/file) or <a target="_blank" href={ require("/path/to/file").default } download>download</a> direct link

It would actually be good for us to put example apps in a dedicated folder of the repository anyway, rather than defined in line with the docs, for easier finding and maintenance

[domire8]

Screencast.from.2026-04-01.07-44-54.mp4

This screencast shows 3 different ways of doing it

1. github codeblock that is fully expanded, with the github link at the end
2. github codeblock that is within an expandable section, the github link being at the bottom of that expandable section so not visible if not expanded
3. status quo

How do you feel about this?

[rrosa24]

Cool! Quite like option 1, but feel if the user has to scroll thru and then click on it and then click download it is still quite a bit of clicks/ time. Also, in the example here the link to GH appears between two examples and it may be confusing which example the link is for. What if we put the link up top/ nestled closer to the example? And I imagine we cannot have this button download the file from GH directly?

[domire8]

Quite like option 1,

I think option 1 is too much scrolling especially for larger applications

Also, in the example here the link to GH appears between two examples and it may be confusing which example the link is for.

This is just me showing you the 3 options, we wouldn't have consecutive examples usually

What if we put the link up top/ nestled closer to the example? And I imagine we cannot have this button download the file from GH directly?

I was thinking of the same thing but we don't have control over that

[rrosa24]

Is there a way we can get to the github link without all the scrolling? ie. a combo of 1 & 2 where if the example comes collapsed but with the github link on the outside so it is visible even when collapsed?