Update site icons (#28, #978)

A handmade icon derived from https://commons.wikimedia.org/wiki/File:Hourglass_icon_%28orange%29.svg was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

Site logo has been injected before the site name. It has to be done using CSS : the Just the Docs theme does not offer an extension point for doing this.

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated at least by the use of the Wikimedia icon as the site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).

HACKING.md

@@ -67,6 +67,29 @@ Other Jekyll commands [are documented](https://jekyllrb.com/docs/usage/) on the
 - [`robots.txt`](https://en.wikipedia.org/wiki/Robots.txt) is for web scraping robots.
 - [`humans.txt`](https://endoflife.date/humans.txt) holds details about the people and tech behind the project.
 
+## Extending the Jekyll theme
+
+The site is based on the [Just the Docs](https://github.com/just-the-docs/just-the-docs) Jekyll theme. Take a look at
+[the documentation](https://just-the-docs.github.io/just-the-docs/) for knowing more about its configuration (beware,
+this configuration is for the current `main` branch, not for the version used by this site).
+
+If you need to override some parts, take a look at [the customization section](https://just-the-docs.github.io/just-the-docs/docs/customization/)
+of the documentation.
+
+
+## Logo
+
+The [site logo](/assets/logo.svg) is an adaptation of [An hourglass in a round icon](https://commons.wikimedia.org/wiki/File:Hourglass_icon_%28orange%29.svg)
+by David Abián and Serhio Magpie. Derived icons for various usages, such as [the web app manifest](/manifest.json)
+were generated using [RealFaviconGenerator.net](https://realfavicongenerator.net/).
+
+All icons were placed in the [`assets`](/assets) directory, except [`favicon.ico`](/favicon.ico).
+The _Just the Docs_ Jekyll theme mandates its path to `/favicon.ico`, and it seems a lot of browsers
+[assume this location anyway](https://stackoverflow.com/a/21359390/374236).
+
+Note that `android-chrome-*.png` icons were renamed to `logo-*.png`. Those icons are used in other
+contexts, such as on the site as a logo.
+
 ## Automation
 
 Automation is currently focused towards fetching the latest releases for a given release cycle. Scripts for this are in the `_auto` directory, and run using `Rakefile`.

README.md

@@ -15,8 +15,26 @@ While participating in the project, you must abide by its [Code of Conduct](CODE
 ## API
 
 An API is available for integration with CI platforms. API documentation is available at https://endoflife.date/docs/api. The API is currently in Alpha, and breaking changes can happen.
+
 ## License
 
 Licensed under the [MIT License](LICENSE).
 
+## Credits
+
+endoflife.date is relying on various amazing software and components :
+
+- [GitHub](https://github.com/), an Internet hosting service for software development and version control,
+- [Jekyll](https://jekyllrb.com/), a static site generator.
+- [Ruby](https://jekyllrb.com/), a dynamic and open source programming language with a focus on simplicity and
+  productivity.
+- [Just the Docs](https://github.com/just-the-docs/just-the-docs), a documentation theme for Jekyll.
+- [Stoplight Elements](https://stoplight.io/open-source/elements), a collection of UI components for displaying
+  beautiful developer documentation from any OpenAPI document.
+- [Simple Icons](https://simpleicons.org/), free SVG icons for popular brands.
+- [An hourglass in a round icon](https://commons.wikimedia.org/wiki/File:Hourglass_icon_%28orange%29.svg)
+  by David Abián and Serhio Magpie.
+- [RealFaviconGenerator](https://realfavicongenerator.net/), a favicon Generator, for real.
+- [Netlify](https://www.netlify.com/), an all-in-one platform for automating modern web projects.
+
 [hacktoberfest]: https://github.com/endoflife-date/endoflife.date/issues/408

_config.yml

@@ -58,7 +58,7 @@ defaults:
   - scope:
       path: ""
     values:
-      image: /logo.png
+      image: /logo-512.png
   - scope:
       path: "products"
     values:

_includes/head_custom.html

@@ -7,3 +7,14 @@
 {% endcapture %}
 <meta name="description" content="{{ d | strip }}" />
 <meta property="og:description" content="{{ d | strip }}" />
+
+<!-- favicons - see https://realfavicongenerator.net -->
+<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/apple-touch-icon.png' | relative_url }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/favicon-32x32.png' | relative_url }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/favicon-16x16.png' | relative_url }}">
+<link rel="manifest" href="{{ 'manifest.json' | relative_url }}">
+<link rel="mask-icon" href="{{ '/assets/safari-pinned-tab.svg' | relative_url }}" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="{{ '/browserconfig.xml' | relative_url }}">
+<meta name="theme-color" content="#ffffff">
+

_sass/custom/custom.scss

@@ -59,3 +59,18 @@ body {
     }
   }
 }
+
+.site-title {
+  margin-left: 2rem;
+
+  &:before {
+    content: '';
+    background:url('/assets/logo-192x192.png');
+    background-size:cover;
+    position:absolute;
+    width: 2rem;
+    height: 2rem;
+    margin-left: -2.1rem;
+    margin-bottom: -.3rem;
+  }
+}