Apply performance changes

Dockerfile

@@ -31,9 +31,10 @@ RUN apk update
 RUN apk add --update bash
 
 WORKDIR /code
-RUN npm install express --no-save
-RUN npm install compression --no-save
-RUN npm install [email protected] --no-save
+RUN npm init -y
+RUN npm install express
+RUN npm install compression
+RUN npm install [email protected]
 COPY --from=builder /code/express.js /code/express.js
 COPY --from=builder /code/src /code/src
 EXPOSE 8080

assets/css/app-theme.css

@@ -22,7 +22,7 @@
   --expand-icon-color: #4d4d4d;
 
   --secondary-text-color: rgba(0, 0, 0, 0.54);
-  --light-secondary-text-color: rgba(255, 255, 255, 0.7);
+  --light-secondary-text-color: rgba(255, 255, 255, 1);
   --dark-secondary-text-color: var(--secondary-text-color);
 
   --dark-disabled-text-color: rgba(0, 0, 0, 0.38);
@@ -50,7 +50,7 @@
   --header-color: #ffffff;
   --header-bg-color: var(--dark-theme-background-color);
   --nonprod-header-color: #a94442;
-  --nonprod-text-warn-color: #e6e600;
+  --nonprod-text-warn-color: #fff;
 
   --amendment-mode-color: rgba(139, 0, 216, 0.99); /* .99 is to fix chrome strange bg color transparency */
 
@@ -215,7 +215,7 @@
   --paper-tooltip-delay-in: 0;
 
   --required-star-style: {
-    background: url('./images/required.svg') no-repeat 99% 20%/8px;
+    background: url('./assets/images/required.svg') no-repeat 99% 20%/8px;
     width: auto !important;
     max-width: 100%;
     right: auto;
@@ -274,7 +274,7 @@
 
 html[dir='rtl'] {
   --required-star-style: {
-    background: url('./images/required.svg') no-repeat 0 20%/8px;
+    background: url('./assets/images/required.svg') no-repeat 0 20%/8px;
     right: auto;
     padding-inline-end: 15px;
   }

assets/icons/icons.js

@@ -0,0 +1,68 @@
+/* eslint-disable max-len */
+module.exports = {
+  partnershipManagement: `
+    <g
+      transform="scale(0.75) translate(0,5.7)"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g id="32" transform="translate(-98.000000, -371.000000)" fill-rule="nonzero" fill="#FFFFFF">
+        <g id="App-wrapper" transform="translate(80.000000, 353.000000)">
+          <g id="pm">
+            <path
+              d="M27,22.1822917 C27,24.4947025 25.1510485,26.3645833 22.8796855,26.3645833 C20.5942661,26.3645833 18.75,24.4947025 18.75,22.1822917 C18.7496396,19.8746314 20.5939056,18 22.8796855,18 C25.1510485,18 27,19.8746314 27,22.1822917 Z M45,22.1822917 C45,19.8746314 46.8481009,18 49.1176162,18 C51.401539,18 53.2496398,19.8746314 53.25,22.1822917 C53.25,24.4947025 51.4018991,26.3645833 49.1179764,26.3645833 C46.8481009,26.3645833 45,24.4947025 45,22.1822917 Z M33.7217483,37.2139559 C33.7779077,37.7072188 33.9795055,38.1338639 34.2372627,38.5128209 C31.1531764,37.9915275 29.1465583,36.7971396 27.7263738,35.5408663 L27.7263738,42.3333333 L18,42.3333333 L18,31.8248309 C18,29.7392935 19.6876616,28.0374454 21.750439,28.0370814 L23.9770147,28.0370814 C24.8860048,28.0370814 25.7111158,28.3829115 26.3627087,28.9282309 C26.3814285,28.9471606 26.4095082,28.9471606 26.4329079,28.9613578 C27.1971796,29.4735504 27.7735333,30.1987015 28.3783267,30.9617118 C29.6203131,32.5168552 31.0498575,34.2372689 34.5374994,34.9103634 C33.9654657,35.5073754 33.6281494,36.3275387 33.7217483,37.2139559 Z M50.25492,28.0374454 C52.31232,28.0374454 54,29.7392935 54,31.8248309 L54,42.3333333 L44.27856,42.3333333 L44.27856,35.5645284 C42.7176,36.962774 40.44888,38.2805687 36.78336,38.6930166 C36.7128,38.697385 36.64728,38.7024814 36.5814,38.7024814 C35.68176,38.7024814 34.90812,38.019922 34.80984,37.0956456 C34.7022,36.1051154 35.40528,35.2136018 36.38484,35.1000239 C40.71132,34.6165899 42.25824,32.6686564 43.62228,30.9620759 C44.2314,30.1943331 44.80812,29.4735504 45.5724,28.9617218 C45.59076,28.9475246 45.6192,28.9475246 45.6426,28.9285949 C46.28952,28.3836395 47.11896,28.0374454 48.02364,28.0374454 L50.25492,28.0374454 Z"
+              id="Shape"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  `,
+  powerBi: `
+    <path
+      clip-path="url(#SVGID_2_)"
+      fill="rgba(0,0,0,0.54)"
+      d="M11.1,27.3c0,1.1-0.9,2.1-2.1,2.1s-2.1-0.9-2.1-2.1v-9c0-1.1,0.9-2.1,2.1-2.1
+  s2.1,0.9,2.1,2.1V27.3z"
+    />
+    <path
+      clip-path="url(#SVGID_2_)"
+      fill="rgba(0,0,0,0.54)"
+      d="M17.1,29.7c0,1.1-0.9,2.1-2.1,2.1S13,30.9,13,29.7V16c0-1.1,0.9-2.1,2.1-2.1
+  s2.1,0.9,2.1,2.1V29.7z"
+    />
+    <path
+      clip-path="url(#SVGID_2_)"
+      fill="rgba(0,0,0,0.54)"
+      d="M5,25.3c0,1.1-0.9,2.1-2.1,2.1s-2.1-0.9-2.1-2.1v-4.9c0-1.1,0.9-2.1,2.1-2.1
+  S5,19.3,5,20.4V25.3z"
+    />
+    <path
+      clip-path="url(#SVGID_2_)"
+      fill="rgba(0,0,0,0.54)"
+      d="M23.1,31.9c0,1.1-0.9,2.1-2.1,2.1C19.9,34,19,33,19,31.9V13.7
+  c0-1.1,0.9-2.1,2.1-2.1c1.1,0,2.1,0.9,2.1,2.1V31.9z"
+    />
+    <path
+      clip-path="url(#SVGID_2_)"
+      fill="rgba(0,0,0,0.54)"
+      d="M29.7,31c-0.4,0-0.7-0.1-1.1-0.2L26.1,30c-0.4-0.1-0.7-0.6-0.5-1
+  c0.1-0.4,0.6-0.7,1-0.5l2.6,0.8c0.5,0.2,1.1,0.1,1.6-0.3c0.5-0.3,0.7-0.9,0.7-1.4V10.9c0-0.8-0.5-1.5-1.2-1.7L5.8,1.8
+  C5.3,1.6,4.7,1.7,4.2,2C3.8,2.4,3.5,2.9,3.5,3.5v11.5c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8V3.5c0-1.1,0.5-2.1,1.4-2.7
+  c0.9-0.7,2-0.8,3-0.5l24.4,7.4c1.4,0.4,2.4,1.8,2.4,3.3v16.7c0,1.1-0.5,2.1-1.4,2.8C31.1,30.7,30.4,31,29.7,31"
+    />
+  `,
+  notEqual: `
+    <path
+      d="M5.73706399,6.4473258 L3,3.71026181 L4.71026181,2 L21,18.2897382 L19.2897382,20 L14.8425019,15.5527637 L3,15.5527637 L3,13.1340651 L12.4238033,13.1340651 L8.15576263,8.86602444 L3,8.86602444 L3,6.4473258 L5.73706399,6.4473258 Z M20.4812012,15.5527637 L18.0625025,13.1340651 L21,13.1340651 L21,15.5527637 L20.4812012,15.5527637 Z M14.2219238,8.86602444 L11.8032252,6.4473258 L21,6.4473258 L21,8.86602444 L14.2219238,8.86602444 Z"
+      transform="translate(12.000000, 11.000000) scale(-1, 1) translate(-12.000000, -11.000000)"
+    ></path>
+  `,
+  '1+': `
+    <path
+      d="M9.57226562,18.8144531 L7.03222656,18.8144531 L7.03222656,9.0234375 L4,9.96386719 L4,7.8984375 L9.29980469,6 L9.57226562,6 L9.57226562,18.8144531 Z M16.9589844,11.6513672 L20.1318359,11.6513672 L20.1318359,13.9453125 L16.9589844,13.9453125 L16.9589844,17.53125 L14.5419922,17.53125 L14.5419922,13.9453125 L11.3603516,13.9453125 L11.3603516,11.6513672 L14.5419922,11.6513672 L14.5419922,8.21484375 L16.9589844,8.21484375 L16.9589844,11.6513672 Z"
+    ></path>
+  `
+};

assets/images/UNICEF_logo-_1_.webpZone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://convertio.co/
+HostUrl=https://s140.convertio.me/p/n_-bcR1C3mSnxcEcOWVIUw/8ce9440d4f96a830a11aa5b6d52ce90e/UNICEF_logo-_1_.webp

assets/images/output-onlinepngtools.webpZone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://cloudconvert.com/
+HostUrl=https://eu-central.storage.cloudconvert.com/tasks/51f5ea48-718b-46c9-aae9-68940cb5d734/output-onlinepngtools.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=cloudconvert-production%2F20240128%2Ffra%2Fs3%2Faws4_request&X-Amz-Date=20240128T145908Z&X-Amz-Expires=86400&X-Amz-Signature=f83322c1b1d297c65e53f2ae0fdde2329a84689d9d296edfce526c5f087a52d0&X-Amz-SignedHeaders=host&response-content-disposition=attachment%3B%20filename%3D%22output-onlinepngtools.webp%22&response-content-type=image%2Fwebp&x-id=GetObject

index.html

@@ -22,7 +22,7 @@
     -->
     <base href="/pmp/" />
 
-    <link rel="icon" href="images/favicon.ico" />
+    <link rel="icon" href="assets/images/favicon.ico" />
 
     <!-- See https://goo.gl/OOhYW5 -->
     <link rel="manifest" href="manifest.json" />
@@ -40,14 +40,14 @@
     <meta name="apple-mobile-web-app-title" content="eTools PMP" />
 
     <!-- Homescreen icons -->
-    <link rel="apple-touch-icon" href="images/manifest/icon-48x48.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="images/manifest/icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="96x96" href="images/manifest/icon-96x96.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="images/manifest/icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="192x192" href="images/manifest/icon-192x192.png" />
+    <link rel="apple-touch-icon" href="assets/images/manifest/icon-48x48.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="assets/images/manifest/icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="96x96" href="assets/images/manifest/icon-96x96.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="assets/images/manifest/icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="assets/images/manifest/icon-192x192.png" />
 
     <!-- Tile icon for Windows 8 (144x144 + tile color) -->
-    <meta name="msapplication-TileImage" content="images/manifest/icon-144x144.png" />
+    <meta name="msapplication-TileImage" content="assets/images/manifest/icon-144x144.png" />
     <meta name="msapplication-TileColor" content="#3f51b5" />
     <meta name="msapplication-tap-highlight" content="no" />
 
@@ -56,22 +56,24 @@
     <meta name="twitter:site" content="@username" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="eTools PMP" />
-    <meta property="og:image" content="images/manifest/icon-144x144.png" />
+    <meta property="og:image" content="assets/images/manifest/icon-144x144.png" />
 
     <!-- Performance tip: hint to the browser to start the handshake for the fonts site -->
     <link rel="dns-prefetch" href="https://fonts.googleapis.com">
     <link rel="dns-prefetch" href="https://fonts.gstatic.com">
     <link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com">
     <link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
-     <link
-      rel="stylesheet"
-      type="text/css"
-      crossorigin="anonymous"
-      href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic"
-    />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css" />
-    <link rel="stylesheet" type="text/css" href="node_modules/leaflet/dist/leaflet.css" />
-    <link rel="stylesheet" type="text/css" href="assets/css/app-theme.css" />
+    <link rel="preload" as="style" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic&display=swap" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic&display=swap"></noscript>
+
+    <link rel="preload" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css"></noscript>
+
+    <link rel="preload" href="node_modules/leaflet/dist/leaflet.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css"></noscript>
+
+    <link rel="preload" href="assets/css/app-theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="assets/css/app-theme.css"></noscript>
     <script>
       // Load and register pre-caching Service Worker
       if ('serviceWorker' in navigator) {
@@ -134,21 +136,7 @@
     <div id="buildDate" style="display: none">bDate</div>
     <app-shell></app-shell>
     <noscript> Please enable JavaScript to view this website. </noscript>
-    <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
-    <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
-    <script src="node_modules/web-animations-js/web-animations-next-lite.min.js"></script>
-    <script src="node_modules/leaflet/dist/leaflet.js"></script>
-    <script src="node_modules/esri-leaflet/dist/esri-leaflet.js"></script>
-    <script src="node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
-    <script src="node_modules/@mapbox/leaflet-omnivore/leaflet-omnivore.min.js"></script>
-    <script src="assets/packages/esri-leaflet-webmap.js"></script>
-    <script src="node_modules/dayjs/dayjs.min.js"></script>
-    <script src="node_modules/dayjs/plugin/utc.js"></script>
-    <script src="node_modules/dayjs/plugin/isBetween.js"></script>
-    <script src="node_modules/dayjs/plugin/isSameOrBefore.js"></script>
-    <script src="node_modules/dayjs/plugin/isSameOrAfter.js"></script>
-    <script src="node_modules/focus-visible/dist/focus-visible.min.js"></script>
     <!-- Built with love using PWA Starter Kit -->
-    <script type="module" src="src/app-shell.js"></script>
+    <script type="module" src="src/app-shell.js" defer></script>
   </body>
 </html>

manifest.json

@@ -8,12 +8,12 @@
   "background_color": "#ffffff",
   "icons": [
     {
-      "src": "images/manifest/icon-192x192.png",
+      "src": "assets/images/manifest/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "images/manifest/icon-512x512.png",
+      "src": "assets/images/manifest/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }