add logo assets generation

generate-icons.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Run this script after logo update
+
+cd public/
+
+npx pwa-asset-generator logo.png . -f -w -x --opaque false --type png
+npx pwa-asset-generator logo.png . -x --dark-mode --background "#333333" --splash-only
+
+# Copy stdout to src/pages/site.webmanifest.jsx if there is new icons

public/safari-pinned-tab.svg

@@ -1,23 +0,0 @@
-<?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="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M1682 5688 c-141 -24 -253 -147 -287 -316 -5 -24 -10 -3658 -5 -4029
-0 -33 0 -33 168 108 92 77 178 151 192 162 14 12 75 64 136 114 62 51 114 99
-116 105 2 7 4 209 3 449 l-1 436 276 0 c151 0 277 -4 280 -8 3 -4 5 -98 4
--208 0 -111 2 -201 4 -201 3 0 117 95 132 110 3 3 73 61 155 130 168 140 167
-139 250 209 51 43 62 48 75 37 13 -12 524 -441 654 -550 28 -22 68 -57 91 -76
-23 -19 66 -55 95 -80 30 -25 86 -72 125 -105 38 -33 140 -118 225 -190 85 -71
-166 -139 180 -151 14 -13 70 -60 124 -106 55 -46 133 -111 174 -145 41 -35 77
--61 80 -59 4 2 7 607 7 1344 -1 1197 1 1341 15 1344 8 2 163 3 343 3 l328 0
--4 685 c-1 377 -6 695 -9 706 -26 90 -93 186 -161 233 -86 58 30 55 -1924 55
--991 1 -1819 -2 -1841 -6z"/>
-</g>
-</svg>

src/pages/_document.jsx

@@ -1,5 +1,330 @@
+/* eslint-disable react/no-invalid-html-attribute */
 import { Html, Head, Main, NextScript } from "next/document";
 
+/**
+ * Assets generated by ./generate-icons.sh script
+ */
+function IconAssets() {
+  return (
+    <>
+      <link rel="icon" type="image/png" sizes="196x196" href="favicon-196.png" />
+
+      <meta name="msapplication-square70x70logo" content="mstile-icon-128.png" />
+      <meta name="msapplication-square150x150logo" content="mstile-icon-270.png" />
+      <meta name="msapplication-square310x310logo" content="mstile-icon-558.png" />
+      <meta name="msapplication-wide310x150logo" content="mstile-icon-558-270.png" />
+
+      <link rel="apple-touch-icon" href="apple-icon-180.png" />
+
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2048-2732.png"
+        media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2732-2048.png"
+        media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1668-2388.png"
+        media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2388-1668.png"
+        media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1536-2048.png"
+        media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2048-1536.png"
+        media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1668-2224.png"
+        media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2224-1668.png"
+        media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1620-2160.png"
+        media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2160-1620.png"
+        media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1290-2796.png"
+        media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2796-1290.png"
+        media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1179-2556.png"
+        media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2556-1179.png"
+        media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1284-2778.png"
+        media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2778-1284.png"
+        media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1170-2532.png"
+        media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2532-1170.png"
+        media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1125-2436.png"
+        media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2436-1125.png"
+        media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1242-2688.png"
+        media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2688-1242.png"
+        media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-828-1792.png"
+        media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1792-828.png"
+        media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1242-2208.png"
+        media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-2208-1242.png"
+        media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-750-1334.png"
+        media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1334-750.png"
+        media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-640-1136.png"
+        media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="apple-splash-1136-640.png"
+        media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+
+      {/* Dark mode section */}
+
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2048-2732.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2732-2048.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1668-2388.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2388-1668.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1536-2048.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2048-1536.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1668-2224.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2224-1668.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1620-2160.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2160-1620.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1290-2796.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2796-1290.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1179-2556.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2556-1179.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1284-2778.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2778-1284.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1170-2532.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2532-1170.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1125-2436.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2436-1125.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1242-2688.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2688-1242.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-828-1792.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1792-828.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1242-2208.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-2208-1242.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-750-1334.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1334-750.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-640-1136.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      />
+      <link
+        rel="apple-touch-startup-image"
+        href="public/apple-splash-dark-1136-640.jpg"
+        media="(prefers-color-scheme: dark) and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      />
+    </>
+  );
+}
+
 export default function Document() {
   return (
     <Html>
@@ -8,7 +333,9 @@ export default function Document() {
           name="description"
           content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations."
         />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
+
+        <IconAssets />
+
         <link rel="manifest" href="/site.webmanifest?v=4" crossOrigin="use-credentials" />
       </Head>
       <body>

src/pages/site.webmanifest.jsx

@@ -13,12 +13,12 @@ export async function getServerSideProps({ res }) {
     short_name: settings.title || "Homepage",
     icons: [
       {
-        src: "/android-chrome-192x192.png?v=2",
+        src: "/manifest-icon-192.maskable.png?v=3",
         sizes: "192x192",
         type: "image/png",
       },
       {
-        src: "/android-chrome-512x512.png?v=2",
+        src: "/manifest-icon-512.maskable.png?v=3",
         sizes: "512x512",
         type: "image/png",
       },