pinokiod 1.1.0 → 1.1.1

package/kernel/api/index.js

@@ -24,7 +24,25 @@ class Api {
     this.proxies = {}
     this.lproxy = new Lproxy()
   }
+  checkProxy(config) {
+    // if config.name exists, throw error
+    // if config.uri exists, throw error
+    for(let scriptPath in this.proxies) {
+      let proxies = this.proxies[scriptPath]
+      for(let p of proxies) {
+        if (p.target === config.uri) {
+          throw new Error(`A proxy for the uri ${config.uri} already exists`)
+        }
+//        if (p.name === config.name) {
+//          throw new Error(`A proxy with the name ${config.name} already exists`)
+//        }
+      }
+    }
+  }
   async startProxy(scriptPath, uri, name) {
+    this.checkProxy({ uri, name })
+    // if the name exists, throw error
+    // if the uri exists, throw error
     console.log("startProxy", { scriptPath, uri, proxies: this.proxies })
     let proxy_uri = await this.lproxy.start(uri)
     console.log({ proxy_uri, uri })
@@ -37,7 +55,6 @@ class Api {
       target: uri,
       proxy: proxy_uri
     }
-    console.log("started", { proxies: this.proxies })
   }
   stopProxy(config) {
     console.log("stopProxy", { config, proxies: this.proxies })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/index.js

@@ -993,8 +993,11 @@ class Server {
  //     let U = `${_p}/${pathComponents.join("/")}`
  //     console.log("*******", { filepath, pathComponents, U })
 
+      let pinokio_proxy = this.kernel.api.proxies["/"]
+      console.log("pinokio_proxy", pinokio_proxy)
 
       res.render("index", {
+        proxy: pinokio_proxy[0],
         error: error,
         logo: this.logo,
 //        memory: mem,
@@ -1180,6 +1183,13 @@ class Server {
         } else {
           config.menu[i].target = "@" + (config.menu[i].id || config.menu[i].src)
         }
+
+
+        if (config.menu[i].href && config.menu[i].href.startsWith("http")) {
+          if (this.agent !== "electron") {
+            config.menu[i].target = "_blank"
+          }
+        }
       }
 
 
@@ -1209,7 +1219,7 @@ class Server {
       let proxyMenu = []
       for(let proxy of childProxies) {
         proxyMenu.push({
-          btn: `<i class="fa-solid fa-bolt-lightning"></i> [Proxy] ${proxy.name}`,
+          btn: `<i class="fa-solid fa-wifi"></i> <strong>WiFi</strong>&nbsp;-&nbsp;${proxy.name}`,
           target: "_blank",
           href: proxy.proxy
         })
@@ -1598,6 +1608,8 @@ class Server {
 
     console.log("homedir", this.kernel.homedir)
 
+    // start proxy for Pinokio itself
+    await this.kernel.api.startProxy("/", `http://127.0.0.1:${this.port}`, "/")
 
 //    if (!debug) {
 //      let logsdir = path.resolve(this.kernel.homedir, "logs")

package/server/views/browser.ejs

@@ -1,7 +1,7 @@
 <html>
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 <link href="/css/fontawesome.min.css" rel="stylesheet">
 <link href="/css/solid.min.css" rel="stylesheet">
 <link href="/css/regular.min.css" rel="stylesheet">
@@ -390,6 +390,9 @@ body.dark #new-tab {
   padding-left: 15px;
   box-sizing: border-box;
 }
+.loader-dialog {
+  padding: 10px;
+}
 body.dark .loader-popup {
   background: rgba(0,0,0,0.2);
   color: whitesmoke;
@@ -405,10 +408,39 @@ body.dark .loader-popup {
 body.dark .loader-container {
   background: rgba(255,255,255,0.3);
 }
+@media only screen and (max-width: 480px) {
+  .app-info {
+    display: flex;
+    padding: 10px;
+  }
+  .app-info img {
+    width: 60px;
+    height: 60px;
+  }
+  .header-item {
+    font-size: 16px;
+  }
+  aside.active {
+    width: 100%;
+    z-index: 10000000;
+  }
+  aside:not(.active) {
+    display: none;
+  }
+  .container.active {
+    position: absolute;
+    z-index: 10000000;
+    width: 100%;
+    height: 100%;
+  }
+  .grid-btns {
+    display: none;
+  }
+}
 </style>
 </head>
 <body class='<%=theme%>'>
-<aside>
+<aside class='active'>
   <div class='header-top header-item'>
     <div class='app-info'>
       <img src="<%=rawpath%>/<%=config.icon%>?raw=true"/>
@@ -457,6 +489,7 @@ body.dark .loader-container {
 <div class='container'>
   <nav>
     <div class='hidden bar'>
+      <button class='btn2' id='menu'><i class="fa-solid fa-bars"></i></button>
       <% if (agent === "electron") { %>
         <button class='btn2' id='back'><i class="fa-solid fa-arrow-left"></i></button>
         <button class='btn2' id='forward'><i class="fa-solid fa-arrow-right"></i></button>
@@ -510,7 +543,6 @@ const getTarget = (href) => {
   }
 }
 const subUrlOf = (s, f) => {
-  debugger
 
   let subsetUrl = (s.startsWith("http") ? s : "http://localhost" + s)
   let fullUrl = (f.startsWith("http") ? f: "http://localhost" + f)
@@ -633,6 +665,20 @@ const renderSelection = (e, force) => {
     //
     //  => select that tab and frame
 
+    console.log("target", target)
+    if (target) {
+
+      // display the menu button at the top
+      // maximize container
+      // minimize aside
+
+      document.querySelector(".container").classList.add("active")
+      document.querySelector("aside").classList.remove("active")
+    } else {
+      document.querySelector(".container").classList.remove("active")
+      document.querySelector("aside").classList.add("active")
+    }
+
     if (target) {
       console.log("# 3")
 
@@ -642,7 +688,7 @@ const renderSelection = (e, force) => {
       console.log("> url", url)
       document.querySelector("#open-browser").href = url
       document.querySelector("#clone-tab").setAttribute("data-href", url)
-//      document.querySelector("#location").innerHTML = url
+      document.querySelector("#location").innerHTML = url
 
 
       // select the selected target element (tab)
@@ -654,7 +700,6 @@ const renderSelection = (e, force) => {
       })
 
 
-      debugger
 
       // Look for the frame
       // 1. if it's hard (".h")
@@ -728,7 +773,6 @@ const renderSelection = (e, force) => {
         } else {
           if (e) {
             if (target.closest(".h")) {
-              debugger
               e.preventDefault()
               e.stopPropagation()
               let sub = subUrlOf(target.href, targetFrame.src)
@@ -868,6 +912,8 @@ const renderSelection = (e, force) => {
   } else {
     console.log("# 14")
 //    document.querySelector(".bar").classList.add("hidden")
+    document.querySelector(".container").classList.remove("active")
+    document.querySelector("aside").classList.add("active")
   }
 }
 console.log("loaded before", loaded)
@@ -985,6 +1031,10 @@ const addTab = async (url) => {
 
 
 
+document.querySelector("#menu").addEventListener("click", async (e) => {
+  location.hash = ""
+  renderSelection()
+})
 document.querySelector(".app-info").addEventListener("click", async (e) => {
   e.preventDefault()
   e.stopPropagation()
@@ -997,9 +1047,6 @@ document.querySelector("#delete").addEventListener("click", async (e) => {
   e.stopPropagation()
   const confirmed = confirm("Are you sure you wish to delete the app?")
   if (confirmed) {
-
-
-
     let name = document.querySelector("#delete").getAttribute("data-name")
     console.log("delete", name)
     Swal.fire({
@@ -1072,6 +1119,20 @@ document.querySelector("aside").addEventListener("click", async (e) => {
 
 
     if (target) {
+
+      // if data-confirm exists, ask for confirmation
+      // if not, then just go forward
+      let confirmText = target.getAttribute("data-confirm")
+      if (confirmText && confirmText.length > 0) {
+        const confirmed = confirm(confirmText)
+        console.log('confirmed', confirmed)
+        if (!confirmed) {
+          e.preventDefault()
+          e.stopPropagation()
+          return
+        }
+      }
+
       if (target.target === "_blank") {
         // nothing
       } else {

package/server/views/index.ejs

@@ -1,7 +1,7 @@
 <html>
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 <link href="/xterm.min.css" rel="stylesheet" />
 <link href="/css/fontawesome.min.css" rel="stylesheet">
 <link href="/css/solid.min.css" rel="stylesheet">
@@ -52,6 +52,27 @@
 header .runner {
   padding: 10px 0 0;
 }
+.proxy {
+  padding: 0 10px;
+  text-align: right;
+}
+.proxy a {
+  text-decoration: none;
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: 2px;
+  background: black;
+  color: white;
+}
+@media only screen and (max-width: 480px) {
+  .btn2 {
+    padding: 5px;
+    font-size: 11px;
+  }
+  .nav-btns {
+    flex-grow: 1;
+  }
+}
 </style>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
@@ -98,6 +119,7 @@ header .runner {
 <% if (ishome) { %>
   <div class='nav-btns'>
     <a class='btn2' id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
+    <a class='btn2' href="<%=proxy.proxy%>" target="_blank"><div><i class="fa-solid fa-wifi"></i></div><div>WiFi</div></a>
     <a class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></a>
     <a class='btn2' href='https://discord.gg/TQdNwadtE4' target="_blank"><div><i class="fa-brands fa-discord"></i></div><div>Discord</div></a>
     <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>

package/server/views/partials/menu.ejs

@@ -11,14 +11,14 @@
   <% } else { %>
     <% if (item.btn) { %>
       <% if (item.target === "_blank") { %>
-        <a data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
+        <a data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
           <div class='tab'><%-item.btn%></div>
           <div class='loader'>
             <i class="fa-solid fa-up-right-from-square"></i>
           </div>
         </a>
       <% } else { %>
-        <a data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
+        <a data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
           <div class='tab'><%-item.btn%></div>
           <% if (item.running) { %>
             <div class='loader'>