pinokiod 2.15.10 → 2.15.11

package/package.json

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

package/server/index.js

@@ -2150,6 +2150,30 @@ class Server {
         icon = "pinokio-black.png"
       }
 
+
+      // App sharing
+      let apipath = this.kernel.path("api")
+      let files = await fs.promises.readdir(apipath, { withFileTypes: true })
+      let folders = files.filter((f) => {
+        return f.isDirectory()
+      }).map((x) => {
+        return x.name
+      })
+      let apps = []
+      for(let folder of folders) {
+        let p = path.resolve(apipath, folder, "pinokio.js")
+        let pinokio = (await this.kernel.loader.load(p)).resolved
+        if (pinokio) {
+          apps.push({
+            name: pinokio.title,
+            description: pinokio.description,
+            link: `/pinokio/browser/${folder}/browse#n1`,
+            icon: pinokio.icon ? `/api/${folder}/${pinokio.icon}?raw=true` : null
+          })
+        }
+      }
+      console.log({ apps })
+
       res.render("proxy", {
         agent: this.agent,
         theme: this.theme,
@@ -2157,7 +2181,8 @@ class Server {
         qr,
         proxy: home_proxy,
         localhost: `http://localhost:${this.port}`,
-        icon
+        icon,
+        apps
       })
     }))
     this.app.post("/proxy", ex(async (req, res) => {

package/server/views/index.ejs

@@ -182,7 +182,6 @@ body.dark .browser-options-row {
 </form>
 <% if (ishome) { %>
   <div class='nav-btns'>
-    <a class='btn2' href='/proxy'><div><i class="fa-solid fa-wifi"></i></div><div>Share</div></a>
     <a class='btn2' id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
     <a class='btn2' href="https://portal.pinokio.computer/" target="_blank"><div><i class="fa-solid fa-face-smile-beam"></i></div><div>Community</div></a>
     <% if (agent === "electron") { %>
@@ -236,6 +235,13 @@ body.dark .browser-options-row {
           </div>
         </div>
       <% } %>
+      <div class='browser-options-row'>
+        <a href="/proxy" class='btn'><div><i class="fa-solid fa-gauge"></i> Configure</div></a>
+        <div class='flexible'>
+          <h3><i class="fa-solid fa-wifi"></i> Local Sharing</h3>
+          <div>Serve Pinokio, installed apps, and even external apps (example: Ollama) to any device on the same network.</div>
+        </div>
+      </div>
       <!--
       <div class='browser-options-row'>
         <a href="/proxy" class='flexible'>

package/server/views/proxy.ejs

@@ -127,19 +127,48 @@ body.dark .browser-options-row {
   text-decoration: none;
 }
 .line.align-top h3 {
+/*
   align-items: flex-start;
+  */
+  align-items: center;
 }
 .line a:hover {
   color: red;
 }
+.line img {
+  width: 40px;
+  height: 40px;
+}
 .btn-container {
   margin-top: 10px;
 }
 .header-label {
-  font-size: 30px;
+  font-family: Georgia;
+  font-style: italic;
+  font-size: 50px;
   letter-spacing: -1px;
-  padding: 15px;
+  padding: 50px;
   text-align: center;
+  text-transform: capitalize;
+}
+.header-label-sub {
+  font-size: 25px;
+  letter-spacing: -1px;
+  padding: 15px;
+  font-weight: bold;
+}
+.container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+.dark .container-row {
+  background: rgba(255, 255, 255, 0.04);
+}
+.container-row {
+  margin: 10px;
+  background: rgba(0, 0, 100, 0.04);
+  padding: 20px;
+  box-sizing: border-box;
 }
 @media only screen and (max-width: 480px) {
   .btn2 {
@@ -171,59 +200,72 @@ body.dark .browser-options-row {
 </h1>
 </header>
 <main>
+  <div class='header-label'><i class='fa-solid fa-wifi'></i> Local Sharing</div>
   <div class='container'>
-    <div class='not-running-apps'>
-      <div class='header-label'><i class='fa-solid fa-wifi'></i> Platform Local Sharing</div>
-      <ol>
-        <li><strong>PLATFORM LOCAL SHARING:</strong> Press "Start" to make the app accessible from any device on the same network</li>
-        <li><strong>APP LOCAL SHARING:</strong> This dashboard only lets you locally share the platforms. To do this for apps, look inside each app's Configure tab</li>
-      </ol>
+    <div class='container-row'>
+      <div class='header-label-sub'><i class="fa-solid fa-microchip"></i> System Programs</div>
+      <div class='line align-top'>
+        <h3>
+          <img class='icon' src="<%=icon%>">
+          <div class='col'>
+            <div class='title'>Pinokio</div>
+            <% if (proxy) { %>
+              <div class='description'><a href="<%=proxy.proxy%>" target="_blank"><%=proxy.proxy%></a> → <a href="<%=localhost%>" target="_blank"><%=localhost%></a></div>
+              <a class='wifi-qr badge' data-qr="<%=qr%>" data-url="<%=proxy.proxy%>"><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
+            <% } else { %>
+              <div class='description'>Share Pinokio <a href="<%=localhost%>" target="_blank"><%=localhost%></a> with other devices on the same network</div>
+            <% } %>
+            <div class='btn-container'>
+              <% if (proxy) { %>
+                <div id='wifi-stop' data-proxy="<%=proxy.proxy%>" class='btn'><div><i class="fa-solid fa-stop"></i> Stop</div></div>
+              <% } else { %>
+                <div id='wifi' class='btn'><div><i class="fa-solid fa-play"></i> Start</div></div>
+                <div id='wifi-starting' class='btn disabled hidden'><div><i class="fa-solid fa-circle-notch fa-spin"></i> Starting</div></div>
+              <% } %>
+            </div>
+          </div>
+        </h3>
+      </div>
+      <% items.forEach((item) => { %>
         <div class='line align-top'>
           <h3>
-            <img class='icon' src="<%=icon%>">
+            <img class='icon' src="<%=item.icon%>">
             <div class='col'>
-              <div class='title'>Pinokio</div>
-              <% if (proxy) { %>
-                <div class='description'><a href="<%=proxy.proxy%>" target="_blank"><%=proxy.proxy%></a> → <a href="<%=localhost%>" target="_blank"><%=localhost%></a></div>
-                <a class='wifi-qr badge' data-qr="<%=qr%>" data-url="<%=proxy.proxy%>"><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
+              <div class='title'><%=item.name%></div>
+              <% if (item.proxy) { %>
+                <div class='description'><a href="<%=item.proxy%>" target="_blank"><%=item.proxy%></a> → <a href="<%=item.target%>" target="_blank"><%=item.target%></a></div>
+                <a class='wifi-qr badge' data-qr="<%=item.qr%>" data-url="<%=item.proxy%>"><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
               <% } else { %>
-                <div class='description'>Share Pinokio <a href="<%=localhost%>" target="_blank"><%=localhost%></a> with other devices on the same network</div>
+                <div class='description'>Share <%=item.target%> with other devices on the same network</div>
               <% } %>
               <div class='btn-container'>
-                <% if (proxy) { %>
-                  <div id='wifi-stop' data-proxy="<%=proxy.proxy%>" class='btn'><div><i class="fa-solid fa-stop"></i> Stop</div></div>
+                <% if (item.running) { %>
+                  <div data-port="<%=item.port%>" data-name="<%=item.name%>" data-target="<%=item.target%>" class='stop btn'><i class="fa-solid fa-stop"></i> Stop</div>
                 <% } else { %>
-                  <div id='wifi' class='btn'><div><i class="fa-solid fa-play"></i> Start</div></div>
-                  <div id='wifi-starting' class='btn disabled hidden'><div><i class="fa-solid fa-circle-notch fa-spin"></i> Starting</div></div>
+                  <div data-port="<%=item.port%>" data-name="<%=item.name%>" data-target="<%=item.target%>" class='start btn'><i class="fa-solid fa-play"></i> Start</div>
                 <% } %>
               </div>
             </div>
           </h3>
         </div>
-        <% items.forEach((item) => { %>
-          <div class='line align-top'>
-            <h3>
-              <img class='icon' src="<%=item.icon%>">
-              <div class='col'>
-                <div class='title'><%=item.name%></div>
-                <% if (item.proxy) { %>
-                  <div class='description'><a href="<%=item.proxy%>" target="_blank"><%=item.proxy%></a> → <a href="<%=item.target%>" target="_blank"><%=item.target%></a></div>
-                  <a class='wifi-qr badge' data-qr="<%=item.qr%>" data-url="<%=item.proxy%>"><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
-                <% } else { %>
-                  <div class='description'>Share <%=item.target%> with other devices on the same network</div>
-                <% } %>
-                <div class='btn-container'>
-                  <% if (item.running) { %>
-                    <div data-port="<%=item.port%>" data-name="<%=item.name%>" data-target="<%=item.target%>" class='stop btn'><i class="fa-solid fa-stop"></i> Stop</div>
-                  <% } else { %>
-                    <div data-port="<%=item.port%>" data-name="<%=item.name%>" data-target="<%=item.target%>" class='start btn'><i class="fa-solid fa-play"></i> Start</div>
-                  <% } %>
-                </div>
-              </div>
-            </h3>
-          </div>
-        <% }) %>
-      </div>
+      <% }) %>
+    </div>
+    <div class='container-row'>
+      <div class='header-label-sub'><i class="fa-solid fa-dice-d6"></i> Application Programs</div>
+      <% apps.forEach((item) => { %>
+        <a class='line align-top' href="<%=item.link%>">
+          <h3>
+            <img class='icon' src="<%=item.icon%>">
+            <div class='col'>
+              <div class='title'><%=item.name%></div>
+              <div class='description'><%=item.description%></div>
+            </div>
+            <div class='spinner'>
+              <i class="fa-solid fa-chevron-right"></i>
+            </div>
+          </h3>
+        </a>
+      <% }) %>
     </div>
   </div>
 </main>