chromeOS.dev is the digital home for all things ChromeOS. Learn how to adapt and optimize your existing apps to work on ChromeOS, the success other companies have had doing so, how to use ChromeOS as your developer machine, and keep up-to-date with the latest on ChromeOS.
Implements the Badge Guidelines page (/en/guidelines) and its supporting components:
BadgeGenerator
MediaExample
Correct, Incorrect, and Download icons
I ran into an issue with the <Code /> component's use of prismjs. Upon instantiating the <BadgeGenerator /> as an island, Code began throwing the error Prism is not defined.. Looking through past commits that dealt with the Code component, it seems like there's a larger issue at play here between Astro and Prism that may be causing this issue. For this reasons, I've used a bog-standard <pre> element in place of the Code component so that the generator's functionality could be previewed.
I also ran into an issue with Post HTML image processing within Svelte components as it conflicts with client-side re-rendering. Upon being hydrated, image src attributes revert to the cms://<_ref> format. I saw within the <AnimatedHero /> component that this issue was previously resolved by hardcoding the image sources as their finalized https://chromeos-dev.imgix.net URLs, which may also be necessary here. This adjustment may likely need to be applied to the "Download all Badges" link.
Lastly, there are a couple color values that have TODOs attached to them as well - they either very slightly varied from an existing color, or differed from the global color assigned to similar elements.
Please describe what your Pull Request does
Implements the Badge Guidelines page (
/en/guidelines) and its supporting components:I ran into an issue with the
<Code />component's use ofprismjs. Upon instantiating the<BadgeGenerator />as an island, Code began throwing the errorPrism is not defined.. Looking through past commits that dealt with the Code component, it seems like there's a larger issue at play here between Astro and Prism that may be causing this issue. For this reasons, I've used a bog-standard<pre>element in place of the Code component so that the generator's functionality could be previewed.I also ran into an issue with Post HTML image processing within Svelte components as it conflicts with client-side re-rendering. Upon being hydrated, image
srcattributes revert to thecms://<_ref>format. I saw within the<AnimatedHero />component that this issue was previously resolved by hardcoding the image sources as their finalizedhttps://chromeos-dev.imgix.netURLs, which may also be necessary here. This adjustment may likely need to be applied to the "Download all Badges" link.Lastly, there are a couple color values that have TODOs attached to them as well - they either very slightly varied from an existing color, or differed from the global color assigned to similar elements.
Please tag each issue this Pull Request resolves