revert to js

2024-01-09 13:10:37 +01:00 · 2024-01-09 13:10:37 +01:00 · c6fa540575
commit c6fa540575
18 changed files with 8275 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Lock files
+yarn.lock
+
+# Dependency directories
+node_modules/
+
+# Svelte Distribution
+public/build/
+
+# Electron Distribution
+dist
+
+# Project Build Automation Directory
+private
+
+# Desktop Services Store on macOS
+.DS_Store
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Souleh Shaikh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,336 @@
+<div align="center">
+<img alt="Electron Svelte Crossover Banner" src="https://raw.githubusercontent.com/soulehshaikh99/assets/master/create-electron-framework-app/readme/svg/Electron_Svelte.svg" width="580" />
+</div>
+<br />
+The boilerplate code to get started creating Cross-platform Desktop Apps with Electron and Svelte as front-end technology.
+<br />
+<br />
+<div align="center">
+
+[![forthebadge](http://forthebadge.com/images/badges/built-by-developers.svg)](http://forthebadge.com)&nbsp;&nbsp;&nbsp;&nbsp;[![forthebadge](http://forthebadge.com/images/badges/makes-people-smile.svg)](http://forthebadge.com)<br />
+
+[![forthebadge](http://forthebadge.com/images/badges/uses-html.svg)](http://forthebadge.com)&nbsp;&nbsp;&nbsp;[![forthebadge](http://forthebadge.com/images/badges/uses-css.svg)](http://forthebadge.com)&nbsp;&nbsp;&nbsp;[![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](http://forthebadge.com)
+
+[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
+
+<div>
+<a href="https://gitHub.com/soulehshaikh99/create-svelte-electron-app/stargazers/"><img src="https://img.shields.io/github/stars/soulehshaikh99/create-svelte-electron-app.svg?style=social&amp;label=Star&amp;maxAge=2592000" alt="GitHub stars" style="max-width: 100%;"></a>&nbsp;&nbsp;&nbsp;<a href="https://gitHub.com/soulehshaikh99/create-svelte-electron-app/network/"><img src="https://img.shields.io/github/forks/soulehshaikh99/create-svelte-electron-app.svg?style=social&amp;label=Forks&amp;maxAge=2592000" alt="GitHub forks" style="max-width: 100%;"></a>&nbsp;&nbsp;&nbsp;<a href="https://gitHub.com/soulehshaikh99/create-svelte-electron-app/watchers/"><img src="https://img.shields.io/github/watchers/soulehshaikh99/create-svelte-electron-app.svg?style=social&amp;label=Watching&amp;maxAge=2592000" alt="GitHub watchers" style="max-width: 100%;"></a>
+</div>
+<br />
+
+[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/souleh99)
+
+</div>
+
+## ✒️ Overview
+
+The aim of this project is to provide Web Developers using `svelte` the power to create cross-platform desktop apps using `electron`.
+
+#### 🧐 What packages does the project use?
+
+**`electron`** enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.
+
+**`electron-builder`** is used as a complete solution to package and build a ready for distribution (supports Numerous target formats) Electron app with "auto update" support out of the box.
+
+**`electron-serve`** is used for Static file serving for Electron apps.
+
+**`svelte`** is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
+
+**`concurrently`** is used to run multiple commands concurrently.
+
+**`wait-on`** is used as it can wait for sockets, and http(s) resources to become available.
+<br />
+
+## 🚀 Getting Started
+
+**Note:** If you wish to use npm over yarn then modify `package.json` by replacing `yarn` with `npm` in `electron-dev` and `preelectron-pack` scripts.
+But I strongly recommend using <em>yarn</em> as it is a better choice when compared to <em>npm</em>.
+
+### 🤓 Use this boilerplate
+
+```bash
+# Clone the Project
+
+# Use degit scaffolding tool
+$ npx degit soulehshaikh99/create-svelte-electron-app create-svelte-electron-app
+# or GitHub CLI Users
+$ gh repo clone https://github.com/soulehshaikh99/create-svelte-electron-app.git
+# or Normal Git Users
+$ git clone https://github.com/soulehshaikh99/create-svelte-electron-app.git
+
+# Switch location to the cloned directory
+$ cd create-svelte-electron-app
+
+# Install dependencies
+$ yarn # or npm install
+
+# Run your app
+$ yarn electron-dev # or npm run electron-dev
+
+# Package Your App
+$ yarn electron-pack # or npm run electron-pack
+```
+
+### 💫 Create this boilerplate from scratch (Manual Setup)
+
+#### 1) Use degit scaffolding tool to get started with svelte template.
+
+```bash
+$ npx degit sveltejs/template create-svelte-electron-app
+```
+
+#### 2) Switch to project directory
+
+```bash
+$ cd create-svelte-electron-app
+```
+
+#### 3) Move all dependencies to devDependencies using IDE / Text Editor
+
+```bash
+# It should look something like this
+"dependencies": {},
+"devDependencies": {
+  "@rollup/plugin-commonjs": "^17.0.0",
+  "@rollup/plugin-node-resolve": "^11.0.0",
+  "rollup": "^2.3.4",
+  "rollup-plugin-css-only": "^3.1.0",
+  "rollup-plugin-livereload": "^2.0.0",
+  "rollup-plugin-svelte": "^7.0.0",
+  "rollup-plugin-terser": "^7.0.0",
+  "sirv-cli": "^2.0.0",
+  "svelte": "^3.0.0"
+}
+```
+
+#### 4) Install & Update all Dependencies at the same time
+
+```bash
+$ yarn add --dev @rollup/plugin-commonjs@latest @rollup/plugin-node-resolve@latest rollup@latest rollup-plugin-css-only@latest rollup-plugin-livereload@latest rollup-plugin-svelte@latest rollup-plugin-terser@latest sirv-cli@latest svelte@latest
+# npm i -D @rollup/plugin-commonjs@latest @rollup/plugin-node-resolve@latest rollup@latest rollup-plugin-css-only@latest rollup-plugin-livereload@latest rollup-plugin-svelte@latest rollup-plugin-terser@latest sirv-cli@latest svelte@latest
+```
+
+#### 5) Install Development Dependencies
+
+```bash
+$ yarn add --dev electron electron-builder wait-on concurrently
+# npm i -D electron electron-builder wait-on concurrently
+```
+
+#### 6) Install Production Dependency
+
+```bash
+$ yarn add electron-serve # or npm i electron-serve
+```
+
+#### 7) Your dependencies should look something like this
+
+```json
+"dependencies": {
+  "electron-serve": "^1.1.0"
+},
+"devDependencies": {
+  "@rollup/plugin-commonjs": "^23.0.2",
+  "@rollup/plugin-node-resolve": "^15.0.1",
+  "concurrently": "^7.5.0",
+  "electron": "^21.2.0",
+  "electron-builder": "^23.6.0",
+  "rollup": "^3.2.3",
+  "rollup-plugin-css-only": "^4.2.0",
+  "rollup-plugin-livereload": "^2.0.5",
+  "rollup-plugin-svelte": "^7.1.0",
+  "rollup-plugin-terser": "^7.0.2",
+  "sirv-cli": "^2.0.2",
+  "svelte": "^3.52.0",
+  "wait-on": "^6.0.1"
+}
+```
+
+#### 8) Download the app icon
+
+[favicon.png](https://raw.githubusercontent.com/soulehshaikh99/assets/master/framework-icons/svelte/favicon.png) and place it in the public directory, overwriting the original (the original one is too small for packaging app, electron-builder will raise an error).
+
+#### 9) Create main.js file (serves as entry point for Electron App's Main Process)
+
+```bash
+# Windows Users
+$ fsutil file createnew main.js 0
+# notepad main.js
+
+# Linux and macOS Users
+$ touch main.js
+```
+
+#### 10) Paste the below code in main.js file
+
+```js
+// Modules to control application life and create native browser window
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+const serve = require('electron-serve');
+const loadURL = serve({ directory: 'public' });
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow;
+
+function isDev() {
+    return !app.isPackaged;
+}
+
+function createWindow() {    
+    // Create the browser window.
+    mainWindow = new BrowserWindow({
+        width: 800,
+        height: 600,
+        webPreferences: {
+            nodeIntegration: true,
+            preload: path.join(__dirname, 'preload.js'),
+            // enableRemoteModule: true,
+            // contextIsolation: false
+        },
+        icon: path.join(__dirname, 'public/favicon.png'),
+        show: false
+    });
+
+    // This block of code is intended for development purpose only.
+    // Delete this entire block of code when you are ready to package the application.
+    if (isDev()) {
+        mainWindow.loadURL('http://localhost:8080/');
+    } else {
+        loadURL(mainWindow);
+    }
+    
+    // Uncomment the following line of code when app is ready to be packaged.
+    // loadURL(mainWindow);
+
+    // Open the DevTools and also disable Electron Security Warning.
+    // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true;
+    // mainWindow.webContents.openDevTools();
+
+    // Emitted when the window is closed.
+    mainWindow.on('closed', function () {
+        // Dereference the window object, usually you would store windows
+        // in an array if your app supports multi windows, this is the time
+        // when you should delete the corresponding element.
+        mainWindow = null
+    });
+
+    // Emitted when the window is ready to be shown
+    // This helps in showing the window gracefully.
+    mainWindow.once('ready-to-show', () => {
+        mainWindow.show()
+    });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+    // On macOS it is common for applications and their menu bar
+    // to stay active until the user quits explicitly with Cmd + Q
+    if (process.platform !== 'darwin') app.quit()
+});
+
+app.on('activate', function () {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (mainWindow === null) createWindow()
+});
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.
+```
+
+#### 11) Create preload.js file (optional, contains code that runs before your web page is loaded into the browser window)
+
+```bash
+# Windows Users
+$ fsutil file createnew preload.js 0
+# notepad preload.js
+
+# Linux and macOS Users
+$ touch preload.js
+```
+
+#### 12) Paste the below code in preload.js file
+
+```js
+console.log('Hello from preload.js file!');
+```
+
+#### 13) Update the script section of `package.json`
+
+```bash
+# Add this scripts
+"electron": "wait-on http://localhost:8080 && electron .",
+"electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"",
+"preelectron-pack": "yarn run build",
+"electron-pack": "electron-builder"
+
+# Modify the build and dev scriptsW
+"build": "rollup -c --bundleConfigAsCjs",
+"dev": "rollup -c -w --bundleConfigAsCjs",
+
+# You should end up with something similar
+"scripts": {
+  "build": "rollup -c --bundleConfigAsCjs",
+  "dev": "rollup -c -w --bundleConfigAsCjs",
+  "start": "sirv public --no-clear",
+  "electron": "wait-on http://localhost:8080 && electron .",
+  "electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"",
+  "preelectron-pack": "yarn run build",
+  "electron-pack": "electron-builder"
+}
+```
+
+#### 14) Add the following configuration in `package.json`
+
+**Note:** build configuration is used by electron-builder, modify it if you wish to add more packaging and native distribution options for different OS Platforms.
+
+```bash
+"name": "create-svelte-electron-app",   # By default it is svelte-app
+"main": "main.js",  # Application Entry Point, please verify entry point is set to main.js
+"build": {
+  "icon": "public/favicon.png",
+  "productName": "Svelte and Electron App",
+  "files": [
+    "public/**/*",
+    "main.js"
+  ],
+  "win": {},  # Windows Specific Configuration
+  "linux": {},  # Linux Specific Configuration
+  "mac": {}  # MacOs Specific Configuration
+}
+```
+
+#### 15) Test drive your app
+
+```bash
+# Run your app
+$ yarn electron-dev # or npm run electron-dev
+
+# Package Your App
+$ yarn electron-pack # or npm run electron-pack
+```
+
+### 💯 Result
+
+<div align="center">
+<img alt="Electron Svelte Window Screeenshot" src="https://raw.githubusercontent.com/soulehshaikh99/assets/master/create-electron-framework-app/readme/png/create-svelte-electron-app.png" />
+</div>
+
+<h3>😍 Made with ❤️ from Souleh</h3>
+
+[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com)
+<br/>
+
+<h3>💰 Support Me</h3>
+
+[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/souleh99)
+<br/>
+
+<h3>📋 License: </h3>
+Licensed under the <a href="https://github.com/soulehshaikh99/create-svelte-electron-app/blob/master/LICENSE">MIT License</a>.
--- a/main.js
+++ b/main.js
@ -0,0 +1,94 @@
+// Modules to control application life and create native browser window
+const { app, BrowserWindow, Menu } = require("electron");
+const path = require("path");
+const serve = require("electron-serve");
+const loadURL = serve({ directory: "public" });
+const { setupTitlebar, attachTitlebarToWindow } = require(
+  "custom-electron-titlebar/main",
+);
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow;
+
+function isDev() {
+  return !app.isPackaged;
+}
+
+function createWindow() {
+  setupTitlebar();
+
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    resizable: false,
+    frame: false,
+    titleBarStyle: "hidden",
+    titleBarOverlay: true,
+    webPreferences: {
+      nodeIntegration: true,
+      preload: path.join(__dirname, "preload.js"),
+    },
+    icon: path.join(__dirname, "public/favicon.png"),
+    show: false,
+  });
+
+  const menu = Menu.buildFromTemplate([]);
+  Menu.setApplicationMenu(menu);
+
+  // disable electron toolbar
+  /* if (!isDev()) */
+  mainWindow.setMenu(null);
+
+  attachTitlebarToWindow(mainWindow);
+
+  // This block of code is intended for development purpose only.
+  // Delete this entire block of code when you are ready to package the application.
+  if (isDev()) {
+    mainWindow.loadURL("http://localhost:8080/");
+  } else {
+    loadURL(mainWindow);
+  }
+
+  // Uncomment the following line of code when app is ready to be packaged.
+  // loadURL(mainWindow);
+
+  // Open the DevTools and also disable Electron Security Warning.
+  // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true;
+  // mainWindow.webContents.openDevTools();
+
+  // Emitted when the window is closed.
+  mainWindow.on("closed", function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null;
+  });
+
+  // Emitted when the window is ready to be shown
+  // This helps in showing the window gracefully.
+  mainWindow.once("ready-to-show", () => {
+    mainWindow.show();
+  });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on("ready", createWindow);
+
+// Quit when all windows are closed.
+app.on("window-all-closed", function () {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== "darwin") app.quit();
+});
+
+app.on("activate", function () {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) createWindow();
+});
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,62 @@
+{
+  "name": "ezpplauncher-next",
+  "version": "2.0.0",
+  "description": "EZPPLauncher rewritten with Svelte.",
+  "private": false,
+  "license": "MIT",
+  "main": "main.js",
+  "author": "HorizonCode <horizoncode88@gmail.com>",
+  "build": {
+    "icon": "public/favicon.png",
+    "productName": "EZPPLauncher",
+    "files": [
+      "public/**/*",
+      "main.js",
+      "preload.js"
+    ],
+    "win": {
+      "target": [
+        "portable"
+      ]
+    },
+    "linux": {},
+    "mac": {}
+  },
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs",
+    "dev": "rollup -c -w --bundleConfigAsCjs",
+    "start": "sirv public --no-clear",
+    "electron": "wait-on http://localhost:8080 && electron .",
+    "electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"",
+    "preelectron-pack": "yarn run build",
+    "electron-pack": "electron-builder"
+  },
+  "dependencies": {
+    "custom-electron-titlebar": "^4.2.7",
+    "electron-serve": "^1.1.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "autoprefixer": "^10.4.16",
+    "concurrently": "^8.2.2",
+    "electron": "^21.2.0",
+    "electron-builder": "^23.6.0",
+    "flowbite": "^2.2.1",
+    "flowbite-svelte": "^0.44.21",
+    "postcss": "^8.4.32",
+    "postcss-load-config": "^5.0.2",
+    "rollup": "^4.9.2",
+    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-svelte": "^7.1.6",
+    "sirv-cli": "^2.0.2",
+    "svelte": "^4.2.8",
+    "tailwindcss": "^3.3.6",
+    "wait-on": "^7.2.0"
+  }
+}
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer,
+  ],
+};
+
+module.exports = config;
--- a/preload.js
+++ b/preload.js
@ -0,0 +1,14 @@
+const { Titlebar, TitlebarColor } = require("custom-electron-titlebar");
+
+window.addEventListener("DOMContentLoaded", () => {
+  const titlebar = new Titlebar({
+    backgroundColor: TitlebarColor.fromHex("#202020"),
+    itemBackgroundColor: TitlebarColor.fromHex("#202020"),
+    menu: null,
+    
+    enableMnemonics: false,
+    maximizable: false,
+  });
+
+  //titlebar.updateTitle(`${appInfo.appName} ${appInfo.appVersion}`);
+});
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/global.css
+++ b/public/global.css
@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark" class="dark">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>EZPPLauncher</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/global.css'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+	<script defer src='/build/bundle.js'></script>
+</head>
+
+<body class="bg-gray-900">
+</body>
+</html>
--- a/rollup.config.js
+++ b/rollup.config.js
@ -0,0 +1,82 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import terser from '@rollup/plugin-terser';
+import css from 'rollup-plugin-css-only';
+import postcss from 'rollup-plugin-postcss';
+import image from '@rollup/plugin-image';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+	let server;
+
+	function toExit() {
+		if (server) server.kill(0);
+	}
+
+	return {
+		writeBundle() {
+			if (server) return;
+			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+				stdio: ['ignore', 'inherit', 'inherit'],
+				shell: true
+			});
+
+			process.on('SIGTERM', toExit);
+			process.on('exit', toExit);
+		}
+	};
+}
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'public/build/bundle.js'
+	},
+	plugins: [
+		svelte({
+			compilerOptions: {
+				// enable run-time checks when not in production
+				dev: !production
+			}
+		}),
+
+		// we'll extract any component CSS out into
+		// a separate file - better for performance
+		css({ output: 'bundle.css' }),
+		postcss(),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte']
+		}),
+		commonjs(),
+		image(),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		!production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload('public'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser(),
+
+	],
+	watch: {
+		clearScreen: false
+	}
+};
--- a/scripts/setupTypeScript.js
+++ b/scripts/setupTypeScript.js
@ -0,0 +1,121 @@
+// @ts-check
+
+/** This script modifies the project to support TS code in .svelte files like:
+
+  <script lang="ts">
+  	export let name: string;
+  </script>
+ 
+  As well as validating the code for CI.
+  */
+
+/**  To work on this script:
+  rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
+*/
+
+const fs = require("fs")
+const path = require("path")
+const { argv } = require("process")
+
+const projectRoot = argv[2] || path.join(__dirname, "..")
+
+// Add deps to pkg.json
+const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
+packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
+  "svelte-check": "^2.0.0",
+  "svelte-preprocess": "^4.0.0",
+  "@rollup/plugin-typescript": "^8.0.0",
+  "typescript": "^4.0.0",
+  "tslib": "^2.0.0",
+  "@tsconfig/svelte": "^2.0.0"
+})
+
+// Add script for checking
+packageJSON.scripts = Object.assign(packageJSON.scripts, {
+  "check": "svelte-check --tsconfig ./tsconfig.json"
+})
+
+// Write the package JSON
+fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, "  "))
+
+// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
+const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
+const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
+fs.renameSync(beforeMainJSPath, afterMainTSPath)
+
+// Switch the app.svelte file to use TS
+const appSveltePath = path.join(projectRoot, "src", "App.svelte")
+let appFile = fs.readFileSync(appSveltePath, "utf8")
+appFile = appFile.replace("<script>", '<script lang="ts">')
+appFile = appFile.replace("export let name;", 'export let name: string;')
+fs.writeFileSync(appSveltePath, appFile)
+
+// Edit rollup config
+const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
+let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
+
+// Edit imports
+rollupConfig = rollupConfig.replace(`'@rollup/plugin-terser';`, `'@rollup/plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';`)
+
+// Replace name of entry point
+rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
+
+// Add preprocessor
+rollupConfig = rollupConfig.replace(
+  'compilerOptions:',
+  'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
+);
+
+// Add TypeScript
+rollupConfig = rollupConfig.replace(
+  'commonjs(),',
+  'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
+);
+fs.writeFileSync(rollupConfigPath, rollupConfig)
+
+// Add TSConfig
+const tsconfig = `{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}`
+const tsconfigPath =  path.join(projectRoot, "tsconfig.json")
+fs.writeFileSync(tsconfigPath, tsconfig)
+
+// Add global.d.ts
+const dtsPath =  path.join(projectRoot, "src", "global.d.ts")
+fs.writeFileSync(dtsPath, `/// <reference types="svelte" />`)
+
+// Delete this script, but not during testing
+if (!argv[2]) {
+  // Remove the script
+  fs.unlinkSync(path.join(__filename))
+
+  // Check for Mac's DS_store file, and if it's the only one left remove it
+  const remainingFiles = fs.readdirSync(path.join(__dirname))
+  if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
+    fs.unlinkSync(path.join(__dirname, '.DS_store'))
+  }
+
+  // Check if the scripts folder is empty
+  if (fs.readdirSync(path.join(__dirname)).length === 0) {
+    // Remove the scripts folder
+    fs.rmdirSync(path.join(__dirname))
+  }
+}
+
+// Adds the extension recommendation
+fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
+fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
+  "recommendations": ["svelte.svelte-vscode"]
+}
+`)
+
+console.log("Converted to TypeScript.")
+
+if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
+  console.log("\nYou will need to re-run your dependency manager to get started.")
+}
--- a/src/App.svelte
+++ b/src/App.svelte
@ -0,0 +1,71 @@
+<script>
+  import {
+    Avatar,
+    Dropdown,
+    DropdownItem,
+    DropdownHeader,
+    DropdownDivider,
+  } from "flowbite-svelte";
+  import ezppLogo from "../public/favicon.png";
+</script>
+
+<div class="p-2 flex flex-row justify-between items-center">
+  <div class="flex flex-row items-center">
+    <img src={ezppLogo} class="w-12 h-12 mr-2" />
+    <span class="text-gray-100 text-xl font-extralight">EZPPLauncher</span>
+  </div>
+  <div class="w-fill cursor-pointer flex md:order-2">
+    <Avatar
+      class="rounded-lg hover:ring hover:ring-4 hover:ring-gray-800"
+      src="https://a.ez-pp.farm/1001"
+      id="avatar-menu"
+    />
+  </div>
+  <Dropdown placement="bottom" triggeredBy="#avatar-menu">
+    <DropdownHeader>
+      <span class="block text-sm">Quetzalcoatl</span>
+      <span class="block truncate text-sm font-medium text-gray-200"
+        >me@horizonco.de</span
+      >
+    </DropdownHeader>
+    <DropdownItem
+      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
+      >Profile</DropdownItem
+    >
+    <DropdownItem
+      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
+      >Settings</DropdownItem
+    >
+    <DropdownDivider />
+    <DropdownItem
+      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
+      >Sign out</DropdownItem
+    >
+  </Dropdown>
+</div>
+
+<main class="p-1">
+  <div class="container border border-gray-700 rounded-lg"></div>
+</main>
+
+<style>
+  .container {
+    text-align: center;
+    padding: 1em;
+    margin: 0 auto;
+  }
+  h1 {
+    font-size: 2rem;
+    margin: 0;
+    font-weight: 300;
+    font-style: normal;
+    color: #ccc;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    text-shadow: 0 0 1px #000;
+    text-align: center;
+    padding: 0.5em 0;
+    border-bottom: 1px solid #353535;
+    margin-bottom: 1.5rem;
+  }
+</style>
--- a/src/app.pcss
+++ b/src/app.pcss
@ -0,0 +1,8 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  font-family: "Prompt";
+}
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,9 @@
+import "./app.pcss";
+import App from "./App.svelte";
+import '@fontsource/prompt';
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,7 @@
+const { vitePreprocess } = require("@sveltejs/vite-plugin-svelte");
+
+const config = {
+  preprocess: [vitePreprocess({})],
+};
+
+module.exports = config;
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -0,0 +1,41 @@
+/** @type {import('tailwindcss').Config}*/
+const config = {
+  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // flowbite-svelte
+        primary: {
+          50: '#FFF5F2',
+          100: '#FFF1EE',
+          200: '#FFE4DE',
+          300: '#FFD5CC',
+          400: '#FFBCAD',
+          500: '#FE795D',
+          600: '#EF562F',
+          700: '#EB4F27',
+          800: '#CC4522',
+          900: '#A5371B'
+        },
+        gray: {
+          50: '#F9F9F9',
+          100: '#ECECEC',
+          200: '#D3D3D3',
+          300: '#B9B9B9',
+          400: '#A0A0A0',
+          500: '#868686',
+          600: '#6D6D6D',
+          700: '#535353',
+          800: '#393939',
+          900: '#202020',
+          950: '#1A1A1A'
+        },
+      }
+    }
+  },
+
+  plugins: [require('flowbite/plugin')],
+};
+
+module.exports = config;