Use a default icon per category (#8369)

Currently the endoflife.date logo is used for products with no `iconSlug`. This use a default icon per category.

The icons are from https://github.com/tabler/tabler-icons. They are MIT licensed.

Closes #2551.

Author: marcwrobel

CONTRIBUTING.md

@@ -83,8 +83,8 @@ category: os
 #   - set a runtime dependency such as java-runtime, javascript-runtime or php-runtime.
 tags: amazon linux-distribution
 
-# Simple Icons (https://simpleicons.org/) icon slug (optional).
-# Remove this property if the icon is not available on Simple Icons.
+# Simple Icons icon slug (https://simpleicons.org/) for the product or its vendor (optional).
+# Remove this property if no relevant icon is available on Simple Icons.
 # As an example, https://simpleicons.org/?q=codemagic links to https://simpleicons.org/icons/codemagic.svg ,
 # so the slug is `codemagic` (the SVG filename without extension).
 # A list of all slugs is also available on https://github.com/simple-icons/simple-icons/blob/develop/slugs.md .

README.md

@@ -37,19 +37,14 @@ Licensed under the [MIT License](LICENSE).
 
 endoflife.date is relying on various amazing software and components :
 
-- [GitHub](https://github.com/), an Internet hosting service for software development and version
-  control,
+- [GitHub](https://github.com/), an Internet hosting service for software development and version control.
 - [Jekyll](https://jekyllrb.com/), a static site generator.
-- [Ruby](https://www.ruby-lang.org/), a dynamic and open source programming language with a focus on
-  simplicity and productivity.
+- [Ruby](https://www.ruby-lang.org/), 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.
-- [Swagger UI](https://swagger.io/tools/swagger-ui/), a documentation generator for OpenAPI
-  Specification.
+- [Swagger UI](https://swagger.io/tools/swagger-ui/), a documentation generator for OpenAPI Specification.
 - [Simple Icons](https://simpleicons.org/), free SVG icons for popular brands.
-- Our icon is derived from [Hourglass icon (orange)](https://commons.wikimedia.org/wiki/File:Hourglass_icon_%28orange%29.svg)
-  by David Abián and Serhio Magpie on the English Wikipedia. Remixed under the CC-BY-SA-4.0 license.
+- [Tabler Icons](https://github.com/tabler/tabler-icons), a complete icon set with perfect line weights and spacing - ready for Figma, apps, and design systems.
+- Our icon is derived from [Hourglass icon (orange)](https://commons.wikimedia.org/wiki/File:Hourglass_icon_%28orange%29.svg) by David Abián and Serhio Magpie on the English Wikipedia, remixed under the CC-BY-SA-4.0 license.
 - [RealFaviconGenerator](https://realfavicongenerator.net/), a favicon Generator, for real.
 - [Netlify](https://www.netlify.com/), an all-in-one platform for automating modern web projects.
-- Product descriptions are adapted from the [English Wikipedia](https://en.wikipedia.org/),
-  under [CC BY-SA 3.0](https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License)
-  license.
+- Product descriptions are adapted from the [English Wikipedia](https://en.wikipedia.org/), under [CC BY-SA 3.0](https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License) license.

_includes/product-icon.html

@@ -1,8 +1,9 @@
 {%- assign product_icon_url = include.product.iconUrl %}
+{%- assign product_icon_category = include.product.category %}
 {%- assign product_icon_description = include.product.title %}
 {%- assign product_icon_size = include.size %}
 {%- unless product_icon_url %}
-  {%- assign product_icon_url = '/assets/default-product-logo.svg' | relative_url %}
-  {%- assign product_icon_description = 'No product' %}
+  {%- assign product_icon_url = '/assets/category-' | append: product_icon_category | append: '.svg' | relative_url %}
+  {%- assign product_icon_description = 'Icon for ' | append: product_icon_category %}
 {%- endunless %}
 <img class="product-logo" width="{{ product_icon_size }}" src="{{ product_icon_url }}" alt="{{ product_icon_description }} logo">