developer.chrome.com icon indicating copy to clipboard operation
developer.chrome.com copied to clipboard

Update asides to match web.dev

Open alexandrascript opened this issue 1 year ago • 1 comments

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

alexandrascript avatar Aug 04 '22 12:08 alexandrascript

@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.

alexandrascript avatar Aug 04 '22 12:08 alexandrascript

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.

matthiasrohmer avatar Jan 25 '23 10:01 matthiasrohmer

Estimate

Design - 4hrs Dev - 2.5 days

mollietokyo avatar Jan 26 '23 16:01 mollietokyo

Design ready for review @devnook @matthiasrohmer

tokyodanj avatar Feb 02 '23 13:02 tokyodanj

Design approved

tokyodanj avatar Feb 06 '23 18:02 tokyodanj