Landing pages: Update the code examples area to differentiate between different types of content

[docs-bot]

This issue is reserved for MLH fellow program

What is the current behavior?

The code examples area was originally created for the Actions landing page and most examples there are of the same type (actions). This has been adapted for use on the Code security landing page. One key difference between actions and code security is that we need to display a variety of different content types, for example:

• Great examples of security.md files (security policy)
• Examples of workflows including the CodeQL action codeal-analysis.yml and maybe third party static analyzers (code scanning)
• Examples of security advisories
• Examples of dependabot.yml files (Dependabot version updates)

What changes are you suggesting?

Some visual identifier for different types of examples, so it's clearer what people will see when they click on an item. It would be good to be able to filter by example type too - similarly to how you can in the All guide section of the Guides sub-landing page.

Additional information

[cmwilson21]

@janiceilene I was able to use Primer colors for most of the labels. However, I needed just a few more colors, so used this web-accessibility site and found a few there that I felt were different enough from the Primer colors. Attached are the screenshots of the labels in both dark and light mode. The colors were picked at random. If you or anyone else feels that there are other more suitable colors, I'm happy to change things up.

[janiceilene]

These look great! I think the red and brown (in the last screenshot they say Dependabot and Alerts) are a pretty similar in light mode. If there's something a little more different that'd be great, but if not, I think it's fine to go with this for now!

[cmwilson21]

Thanks! I'll check the colors again for those two labels and see what I can do with them. Thank you!

[Kieudung717]

Vào 21:47, T.6, 8 Th4, 2022 Courtney Wilson ***@***.***> đã viết:

…

@janiceilene <https://github.com/janiceilene> I was able to use Primer <https://primer.style/css/utilities/colors#background> colors for most of the labels. However, I needed just a few more colors, so used this web-accessibility site <http://web-accessibility.carnegiemuseums.org/design/color/> and found a few there that I felt were different enough from the Primer colors. Attached are the screenshots of the labels in both dark and light mode. The colors were picked at random. If you or anyone else feels that there are other more suitable colors, I'm happy to change things up. [image: label-colors1-light] <https://user-images.githubusercontent.com/77312589/162461606-ec98cd3d-58bc-450c-8b8b-5a0c65536f3e.png> [image: label-colors2-light] <https://user-images.githubusercontent.com/77312589/162461678-66992e9c-7f21-4c58-a58b-b74216ea65cd.png> [image: label-colors1-dark] <https://user-images.githubusercontent.com/77312589/162461712-80c0a326-cdf7-4fac-b745-adde1a724137.png> [image: label-colors2-dark] <https://user-images.githubusercontent.com/77312589/162461741-7e09bfc2-6fb5-4de8-a381-f971f5cf386c.png> — Reply to this email directly, view it on GitHub <#15989 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXTWXQI7CBBCIIESW4NQZI3VEBBHNANCNFSM5PXOVSCA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[github-actions]

A stale label has been added to this issue becuase it has been open for 60 days with no activity. To keep this issue open, add a comment within 3 days.