HDDS-9572. Restore favicons from original ozone website

[errose28]

What changes were proposed in this pull request?

Don't be scared by the line count in this change, it's mostly image files and the auto generated pnpm-lock.

Summary

The current version of the new website only supplies a single favicon .ico file. This works for most cases, but there are other uses where more icons are required. The range of icon types and sizes is somewhat complicated, but there are a few blogs online that attempt to summarize the minimum requirements. I referenced these two to implement these changes:

• https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
• https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7

Browser Icons

For universal compatibility, one favicon.ico at the root of the website is recommended. For sites that support svg icons, we can add a favicon.svg file at the root as well. Docusaurus's favicon config only supports one file, so instead of using that I have used the config to insert head tags specifying both icons.

Web App Icons

To support installing the webpage as a Portable Web Application (PWA), I am using Docusaurus's PWA plugin. It might be doing some magic in the background, but all I've configured is pointing it to the manifest.json file to configure the PWA. FWIW PWA support seemed to work without this plugin by just adding a head tag pointing to the manifest, but using the plugin may cover some corner cases I missed. The manifest file and icons recommended for PWAs by the articles listed above are in the static/pwa directory to distinguish them from the general purpose favicons.

apple-touch-icon.png gets used when a shortcut to the website is created on the home screen of iOS devices. I don't have an iOS devices to test this and I think it would be difficult to test without deploying to the staging site anyways. When installing the site on MacOS as a Safari Web App, I'm pretty sure the PWA config is used instead of apple-touch-icon.

Generating Icons

The Portable Web App icons (in the pwa directory) were generated from the existing Ozone svg logo using https://maskable.app/editor. The 180px apple touch icon is a resized version of the 512px PWA icon. The favicon.ico file came from the original website. The favicon.svg is also from the original Ozone svg logo.

What is the link to the Apache Jira?

HDDS-9572

How was this patch tested?

• Local preview in Safari and Chrome shows the Favicon correctly.
• Icon is shown correctly when site is installed as a PWA from Safari
• Icon is kind of shown correctly when site is installed as a PWA from Chrome
  • For some reason the corners aren't getting rounded, but my understanding is that this should either be done by Chrome running the PWA or MacOS when generating the dock icon and should not be baked into the image.
• Manual inspection of build/index.html shows that head tags are added correctly:

<link rel="manifest" href="/pwa/manifest.json">
<link rel="icon" href="favicon.ico" sizes="32x32">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Screenshots

• Website running as PWA from Safari and its dock icon
  
  

• Website running as a PWA from Chrome with its dock icon (not rounded for some reason...)
  
  

[dombizita]

Thanks for your continuous effort on fixing this @errose28! I tried it locally, it looks good to me, but I don't have too much knowledge around this area (the PR description is really useful, thanks!).
I don't know what could cause the not rounded dock icon, I tried to look into it, maybe if you define the size in the headTags for the apple-touch-icon? I found this while searching in google, highlighting the importance of the icon size.

[errose28]

Thanks for the review @dombizita. I'll check the reference you shared and take another stab at getting the rounded icon for the chrome pwa on macos. I think that's a pretty small use case, so we can probably merge this as is if we can't get that one part to work after another attempt.

[dombizita]

@errose28 agree, that can be addressed later. +1 for these changes

[errose28]

Thanks for the review @dombizita. I think fixing the square icon is going to take more investigation than it is worth right now, so let's merge this to get the rest of the changes in. I think this chrome article might have some pointers we could check if we want to follow up on this in the future.