initial commit 🎉

2021-03-10 21:29:07 +01:00
21 changed files with 377 additions and 321 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,24 +0,0 @@
-**/.classpath
-**/.dockerignore
-**/.env
-**/.git
-**/.gitignore
-**/.project
-**/.settings
-**/.toolstarget
-**/.vs
-**/.vscode
-**/*.*proj.user
-**/*.dbmdl
-**/*.jfm
-**/azds.yaml
-**/charts
-**/docker-compose*
-**/compose*
-**/Dockerfile*
-**/node_modules
-**/npm-debug.log
-**/obj
-**/secrets.dev.yaml
-**/values.dev.yaml
-README.md
--- a/.drone.yml
+++ b/.drone.yml
@@ -1,48 +0,0 @@
---
-kind: secret
-name: gitea_token
-get:
-  path: odit-git-bot
-  name: apikey
-
---
-kind: pipeline
-type: kubernetes
-name: build
-
-steps:
-  - name: run electron packager
-    depends_on: ["clone"]
-    image: node:15.11.0-alpine3.13
-    commands:
-      - apk add git zip -f
-      - yarn && cd app && yarn && cd ..
-      - yarn electron:package
-      - mkdir dist
-      - zip -r dist/artifact.zip out
-  - name: gitea_release
-    depends_on: ["run electron packager"]
-    image: plugins/gitea-release
-    settings:
-      api_key:
-        from_secret: gitea_token
-      base_url: https://git.odit.services
-      # files: out/*
-      files:
-        - dist/artifact.zip
-      checksum:
-        - md5
-        - sha1
-        - sha256
-        - sha512
-        - adler32
-        - crc32
-    when:
-      event: tag
-
-trigger:
-  # branch:
-  #   - dev
-  event:
-    - push
-    - tag
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,22 @@
-/node_modules/
-/dist/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Svelte Distribution
+public/build/
+
+# Electron Distribution
+dist
+
+# Project Build Automation Directory
+private
+
+# Desktop Services Store on macOS
 .DS_Store
-package-lock.json
-yarn.lock
-/out
-/yarn.lock
-/app/node_modules
-/app/dist
--- a/6
+++ b/6
@@ -1,6 +0,0 @@
-FROM node:15.11.0-alpine3.13
-RUN apk add git -f
-WORKDIR /app
-COPY . .
-RUN yarn && cd app && yarn && cd ..
-RUN yarn electron:package
--- a/2
+++ b/2
@@ -359,4 +359,4 @@ modifications to any of its public licenses or any other arrangements, understan
 or agreements concerning use of licensed material. For the avoidance of doubt,
 this paragraph does not form part of the public licenses.

-Creative Commons may be contacted at creativecommons.org.
+Creative Commons may be contacted at creativecommons.org.
--- a/README.md
+++ b/README.md
@@ -1,25 +1,18 @@
 # @lfk/scanclient

 ## ✒️ Overview
-This is an API client for @lfk/backend
- WebApp built with [Svelte](https://svelte.dev), [WindiCSS](https://windicss.org/) (to compile [TailwindCSS](https://tailwindcss.com/)) and [Vite](https://vitejs.dev).
- Served to clients via by `electron`.
+This is an API client built with `svelte`, served to clients via by `electron`.

 ## 🚀 Getting Started
 ```
-yarn && cd app && yarn && cd ..
+yarn
 ```
-## WebApp Development
+# Run your app
 ```
-yarn dev
-/
-yarn dev --open
+yarn electron-dev
 ```
-## Run in electron
+
+# Package Your App
 ```
-yarn electron:start
-```
-# Package electron
-```
-yarn electron:package
+yarn electron-pack
 ```
--- a/app/index.html
+++ b/app/index.html
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>LfK!Scan</title>
-  <base href="./">
-  <link rel="icon" type="image/png" href="./favicon.png" />
-</head>
-
-<body class="bg-white font-family-karla h-screen">
-  <script type="module" src="./src/main.js"></script>
-</body>
-
-</html>
--- a/app/package.json
+++ b/app/package.json
@@ -1,20 +0,0 @@
-{
-	"name": "@lfk/scanclient",
-	"version": "0.0.0",
-	"scripts": {
-		"dev": "vite",
-		"build": "vite build"
-	},
-	"devDependencies": {
-		"@svitejs/vite-plugin-svelte": "^0.11.0",
-		"@tsconfig/svelte": "^1.0.10",
-		"@types/html-minifier": "^4.0.0",
-		"axios": "^0.21.1",
-		"glob": "^7.1.6",
-		"html-minifier": "^4.0.0",
-		"svelte": "^3.35.0",
-		"svelte-preprocess": "^4.6.9",
-		"vite": "^2.0.5",
-		"vite-plugin-windicss": "^0.8.2"
-	}
-}
--- a/app/src/App.svelte
+++ b/app/src/App.svelte
@@ -1,63 +0,0 @@
-  <div class="w-full flex flex-wrap">
-
-      <!-- Login Section -->
-      <div class="w-full md:w-1/2 flex flex-col">
-
-          <div class="flex justify-center md:justify-start pt-12 md:pl-12 md:-mb-24">
-              <div class="bg-black text-white font-bold text-xl p-4"><img src="./favicon.png" alt=""
-                      style="height: 3rem;display: inline;"> LfK!Scan</div>
-          </div>
-
-          <div class="flex flex-col justify-center md:justify-start my-auto pt-8 md:pt-0 px-8 md:px-24 lg:px-32">
-              <p class="text-center text-3xl">Configuration</p>
-              <p class="text-center">Please provide the scan client token.<br><a target="_blank" class="underline"
-                      href="https://docs.lauf-fuer-kaya.de/">See our configuration guide.</a></p>
-              <form class="flex flex-col pt-3 md:pt-8" onsubmit="event.preventDefault();">
-                  <div class="flex flex-col pt-4">
-                      <label for="token" class="text-lg">Client Token</label>
-                      <input type="text" id="token" onchange="tokenchanged()" placeholder="Client Token"
-                          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline">
-                  </div>
-                  <input id="configure" type="submit" value="Configure"
-                      class="bg-black text-white font-bold text-lg hover:bg-gray-700 p-2 mt-8 cursor-pointer">
-              </form>
-              <div class="text-center pt-12 pb-12">
-                  <p><svg style="height: 1rem;display: inline;" xmlns="http://www.w3.org/2000/svg" fill="none"
-                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                          class="feather feather-zap" viewBox="0 0 24 24">
-                          <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
-                      </svg><span>powered by <a href="https://odit.services" target="_blank"
-                              class="underline">ODIT.Services</a>.</span></p>
-              </div>
-          </div>
-
-          <div class="w-full p-3">
-              <div class="inline-block mr-2 mt-2">
-                  <button type="button"
-                      class="bg-black focus:outline-none text-white text-sm py-2.5 px-5 rounded-md hover:bg-blue-700">Deutsch
-                      <svg class="h-4 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M15.923 345.043C52.094 442.527 145.929 512 256 512s203.906-69.473 240.077-166.957L256 322.783l-240.077 22.26z" fill="#ffda44"/><path d="M256 0C145.929 0 52.094 69.472 15.923 166.957L256 189.217l240.077-22.261C459.906 69.472 366.071 0 256 0z"/><path d="M15.923 166.957C5.633 194.69 0 224.686 0 256s5.633 61.31 15.923 89.043h480.155C506.368 317.31 512 287.314 512 256s-5.632-61.31-15.923-89.043H15.923z" fill="#d80027"/></svg></button>
-              </div>
-              <div class="inline-block mr-2 mt-2">
-                  <button type="button"
-                      class="bg-black focus:outline-none text-white text-sm py-2.5 px-5 rounded-md hover:bg-blue-700 bg-blue-700">English
-                      <svg class="h-4 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                          <circle cx="256" cy="256" r="256" fill="#f0f0f0"></circle>
-                          <g fill="#d80027">
-                              <path
-                                  d="M244.87 256H512c0-23.106-3.08-45.49-8.819-66.783H244.87V256zM244.87 122.435h229.556a257.35 257.35 0 00-59.07-66.783H244.87v66.783zM256 512c60.249 0 115.626-20.824 159.356-55.652H96.644C140.374 491.176 195.751 512 256 512zM37.574 389.565h436.852a254.474 254.474 0 0028.755-66.783H8.819a254.474 254.474 0 0028.755 66.783z">
-                              </path>
-                          </g>
-                          <path
-                              d="M118.584 39.978h23.329l-21.7 15.765 8.289 25.509-21.699-15.765-21.699 15.765 7.16-22.037a257.407 257.407 0 00-49.652 55.337h7.475l-13.813 10.035a255.58 255.58 0 00-6.194 10.938l6.596 20.301-12.306-8.941a253.567 253.567 0 00-8.372 19.873l7.267 22.368h26.822l-21.7 15.765 8.289 25.509-21.699-15.765-12.998 9.444A258.468 258.468 0 000 256h256V0c-50.572 0-97.715 14.67-137.416 39.978zm9.918 190.422l-21.699-15.765L85.104 230.4l8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765 8.289 25.509zm-8.289-100.083l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765zM220.328 230.4l-21.699-15.765L176.93 230.4l8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765 8.289 25.509zm-8.289-100.083l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765zm0-74.574l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765z"
-                              fill="#0052b4"></path>
-                      </svg></button>
-              </div>
-          </div>
-
-      </div>
-
-      <!-- Image Section -->
-      <div class="w-1/2 shadow-2xl">
-          <img alt="" class="object-cover w-full h-screen hidden md:block" src="https://source.unsplash.com/IXUM4cJynP0">
-      </div>
-  </div>
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -1,13 +0,0 @@
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        reepolee: {
-          500: "#b40000",
-          600: "#9c0000",
-          700: "#750000",
-        },
-      },
-    },
-  },
-};
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -1,50 +0,0 @@
-import svelte from '@svitejs/vite-plugin-svelte';
-import windiCSS from 'vite-plugin-windicss';
-import { minify } from 'html-minifier';
-import { defineConfig } from 'vite';
-//
-const indexReplace = () => {
-	return {
-		name: 'html-transform',
-		transformIndexHtml(html) {
-			return minify(html, {
-				collapseWhitespace: true
-			});
-		}
-	};
-};
-
-export default defineConfig(({ command, mode }) => {
-	const isProduction = mode === 'production';
-	return {
-		base: './',
-		build: {
-			polyfillDynamicImport: false,
-			cssCodeSplit: false,
-			minify: isProduction
-		},
-		plugins: [
-			windiCSS({
-				//@ts-ignore
-				verbose: true,
-				silent: false,
-				debug: true,
-				config: 'tailwind.config.js', // tailwind config file path (optional)
-				compile: false, // false: interpretation mode; true: compilation mode
-				prefix: 'windi-', // set compilation mode style prefix
-				globalPreflight: true, // set preflight style is global or scoped
-				globalUtility: true // set utility style is global or scoped
-			}),
-			svelte({
-				//@ts-ignore
-				hot: !isProduction,
-				emitCss: true,
-				extensions: [ '.md', '.svx', '.svelte' ],
-				preprocess: [
-					//
-				]
-			}),
-			indexReplace()
-		]
-	};
-});
--- a/main.js
+++ b/main.js
@@ -1,39 +1,79 @@
-const { app, BrowserWindow } = require('electron');
+// Modules to control application life and create native browser window
+const { app, BrowserWindow, dialog } = 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() {
-	const mainWindow = new BrowserWindow({
+	// Create the browser window.
+	mainWindow = new BrowserWindow({
 		width: 800,
 		height: 600,
-		fullscreen: true
-		// webPreferences: {
-		// 	preload: path.join(__dirname, 'preload.js')
-		// }
+		webPreferences: {
+			nodeIntegration: true
+		},
+		// Use this in development mode.
+		icon: isDev() ? path.join(process.cwd(), 'public/favicon.png') : path.join(__dirname, 'public/favicon.png'),
+		// Use this in production mode.
+		// icon: path.join(__dirname, 'public/favicon.png'),
+		show: false
+	});
+	mainWindow.removeMenu();
+
+	// 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:5000/');
+	} 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();
 	});
-	mainWindow.loadFile('app/dist/index.html');
-	// mainWindow.removeMenu();
-	// mainWindow.webContents.openDevTools()
 }

 // 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.whenReady().then(() => {
-	createWindow();
+app.on('ready', createWindow);

-	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 (BrowserWindow.getAllWindows().length === 0) createWindow();
-	});
-});
-
-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
+// 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.json
+++ b/package.json
@@ -1,44 +1,40 @@
 {
 	"name": "@lfk/scanclient",
-	"version": "0.0.0",
-	"description": "minimal electron application",
+	"version": "0.0.1",
+	"description": "LfK! Scanclient",
 	"main": "main.js",
-	"scripts": {
-		"dev": "cd app && yarn dev",
-		"electron:start": "cd app && yarn build && cd .. && electron-forge start",
-		"electron:package": "cd app && yarn build && cd .. && electron-forge package"
+	"build": {
+		"icon": "public/favicon.png",
+		"productName": "LfK!Scan",
+		"files": [ "public/**/*", "main.js" ],
+		"win": {},
+		"linux": {},
+		"mac": {}
 	},
-	"devDependencies": {
-		"@electron-forge/cli": "^6.0.0-beta.54",
-		"@electron-forge/maker-deb": "^6.0.0-beta.54",
-		"@electron-forge/maker-rpm": "^6.0.0-beta.54",
-		"@electron-forge/maker-squirrel": "^6.0.0-beta.54",
-		"@electron-forge/maker-zip": "^6.0.0-beta.54",
-		"electron-nightly": "14.0.0-nightly.20210311"
+	"scripts": {
+		"build": "rollup -c",
+		"dev": "rollup -c -w",
+		"start": "sirv public",
+		"electron": "wait-on http://localhost:5000 && electron .",
+		"electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"",
+		"preelectron-pack": "yarn run build",
+		"electron-pack": "electron-builder"
 	},
 	"dependencies": {
-		"electron-squirrel-startup": "^1.0.0"
+		"electron-serve": "^1.0.0"
 	},
-	"config": {
-		"forge": {
-			"packagerConfig": {},
-			"makers": [
-				{
-					"name": "@electron-forge/maker-zip",
-					"platforms": [ "darwin" ],
-					"config": {
-						"name": "lfk__scanclient"
-					}
-				},
-				{
-					"name": "@electron-forge/maker-deb",
-					"config": {}
-				},
-				{
-					"name": "@electron-forge/maker-rpm",
-					"config": {}
-				}
-			]
-		}
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^14.0.0",
+		"@rollup/plugin-node-resolve": "^8.0.0",
+		"concurrently": "^5.3.0",
+		"electron": "^9.2.1",
+		"electron-builder": "^22.8.0",
+		"rollup": "^2.3.4",
+		"rollup-plugin-livereload": "^1.0.0",
+		"rollup-plugin-svelte": "^5.0.3",
+		"rollup-plugin-terser": "^6.0.0",
+		"sirv-cli": "^1.0.0",
+		"svelte": "^3.0.0",
+		"wait-on": "^5.2.0"
 	}
 }
--- a/app/public/favicon.png
+++ b/app/public/favicon.png
--- a/public/global.css
+++ b/public/global.css
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width,initial-scale=1">
+
+	<title>LfK!Scan</title>
+
+	<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>
+</body>
+
+</html>
--- a/public/svelte.png
+++ b/public/svelte.png
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -0,0 +1,75 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+
+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({
+			// 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: css => {
+				css.write('public/build/bundle.css');
+			}
+		}),
+
+		// 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(),
+
+		// 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,125 @@
+// @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": "^1.0.0",
+  "svelte-preprocess": "^4.0.0",
+  "@rollup/plugin-typescript": "^4.0.0",
+  "typescript": "^3.9.3",
+  "tslib": "^2.0.0",
+  "@tsconfig/svelte": "^1.0.0"
+})
+
+// Add script for checking
+packageJSON.scripts = Object.assign(packageJSON.scripts, {
+  "validate": "svelte-check"
+})
+
+// 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 preprocess to the svelte config, this is tricky because there's no easy signifier.
+// Instead we look for `css:` then the next `}` and add the preprocessor to that
+let foundCSS = false
+let match
+
+// https://regex101.com/r/OtNjwo/1
+const configEditor = new RegExp(/css:.|\n*}/gmi)
+while (( match = configEditor.exec(rollupConfig)) != null) {
+  if (foundCSS) {
+    const endOfCSSIndex = match.index + 1
+    rollupConfig = rollupConfig.slice(0, endOfCSSIndex) + ",\n			preprocess: sveltePreprocess()," + rollupConfig.slice(endOfCSSIndex);
+    break
+  }
+  if (match[0].includes("css:")) foundCSS = true
+}
+
+
+// Add TypeScript
+rollupConfig = rollupConfig.replace("commonjs(),", 'commonjs(),\n\t\ttypescript({ sourceMap: !production }),')
+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)
+
+// 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"))
+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,31 @@
+<header class="navbar">
+	<section class="navbar-section">
+	  <a href="#" class="btn btn-link">Docs</a>
+	  <a href="#" class="btn btn-link">Examples</a>
+	</section>
+	<div class="navbar-center"><img src="/favicon.png" style="height:4rem;" alt="Spectre.css"></div>
+	<section class="navbar-section">
+	  <a href="#" class="btn btn-link">Twitter</a>
+	  <a href="#" class="btn btn-link">GitHub</a>
+	</section>
+  </header>
+<main>
+	<div class="hero hero-sm bg-dark">
+		<div class="hero-body">
+			<h1><img src="/favicon.png" alt="Logo" style="height: 5rem;vertical-align: middle;"><span style="vertical-align: middle;">LfK!Scan</span></h1>
+			<p>Lauf für Kaya! Scanstation</p>
+		</div>
+	</div>
+	<div style="padding:1rem;">
+		<div class="column col-12">
+			<h3>Configure Scanstation <a target="_blank" href="https://docs.lauf-fuer-kaya.de/"><small class="label">📃 take a look at the configuration guide</small></a></h3>
+		</div>
+		<div class="column col-6 col-xs-12">
+		  <div class="form-group">
+			<label class="form-label" for="input-example-1">Token</label>
+			<input class="form-input" id="input-example-1" type="text" placeholder="Token">
+		  </div>
+		  <button class="btn btn-primary input-group-btn btn-lg">Submit</button>
+		</div>
+	  </div>
+</main>
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,8 +1,10 @@
 import App from './App.svelte';
-import 'windi.css';

 const app = new App({
-	target: document.body
+	target: document.body,
+	props: {
+		appName: 'Electron-Svelte'
+	}
 });

 export default app;