From d8cf813f0d04d13f426242c4890e9198a1119340 Mon Sep 17 00:00:00 2001
From: CanadaHonk <oj@oojmed.com>
Date: Wed, 12 Apr 2023 00:40:10 +0100
Subject: [PATCH] menus/about: initial add

---
 src/index.js       |   4 +-
 src/menus/about.js | 131 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 src/menus/about.js

diff --git a/src/index.js b/src/index.js
index d9ba056..b4887ff 100644
--- a/src/index.js
+++ b/src/index.js
@@ -104,4 +104,6 @@ export const open = async (url, opts = {}) => {
 export const extensions = {
   add: ExtensionsAPI.add,
   remove: ExtensionsAPI.remove
-};
\ No newline at end of file
+};
+
+export { default as openAbout } from "./menus/about.js";
\ No newline at end of file
diff --git a/src/menus/about.js b/src/menus/about.js
new file mode 100644
index 0000000..10fb5ce
--- /dev/null
+++ b/src/menus/about.js
@@ -0,0 +1,131 @@
+import { open } from '../index.js';
+
+export default async ({ name, icon = '', version = '', description = '', links = [], gluonVersions } = {}) => {
+  const html = `
+<title>${name}</title>
+<link rel="icon" href="${icon}">
+<div class="hero">
+  <img width=128 src="${icon}">
+  <div class="name">
+    <span>${name}</span>
+    <span class="version">${version}</span>
+  </div>
+</div>
+<span class="desc">${description}</span>
+${gluonVersions ? `<div class="gluon-versions">
+  <span>Powered by</span>
+  <div>
+    <div>
+      <img width=28 height=28 src="https://gluonjs.org/logo.png">
+      ${process.versions.gluon.split('-')[0]}
+    </div>
+    <div>
+      <img width=28 height=28 src="https://nodejs.org/static/images/favicons/favicon.png">
+      ${process.versions.node}
+    </div>
+    <div>
+      <img width=28 height=28 src="https://gluon-framework.github.io/browser-icons/${gluonVersions.product.name.toLowerCase().replaceAll(' ', '_')}.png">
+      ${gluonVersions.product.version.split('.')[0]}
+    </div>
+  </div>
+</div>` : ''}
+<div class="links">${links.map(x => `<a href="${x.href}">${x.text}</a>`).join('')}</div>
+<style>
+  html, body {
+    background: #101418;
+    color: #f0f4f8;
+    margin: 0;
+    font-family: sans-serif;
+    overflow: hidden;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 1rem;
+  }
+
+  .hero {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4rem;
+  }
+
+  .name {
+    font-weight: 900;
+    font-size: 2.4em;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .version {
+    font-weight: 600;
+    font-size: 0.5em;
+    color: #a0a4a8;
+  }
+
+  .desc {
+    margin-top: 2rem;
+    font-weight: 500;
+    font-size: 1.2em;
+  }
+
+  .gluon-versions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    width: 100%;
+    margin-top: 2rem;
+  }
+
+  .gluon-versions > span {
+    font-weight: 600;
+    font-size: 1.2em;
+  }
+
+  .gluon-versions > div {
+    display: flex;
+    gap: 0.4rem 1rem;
+  }
+
+  .gluon-versions > div > div {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+
+    font-weight: 600;
+    font-size: 1em;
+    color: #a0a4a8;
+  }
+
+  .links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 80%;
+    margin-top: 2rem;
+    gap: 1rem;
+  }
+
+  a {
+    color: #c2a2df;
+    text-decoration: none;
+    width: fit-content;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+</style>`;
+
+  const url = 'data:text/html;base64,' + Buffer.from(html).toString('base64');
+  open(url, {
+    windowSize: [ 420 + (name.length * 8), 340 + (36 * links.length) ],
+    incognito: true
+  });
+};
\ No newline at end of file