developer.chrome.com
developer.chrome.com copied to clipboard
Update asides to match web.dev
I notice that the dcc and web.dev asides are not parallel, and should be.
- web.dev has an important aside, where on dcc it's a gotcha aside. I suggest we use "Important" as it's more inclusive of other uses.
- The dcc codelab aside should also have the header changed to match web.dev, as Try it. Updating this could also close https://github.com/GoogleChrome/developer.chrome.com/issues/2170, if we are opposed to a separate additional example aside.
Further, web.dev also has a Celebration
@rachelandrew I noticed this in the Learn Accessibility editing process. I'd be happy to make these updates myself, but wanted to ensure the work was tracked.
We recently tested a way to consolidate shortcodes used on both sites to webdev-infra with the {% BrowserCompat %}
shortcode as seen in https://github.com/GoogleChrome/webdev-infra/pull/41.
The basic idea is to move the shortcode logic as well as the styles to webdev-infra and while doing so eliminate the small style/naming differences for a shortcode. For the {% Aside %}
shortcode these are also the types. Those are the one's we currently have:
## web.dev
- caution
- celebration
- codelab
- gotchas
- important
- key-term
- note (default)
- objective
- success
- update
- warning
## d.c.c
- caution
- codelab
- gotchas
- important
- key-term
- (default)
- objective
- success
- warning
They are mostly 1:1 matches, though icons might differ and need to be consolidated to be usable on both (@tokyodanj).
For implementation, follow the approach from https://github.com/GoogleChrome/webdev-infra/pull/41. Move translations, styles (rewrite them in simple BEM style, add icons as CSS background-images, make colors overwritable and use current web.dev colors as hardcoded default) and logic (can be drastically simplified without the icon loading, make sure inline Markdown rendering stays intact) and translations to webdev-infra, wait for approval and publish and then create PRs for both web.dev and d.c.c that remove existing logic and use the new shared shortcode.
Estimate
Design - 4hrs Dev - 2.5 days
Design ready for review @devnook @matthiasrohmer
Design approved