WIP: preserve recovered Folio packaging and icon work

build/generate-icons.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+# Regenerate all app-icon derivatives from the master artwork (FolioAppIcon.png).
+# Requires ImageMagick. The master file is never modified.
+set -e
+cd "$(dirname "$0")/.."
+SIZES="16 24 32 48 64 128 256 512 1024"
+mkdir -p build/icons
+for s in $SIZES; do
+  convert FolioAppIcon.png -resize "${s}x${s}" -strip "build/icons/${s}x${s}.png"
+done
+echo "Generated build/icons/{${SIZES// /,}}x{}.png"

electron-builder.yml

@@ -0,0 +1,20 @@
+appId: io.atitlan.folio
+productName: Folio
+directories:
+  buildResources: build
+  output: releases
+files:
+  - dist/**
+  - package.json
+linux:
+  icon: build/icons
+  category: Office
+  maintainer: Folio Contributors
+  executableName: folio
+  syncDesktopName: true
+  desktop:
+    entry:
+      StartupWMClass: folio
+  target:
+    - AppImage
+    - deb

esbuild.config.mjs

@@ -17,6 +17,15 @@ const copyAssets = {
         path.join("src", "renderer", "index.css"),
         path.join("dist", "index.css")
       );
+      fs.mkdirSync(path.join("dist", "icons"), { recursive: true });
+      fs.copyFileSync(
+        path.join("build", "icons", "256x256.png"),
+        path.join("dist", "icons", "icon.png")
+      );
+      fs.copyFileSync(
+        path.join("build", "icons", "128x128.png"),
+        path.join("dist", "brand-icon.png")
+      );
     });
   },
 };

package.json

@@ -5,6 +5,8 @@
   "productName": "Folio",
   "author": "Folio Contributors",
   "license": "MIT",
+  "homepage": "https://git.atitlan.io/avi/Folio",
+  "desktopName": "folio.desktop",
   "main": "dist/main.js",
   "scripts": {
     "build": "node esbuild.config.mjs",
@@ -22,6 +24,7 @@
     "@types/node": "^22.5.0",
     "concurrently": "^9.0.0",
     "electron": "^32.0.0",
+    "electron-builder": "^26.15.3",
     "esbuild": "^0.24.0",
     "typescript": "^5.5.0",
     "wait-on": "^8.0.0"

src/main/index.ts

@@ -52,6 +52,7 @@ function createWindow() {
     minWidth: 960,
     minHeight: 640,
     title: "Folio",
+    icon: path.join(__dirname, "icons", "icon.png"),
     webPreferences: {
       contextIsolation: true,
       nodeIntegration: false,

src/renderer/index.css

@@ -66,6 +66,20 @@ html, body {
   justify-content: space-between;
 }
 
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.brand-icon {
+  width: 24px;
+  height: 24px;
+  flex: none;
+  object-fit: contain;
+}
+
 .sidebar-header .icon-button {
   font-size: 1.1rem;
   font-weight: 700;
@@ -258,6 +272,13 @@ html, body {
   padding: var(--gap);
 }
 
+.welcome-brand {
+  width: 96px;
+  height: 96px;
+  object-fit: contain;
+  margin-bottom: 12px;
+}
+
 .app-name {
   font-size: 2rem;
   font-weight: 700;

src/renderer/index.html

@@ -10,7 +10,10 @@
     <div id="root">
       <aside class="sidebar">
         <div class="sidebar-header">
-          <span class="sidebar-title">Chapters</span>
+          <div class="sidebar-brand">
+            <img class="brand-icon" src="./brand-icon.png" alt="Folio" draggable="false" />
+            <span class="sidebar-title">Chapters</span>
+          </div>
           <button class="icon-button" id="addChapterBtn" title="Add chapter">+</button>
         </div>
         <div class="project-bar hidden" id="projectBar">
@@ -28,6 +31,7 @@
       </aside>
       <main class="editor" id="editor">
         <div class="welcome" id="welcome">
+          <img class="welcome-brand" src="./brand-icon.png" alt="Folio" draggable="false" />
           <h1 class="app-name">Folio</h1>
           <p class="app-tagline">Your stories, in folders you choose.</p>
           <div class="welcome-actions">