errose28 opened a new pull request, #95: URL: https://github.com/apache/ozone-site/pull/95
## 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](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-pwa). It might be doing some magic in the background, but all I've configured is pointing it to the *site.webmanifest* 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/site.webmanifest"> <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...)   -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
