initial commit

This commit is contained in:
HorizonCode 2024-01-04 01:26:09 +01:00
parent 1effd2264a
commit 35804c2868
13 changed files with 7549 additions and 52 deletions

View File

@ -27,6 +27,10 @@ function createWindow() {
show: false show: false
}); });
// disable electron toolbar
/* if (!isDev()) */
mainWindow.setMenu(null);
// This block of code is intended for development purpose only. // This block of code is intended for development purpose only.
// Delete this entire block of code when you are ready to package the application. // Delete this entire block of code when you are ready to package the application.
if (isDev()) { if (isDev()) {

7352
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,20 +1,24 @@
{ {
"name": "create-svelte-electron-app", "name": "ezpplauncher-next",
"version": "1.2.0", "version": "2.0.0",
"description": "The boilerplate code to get started creating Cross-platform Desktop Apps with Electron and Svelte as front-end technology.", "description": "EZPPLauncher rewritten with Svelte.",
"private": false, "private": false,
"license": "MIT", "license": "MIT",
"main": "main.js", "main": "main.js",
"author": "Souleh Shaikh <soulehshaikh99@gmail.com>", "author": "HorizonCode <horizoncode88@gmail.com>",
"build": { "build": {
"icon": "public/favicon.png", "icon": "public/favicon.png",
"productName": "Svelte and Electron App", "productName": "EZPPLauncher",
"files": [ "files": [
"public/**/*", "public/**/*",
"main.js", "main.js",
"preload.js" "preload.js"
], ],
"win": {}, "win": {
"target": [
"portable"
]
},
"linux": {}, "linux": {},
"mac": {} "mac": {}
}, },
@ -31,18 +35,27 @@
"electron-serve": "^1.1.0" "electron-serve": "^1.1.0"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-commonjs": "^23.0.2", "@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-image": "^3.0.3",
"concurrently": "^7.5.0", "@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": "^21.2.0",
"electron-builder": "^23.6.0", "electron-builder": "^23.6.0",
"rollup": "^3.2.3", "flowbite": "^2.2.1",
"rollup-plugin-css-only": "^4.2.0", "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-livereload": "^2.0.5",
"rollup-plugin-svelte": "^7.1.0", "rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-svelte": "^7.1.6",
"sirv-cli": "^2.0.2", "sirv-cli": "^2.0.2",
"svelte": "^3.52.0", "svelte": "^4.2.8",
"wait-on": "^6.0.1" "tailwindcss": "^3.3.6",
"wait-on": "^7.2.0"
} }
} }

13
postcss.config.cjs Normal file
View File

@ -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;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 53 KiB

View File

@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="dark" class="dark">
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'> <meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title> <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='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'> <link rel='stylesheet' href='/build/bundle.css'>
@ -13,6 +15,6 @@
<script defer src='/build/bundle.js'></script> <script defer src='/build/bundle.js'></script>
</head> </head>
<body> <body class="bg-gray-900">
</body> </body>
</html> </html>

View File

@ -2,8 +2,10 @@ import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs'; import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve'; import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload'; import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser'; import terser from '@rollup/plugin-terser';
import css from 'rollup-plugin-css-only'; 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; const production = !process.env.ROLLUP_WATCH;
@ -43,9 +45,11 @@ export default {
dev: !production dev: !production
} }
}), }),
// we'll extract any component CSS out into // we'll extract any component CSS out into
// a separate file - better for performance // a separate file - better for performance
css({ output: 'bundle.css' }), css({ output: 'bundle.css' }),
postcss(),
// If you have external dependencies installed from // If you have external dependencies installed from
// npm, you'll most likely need these plugins. In // npm, you'll most likely need these plugins. In
@ -57,6 +61,7 @@ export default {
dedupe: ['svelte'] dedupe: ['svelte']
}), }),
commonjs(), commonjs(),
image(),
// In dev mode, call `npm run start` once // In dev mode, call `npm run start` once
// the bundle has been generated // the bundle has been generated
@ -68,7 +73,8 @@ export default {
// If we're building for production (npm run build // If we're building for production (npm run build
// instead of npm run dev), minify // instead of npm run dev), minify
production && terser() production && terser(),
], ],
watch: { watch: {
clearScreen: false clearScreen: false

View File

@ -55,7 +55,7 @@ const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8") let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
// Edit imports // Edit imports
rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser'; rollupConfig = rollupConfig.replace(`'@rollup/plugin-terser';`, `'@rollup/plugin-terser';
import sveltePreprocess from 'svelte-preprocess'; import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';`) import typescript from '@rollup/plugin-typescript';`)

View File

@ -1,10 +1,54 @@
<script> <script>
export let name; import {
Navbar,
NavBrand,
NavLi,
NavUl,
NavHamburger,
Avatar,
Dropdown,
DropdownItem,
DropdownHeader,
DropdownDivider
} from "flowbite-svelte";
import ezppLogo from '../public/favicon.png';
let count = 0;
</script> </script>
<div
class="p-2 bg-gray-950 flex flex-row justify-between items-center rounded-lg"
>
<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-800"
>Profile</DropdownItem
>
<DropdownDivider />
<DropdownItem class="border-0 !bg-gray-700 active:!bg-gray-800"
>Sign out</DropdownItem
>
</Dropdown>
</div>
<main> <main>
<h1>Hello {name}!</h1> <!-- <button class="btn" on:click={() => (count += 1)}>Count: {count}</button> -->
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main> </main>
<style> <style>
@ -16,10 +60,18 @@
} }
h1 { h1 {
color: #ff3e00; font-size: 2rem;
margin: 0;
font-weight: 300;
font-style: normal;
color: #ccc;
text-transform: uppercase; text-transform: uppercase;
font-size: 4em; letter-spacing: 0.1em;
font-weight: 100; text-shadow: 0 0 1px #000;
text-align: center;
padding: 0.5em 0;
border-bottom: 1px solid #353535;
margin-bottom: 1.5rem;
} }
@media (min-width: 640px) { @media (min-width: 640px) {

8
src/app.pcss Normal file
View File

@ -0,0 +1,8 @@
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
font-family: "Prompt";
}

View File

@ -1,10 +1,9 @@
import App from './App.svelte'; import "./app.pcss";
import App from "./App.svelte";
import '@fontsource/prompt';
const app = new App({ const app = new App({
target: document.body, target: document.body,
props: {
name: 'world'
}
}); });
export default app; export default app;

7
svelte.config.js Normal file
View File

@ -0,0 +1,7 @@
const { vitePreprocess } = require("@sveltejs/vite-plugin-svelte");
const config = {
preprocess: [vitePreprocess({})],
};
module.exports = config;

41
tailwind.config.cjs Normal file
View File

@ -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;