From b2b82dd772b05681f9adab6dd9a6b78d88bad2b7 Mon Sep 17 00:00:00 2001
From: Androz2091 <androz2091@gmail.com>
Date: Sat, 19 Jun 2021 11:09:44 +0200
Subject: [PATCH] :recycle: Start working on v2

---
 package.json                 |   4 +-
 public/global.css            |   2 +
 rollup.config.js             |   2 +
 src/App.svelte               |  22 +++--
 src/components/Footer.svelte |  21 +++++
 src/components/Header.svelte |  36 +++++++++
 src/main.css                 |  55 +++++++++++--
 src/views/Loader.svelte      | 151 ++++++++++++++++++++---------------
 yarn.lock                    |  85 +++++++++++++++++++-
 9 files changed, 299 insertions(+), 79 deletions(-)
 create mode 100644 src/components/Footer.svelte
 create mode 100644 src/components/Header.svelte

diff --git a/package.json b/package.json
index 84a6482..ac1c8a2 100644
--- a/package.json
+++ b/package.json
@@ -17,13 +17,15 @@
     "rollup-plugin-livereload": "^1.0.0",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^5.1.2",
-    "svelte": "^3.0.0"
+    "svelte": "^3.0.0",
+    "svelte-preprocess": "^4.7.3"
   },
   "dependencies": {
     "@zerodevx/svelte-toast": "^0.1.4",
     "axios": "^0.21.1",
     "fflate": "^0.6.7",
     "papaparse": "^5.3.0",
+    "sass": "^1.35.1",
     "sirv-cli": "^0.4.4",
     "snake-case": "^3.0.4",
     "svelte-frappe-charts": "^1.5.0",
diff --git a/public/global.css b/public/global.css
index 77c38c3..b76ee52 100644
--- a/public/global.css
+++ b/public/global.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
+
 ::-webkit-scrollbar {
     width: 5px;
     background-color: none;
diff --git a/rollup.config.js b/rollup.config.js
index fb4a225..9820c64 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -5,6 +5,7 @@ import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import css from 'rollup-plugin-css-only';
 import json from '@rollup/plugin-json';
+import preprocess from 'svelte-preprocess';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -39,6 +40,7 @@ export default {
     },
     plugins: [
         svelte({
+            preprocess: preprocess(),
             compilerOptions: {
                 // enable run-time checks when not in production
                 dev: !production
diff --git a/src/App.svelte b/src/App.svelte
index bd4a42b..81077e8 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,9 @@
 <script>
 	import { loaded } from './app/store';
 
+	import Header from './components/Header.svelte';
+	import Footer from './components/Footer.svelte';
+	
 	import Home from './views/Home.svelte';
 	import Loader from './views/Loader.svelte';
 
@@ -23,17 +26,22 @@
 		styleContent={{ 'background-color': '#18191c', color: 'white' }}
 		closeButton={false}
 	>
-		{#if $loaded}
-			<Home />
-		{:else}
-			<Loader />
-		{/if}
+		<Header />
+		<div>
+			{#if $loaded}
+				<Home />
+			{:else}
+				<Loader />
+			{/if}
+		</div>
+		<Footer />
 	</Modal>
 </main>
 
 <style>
 	.app {
-		width: 100vw;
-		height: 100vh;
+		min-height: 100vh;
+		display: grid;
+		grid-template-rows: 1fr auto;
 	}
 </style>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
new file mode 100644
index 0000000..e7e6e56
--- /dev/null
+++ b/src/components/Footer.svelte
@@ -0,0 +1,21 @@
+<template>
+	<footer>
+		<p>Made with ❤️ by <a href="https://twitter.com/Androz2091">Androz2091</a>. DDPE is <a href="https://github.com/Androz2091/discord-data-package-explorer">open source</a>!</p>
+	</footer>
+</template>
+
+<style>
+    footer {
+        grid-row-start: 2;
+        grid-row-end: 3;
+        background-color: var(--third-background-color);
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        margin-top: 2rem;
+    }
+
+    footer p {
+        margin: 0;
+        margin-left: 1rem;
+    }
+</style>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
new file mode 100644
index 0000000..bb930b1
--- /dev/null
+++ b/src/components/Header.svelte
@@ -0,0 +1,36 @@
+<template>
+    <div class="app-header">
+        <div class="app-header-container">
+            <div class="app-header-icon tag"><a href="/">#</a></div>
+            <h1 on:click="{() => window.location.href = '/'}">Discord Data Package Explorer</h1>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    .app-header {
+        width: 100%;
+        position: fixed;
+        background-color: var(--secondary-background-color);
+    }
+    .app-header-container {
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        h1 {
+            font-size: 1.5rem;
+            font-weight: 800;
+            cursor: pointer;
+        }
+    }
+    .app-header-icon {
+        text-align: center;
+
+        a {
+            color: white !important;
+            text-decoration: none;
+        }
+    }
+</style>
diff --git a/src/main.css b/src/main.css
index 5277722..cf900b5 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,8 +1,53 @@
+:root {
+    --main-color: #5865F2;
+    --secondary-color: #7289da;
+    --secondary-color-r: 114;
+    --secondary-color-g: 137;
+    --secondary-color-b: 218;
+    --background-color: rgb(40, 42, 46);
+    --secondary-background-color: rgb(45, 47, 51);
+    --accent-background-color: rgb(37, 38, 41);
+    --third-background-color: rgb(32, 34, 37);
+    --box-background-color: rgb(48, 50, 54);
+}
+
+html {
+    height: 100%;
+    background-color: var(--background-color);
+}
+
 body {
-    overflow-x: hidden;
-    background-color: #373c42;
+    min-height: 100vh;
+    padding: 0;
     margin: 0;
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    color: white;
+    font-weight: 400;
+    overflow-x: hidden;
+	font-family: 'Rubik', sans-serif;
+}
+
+.tag {
+    text-align: center;
+    background-color: var(--main-color);
+    width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    margin-right: 0.6rem;
+    font-size: 1.3rem;
+    font-weight: 600;
+    border-radius: 0.3rem;
+    border: 0.1rem solid var(--accent-background-color);
+    transform: rotate(-4deg);
+}
+
+a {
+    color: var(--secondary-color) !important;
+    font-weight: bolder;
+    text-decoration: none;
+}
+
+path {
+    fill: var(--secondary-color);
 }
 
 .tooltip {
@@ -12,7 +57,3 @@ body {
 .text-discord {
     color: #7289DA;
 }
-
-a {
-    color: #7289DA;
-}
diff --git a/src/views/Loader.svelte b/src/views/Loader.svelte
index 6e074eb..09c1b25 100644
--- a/src/views/Loader.svelte
+++ b/src/views/Loader.svelte
@@ -1,36 +1,22 @@
 <script>
-    import { Unzip, AsyncUnzipInflate } from 'fflate';
+	import { Unzip, AsyncUnzipInflate } from 'fflate';
     import { getContext } from 'svelte';
-
     import { loaded, loadTask, loadEstimatedTime, data } from '../app/store';
     import { extractData } from '../app/extractor';
-    
-    import Modal from '../components/Modal.svelte';
-
-    const { open } = getContext('simple-modal');
-    
-    const showModal = (message) => {
-        open(Modal, { message });
-    };
 
     let loading = false;
     let error = false;
-
     async function handleFile (file) {
         loading = true;
-
         const uz = new Unzip();
         uz.register(AsyncUnzipInflate);
-
         const files = [];
         uz.onfile = (f) => files.push(f);
-
         if (!file.stream) {
             loading = false;
             error = 'This browser is not supported. Try using Google Chrome instead.';
             return;
         }
-
         const reader = file.stream().getReader();
         while (true) {
             const { done, value } = await reader.read();
@@ -42,7 +28,6 @@
                 uz.push(value.subarray(i, i + 65536));
             }
         }
-
         /**
          * If the package is valid and have
          * all the required files files.
@@ -54,16 +39,13 @@
                 'messages/index.json',
                 'servers/index.json'
             ];
-
             for (const requiredFile of requiredFiles) {
                 if (! files.some((file) => file.name === requiredFile)) {
                     return false;
                 }
             }
-
             return true;
         })();
-
         if (!validPackage) {
             error = 'Your package seems to be corrupted. Click or drop your package file here to retry';
             loading = false;
@@ -87,22 +69,18 @@
             }
         });
     }
-
     function handleDragOver (event) {
         event.preventDefault();
     }
-
     /** @see https://developer.mozilla.org/en-US/docs/Web/API/Document/drop_event */
     function handleDrop (event) {
         event.preventDefault();
-
         if (event.dataTransfer.items[0].getAsFile() !== null) {
             handleFile(event.dataTransfer.items[0].getAsFile());
         } else {
             error = 'Error trying to handle the dropped file. Try clicking instead.';
         }
     }
-
     function filePopup (event) {
         if (event.target.classList.value.includes('help') || loading) return;
         const input = document.createElement('input');
@@ -112,47 +90,94 @@
         input.addEventListener('error', () => error = true);
         input.click();
     }
-
-    function helpPopup () {
-        showModal(`
-            <h3>About DDPE</h3>
-            <p>Data privacy is important. DDPE is an <a href="https://github.com/Androz2091/discord-data-package-explorer" target="_blank">open source</a> website. No data is sent to any server. You can donate <a href="https://github.com/sponsors/Androz2091" target="_blank">here</a> ❤️</p>
-        `);
-    }
-
 </script>
-
-<div class="loader" on:click="{filePopup}" style="cursor: { loading ? '' : 'pointer' }" on:drop="{handleDrop}" on:dragover="{handleDragOver}">
-    {#if loading}
-        <div>
-            {$loadTask || "Loading your package file..."}
-            {#if $loadEstimatedTime}
-                <small style="display: block; margin-top: 4px;">{$loadEstimatedTime}</small>
-            {/if}
-        </div>
-    {:else if error}
-        <p class="loader-error">{@html error}</p>
-    {:else}
-        <div>
-            <div style="display: flex; align-items: center;">
-                <p>Click or drop your package file here</p>
-                <svg on:click="{helpPopup}" class="help" style="width: 25px; margin-left: 5px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    
+<template>
+    <div class="app-loader">
+        <div class="app-loader-boxes">
+            <p class="app-loader-description"><a href="https://ddpe.me">DDPE</a> is a site that generates stats from your Discord Data Package. It is your device that processes the data, nothing is sent to any server!</p>
+            <p>
+                <a class="app-loader-tuto" href="/get-data" target="_blank">
+                    <small class="app-loader-tag tag">1</small>
+                    Get my Discord JSON data 👆
+                    <br>
+                    <span>(click on this button)</span>
+                </a>
+            </p>
+            <div class="app-loader-upload" on:click="{filePopup}" style="cursor: { loading ? '' : 'pointer' }" on:drop="{handleDrop}" on:dragover="{handleDragOver}">
+                <small class="app-loader-tag tag">2</small>
+                <label for="upload">
+                    <svg width="59" height="49" viewBox="0 0 59 49" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-9d8e2fa4="" d="M29.5 0.652008C25.0436 0.652008 20.5671 2.36576 17.1679 5.81576C14.4136 8.61109 12.8123 12.1254 12.2894 15.7607C5.37305 16.6594 0.0200195 22.6337 0.0200195 29.892C0.0200195 37.7705 6.32733 44.172 14.09 44.172H21.46C21.5488 44.1733 21.6369 44.1566 21.7193 44.123C21.8017 44.0894 21.8767 44.0395 21.9399 43.9763C22.0032 43.913 22.0534 43.8376 22.0876 43.7545C22.1219 43.6713 22.1396 43.5821 22.1396 43.492C22.1396 43.4019 22.1219 43.3127 22.0876 43.2295C22.0534 43.1464 22.0032 43.071 21.9399 43.0077C21.8767 42.9445 21.8017 42.8946 21.7193 42.861C21.6369 42.8274 21.5488 42.8107 21.46 42.812H14.09C7.0516 42.812 1.36002 37.0355 1.36002 29.892C1.36002 23.1472 6.43112 17.6122 12.9175 17.0145C13.0706 17.001 13.2145 16.9345 13.325 16.8262C13.4355 16.7179 13.506 16.5743 13.5247 16.4195C13.928 12.8934 15.4639 9.47896 18.1309 6.77201C21.273 3.58315 25.383 2.01201 29.5 2.01201C33.617 2.01201 37.7052 3.58215 40.8481 6.77201C44.4813 10.4594 46.0212 15.486 45.4544 20.287C45.4425 20.3832 45.4509 20.4808 45.4792 20.5734C45.5075 20.666 45.555 20.7513 45.6184 20.8238C45.6818 20.8962 45.7598 20.954 45.8471 20.9934C45.9343 21.0328 46.0289 21.0528 46.1244 21.052H46.92C52.8705 21.052 57.64 25.8927 57.64 31.932C57.64 37.9713 52.8705 42.812 46.92 42.812H37.54C37.4512 42.8107 37.3631 42.8274 37.2807 42.861C37.1983 42.8946 37.1233 42.9445 37.0601 43.0077C36.9969 43.071 36.9467 43.1464 36.9124 43.2295C36.8781 43.3127 36.8605 43.4019 36.8605 43.492C36.8605 43.5821 36.8781 43.6713 36.9124 43.7545C36.9467 43.8376 36.9969 43.913 37.0601 43.9763C37.1233 44.0395 37.1983 44.0894 37.2807 44.123C37.3631 44.1566 37.4512 44.1733 37.54 44.172H46.92C53.5897 44.172 58.98 38.7012 58.98 31.932C58.98 25.1628 53.5897 19.692 46.92 19.692H46.7944C47.1723 14.7203 45.554 9.61428 41.8113 5.81576C38.4131 2.36678 33.9565 0.652008 29.5 0.652008ZM29.437 23.772C29.2789 23.7856 29.1417 23.8585 29.0393 23.942L21.6693 30.742C21.4092 30.9862 21.385 31.457 21.6277 31.7195C21.8699 31.982 22.3337 31.9878 22.5908 31.7406L28.83 25.9819V47.5718C28.83 47.9474 29.13 48.2518 29.5 48.2518C29.8701 48.2518 30.17 47.9474 30.17 47.5718V25.9819L36.4094 31.7406C36.6665 31.9879 37.1303 31.9821 37.3725 31.7195C37.6147 31.457 37.6062 31.0233 37.331 30.742L29.961 23.942C29.7746 23.8029 29.5957 23.7581 29.4375 23.772H29.437Z" fill-opacity="0.39"></path></svg>
+                    <span class="app-loader-upload-info">
+                        {#if error}
+                            <p style="color: red;">{@html error}</p>
+                        {:else if loading}
+                            {$loadTask || "Loading your package file..."}
+                            {#if $loadEstimatedTime}
+                                <small style="display: block; margin-top: 4px;">{$loadEstimatedTime}</small>
+                            {/if}
+                        {:else}
+                            Click <strong>here</strong> to select your Discord data
+                        {/if}
+                    </span>
+                </label>
             </div>
         </div>
-    {/if}
-</div>
-
-<style>
-    .loader {
-        color: white;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .loader-error {
-        text-align: center;
-        color: red;
+    </div>
+</template>
+
+<style lang="scss">
+    .app-loader {
+		padding-top: 3rem;
+		max-width: 768px;
+		margin: auto;
+	}
+	.app-loader-boxes {
+		padding: 0 30px;
+	}
+	.app-loader-description {
+        font-weight: 500;
+		margin: 3rem auto;
+	}
+	.app-loader-tuto {
+		position: relative;
+		padding: 1.25rem 0.75rem;
+		text-decoration: none;
+		text-align: center;
+		background-color: rgba(var(--secondary-color-r), var(--secondary-color-g), var(--secondary-color-b), .1);
+		display: block;
+		color: var(--main-color);
+		font-weight: 400;
+		border-radius: 0.3rem;
+	}
+	.app-loader-upload {
+		position: relative;
+		label {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding: 1.25rem 0;
+			margin: 2.5rem 0 0;
+			border: 0.18rem dashed var(--main-color);
+			border-radius: 0.3rem;
+			cursor: pointer;
+		}
+	}
+	.app-loader-upload-info {
+		padding: 1.25rem 0.62rem 0;
+		text-align: center;
+	}
+	.app-loader-tag {
+		position: absolute;
+		top: -10px;
+		left: -10px;
+		color: white;
+	}
+    @media (min-width: 1080px) {
+        .app-loader-description {
+            margin: auto;
+            margin-top: 5rem;
+            margin-bottom: 3rem;
+        }
     }
-</style>
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 8abd62b..db16f8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -102,6 +102,11 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-14.14.30.tgz"
   integrity sha512-gUWhy8s45fQp4PqqKecsnOkdW0kt1IaKjgOIR3HPokkzTmQj9ji2wWFID5THu1MKrtO+d4s2lVrlEhXUsPXSvg==
 
+"@types/pug@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2"
+  integrity sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz"
@@ -109,6 +114,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/sass@^1.16.0":
+  version "1.16.0"
+  resolved "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d"
+  integrity sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==
+  dependencies:
+    "@types/node" "*"
+
 "@zerodevx/svelte-toast@^0.1.4":
   version "0.1.4"
   resolved "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.1.4.tgz#fc69930685dd9cdf0d82132fd5f5da7aa35908d3"
@@ -176,6 +188,14 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
@@ -257,6 +277,21 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.2"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chokidar@^3.3.0:
   version "3.5.1"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz"
@@ -337,6 +372,11 @@ deep-is@^0.1.3:
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+detect-indent@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
+  integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
+
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz"
@@ -562,7 +602,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@~2.3.1:
+fsevents@~2.3.1, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -589,6 +629,13 @@ glob-parent@^5.0.0, glob-parent@~5.1.0:
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob@^7.1.2, glob@^7.1.3:
   version "7.1.6"
   resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
@@ -814,6 +861,11 @@ mime@^2.3.1:
   resolved "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz"
   integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
 
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
 minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz"
@@ -934,6 +986,13 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 regexpp@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz"
@@ -1030,6 +1089,13 @@ safe-buffer@^5.1.0:
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
+sass@^1.35.1:
+  version "1.35.1"
+  resolved "https://registry.npmjs.org/sass/-/sass-1.35.1.tgz#90ecf774dfe68f07b6193077e3b42fb154b9e1cd"
+  integrity sha512-oCisuQJstxMcacOPmxLNiLlj4cUyN2+8xJnG7VanRoh2GOLr9RqkvI4AxA4a6LHVg/rsu+PmxXeGhrdSF9jCiQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+
 semver@^7.2.1:
   version "7.3.4"
   resolved "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz"
@@ -1133,6 +1199,13 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
@@ -1167,6 +1240,16 @@ svelte-frappe-charts@^1.5.0:
     frappe-charts "^1.5.6"
     svelte "^3.32.2"
 
+svelte-preprocess@^4.7.3:
+  version "4.7.3"
+  resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.7.3.tgz#454fa059c2400b15e7a3caeca18993cff9df0e96"
+  integrity sha512-Zx1/xLeGOIBlZMGPRCaXtlMe4ZA0faato5Dc3CosEqwu75MIEPuOstdkH6cy+RYTUYynoxzNaDxkPX4DbrPwRA==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    strip-indent "^3.0.0"
+
 svelte-simple-modal@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/svelte-simple-modal/-/svelte-simple-modal-0.8.1.tgz#cc48119e83a8ad728d2c39eb3231b08e8d14e19c"