Changes the favicon depending on the current environment (#453)

* Using webpack plugin to pass in node env

* Node env working to change favicons

* Generated icons for the three environments

* Cleanup

* Testing using OS set application environment

* Removing node environment variables

* Updating spacing

* Fixes jinja statement

* Added comment with the tool used to generate favicons

* Updating template comparison to compare strings

amundsen_application/api/__init__.py

 from typing import Any, Tuple
 
 from flask import Flask, render_template
+import os
+
+ENVIRONMENT = os.getenv('APPLICATION_ENV', 'development')
 
 
 def init_routes(app: Flask) -> None:
@@ -10,7 +13,7 @@ def init_routes(app: Flask) -> None:
 
 
 def index(path: str) -> Any:
-    return render_template("index.html")  # pragma: no cover
+    return render_template("index.html", env=ENVIRONMENT)  # pragma: no cover
 
 
 def healthcheck() -> Tuple[str, int]:

amundsen_application/static/images/favicons/dev/browserconfig.xml

+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/static/images/favicons/dev/mstile-150x150.png"/>
+            <TileColor>#2d89ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

amundsen_application/static/images/favicons/dev/safari-pinned-tab.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1199 2263 c-287 -260 -509 -612 -649 -1033 -36 -109 -66 -215 -77
+-269 -2 -14 -6 -28 -8 -32 -3 -4 -7 -24 -10 -45 -4 -22 -8 -46 -11 -55 -2 -9
+-7 -32 -9 -50 -3 -19 -7 -43 -9 -54 -2 -12 -7 -48 -11 -80 -4 -33 -9 -69 -11
+-80 -3 -11 -7 -92 -11 -179 l-6 -159 96 7 c52 3 102 8 109 11 7 2 27 6 43 9
+116 17 293 90 414 171 66 43 152 121 204 183 l27 34 27 -34 c79 -97 206 -196
+331 -258 138 -68 344 -119 476 -116 l59 1 -3 90 c-1 50 -3 106 -5 125 -8 98
+-16 177 -20 195 -2 11 -7 43 -10 70 -6 41 -36 198 -49 255 -90 374 -252 728
+-462 1007 -115 152 -308 343 -346 343 -8 0 -43 -26 -79 -57z m102 -455 c91
+-107 216 -315 287 -480 69 -160 144 -393 166 -523 3 -16 10 -54 16 -84 16 -88
+19 -85 -55 -78 -121 12 -249 60 -368 140 l-68 46 -47 -33 c-121 -87 -255 -140
+-383 -152 l-71 -7 6 49 c4 27 9 56 11 64 2 8 7 30 10 47 40 240 168 574 304
+798 40 65 162 234 169 235 2 0 12 -10 23 -22z"/>
+</g>
+</svg>

amundsen_application/static/images/favicons/dev/site.webmanifest

+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/static/images/favicons/dev/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/images/favicons/dev/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

amundsen_application/static/images/favicons/prod/browserconfig.xml

+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/static/images/favicons/prod/mstile-150x150.png"/>
+            <TileColor>#2d89ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

amundsen_application/static/images/favicons/prod/safari-pinned-tab.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1199 2263 c-287 -260 -509 -612 -649 -1033 -36 -109 -66 -215 -77
+-269 -2 -14 -6 -28 -8 -32 -3 -4 -7 -24 -10 -45 -4 -22 -8 -46 -11 -55 -2 -9
+-7 -32 -9 -50 -3 -19 -7 -43 -9 -54 -2 -12 -7 -48 -11 -80 -4 -33 -9 -69 -11
+-80 -3 -11 -7 -92 -11 -179 l-6 -159 96 7 c52 3 102 8 109 11 7 2 27 6 43 9
+116 17 293 90 414 171 66 43 152 121 204 183 l27 34 27 -34 c79 -97 206 -196
+331 -258 138 -68 344 -119 476 -116 l59 1 -3 90 c-1 50 -3 106 -5 125 -8 98
+-16 177 -20 195 -2 11 -7 43 -10 70 -6 41 -36 198 -49 255 -90 374 -252 728
+-462 1007 -115 152 -308 343 -346 343 -8 0 -43 -26 -79 -57z m102 -455 c91
+-107 216 -315 287 -480 69 -160 144 -393 166 -523 3 -16 10 -54 16 -84 16 -88
+19 -85 -55 -78 -121 12 -249 60 -368 140 l-68 46 -47 -33 c-121 -87 -255 -140
+-383 -152 l-71 -7 6 49 c4 27 9 56 11 64 2 8 7 30 10 47 40 240 168 574 304
+798 40 65 162 234 169 235 2 0 12 -10 23 -22z"/>
+</g>
+</svg>

amundsen_application/static/images/favicons/prod/site.webmanifest

+{
+    "name": "Amundsen",
+    "short_name": "Amundsen",
+    "icons": [
+        {
+            "src": "/static/images/favicons/prod/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/images/favicons/prod/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

amundsen_application/static/images/favicons/staging/browserconfig.xml

+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/static/images/favicons/staging/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

amundsen_application/static/images/favicons/staging/safari-pinned-tab.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1199 2263 c-287 -260 -509 -612 -649 -1033 -36 -109 -66 -215 -77
+-269 -2 -14 -6 -28 -8 -32 -3 -4 -7 -24 -10 -45 -4 -22 -8 -46 -11 -55 -2 -9
+-7 -32 -9 -50 -3 -19 -7 -43 -9 -54 -2 -12 -7 -48 -11 -80 -4 -33 -9 -69 -11
+-80 -3 -11 -7 -92 -11 -179 l-6 -159 96 7 c52 3 102 8 109 11 7 2 27 6 43 9
+116 17 293 90 414 171 66 43 152 121 204 183 l27 34 27 -34 c79 -97 206 -196
+331 -258 138 -68 344 -119 476 -116 l59 1 -3 90 c-1 50 -3 106 -5 125 -8 98
+-16 177 -20 195 -2 11 -7 43 -10 70 -6 41 -36 198 -49 255 -90 374 -252 728
+-462 1007 -115 152 -308 343 -346 343 -8 0 -43 -26 -79 -57z m102 -455 c91
+-107 216 -315 287 -480 69 -160 144 -393 166 -523 3 -16 10 -54 16 -84 16 -88
+19 -85 -55 -78 -121 12 -249 60 -368 140 l-68 46 -47 -33 c-121 -87 -255 -140
+-383 -152 l-71 -7 6 49 c4 27 9 56 11 64 2 8 7 30 10 47 40 240 168 574 304
+798 40 65 162 234 169 235 2 0 12 -10 23 -22z"/>
+</g>
+</svg>

amundsen_application/static/images/favicons/staging/site.webmanifest

+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/static/images/favicons/staging/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/images/favicons/staging/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

amundsen_application/static/templates/fragments/icons-dev.html

+<!-- Generated with https://realfavicongenerator.net/ -->
+<link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicons/dev/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicons/dev/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicons/dev/favicon-16x16.png">
+<link rel="manifest" href="/static/images/favicons/dev/site.webmanifest">
+<link rel="mask-icon" href="/static/images/favicons/dev/safari-pinned-tab.svg" color="#5bbad5">
+<link rel="shortcut icon" href="/static/images/favicons/dev/favicon.ico">
+<meta name="msapplication-TileColor" content="#2d89ef">
+<meta name="msapplication-config" content="/static/images/favicons/dev/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">
+

amundsen_application/static/templates/fragments/icons-prod.html

+<!-- Generated with https://realfavicongenerator.net/ -->
+<link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicons/prod/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicons/prod/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicons/prod/favicon-16x16.png">
+<link rel="manifest" href="/static/images/favicons/prod/site.webmanifest">
+<link rel="mask-icon" href="/static/images/favicons/prod/safari-pinned-tab.svg" color="#5bbad5">
+<link rel="shortcut icon" href="/static/images/favicons/prod/favicon.ico">
+<meta name="msapplication-TileColor" content="#2d89ef">
+<meta name="msapplication-config" content="/static/images/favicons/prod/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">
+

amundsen_application/static/templates/fragments/icons-staging.html

+<!-- Generated with https://realfavicongenerator.net/ -->
+<link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicons/staging/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicons/staging/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicons/staging/favicon-16x16.png">
+<link rel="manifest" href="/static/images/favicons/staging/site.webmanifest">
+<link rel="mask-icon" href="/static/images/favicons/staging/safari-pinned-tab.svg" color="#5bbad5">
+<link rel="shortcut icon" href="/static/images/favicons/staging/favicon.ico">
+<meta name="msapplication-TileColor" content="#2b5797">
+<meta name="msapplication-config" content="/static/images/favicons/staging/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">
+

amundsen_application/static/templates/index.html

 <!doctype html>
 <html lang="en-US">
   <head>
-{% if <%= htmlWebpackPlugin.options.config.google.enabled%> %}
-{% include 'fragments/google-analytics-loader.html' %}
-{% endif %}
+    {% if <%= htmlWebpackPlugin.options.config.google.enabled%> %}
+      {% include 'fragments/google-analytics-loader.html' %}
+    {% endif %}
+
     <meta charset="utf-8">
     <title>Amundsen - Data Discovery Portal</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="/static/images/favicon.png">
 
-    <link href="/static/dist/main.css" type="text/css" rel="stylesheet"/>
+    {% if env == "development" %}
+      {% include 'fragments/icons-dev.html' %}
+    {% elif env == "staging" %}
+      {% include 'fragments/icons-staging.html' %}
+    {% else %}
+      {% include 'fragments/icons-prod.html' %}
+    {% endif %}
 
-    <meta name="theme-color" content="#2B1B81">
+    <link href="/static/dist/main.css" type="text/css" rel="stylesheet"/>
   </head>
-  <body>
+  <body class="{{ env }}">
     <div id="content"/>
     <script src="/static/dist/vendors.js" type="text/javascript"></script>
     <script src="/static/dist/main.js" type="text/javascript"></script>
   </body>
-{% if <%= htmlWebpackPlugin.options.config.google.enabled%> %}
-{% include 'fragments/google-analytics-post-loader.html' %}
-{% endif %}
+
+  {% if <%= htmlWebpackPlugin.options.config.google.enabled%> %}
+    {% include 'fragments/google-analytics-post-loader.html' %}
+  {% endif %}
 </html>