[Release] v1.0.20210402

Author: ptkdev

.all-shieldsrc

@@ -266,19 +266,37 @@
 					"platform": "shields"
 				},
 				{
-					"url": "https://github.com/ptkdev-bot",
+					"url": "https://github.com/ptkdev-boilerplate?q=svelte",
 					"color": "#f368e0",
-					"label": "🤖 Boilerplate",
+					"label": "👔 Boilerplate",
+					"message": "Svelte",
+					"style": "flat",
+					"logo": "",
+					"platform": "shields"
+				},
+				{
+					"url": "https://github.com/ptkdev-boilerplate?q=webcomponent",
+					"color": "#f368e0",
+					"label": "👔 Boilerplate",
+					"message": "WebComponents",
+					"style": "flat",
+					"logo": "",
+					"platform": "shields"
+				},
+				{
+					"url": "https://github.com/ptkdev-boilerplate?q=bot",
+					"color": "#f368e0",
+					"label": "👔 Boilerplate",
 					"message": "BOT",
 					"style": "flat",
 					"logo": "",
 					"platform": "shields"
 				},
 				{
-					"url": "hhttps://github.com/ptkdev-boilerplate",
+					"url": "https://github.com/ptkdev-boilerplate?q=node",
 					"color": "#f368e0",
-					"label": "🦄 Boilerplate",
-					"message": "Website / App",
+					"label": "👔 Boilerplate",
+					"message": "Node",
 					"style": "flat",
 					"logo": "",
 					"platform": "shields"

.eslintignore

@@ -1,3 +1,2 @@
 /dist
-/build
 /examples

.eslintrc.json renamed to .eslintrc.cjs

@@ -1,4 +1,4 @@
-{
+module.exports = {
 	"env": {
 		"es6": true,
 		"node": true,
@@ -20,7 +20,8 @@
 			"tagNamePreference": {
 				"returns": "return"
 			}
-		}
+		},
+		"svelte3/typescript": require("typescript")
 	},
 	"overrides": [
 		{
@@ -92,7 +93,7 @@
 		"no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
 		"spaced-comment": [2, "always"],
 		"space-before-blocks": ["error", "always"],
-		"space-before-function-paren": ["error", "never"],
+		"space-before-function-paren": "off",
 		"prefer-template": "error",
 		"no-useless-concat": "error",
 		"linebreak-style": ["error", "unix"],
@@ -114,4 +115,4 @@
 		"jsdoc/require-returns-check": 1,
 		"jsdoc/require-hyphen-before-param-description": 1
 	}
-}
+};

.github/assets/screenshot.png

@@ -85,6 +85,7 @@ Thumbs.db
 *.apk
 *.ap_
 *.dex
+bin/
 gen/
 .gradle/
 build/
@@ -120,11 +121,8 @@ npm-debug.log
 
 # App #
 #######
-config.js
-config/*.js
-configs/*.js
-config.ts
-config/*.ts
-configs/*.ts
+/app/configs/config.js
+/app/configs/config.ts
+/extra
 /dist
 /build

.gitignore

@@ -1,4 +1,5 @@
 **/*
 !/dist/**/*
+!/extra/**/*
 !*.md
 !package*.json

.npmignore

@@ -1,7 +1,9 @@
-# v1.0.20210325 (March 25, 2021)
+# v1.0.20210402 (April 02, 2021)
 
 -   First release
 
 <!-- all-shields/sponsors-badges:START -->
-[![Donate Paypal](https://img.shields.io/badge/donate-paypal-005EA6.svg?style=flat&logo=paypal)](https://www.paypal.me/ptkdev) [![Donate Ko-Fi](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?style=flat&logo=ko-fi)](https://ko-fi.com/ptkdev) [![Donate Github Sponsors](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?style=flat&logo=github)](https://github.com/sponsors/ptkdev) [![Donate Patreon](https://img.shields.io/badge/donate-patreon-F87668.svg?style=flat&logo=patreon)](https://www.patreon.com/ptkdev) [![Donate Bitcoin](https://img.shields.io/badge/donate-35jQmZCy4nsxoMM3QPFrnZePDVhdKaHMRH-E38B29.svg?style=flat&logo=bitcoin)]() [![Donate Ethereum](https://img.shields.io/badge/donate-0x8b8171661bEb032828e82baBb0B5B98Ba8fBEBFc-4E8EE9.svg?style=flat&logo=ethereum)]() 
+
+[![Donate Paypal](https://img.shields.io/badge/donate-paypal-005EA6.svg?style=flat&logo=paypal)](https://www.paypal.me/ptkdev) [![Donate Ko-Fi](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?style=flat&logo=ko-fi)](https://ko-fi.com/ptkdev) [![Donate Github Sponsors](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?style=flat&logo=github)](https://github.com/sponsors/ptkdev) [![Donate Patreon](https://img.shields.io/badge/donate-patreon-F87668.svg?style=flat&logo=patreon)](https://www.patreon.com/ptkdev) [![Donate Bitcoin](https://img.shields.io/badge/donate-35jQmZCy4nsxoMM3QPFrnZePDVhdKaHMRH-E38B29.svg?style=flat&logo=bitcoin)]() [![Donate Ethereum](https://img.shields.io/badge/donate-0x8b8171661bEb032828e82baBb0B5B98Ba8fBEBFc-4E8EE9.svg?style=flat&logo=ethereum)]()
+
 <!-- all-shields/sponsors-badges:END -->

CHANGELOG.md

@@ -1,7 +1,9 @@
-# 🚀 svelte-electron-boilerplate
+# 🧬 svelte-electron-boilerplate
 
 <!-- all-shields/header-badges:START -->
-[![v1.0.20210325](https://img.shields.io/badge/version-v1.0.20210325-lightgray.svg?style=flat&logo=)](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/blob/main/CHANGELOG.md) [![](https://img.shields.io/npm/v/@ptkdev/svelte-electron-boilerplate?color=CC3534&logo=npm)](https://www.npmjs.com/package/@ptkdev/svelte-electron-boilerplate) [![License: MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat&logo=license)](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/blob/main/LICENSE.md) [![Powered By Svelte](https://img.shields.io/badge/powered%20by-svelte-FF3C02.svg?style=flat&logo=svelte)](https://svelte.dev/) [![Language: TypeScript](https://img.shields.io/badge/language-typescript-blue.svg?style=flat&logo=typescript)](https://www.typescriptlang.org/) [![ECMAScript: 2019](https://img.shields.io/badge/ES-9-F7DF1E.svg?style=flat&logo=javascript)](https://github.com/tc39/ecma262) [![Discord Server](https://discordapp.com/api/guilds/383373985666301975/embed.png)](https://discord.ptkdev.io) 
+
+[![v1.0.20210402](https://img.shields.io/badge/version-v1.0.20210402-lightgray.svg?style=flat&logo=)](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/blob/main/CHANGELOG.md) [![](https://img.shields.io/npm/v/@ptkdev/svelte-electron-boilerplate?color=CC3534&logo=npm)](https://www.npmjs.com/package/@ptkdev/svelte-electron-boilerplate) [![License: MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat&logo=license)](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/blob/main/LICENSE.md) [![Powered By Svelte](https://img.shields.io/badge/powered%20by-svelte-FF3C02.svg?style=flat&logo=svelte)](https://svelte.dev/) [![Language: TypeScript](https://img.shields.io/badge/language-typescript-blue.svg?style=flat&logo=typescript)](https://www.typescriptlang.org/) [![ECMAScript: 2019](https://img.shields.io/badge/ES-9-F7DF1E.svg?style=flat&logo=javascript)](https://github.com/tc39/ecma262) [![Discord Server](https://discordapp.com/api/guilds/383373985666301975/embed.png)](https://discord.ptkdev.io)
+
 <!-- all-shields/header-badges:END -->
 
 Create a desktop app with this friendly Svelte boilerplate for electron
@@ -11,29 +13,66 @@ Create a desktop app with this friendly Svelte boilerplate for electron
 > This project is **free**, **open source** and I try to provide excellent **free support**. Why donate? I work on this project several hours in my spare time and try to keep it up to date and working. **THANK YOU!**
 
 <!-- all-shields/sponsors-badges:START -->
-[![Donate Paypal](https://img.shields.io/badge/donate-paypal-005EA6.svg?style=flat&logo=paypal)](https://www.paypal.me/ptkdev) [![Donate Ko-Fi](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?style=flat&logo=ko-fi)](https://ko-fi.com/ptkdev) [![Donate Github Sponsors](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?style=flat&logo=github)](https://github.com/sponsors/ptkdev) [![Donate Patreon](https://img.shields.io/badge/donate-patreon-F87668.svg?style=flat&logo=patreon)](https://www.patreon.com/ptkdev) [![Donate Bitcoin](https://img.shields.io/badge/donate-35jQmZCy4nsxoMM3QPFrnZePDVhdKaHMRH-E38B29.svg?style=flat&logo=bitcoin)]() [![Donate Ethereum](https://img.shields.io/badge/donate-0x8b8171661bEb032828e82baBb0B5B98Ba8fBEBFc-4E8EE9.svg?style=flat&logo=ethereum)]() 
+
+[![Donate Paypal](https://img.shields.io/badge/donate-paypal-005EA6.svg?style=flat&logo=paypal)](https://www.paypal.me/ptkdev) [![Donate Ko-Fi](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?style=flat&logo=ko-fi)](https://ko-fi.com/ptkdev) [![Donate Github Sponsors](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?style=flat&logo=github)](https://github.com/sponsors/ptkdev) [![Donate Patreon](https://img.shields.io/badge/donate-patreon-F87668.svg?style=flat&logo=patreon)](https://www.patreon.com/ptkdev) [![Donate Bitcoin](https://img.shields.io/badge/donate-35jQmZCy4nsxoMM3QPFrnZePDVhdKaHMRH-E38B29.svg?style=flat&logo=bitcoin)]() [![Donate Ethereum](https://img.shields.io/badge/donate-0x8b8171661bEb032828e82baBb0B5B98Ba8fBEBFc-4E8EE9.svg?style=flat&logo=ethereum)]()
+
 <!-- all-shields/sponsors-badges:END -->
 
 ## 📎 Menu
 
 -   💡 [Features](#-features)
+-   🚀 [How to use](#-usage)
+-   👔 [Screenshot](#-screenshot)
+-   📚 [Documentation](#-documentation)
 -   🔨 [Developer Mode](#-developer-mode)
 -   👨‍💻 [Contributing](#-contributing)
 -   🐛 [Known Bugs](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/issues?q=is%3Aopen+is%3Aissue+label%3Abug)
 -   🍻 Community:
-    -   <img src="https://raw.githubusercontent.com/ptkdev-boilerplate/svelte-electron-boilerplate/main/.github/assets/social_discord.png" height="18px"> [Discord](http://discord.ptkdev.io) ([🇬🇧 English Channel](https://discord.gg/YkMG26f) | [🇮🇹 Italian Channel](https://discord.gg/HFtdBAJ) | [🇵🇱 Polish Channel](https://discord.gg/TV5EXFd))
+    -   <img src="https://raw.githubusercontent.com/ptkdev-boilerplate/node-cli-boilerplate/main/.github/assets/social_discord.png" height="18px"> [Discord](http://discord.ptkdev.io) ([🇬🇧 English Channel](https://discord.gg/jqUSGPKdmA) | [🇮🇹 Italian Channel](https://discord.gg/SJFcbvG6RU) | [🇵🇱 Polish Channel](https://discord.gg/25vg4VFhb7))
 
 ## 💡 Features
 
 -   [✔️] Easy to use
 -   [✔️] MIT License
+-   [✔️] Svelte SPA + Electron Desktop App
+-   [✔️] Browser sync, auto refresh, auto reload
+-   [✔️] Dark mode
+-   [✔️] 100% on Google Speedpage
+-   [✔️] Friendly boilerplate + Github templates
+-   [✔️] Powered by svelte framework
+-   [✔️] Without jQuery depencence
+-   [✔️] Typescript + TSPaths preconfigured
+-   [✔️] Userfriendly folders tree
+-   [✔️] Prettiers and ESLint preconfigured
+-   [✔️] all-contributors-cli and all-shields-cli preconfigured
+-   [✔️] JEST Test preconfigured
+-   [✔️] Full async code
+-   [✔️] Github and Vscode dotfiles preconfigured
+-   [✔️] Translations i18n: 🇬🇧 🇮🇹 🇵🇱 (Help me ❤️)
+
+## 👔 Screenshot
+
+[![WebComponent: SvelteWebComponentBoilerplate](https://raw.githubusercontent.com/ptkdev-boilerplate/svelte-electron-boilerplate/main/.github/assets/screenshot.png)](https://raw.githubusercontent.com/ptkdev-boilerplate/svelte-electron-boilerplate/main/.github/assets/screenshot.png)
+
+## 🚀 Usage: Deploy
+
+1. Clone this repository or download [nightly](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/archive/nightly.zip), [beta](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/archive/beta.zip) or [stable](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/archive/main.zip).
+2. Run `npm install`
+3. For create desktop application insaller (exe, dmg or appImage) run:
+
+-   Windows: `npm run build-win` or `npm run build-win-32bit`
+-   Linux: `npm run build-lnx`
+-   Mac: `npm run build-mac` (Only on Apple machine)
+
+...or try build all with: `nom run build`. Installers are available in `build` folder.
 
 ## 🔨 Developer Mode
 
 1. Clone this repository or download [nightly](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/archive/nightly.zip), [beta](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/archive/beta.zip) or [stable](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate/archive/main.zip).
 2. Run `npm install`
 3. Run `npm run dev`
 4. Run `npm run dev:electron`
+5. Run `http://localhost:5000`
 
 ## 📚 Documentation
 
@@ -70,19 +109,27 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 ## 🦄 Other Projects
 
 <!-- all-shields/projects-badges1:START -->
-[![](https://img.shields.io/badge/💻%20My-Portfolio-3498db.svg?style=flat&logo=)](https://ptk.dev/) 
+
+[![](https://img.shields.io/badge/💻%20My-Portfolio-3498db.svg?style=flat&logo=)](https://ptk.dev/)
+
 <!-- all-shields/projects-badges1:END -->
 
 <!-- all-shields/projects-badges2:START -->
-[![](https://img.shields.io/badge/🦒%20Tools-Node%20Logger-9b59b6.svg?style=flat&logo=)](https://github.com/ptkdev/ptkdev-logger) [![](https://img.shields.io/badge/🦌%20Tools-All%20Shields%20CLI-9b59b6.svg?style=flat&logo=)](https://github.com/ptkdev/all-shields-cli) [![](https://img.shields.io/badge/🖥️%20Tools-Aspect%20Ratio%2021:9-9b59b6.svg?style=flat&logo=)](https://github.com/ptkdev/chrome-extension-aspectratio219) [![](https://img.shields.io/badge/🛡%20Tools-Badges:%20Available%20on-9b59b6.svg?style=flat&logo=)](https://availableon.badge.ptkdev.io/) [![](https://img.shields.io/badge/🐾%20Tools-JSON%20Token%20Replace-9b59b6.svg?style=flat&logo=)](https://github.com/ptkdev/json-token-replace) [![](https://img.shields.io/badge/🐍%20Tools-ESLint:%20snakecasejs-9b59b6.svg?style=flat&logo=)](https://github.com/ptkdev/eslint-plugin-snakecasejs) 
+
+[![](https://img.shields.io/badge/🦒%20Tools-Node%20Logger-9b59b6.svg?style=flat&logo=)](https://github.com/ptkdev/ptkdev-logger) [![](https://img.shields.io/badge/🦌%20Tools-All%20Shields%20CLI-9b59b6.svg?style=flat&logo=)](https://github.com/ptkdev/all-shields-cli) [![](https://img.shields.io/badge/🖥️%20Tools-Aspect%20Ratio%2021:9-9b59b6.svg?style=flat&logo=)](https://github.com/ptkdev/chrome-extension-aspectratio219) [![](https://img.shields.io/badge/🛡%20Tools-Badges:%20Available%20on-9b59b6.svg?style=flat&logo=)](https://availableon.badge.ptkdev.io/) [![](https://img.shields.io/badge/🐾%20Tools-JSON%20Token%20Replace-9b59b6.svg?style=flat&logo=)](https://github.com/ptkdev/json-token-replace) [![](https://img.shields.io/badge/🐍%20Tools-ESLint:%20snakecasejs-9b59b6.svg?style=flat&logo=)](https://github.com/ptkdev/eslint-plugin-snakecasejs)
+
 <!-- all-shields/projects-badges2:END -->
 
 <!-- all-shields/projects-badges3:START -->
-[![](https://img.shields.io/badge/📸%20WebComponent-Instagram%20Widget-e74c3c.svg?style=flat&logo=)](https://github.com/ptkdev-components/webcomponent-instagram-widget) [![](https://img.shields.io/badge/👑%20WebComponent-My%20Patreon%20Box-e74c3c.svg?style=flat&logo=)](https://github.com/ptkdev-components/webcomponent-patreon-box) [![](https://img.shields.io/badge/🏞%20WebComponent-Carousel%20Slideshow-e74c3c.svg?style=flat&logo=)](https://github.com/ptkdev-components/webcomponent-carousel-slideshow) 
+
+[![](https://img.shields.io/badge/📸%20WebComponent-Instagram%20Widget-e74c3c.svg?style=flat&logo=)](https://github.com/ptkdev-components/webcomponent-instagram-widget) [![](https://img.shields.io/badge/👑%20WebComponent-My%20Patreon%20Box-e74c3c.svg?style=flat&logo=)](https://github.com/ptkdev-components/webcomponent-patreon-box) [![](https://img.shields.io/badge/🏞%20WebComponent-Carousel%20Slideshow-e74c3c.svg?style=flat&logo=)](https://github.com/ptkdev-components/webcomponent-carousel-slideshow)
+
 <!-- all-shields/projects-badges3:END -->
 
 <!-- all-shields/projects-badges4:START -->
-[![](https://img.shields.io/badge/🎨%20Themes-VSCode-f1c40f.svg?style=flat&logo=)](https://github.com/ptkdev/vscode-theme-dark-blood) [![](https://img.shields.io/badge/📚%20Bot-GameBookChat-34495e.svg?style=flat&logo=)](https://t.me/gamebookchatbot) [![](https://img.shields.io/badge/🤖%20Boilerplate-BOT-f368e0.svg?style=flat&logo=)](https://github.com/ptkdev-bot) [![](https://img.shields.io/badge/🦄%20Boilerplate-Website%20/%20App-f368e0.svg?style=flat&logo=)](hhttps://github.com/ptkdev-boilerplate) [![](https://img.shields.io/badge/💅%20App-Me%20in%20Gifs-2ecc71.svg?style=flat&logo=)](https://meingifs.pics/) [![](https://img.shields.io/badge/📱%20App-Stickers-2ecc71.svg?style=flat&logo=)](https://github.com/ptkdev/ptkdev-stickers#-install-free) 
+
+[![](https://img.shields.io/badge/🎨%20Themes-VSCode-f1c40f.svg?style=flat&logo=)](https://github.com/ptkdev/vscode-theme-dark-blood) [![](https://img.shields.io/badge/📚%20Bot-GameBookChat-34495e.svg?style=flat&logo=)](https://t.me/gamebookchatbot) [![](https://img.shields.io/badge/👔%20Boilerplate-Svelte-f368e0.svg?style=flat&logo=)](https://github.com/ptkdev-boilerplate?q=svelte) [![](https://img.shields.io/badge/👔%20Boilerplate-WebComponents-f368e0.svg?style=flat&logo=)](https://github.com/ptkdev-boilerplate?q=webcomponent) [![](https://img.shields.io/badge/👔%20Boilerplate-BOT-f368e0.svg?style=flat&logo=)](https://github.com/ptkdev-boilerplate?q=bot) [![](https://img.shields.io/badge/👔%20Boilerplate-Node-f368e0.svg?style=flat&logo=)](https://github.com/ptkdev-boilerplate?q=node) [![](https://img.shields.io/badge/💅%20App-Me%20in%20Gifs-2ecc71.svg?style=flat&logo=)](https://meingifs.pics/) [![](https://img.shields.io/badge/📱%20App-Stickers-2ecc71.svg?style=flat&logo=)](https://github.com/ptkdev/ptkdev-stickers#-install-free)
+
 <!-- all-shields/projects-badges4:END -->
 
 ## 💫 License

README.md

@@ -0,0 +1,68 @@
+/**
+ * Dark Mode SCSS
+ * =====================
+ *
+ * @contributors: Patryk Rzucidło [@ptkdev] <support@ptkdev.io> (https://ptk.dev)
+ *
+ * @license: MIT License
+ *
+ */
+#app.darkmode {
+	color: white;
+	background: black;
+	background-color: black;
+
+	body::-webkit-scrollbar {
+		width: 0.4em;
+	}
+
+	body::-webkit-scrollbar-track {
+		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+	}
+
+	body::-webkit-scrollbar-thumb {
+		background-color: rgb(51, 50, 50);
+		outline: 1px solid rgb(4, 6, 7);
+	}
+
+	.switch[type="checkbox"]:focus + label::after,
+	.switch[type="checkbox"]:focus + label::before,
+	.switch[type="checkbox"]:focus + label:after,
+	.switch[type="checkbox"]:focus + label:before {
+		outline: none;
+	}
+
+	a {
+		color: white;
+	}
+
+	.navbar,
+	.footer,
+	.navbar-dropdown,
+	.navbar-dropdown,
+	a.navbar-link,
+	a.navbar-item,
+	a.navbar-item:focus,
+	a.navbar-link:focus-within,
+	a.navbar-item:focus-within,
+	a.navbar-item.is-active,
+	.is-primary {
+		color: white;
+		background: black;
+		background-color: black;
+		background-image: none;
+	}
+
+	.navbar-link:focus,
+	a.navbar-item:hover,
+	a.navbar-link:focus,
+	a.navbar-link:hover {
+		background: darkslategray;
+		background-color: darkslategray;
+		background-image: none;
+	}
+
+	.hero.is-primary {
+		background-image: linear-gradient(141deg, black 0%, rgb(35, 59, 59) 50%, black 100%);
+	}
+}

app/components/common/darkmode/darkmode.scss

@@ -0,0 +1,24 @@
+<script lang="ts">
+	/**
+	 * Dark Mode HTML
+	 * =====================
+	 *
+	 * @contributors: Patryk Rzucidło [@ptkdev] <support@ptkdev.io> (https://ptk.dev)
+	 *
+	 * @license: MIT License
+	 *
+	 */
+	import { onMount } from "svelte";
+	import { darkModeToggle, darkModeDetect, darkmode } from "./darkmode";
+
+	let checked = darkmode;
+
+	onMount(async () => {
+		checked = darkModeDetect();
+	});
+</script>
+
+<div class="field">
+	<input id="dark-mode" type="checkbox" name="dark-mode" class="switch" on:click={() => darkModeToggle()} {checked} />
+	<label for="dark-mode" />
+</div>