[docs] Add an "View source on GitHub" link on Element pages

[markcaron]

Adding an "View source on GitHub" link on Element pages, which will take the user directly to the Element's code in GitHub would be beneficial in learning more about the element in GitHub as well as potentially getting more contributors.

• [x] Design it
• [ ] Build it

[bennypowers]

great idea!

[marionnegp]

@coreyvickery @markcaron , I think a "View source on GitHub" CTA can go below the sample component. What do you think? I also thought about moving it below the demo, but depending on the height of the code block, it might be far down the page. (Figma link)

[coreyvickery]

@marionnegp I think I'm good with just adding a link until the new playground is designed.

[marionnegp]

This link has been added to the bottom of each demo section.

[bennypowers]

I'd still like to add a link for each element, which would link not specifically to the demo file, but to the element source directory

[bennypowers]

putting the link below the sample element would require us to either:

1. add a link manually to each and every element overview.md file or
2. write a transform for each file would would find that section and append the link

Instead, can we put it in the header or footer?

mockup

[bennypowers]

or perhaps it would always be the last nav tab, with an 'external link' icon

[coreyvickery]

@bennypowers

or perhaps it would always be the last nav tab, with an 'external link' icon

Getting a bit crowded with the new Demos tab.

putting the link below the sample element would require us to either:

add a link manually to each and every element overview.md file or write a transform for each file would would find that section and append the link

Guessing this is tedious and not ideal?

[coreyvickery]

@bennypowers Making sure you saw the above.

[zeroedin]

Reference #1882

Could likely do something similar and link to the Github source for elements.

[coreyvickery]

@zeroedin Do we still need to do this? I see it repeated a lot on the Demos pages in the element code blocks.

[bennypowers]

this needs design before we can proceed

[bennypowers]

@coreyvickery those links are to view the source for each particular demo file on github e.g. https://github.com/RedHat-UX/red-hat-design-system/blob/main/elements/rh-card/demo/grid.html

but this issue is for adding a link to view the element definition's source e.g. https://github.com/RedHat-UX/red-hat-design-system/blob/main/elements/rh-card/

[bennypowers]

bumping to cubone since design isn't ready