fix(website): change header logo to avoid search bar overlapping in smaller resolution

[shahsank3t]

Signed-off-by: Sanket Shah [email protected]

Issue #153

Replacing the image (logo + text) to a smaller imager (logo) when the resolution is less than or equal to 480px

Screenshot

[Michael-Grover]

Looks great! Can you change the breakpoint from 480px to 500px and add the alt text from the issue to the image?

Set the Alt text to "Return to docs.accordproject.org homepage"

[shahsank3t]

@Michael-Grover Sure, I'll change the breakpoint but adding the alt text will again cause the overlapping issue as visible below.

I believe the default alt text "Accord Project" should be fine here.

What's your take on it?

[Michael-Grover]

@shahsank3t sorry for the confusion, when I wrote "alt text" I meant alternative text for visually impaired people using screen readers

https://moz.com/learn/seo/alt-text

[shahsank3t]

@Michael-Grover Oh, I see.
Just to understand it properly, should this alt text be reflecting for both (logo + text image & smaller logo image) or only for smaller logo image?
If for both, need to check within Docusaurus to add alt text different then the title and if only for smaller logo image, can we instead have "Accord Project - Return to docs.accordproject.org homepage" as Alt text?

[Michael-Grover]

@shahsank3t

Ideally this alt text should be for both the smaller and larger logo, because both have the function described in the alt text. So both should have identical alt text. Neither need to say "Accord Project" before "Return to docs.accordproject.org"

[shahsank3t]

@Michael-Grover @jeromesimeon
The current version of Docusaurus we are using doesn't support passing a custom alt text to the image. It refers to the title itself. (Ref: https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-1.x/lib/core/nav/HeaderNav.js#L315)

If there's a plan to update Docusaurus version to the latest one, they have added supported to add custom alt text (Ref: https://github.com/facebook/docusaurus/blob/master/website/docusaurus.config.js#L61-L64)

Just a heads-up, if we decide upon updating the library, there will be plenty of changes in existing siteConfig.js to catch up with the latest ones. :)

[shahsank3t]

@Michael-Grover meanwhile I have pushed the change to set the breakpoint to 500px.

[jeromesimeon]

Looks great on my phone, @shahsank3t !

[jeromesimeon]

Great fix. Thanks!

[jeromesimeon]

@Michael-Grover @jeromesimeon
The current version of Docusaurus we are using doesn't support passing a custom alt text to the image. It refers to the title itself. (Ref: https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-1.x/lib/core/nav/HeaderNav.js#L315)

If there's a plan to update Docusaurus version to the latest one, they have added supported to add custom alt text (Ref: https://github.com/facebook/docusaurus/blob/master/website/docusaurus.config.js#L61-L64)

Just a heads-up, if we decide upon updating the library, there will be plenty of changes in existing siteConfig.js to catch up with the latest ones. :)

Thanks a lot for the detailed review on that. Would you feel like opening an issue about this? (I have some questions about the siteConfig.js and which version of Docusaurus, etc but those could probably be best in a new issue).

[Michael-Grover]

@shahsank3t thank you for helping with this issue. I've logged your contribution for Hacktoberfest 👍

[shahsank3t]

@Michael-Grover @jeromesimeon - My pleasure guys. Got to learn new stuff like Docusaurus today while fixing this issue.

BTW, filed another issue to discuss updating the Docusaurus - #160