mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

add new icon

Browse source
This commit is contained in:
Bruno Windels 2020-09-14 17:01:45 +02:00
parent 49f330279b
commit 9212a1313e
3 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 16 KiB

6
icon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

35
scripts/build.mjs
View file

@ -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;
}