Add ads

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skeleton",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Simply add any website in customizable windows",
   "main": "src/main.js",
   "author": "Leon Machens",

src/components/App.js

@@ -56,14 +56,15 @@ const App = () => {
           websiteNav,
           createElement("button", {
             className: "support",
-            innerText: "💙 Support me",
+            innerText: "💙 Open Source",
             onclick: () =>
-              shell.openExternal("https://github.com/sponsors/lmachens"),
+              shell.openExternal("https://github.com/lmachens/skeleton"),
           }),
         ]
       ),
       createElement("div", { className: "toolbar" }, [CloseButton()]),
       main,
+      createElement("aside", { className: "ads" }, []),
     ]
   );
 };

src/lib/ads.js

@@ -0,0 +1,65 @@
+const { app, BrowserWindow, BrowserView } = require("electron");
+
+const createAdsWindow = (win) => {
+  const adURL = "https://skeleton.th.gl/app.html";
+  const cmpURL = "https://skeleton.th.gl/app-cmp.html";
+  const referrer = "https://skeleton.th.gl/";
+
+  const view = new BrowserView({
+    webPreferences: {
+      partition: "persist:adpartition",
+    },
+  });
+  win.setBrowserView(view);
+  // view.webContents.openDevTools({ mode: "detach" });
+
+  let bounds = win.getBounds();
+  view.setBounds({
+    x: bounds.width - 310,
+    y: bounds.height - 600,
+    width: 1280,
+    height: 600,
+  });
+  win.on("resize", function () {
+    bounds = win.getBounds();
+    view.setBounds({
+      x: bounds.width - 310,
+      y: bounds.height - 600,
+      width: 1280,
+      height: 600,
+    });
+  });
+
+  const re = new RegExp(`(${app.getName()}|Electron)/[\\d\\.]+ `, "g");
+  view.webContents.setUserAgent(
+    view.webContents.getUserAgent().replace(re, "")
+  );
+
+  view.webContents.session.cookies.get({ name: "ncmp" }).then((cookies) => {
+    if (cookies.length === 0) {
+      const modal = new BrowserWindow({
+        width: 1000,
+        height: 500,
+        parent: win,
+        modal: true,
+        titleBarStyle: "hidden",
+        closable: false,
+        webPreferences: {
+          partition: "persist:adpartition",
+        },
+      });
+      modal.on("closed", () => {
+        view.webContents.loadURL(adURL, {
+          httpReferrer: referrer,
+        });
+      });
+      modal.loadURL(cmpURL);
+    } else {
+      view.webContents.loadURL(adURL, {
+        httpReferrer: referrer,
+      });
+    }
+  });
+};
+
+exports.createAdsWindow = createAdsWindow;

src/main.js

@@ -10,15 +10,16 @@ const path = require("path");
 const Store = require("electron-store");
 const { updateWebsite, listenWebsites } = require("./lib/storage");
 const { getCursorInfo } = require("./lib/winuser");
+const { createAdsWindow } = require("./lib/ads");
 const store = new Store();
 const icon = path.join(__dirname, "assets/skeleton.ico");
 
 const createWindow = () => {
   const bounds = store.get("skeleton-bounds") || {};
   const win = new BrowserWindow({
     title: "Skeleton",
-    width: 800,
-    height: 700,
+    width: 1280,
+    height: 720,
     icon: icon,
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
@@ -30,6 +31,7 @@ const createWindow = () => {
     x: bounds.x,
     y: bounds.y,
   });
+  // win.webContents.openDevTools({ mode: "detach" });
 
   win.on("resize", () => {
     const bounds = win.getBounds();
@@ -50,6 +52,8 @@ const createWindow = () => {
 
   win.loadFile(path.join(__dirname, "index.html"));
 
+  createAdsWindow(win);
+
   const activeWindows = {};
   const clickThroughWindows = [];
   let prevCursorInfo = getCursorInfo();

src/styles/_app.css

@@ -1,7 +1,7 @@
 .layout {
   display: grid;
   align-items: start;
-  grid-template: auto 1fr / auto 1fr;
+  grid-template: auto 1fr / auto 1fr auto;
   height: 100vh;
   background-color: var(--color-bg-secondary);
 }
@@ -21,3 +21,8 @@
   overflow: auto;
   height: 100%;
 }
+
+.ads {
+  width: 320px;
+  height: 100%;
+}

src/styles/_toolbar.css

@@ -1,13 +1,16 @@
 .toolbar {
   display: flex;
   justify-content: end;
+  grid-column: 2 / 4;
+  -webkit-app-region: drag;
 }
 
 .close {
   height: 1.6rem;
   width: 1.6rem;
   padding: 0;
   background-color: transparent;
+  -webkit-app-region: no-drag;
 }
 
 .close:hover {