add new icon

icon.svg

@@ -0,0 +1,6 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H384V384H0V0Z" fill="white"/>
+<rect width="384" height="384" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.1212 192C64.1212 121.375 121.375 64.1212 192 64.1212C219.695 64.1212 245.333 72.9249 266.269 87.8864C264.331 92.1063 263.25 96.8018 263.25 101.75C263.25 120.113 278.136 135 296.5 135C299.74 135 302.871 134.536 305.832 133.672C314.811 151.161 319.879 170.989 319.879 192C319.879 262.626 262.626 319.879 192 319.879C121.375 319.879 64.1212 262.626 64.1212 192ZM320.589 124.669C331.148 144.792 337.121 167.698 337.121 192C337.121 272.148 272.148 337.121 192 337.121C111.852 337.121 46.8792 272.148 46.8792 192C46.8792 111.852 111.852 46.8792 192 46.8792C223.884 46.8792 253.367 57.1615 277.313 74.5912C282.733 70.7544 289.353 68.4998 296.5 68.4998C314.863 68.4998 329.75 83.3863 329.75 101.75C329.75 110.634 326.266 118.704 320.589 124.669Z" fill="white"/>
+<circle cx="192" cy="192" r="85.5" fill="white"/>
+</svg>

scripts/build.mjs

@@ -64,6 +64,9 @@ const olmFiles = {
     wasmBundle: "olm-1421970081.js",
 };
 
+// IDEA: how about instead of assetPaths we maintain a mapping between the source file and the target file
+// so throughout the build script we can refer to files by their source name
+
 async function build() {
     // only used for CSS for now, using legacy for all targets for now
     const legacy = true;
@@ -80,7 +83,7 @@ async function build() {
     await removeDirIfExists(targetDir);
     await createDirs(targetDir, themes);
     // copy assets
-    await copyFolder(path.join(projectDir, "lib/olm/"), targetDir, );
+    await copyFolder(path.join(projectDir, "lib/olm/"), targetDir);
     // also creates the directories where the theme css bundles are placed in,
     // so do it first
     const themeAssets = await copyThemeAssets(themes, legacy);
@@ -88,9 +91,19 @@ async function build() {
     const jsLegacyBundlePath = await buildJsLegacy("src/main.js", `${PROJECT_ID}-legacy.js`);
     const jsWorkerPath = await buildWorkerJsLegacy("src/worker.js", `worker.js`);
     const cssBundlePaths = await buildCssBundles(legacy ? buildCssLegacy : buildCss, themes, themeAssets);
-    const assetPaths = createAssetPaths(jsBundlePath, jsLegacyBundlePath, jsWorkerPath, cssBundlePaths, themeAssets);
 
     let manifestPath;
+    // copy icons
+    let iconPng = await fs.readFile(path.join(projectDir, "icon.png"));
+    let iconPngPath = resource("icon.png", iconPng);
+    await fs.writeFile(iconPngPath, iconPng);
+    let iconSvg = await fs.readFile(path.join(projectDir, "icon.svg"));
+    let iconSvgPath = resource("icon.svg", iconSvg);
+    await fs.writeFile(iconSvgPath, iconSvg);
+
+    const assetPaths = createAssetPaths(jsBundlePath, jsLegacyBundlePath, jsWorkerPath,
+        iconPngPath, iconSvgPath, cssBundlePaths, themeAssets);
+
     if (offline) {
         manifestPath = await buildOffline(version, assetPaths);
     }
@@ -99,7 +112,7 @@ async function build() {
     console.log(`built ${PROJECT_ID} ${version} successfully`);
 }
 
-function createAssetPaths(jsBundlePath, jsLegacyBundlePath, jsWorkerPath, cssBundlePaths, themeAssets) {
+function createAssetPaths(jsBundlePath, jsLegacyBundlePath, jsWorkerPath, iconPngPath, iconSvgPath, cssBundlePaths, themeAssets) {
     function trim(path) {
         if (!path.startsWith(targetDir)) {
             throw new Error("invalid target path: " + targetDir);
@@ -113,7 +126,9 @@ function createAssetPaths(jsBundlePath, jsLegacyBundlePath, jsWorkerPath, cssBun
         cssMainBundle: () => trim(cssBundlePaths.main),
         cssThemeBundle: themeName => trim(cssBundlePaths.themes[themeName]),
         cssThemeBundles: () => Object.values(cssBundlePaths.themes).map(a => trim(a)),
-        otherAssets: () => Object.values(themeAssets).map(a => trim(a))
+        otherAssets: () => Object.values(themeAssets).map(a => trim(a)),
+        iconSvgPath: () => trim(iconSvgPath),
+        iconPngPath: () => trim(iconPngPath),
     };
 }
 
@@ -248,7 +263,8 @@ async function buildOffline(version, assetPaths) {
     const offlineFiles = [
         assetPaths.cssMainBundle(),
         "index.html",
-        "icon-192.png",
+        assetPaths.iconPngPath(),
+        assetPaths.iconSvgPath(),
     ].concat(assetPaths.cssThemeBundles());
 
     // write appcache manifest
@@ -275,15 +291,14 @@ async function buildOffline(version, assetPaths) {
         short_name: PROJECT_SHORT_NAME,
         display: "fullscreen",
         start_url: "index.html",
-        icons: [{"src": "icon-192.png", "sizes": "192x192", "type": "image/png"}],
+        icons: [
+            {"src": assetPaths.iconPngPath(), "sizes": "384x384", "type": "image/png"},
+            {"src": assetPaths.iconSvgPath(), "type": "image/svg+xml"},
+        ],
     };
     const manifestJson = JSON.stringify(webManifest);
     const manifestPath = resource("manifest.json", manifestJson);
     await fs.writeFile(manifestPath, manifestJson, "utf8");
-    // copy icon
-    // should this icon have a content hash as well?
-    let icon = await fs.readFile(path.join(projectDir, "icon.png"));
-    await fs.writeFile(path.join(targetDir, "icon-192.png"), icon);
     return manifestPath;
 }