[docs-infra] Add a code path heading to the code block

[danilo-leal]

Problem

Sometimes, we want to say what is the name of the file a certain code block is part of. There are multiple instances of this throughout the documentation, and we seem to do it in different ways here and there:

• Just mentioning the file name and bolding the text.
• Back-ticking the file name within a paragraph.
• Back-ticking the file name outside of a paragraph.
• etc.

We could be much more polished and potentially clearer if we included this information within the code block. Sometimes, it can be a good redundancy, too ⎯ we don't need to remove the paragraph introduction to the file.

Solution design

There might be exciting challenges to pulling this off from a code perspective, but as far as design, this is what I'm thinking of. We could even add the ability to display longer paths if that makes sense.

[alexfauquette]

Sounds interesting

Should it be compliant with the codeblock where code gets a tab on top of it or no?

[danilo-leal]

@alexfauquette that's up to you! I don't have any preferences on the DX side here ⎯ whatever you deem best. But it should work if the code block has tabs, too, in case we want to have both (tabs & file path).

[danilo-leal]

@bharatkashyap I'm curious if you have any thoughts or ideas about this one! 😬

[bharatkashyap]

@danilo-leal I really like your proposed solutions, and thought of the tabs we implemented for the Toolpad landing page:

I feel like what Alex mentioned about being compliant with the proposed multiple tabs solution might help us unify the efforts, so I think the image you showed of the filename header coupled with an easy way to hide the breadcrumbs in case of multiple tabs might help us create a solution that scales.