feat: Switch to SVG logo; use it (and new bitmaps) in more places (#4035)

* feat: Switch to SVG logo; use it (and new bitmaps) in more places

* Run images through image_optim

* Copy icons from base template

* Tint icons red when in dev mode

ietf/static/css/ietf.scss

@@ -56,11 +56,6 @@ $popover-max-width: 100%;
 // Utilities
 @import "bootstrap/scss/utilities/api";
 
-// Make the bootstrap icons available.
-$bootstrap-icons-font-src: url("npm:bootstrap-icons/font/fonts/bootstrap-icons.woff2?a97b3594ad416896e15824f6787370e0") format("woff2"),
-url("npm:bootstrap-icons/font/fonts/bootstrap-icons.woff?a97b3594ad416896e15824f6787370e0") format("woff") !default;
-@import "bootstrap-icons/font/bootstrap-icons";
-
 // Leave room for fixed-top navbar...
 body {
     padding-top: 60px;
@@ -82,9 +77,18 @@ pre {
     margin-bottom: 0;
 }
 
-// Make the font size choice cascade down into group menu dropdowns.
-.leftmenu li>ul {
-    font-size: inherit;
+// Size the navbar brand image.
+.navbar-brand img {
+    height: auto;
+    width: 60px;
+}
+
+.leftmenu {
+    width: 13em;
+
+    li>ul {
+        font-size: inherit; // Make the font size choice cascade down into group menu dropdowns.
+    }
 }
 
 // Use fixed lengths for the first three columns of "meta" tables.
@@ -100,7 +104,7 @@ table tbody.meta {
         width: 7em;
     }
 
-    // See https://getbootstrap.com/docs/5.0/layout/breakpoints/#media-queries
+    // See https://getbootstrap.com/docs/5.1/layout/breakpoints/#media-queries
     @include media-breakpoint-up(md) {
 
         th:first-child,
@@ -251,7 +255,7 @@ table tbody.meta {
     border: 2 * $table-border-width solid #000;
 }
 
-// See https://getbootstrap.com/docs/5.0/customize/color/#all-colors
+// See https://getbootstrap.com/docs/5.1/customize/color/#all-colors
 $color-discuss: $red-500;
 $color-yes: $green-500;
 $color-noobj: $green-100;

ietf/static/js/ietf.js

@@ -16,6 +16,9 @@ import "bootstrap/js/dist/tooltip";
 
 import jquery from "jquery";
 
+// Make the bootstrap icons available. Yes, we require CSS in JS, parcel wants this.
+require("bootstrap-icons/font/bootstrap-icons.css");
+
 window.$ = window.jQuery = jquery;
 if (!process.env.BUILD_DEPLOY) {
     // get warnings for using deprecated jquery features

ietf/templates/401.html

@@ -4,7 +4,7 @@
 {% block title %}401 Unauthorized{% endblock %}
 {% block content %}
     <img class="col-2 mb-5"
-         src="{% static 'ietf/images/ietflogo.png' %}"
+         src="{% static 'ietf/images/ietf-logo.svg' %}"
          alt="IETF">
     <div class="alert alert-warning my-3">
         <h1>Authentication Required</h1>

ietf/templates/403.html

@@ -4,7 +4,7 @@
 {% block title %}404 Not Found{% endblock %}
 {% block content %}
     <img class="col-2 mb-5"
-         src="{% static 'ietf/images/ietflogo.png' %}"
+         src="{% static 'ietf/images/ietf-logo.svg' %}"
          alt="IETF">
     <div class="alert alert-warning my-3">
         <h1>Restricted Access</h1>

ietf/templates/404.html

@@ -4,7 +4,7 @@
 {% block title %}404 Not Found{% endblock %}
 {% block content %}
     <img class="col-2 mb-5"
-         src="{% static 'ietf/images/ietflogo.png' %}"
+         src="{% static 'ietf/images/ietf-logo.svg' %}"
          alt="IETF">
     <div class="alert alert-warning my-3">
         <h1>The page you were looking for couldn't be found</h1>

ietf/templates/500.html

@@ -4,7 +4,7 @@
 {% block title %}500 Internal Server Error{% endblock %}
 {% block content %}
     <img class="col-2 mb-5"
-         src="{% static 'ietf/images/ietflogo.png' %}"
+         src="{% static 'ietf/images/ietf-logo.svg' %}"
          alt="IETF">
     <div class="alert alert-warning my-3">
         <h1>Internal Server Error</h1>

ietf/templates/base.html

@@ -21,18 +21,9 @@
         <link rel="stylesheet" href="{% static 'ietf/css/select2.css' %}">
         <style>
             {% block morecss %}{% endblock %}
-            .leftmenu { width: 13em; }
         </style>
         {% block pagehead %}{% endblock %}
-        {% if server_mode and server_mode == "production" %}
-            <link rel="shortcut icon"
-                  href="{% static 'ietf/images/ietf-icon-blue3.png' %}">
-        {% else %}
-            <link rel="shortcut icon"
-                  href="{% static 'ietf/images/ietf-icon-red3.png' %}">
-        {% endif %}
-        <link rel="apple-touch-icon"
-              href="{% static 'ietf/images/apple-touch-icon.png' %}">
+        {% include "base/icons.html" %}
         <script src="{% static 'ietf/js/ietf.js' %}"></script>
         {% analytical_head_bottom %}
     </head>
@@ -43,8 +34,8 @@
         <nav class="navbar navbar-expand-lg {% if server_mode and server_mode != "production" %} navbar-light bg-warning {% else %} navbar-dark bg-secondary {% endif %}  {% if navbar_mode %} {{ navbar_mode }} {% else %} fixed-top {% endif %}">
             <div class="container-fluid">
                 <a class="navbar-brand" href="/">
-                    <img alt="IETF Logo"
-                         src="{% static 'ietf/images/ietflogo-small-transparent.png' %}">
+                    <img alt="IETF Logo" class="me-1"
+                         src="{% static 'ietf/images/ietf-logo-nor.svg' %}">
                     Datatracker
                     {% if server_mode and server_mode != "production" %}Dev Mode{% endif %}
                 </a>
@@ -165,4 +156,4 @@
         </script>
       {% analytical_body_bottom %}
     </body>
-</html>
+</html>

ietf/templates/base/icons.html

@@ -0,0 +1,19 @@
+{# Copyright The IETF Trust 2015-2022, All Rights Reserved #}
+{% load static %}
+<link rel="apple-touch-icon"
+      sizes="180x180"
+      href="{% if server_mode and server_mode == 'production' %}{% static 'ietf/images/ietf-logo-nor-180.png' %}{% else %}{% static 'ietf/images/ietf-logo-nor-180-dev.png' %}{% endif %} ">
+<link rel="icon"
+      sizes="32x32"
+      href="{% if server_mode and server_mode == 'production' %}{% static 'ietf/images/ietf-logo-nor-32.png' %}{% else %}{% static 'ietf/images/ietf-logo-nor-32-dev.png' %}{% endif %} ">
+<link rel="icon"
+      sizes="16x16"
+      href="{% if server_mode and server_mode == 'production' %}{% static 'ietf/images/ietf-logo-nor-16.png' %}{% else %}{% static 'ietf/images/ietf-logo-nor-16-dev.png' %}{% endif %} ">
+<link rel="manifest" href="/site.webmanifest">
+<link rel="mask-icon"
+      href="{% static 'ietf/images/ietf-logo-nor-mask.svg' %}"
+      {% if server_mode and server_mode == 'production' %}color="#ffffff"{% else %}color="#ffc4c4"{% endif %}>
+<meta name="msapplication-TileColor"
+      {% if server_mode and server_mode == 'production' %}content="#ffffff"{% else %}color="#ffc4c4"{% endif %}>
+<meta name="theme-color"
+      {% if server_mode and server_mode == 'production' %}content="#ffffff"{% else %}color="#ffc4c4"{% endif %}>

ietf/templates/doc/frontpage.html

@@ -12,7 +12,7 @@
         <div class="col-md-12">
             <div class="text-center p-5">
                 <img class="ietflogo p-3"
-                     src="{% static 'ietf/images/ietflogo.png' %}"
+                     src="{% static 'ietf/images/ietf-logo.svg' %}"
                      alt="IETF">
                 {% if server_mode != "production" %}
                     <h1 class="text-danger">Datatracker &ndash; {{ server_mode|capfirst }} Mode</h1>

ietf/templates/doc/htmlized_base.html

@@ -125,16 +125,8 @@
 
             {% block morecss %}{% endblock %}
         </style>
-        {% block pagehead %}{% endblock %}
-        {% if server_mode and server_mode == "production" %}
-            <link rel="shortcut icon"
-                  href="{% static 'ietf/images/ietf-icon-blue3.png' %}">
-        {% else %}
-            <link rel="shortcut icon"
-                  href="{% static 'ietf/images/ietf-icon-red3.png' %}">
-        {% endif %}
-        <link rel="apple-touch-icon"
-              href="{% static 'ietf/images/apple-touch-icon.png' %}">
+        {% block pagehead %}{% endblock %}\
+        {% include "base/icons.html" %}
     </head>
     <body {% block bodyAttrs %}{% endblock %}>
         <div class="content" id="content">

ietf/templates/oidc_provider/error.html

@@ -4,7 +4,7 @@
 {% block title %}404 Not Found{% endblock %}
 {% block content %}
     <img class="col-2 mb-5"
-         src="{% static 'ietf/images/ietflogo.png' %}"
+         src="{% static 'ietf/images/ietf-logo.svg' %}"
          alt="IETF">
     <div class="alert alert-warning my-3">
         <h2>{{ error }}</h2>

ietf/templates/site.webmanifest

@@ -0,0 +1,30 @@
+{% load static %}
+{
+    "name": "IETF Datatracker",
+    "short_name": "Datatracker",
+    "icons": [
+    {
+        {% if server_mode and server_mode == "production" %}
+            "src": "{% static 'ietf/images/ietf-logo-nor-192.png' %}",
+        {% else %}
+            "src": "{% static 'ietf/images/ietf-logo-nor-192-dev.png' %}",
+        {% endif %}
+        "sizes": "192x192",
+        "type": "image/png"
+    },
+    {
+        {% if server_mode and server_mode == "production" %}
+            "src": "{% static 'ietf/images/ietf-logo-nor-512.png' %}",
+        {% else %}
+            "src": "{% static 'ietf/images/ietf-logo-nor-512-dev.png' %}",
+        {% endif %}
+        "sizes": "512x512",
+        "type": "image/png"
+    }],
+    "theme_color": "#ffffff",
+    {% if server_mode and server_mode == "production" %}
+        "background_color": "#ffffff"
+    {% else %}
+        "background_color": "#ffc4c4"
+    {% endif %}
+}

ietf/urls.py

@@ -74,6 +74,9 @@ urlpatterns = [
 
     # Google webmaster tools verification url
     url(r'^googlea30ad1dacffb5e5b.html', TemplateView.as_view(template_name='googlea30ad1dacffb5e5b.html')),
+
+    # Android webmanifest
+    url(r'^site.webmanifest', TemplateView.as_view(template_name='site.webmanifest')),
 ]
 
 # This is needed to serve files during testing

package.json

@@ -46,14 +46,21 @@
         "ietf/static/css/liaisons.css",
         "ietf/static/css/list.scss",
         "ietf/static/css/select2.scss",
-        "ietf/static/images/apple-touch-icon.png",
         "ietf/static/images/arrow-ani.webp",
         "ietf/static/images/iesg-draft-state-diagram.png",
-        "ietf/static/images/ietf-icon-blue3.png",
-        "ietf/static/images/ietf-icon-red3.png",
-        "ietf/static/images/ietflogo-small-transparent.png",
-        "ietf/static/images/ietflogo.png",
-        "ietf/static/images/sprite.png",
+        "ietf/static/images/ietf-logo-nor-16-dev.png",
+        "ietf/static/images/ietf-logo-nor-16.png",
+        "ietf/static/images/ietf-logo-nor-180-dev.png",
+        "ietf/static/images/ietf-logo-nor-180.png",
+        "ietf/static/images/ietf-logo-nor-192-dev.png",
+        "ietf/static/images/ietf-logo-nor-192.png",
+        "ietf/static/images/ietf-logo-nor-32-dev.png",
+        "ietf/static/images/ietf-logo-nor-32.png",
+        "ietf/static/images/ietf-logo-nor-512-dev.png",
+        "ietf/static/images/ietf-logo-nor-512.png",
+        "ietf/static/images/ietf-logo-nor-mask.svg",
+        "ietf/static/images/ietf-logo-nor.svg",
+        "ietf/static/images/ietf-logo.svg",
         "ietf/static/js/agenda_filter.js",
         "ietf/static/js/agenda_materials.js",
         "ietf/static/js/agenda_personalize.js",