Update site logo (endoflife-date#28, endoflife-date#978)

A handmade logo, derived from https://commons.wikimedia.org/wiki/File:Hourglass_icon_%28orange%29.svg was used. It represents the concepts of time (with the hourglass) and EOL/cycles (with the colored split circle).

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 using CSS. It had to be done that way because the Just the Docs theme does not offer an extension point for doing it.

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

Note that I would have prefered 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,32 @@ 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. The logo is representing the concepts of time (with the hourglass)
+and EOL/cycles (with the colored split circle).
+
+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: /assets/logo-512x512.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;
+  }
+}