feat: initial commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+out/

README.md

@@ -0,0 +1,7 @@
+I want to re-create an effect similar to the one used in [this video](https://www.youtube.com/watch?v=IGK6eceWyU4&t=1264s).
+
+It looks like a chrome-less browser window, which also can be rendered with transparency against the desktop.
+
+It looks like it's possible to achieve a similar effect with minimal
+efforts using [electron](https://www.electronjs.org/docs/latest/) library and [frameless windows](https://www.electronjs.org/docs/latest/tutorial/window-customization#create-frameless-windows).
+

forge.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  packagerConfig: {
+    icon: 'icon.icns'
+  },
+  rebuildConfig: {},
+  makers: [
+    {
+      name: '@electron-forge/maker-squirrel',
+      config: {},
+    },
+    {
+      name: '@electron-forge/maker-zip',
+      platforms: ['darwin'],
+    },
+    {
+      name: '@electron-forge/maker-deb',
+      config: {},
+    },
+    {
+      name: '@electron-forge/maker-rpm',
+      config: {},
+    },
+  ],
+};

index.css

@@ -0,0 +1,9 @@
+body {
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+}
+
+a,
+button {
+    -webkit-app-region: no-drag;
+}

main.js

@@ -0,0 +1,85 @@
+const { program, InvalidOptionArgumentError } = require('commander')
+const { app, BrowserWindow } = require("electron")
+const fs = require('fs')
+const path = require('path')
+const { URL } = require('url')
+
+const defaults = {
+    URL: "http://localhost:3000/",
+    width: 800,
+    height: 600
+}
+
+const parseInteger = (value, dummyPrev) => {
+    const parsedValue = parseInt(value, 10)
+    if (isNaN(parsedValue)) {
+        throw new InvalidOptionArgumentError('not an integer number')
+    }
+    return parsedValue
+}
+
+program
+    .name('efw')
+    .description('electron-frameless-window')
+    .option("-w, --width <number>", "Window width", parseInteger, defaults.width)
+    .option("-h, --height <number>", "Window heigth", parseInteger, defaults.height)
+    .argument('[url]', 'URL to open in the window', defaults.URL)
+
+program.parse()
+
+const options = program.opts()
+
+const stringIsAValidUrl = (s, protocols) => {
+    try {
+        url = new URL(s);
+        return protocols
+            ? url.protocol
+                ? protocols.map(x => `${x.toLowerCase()}:`).includes(url.protocol)
+                : false
+            : true;
+    } catch (err) {
+        return false;
+    }
+}
+
+const createWindow = (url) => {
+    const win = new BrowserWindow({
+        width: options.width,
+        height: options.height,
+        frame: false,
+        resizable: false,
+        transparent: true
+    })
+
+    // when in trouble debug it!
+    // win.webContents.openDevTools({ mode: 'detach' })
+
+    console.log(`loading url: ${url}`)
+    win.loadURL(url)
+
+    win.webContents.on('dom-ready', () => {
+        win.webContents.insertCSS(fs.readFileSync(path.join(__dirname, 'index.css'), 'utf8'))
+        console.log('CSS injected')
+    })
+}
+
+app.whenReady().then(() => {
+    var url = defaults.URL
+    if (process.argv.length > 1 && process.argv[1] !== '.') {
+        url = process.argv[1]
+        if (!stringIsAValidUrl(url, ['http', 'https'])) {
+            console.error(`invalid url: ${url}`)
+            process.exit(1)
+            return
+        }
+    }
+    createWindow(url)
+
+    app.on('activate', () => {
+        if (BrowserWindow.getAllWindows().length == 0) createWindow()
+    })
+})
+
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') app.quit()
+})

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "efw",
+  "version": "1.0.0",
+  "description": "Chrome-less browser window experiment",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron-forge start",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "package": "electron-forge package",
+    "make": "electron-forge make"
+  },
+  "author": "Domenico Testa",
+  "license": "MIT",
+  "devDependencies": {
+    "@electron-forge/cli": "^6.0.5",
+    "@electron-forge/maker-deb": "^6.0.5",
+    "@electron-forge/maker-rpm": "^6.0.5",
+    "@electron-forge/maker-squirrel": "^6.0.5",
+    "@electron-forge/maker-zip": "^6.0.5",
+    "electron": "^23.1.1"
+  },
+  "dependencies": {
+    "commander": "^10.0.0",
+    "electron-squirrel-startup": "^1.0.0"
+  }
+}