ember-api-docs icon indicating copy to clipboard operation
ember-api-docs copied to clipboard

feat: new style for "package" headers

Open runspired opened this issue 2 years ago • 4 comments

runspired avatar Apr 10 '23 17:04 runspired

We reviewed this at the Learning Team meeting today and like the improvements to visual hierarchy on the package pages.

We spotted 2 changes needed, then this can be merged:

  • Can we make this something other than an h1? We noticed that there are multiple h1s on some pages. The h1 is what will be picked up by SEO, as opposed to the page's actual content focus, and having multiple h1s causes accessibility issues. This was a preexisting issue, but with increased use of the package attribute and the changes to visuals that move us away from typical heading typography, it's a good time to fix it.
  • The brown text over gray does not pass color contrast standards when we checked it on https://webaim.org/resources/contrastchecker/ Oddly enough, the browser developer tools didn't catch this, maybe because some styles come from ::after.

I also noticed that the mobile look could use some iteration, but that's not a blocker. It would be a good issue for a new contributor.

Let us know if you want any help making these adjustments!

Lastly, out of scope for this PR, but maybe helpful: when writing new docs, if ember data contributors use more specific h1s like "Overview of Something" vs "Overview", the topic will show up more easily in search engine results.

jenweber avatar Apr 18 '23 00:04 jenweber

P.S. Thank you for your work on this!

jenweber avatar Apr 18 '23 00:04 jenweber

Found this PR during the core-learning meeting, since we are currently working on the #710 we'll make sure this comes along in some shape or form :)

MinThaMie avatar Jul 10 '23 15:07 MinThaMie

Deploy Preview for ember-api-docs ready!

Name Link
Latest commit a1a2e3a39ba6c87e1ac599578700a06cda26a27e
Latest deploy log https://app.netlify.com/sites/ember-api-docs/deploys/6572f1a9bd857a0007c76ff8
Deploy Preview https://deploy-preview-856--ember-api-docs.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Dec 08 '23 10:12 netlify[bot]

Will close this PR in favour of the new design, took a screenshot and will add that to the projectboard

MinThaMie avatar Jul 30 '24 07:07 MinThaMie