u2a 3.1.0 → 3.2.0

package/README.md

@@ -10,10 +10,6 @@
   </a>
 </div>
 
-![U2A Banner](https://img.shields.io/badge/U2A-URL%20to%20App-blue)
-![License](https://img.shields.io/badge/license-GPL--3.0-green)
-![Version](https://img.shields.io/badge/version-1.0.0-orange)
-
 **Convert any website into a desktop application with a single command.**
 
 U2A is a command-line utility that allows you to transform any web URL into a standalone desktop application using Electron. It works across Windows, macOS, and Linux platforms.
@@ -27,145 +23,22 @@ U2A is a command-line utility that allows you to transform any web URL into a st
 - 📊 Detailed logging for troubleshooting
 - 🏷️ Customizable application names and window sizes
 
-## Installation
-
-```bash
-npm install -g u2a
-```
-
-## Usage
-
-### Creating an App
-
-To create a desktop application from a website:
-
-```bash
-u2a create <url> [--name <appName>] [--width <width>] [--height <height>]
-```
-
-Example:
-```bash
-u2a create github.com --name "GitHub App" --width 1200 --height 800
-```
-
-This will:
-1. Download the website's favicon (if available)
-2. Create an Electron wrapper application with the specified name and window size
-3. Add the application to your system menu/launcher
-4. Track the application in the U2A database
-
-### Listing Your Apps
-
-To see all the applications you've created:
-
-```bash
-u2a list
-```
-
-This will display a list of all created applications with their details:
-- Application name
-- Original URL
-- Creation date
-- Application directory
-
-### Removing an App
-
-To remove an application:
-
-```bash
-u2a remove <appName>
-```
-
-Example:
-```bash
-u2a remove "GitHub App"
-```
-
-This will:
-1. Remove the application from your system menu/launcher
-2. Delete the application files
-3. Remove the entry from the U2A database
-
-
-## Executables && Setups
-
-U2A also supports the creation of executables files and setup files. We will see how to it here.
-
-> [!NOTE]
-> Windows executables and setups are confirmed working, macos and linux ones may be unstable.
-
-
-### Creating an executable
-
-To directly create a windows, macos or linux executable, you can use the following command:
-
-```bash
-u2a create <url> [...] --executable [windows|darwin|linux] [--arch <architecture>]
-```
-
-This will:
-1. Temporarily install the application
-2. Create an executable and move it to your working directory
-3. Delete the application
-
-> [!WARNING]
-> To launch an executable, you will need all the files that are created by U2A.
-
-### Creating a setup
-
-You can also directly create a setup file, so people can install it on their machine. Use the `--executable [...] --setup` argument to do so.
-
-This will:
-1. Temporarily install the application
-2. Create an executable and move it to your working directory
-3. Create a setup file and move it to your working directory
-4. Delete the application
-
-
-> [!WARNING]
-> To use the setup, you will need all the files that are created by U2A.
-
-
-## How It Works
-  
-`This dont apply for executables and setup`
-U2A creates a minimal Electron application that loads the specified website URL. It:
-
-1. Downloads the site's favicon to use as the application icon
-2. Generates a main.js file with Electron configuration
-3. Creates a package.json with necessary dependencies
-4. Installs required Node modules
-5. Adds appropriate desktop integration for your operating system
-6. Maintains a database of created applications for easy management
-
-## System Requirements
-
-- Node.js 12.0 or higher
-- npm 6.0 or higher
-- Windows, macOS, or Linux
-
-## Configuration
-
-U2A stores all configuration, application data, and logs in the `.u2a` directory in your home folder:
-
-- `~/.u2a/apps/` - Application files
-- `~/.u2a/logs/` - Log files
-- `~/.u2a/db.json` - Application database
-
-## Troubleshooting
+### Quick links: 
+- [Install UrlToApp on your system](https://docs.urltoapp.xyz/?p=installation)
 
-If you encounter any issues, check the log files in the `~/.u2a/logs/` directory. Each component has its own log file with detailed information.
+- [Create Webapps locally](https://docs.urltoapp.xyz/?p=create-local-apps) (Applications that load an url)
 
-Set the `DEBUG` environment variable to see additional debug messages:
+- [Delete local Webapps](https://docs.urltoapp.xyz/?p=delete-local-apps)
 
-```bash
-DEBUG=1 u2a create example.com
-```
+- [Create an executable for Windows, MacOs or Linux](https://docs.urltoapp.xyz/?p=create-executable)
 
-## License
+- [Create a setup file for Windows, MacOs or Linux](https://docs.urltoapp.xyz/?p=create-setup)
 
-This project is licensed under the GNU General Public License v3.0 - see the [LICENSE](LICENSE) file for details.
+- [Common issues](https://docs.urltoapp.xyz/?p=common-issues)
 
-## Author
 
-Created by [Douxx](https://douxx.tech)
+> [!WARNING] 
+> Full support for MacOs and Linux apps not guaranteed.  
+ 
+---
+Brought to you by [@douxxtech](https://github.com/douxxtech)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "u2a",
-    "version": "3.1.0",
+    "version": "3.2.0",
     "description": "URL to App - Turn any URL into a desktop application",
     "main": "src/index.js",
     "bin": {

package/src/commands/create.js

@@ -190,7 +190,7 @@ function generateMainJs(appName, url, iconPath, options = {}) {
   const height = options.height || 800;
 
   return `
-const { app, BrowserWindow, Menu, shell } = require('electron');
+const { app, BrowserWindow, Menu, shell, nativeTheme } = require('electron');
 const path = require('path');
 const fs = require('fs');
 
@@ -202,7 +202,6 @@ const WINDOW_HEIGHT = ${height};
 
 let mainWindow;
 let splashWindow;
-let loadErrors = [];
 
 function logAppInfo() {
   const packageJsonPath = path.join(__dirname, 'package.json');
@@ -239,26 +238,15 @@ function logAppInfo() {
   console.log('--------------------------------\\n');
 }
 
-function updateSplashScreen(message, isError = false) {
-  if (splashWindow && !splashWindow.isDestroyed()) {
-    splashWindow.webContents.executeJavaScript(\`
-  try {
-    document.getElementById('loading-text').innerText = "\${message.replace(/"/g, '\\"')}";
-  } catch (e) {
-    console.error('Failed to update splash screen:', e);
-  }
-\`).catch(err => console.error('Failed to update splash screen:', err));
-
-  }
-}
-
 function createSplashScreen() {
   splashWindow = new BrowserWindow({
-    width: 550,
-    height: 400,
+    width: 200,
+    height: 40,
     transparent: true,
     frame: false,
     alwaysOnTop: true,
+    skipTaskbar: true,
+    resizable: false,
     icon: APP_ICON_PATH,
     webPreferences: {
       nodeIntegration: false,
@@ -266,153 +254,85 @@ function createSplashScreen() {
     }
   });
 
+  const isDarkMode = nativeTheme.shouldUseDarkColors;
+  const bgColor = isDarkMode ? '#333333' : '#f5f5f5';
+  const loaderBgColor = isDarkMode ? '#555555' : '#e0e0e0';
+  const loaderColor = isDarkMode ? '#ffffff' : '#2563eb';
+  const shadowColor = isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.2)';
+  
   const splashHtml = \`
   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; object-src 'none';">
-    <title>Loading...</title>
+    <title>Loading</title>
     <style>
-      body {
+      html, body {
         margin: 0;
         padding: 0;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-        background-color: var(--bg-primary, #0f172a);
-        color: var(--text-primary, #f8fafc);
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        border-radius: 20px;
+        width: 100%;
+        height: 100%;
         overflow: hidden;
-        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+        background-color: transparent;
       }
-
+      
       .container {
-        text-align: center;
-        width: 90%;
-        max-width: 500px;
-      }
-
-      .domain {
-        font-size: 24px;
-        margin-bottom: 20px;
-        color: var(--primary, #2563eb);
-      }
-
-      .spinner {
-        width: 50px;
-        height: 50px;
-        border: 5px solid rgba(37, 99, 235, 0.2);
-        border-radius: 50%;
-        border-top-color: var(--primary, #2563eb);
-        animation: spin 1s ease-in-out infinite;
-        margin: 0 auto 20px;
-      }
-
-      @keyframes spin {
-        to { transform: rotate(360deg); }
-      }
-
-      .loading-text {
-        font-size: 16px;
-        color: var(--text-secondary, #cbd5e1);
-        margin-top: 15px;
-      }
-
-      .loading-text.error {
-        color: var(--danger, #ef4444);
-        font-weight: bold;
-      }
-
-      .progress-bar {
         width: 100%;
-        height: 4px;
-        background-color: var(--bg-secondary, #1e293b);
-        border-radius: 2px;
-        overflow: hidden;
-        margin-top: 15px;
-      }
-
-      .progress {
         height: 100%;
-        width: 0%;
-        background-color: var(--primary, #2563eb);
-        animation: progress 3s ease-in-out infinite;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
-
-      @keyframes progress {
-        0% { width: 0%; }
-        50% { width: 70%; }
-        100% { width: 100%; }
+      
+      .loader-container {
+        width: 180px;
+        height: 12px;
+        background-color: \${bgColor};
+        border-radius: 6px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px \${shadowColor};
+        padding: 3px;
       }
-
-      #errors-container {
-        display: none;
-        margin-top: 20px;
-        background-color: rgba(239, 68, 68, 0.1);
-        border-left: 3px solid var(--danger, #ef4444);
-        padding: 10px;
-        border-radius: 4px;
-        text-align: left;
-        max-height: 150px;
-        overflow-y: auto;
+      
+      .loader-bg {
         width: 100%;
+        height: 100%;
+        background-color: \${loaderBgColor};
+        border-radius: 4px;
+        overflow: hidden;
+        position: relative;
       }
-
-      #errors-list {
-        margin: 0;
-        padding-left: 20px;
-        color: var(--danger, #ef4444);
-        font-size: 14px;
-      }
-
-      #errors-list li {
-        margin-bottom: 5px;
-      }
-
-      .retry-button {
-        background-color: var(--primary, #2563eb);
-        color: white;
-        border: none;
-        padding: 8px 16px;
+      
+      .loader {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 30%;
+        background-color: \${loaderColor};
         border-radius: 4px;
-        margin-top: 15px;
-        cursor: pointer;
-        font-weight: bold;
-        transition: background-color 0.2s;
-        display: none;
+        animation: loading 1.5s infinite ease-in-out;
       }
-
-      .retry-button:hover {
-        background-color: var(--primary-dark, #1d4ed8);
+      
+      @keyframes loading {
+        0% {
+          left: -30%;
+        }
+        100% {
+          left: 100%;
+        }
       }
     </style>
   </head>
   <body>
     <div class="container">
-      <div class="domain">\${APP_NAME}</div>
-      <div class="spinner"></div>
-      <div id="loading-text" class="loading-text">Loading...</div>
-      <div class="progress-bar">
-        <div class="progress"></div>
+      <div class="loader-container">
+        <div class="loader-bg">
+          <div class="loader"></div>
+        </div>
       </div>
-      <div id="errors-container">
-        <h3 style="margin-top: 0; color: var(--danger, #ef4444);">Errors detected:</h3>
-        <ul id="errors-list"></ul>
-      </div>
-      <button id="retry-button" class="retry-button" onclick="window.location.reload()">Retry</button>
     </div>
-    <script>
-      window.showRetryButton = function() {
-        document.getElementById('retry-button').style.display = 'inline-block';
-        document.querySelector('.spinner').style.animationPlayState = 'paused';
-        document.querySelector('.progress').style.animationPlayState = 'paused';
-      }
-    </script>
   </body>
   </html>
   \`;
@@ -421,7 +341,15 @@ function createSplashScreen() {
   fs.writeFileSync(splashPath, splashHtml);
 
   splashWindow.loadFile(splashPath);
-  splashWindow.center();
+  
+  const { screen } = require('electron');
+  const primaryDisplay = screen.getPrimaryDisplay();
+  const { width, height } = primaryDisplay.workAreaSize;
+  
+  splashWindow.setPosition(
+    Math.floor(width / 2 - 100),
+    Math.floor(height / 2 - 20)
+  );
 }
 
 function createWindow() {
@@ -441,53 +369,7 @@ function createWindow() {
     }
   });
 
-  mainWindow.webContents.on('did-fail-load', (event, errorCode, errorDescription, validatedURL, isMainFrame) => {
-    const errorMessage = \`Load error (\${errorCode}): \${errorDescription}\`;
-    loadErrors.push(errorMessage);
-
-    updateSplashScreen(errorMessage, true);
-
-    if (isMainFrame) {
-      splashWindow.webContents.executeJavaScript('window.showRetryButton()').catch(err => {
-        console.error('Failed to show retry button:', err);
-      });
-    }
-  });
-
-  mainWindow.webContents.on('certificate-error', (event, url, error, certificate, callback) => {
-    event.preventDefault();
-    const errorMessage = \`Certificate error: \${error}\`;
-    console.error(errorMessage);
-    loadErrors.push(errorMessage);
-
-    updateSplashScreen(errorMessage, true);
-    callback(false);
-  });
-
-  mainWindow.webContents.on('console-message', (event, level, message, line, sourceId) => {
-    if (level === 2) {
-      const errorMessage = \`Console: \${message} (line \${line})\`;
-      loadErrors.push(errorMessage);
-
-      updateSplashScreen('JavaScript error detected', true);
-    }
-  });
-
-  mainWindow.webContents.on('did-start-loading', () => {
-    updateSplashScreen('Connecting to ' + APP_NAME + '...');
-  });
-
-  mainWindow.webContents.on('did-start-navigation', (event, url) => {
-    updateSplashScreen('Navigating to ' + new URL(url).host + '...');
-  });
-
-  mainWindow.webContents.on('dom-ready', () => {
-    updateSplashScreen('DOM ready, loading resources...');
-  });
-
   mainWindow.webContents.on('did-finish-load', () => {
-    updateSplashScreen('Loading complete!');
-
     setTimeout(() => {
       if (splashWindow && !splashWindow.isDestroyed()) {
         splashWindow.close();
@@ -523,15 +405,13 @@ function createWindow() {
 
   setTimeout(() => {
     if (splashWindow && !splashWindow.isDestroyed()) {
-      if (loadErrors.length === 0) {
-        splashWindow.close();
-        if (!mainWindow.isVisible()) {
-          mainWindow.show();
-          mainWindow.focus();
-        }
+      splashWindow.close();
+      if (!mainWindow.isVisible()) {
+        mainWindow.show();
+        mainWindow.focus();
       }
     }
-  }, 15000);
+  }, 10000);
 }
 
 if (process.platform === 'win32') {
@@ -557,9 +437,6 @@ app.on('activate', () => {
 `;
 }
 
-
-
-
 async function generatePackageJson(appName, iconPath, isExecutable = false, createSetup = false) {
   const u2aPackagePath = path.resolve(__dirname, '../../package.json');