From 18c458d91ca5e7187ffb3615fca8970fc6e4ca65 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Mon, 6 Jun 2022 15:48:53 +0200
Subject: feat: More work on portal

---
 apps/frontpage/package.json                    |   4 +-
 apps/frontpage/pnpm-lock.yaml                  | 122 +++++++++++++++++++++++
 apps/frontpage/src/app.html                    |   2 +
 apps/frontpage/src/hooks.ts                    |   7 ++
 apps/frontpage/src/routes/__layout-docs.svelte |   7 ++
 apps/frontpage/src/routes/__layout.svelte      |   5 +
 apps/frontpage/src/routes/app.scss             |   1 +
 apps/frontpage/static/pre.css                  | 128 +++++++++++++++++++++++++
 apps/frontpage/svelte.config.js                |   2 +
 9 files changed, 277 insertions(+), 1 deletion(-)
 create mode 100644 apps/frontpage/src/hooks.ts
 create mode 100644 apps/frontpage/static/pre.css

(limited to 'apps/frontpage')

diff --git a/apps/frontpage/package.json b/apps/frontpage/package.json
index cde11de..6943b38 100644
--- a/apps/frontpage/package.json
+++ b/apps/frontpage/package.json
@@ -15,7 +15,9 @@
 		"@sveltejs/adapter-static": "1.0.0-next.34",
 		"@sveltejs/kit": "next",
 		"sass": "^1.52.2",
-		"svelte": "^3.44.0"
+		"svelte": "^3.44.0",
+		"svelte-preprocess": "^4.10.7",
+		"typescript": "^4.7.3"
 	},
 	"type": "module"
 }
\ No newline at end of file
diff --git a/apps/frontpage/pnpm-lock.yaml b/apps/frontpage/pnpm-lock.yaml
index 5b1b562..a80546e 100644
--- a/apps/frontpage/pnpm-lock.yaml
+++ b/apps/frontpage/pnpm-lock.yaml
@@ -7,6 +7,8 @@ specifiers:
   '@sveltejs/kit': next
   sass: ^1.52.2
   svelte: ^3.44.0
+  svelte-preprocess: ^4.10.7
+  typescript: ^4.7.3
 
 devDependencies:
   '@playwright/test': 1.22.2
@@ -15,6 +17,8 @@ devDependencies:
   '@sveltejs/kit': 1.0.0-next.348_sass@1.52.2+svelte@3.48.0
   sass: 1.52.2
   svelte: 3.48.0
+  svelte-preprocess: 4.10.7_qkexsrbgfwouorfsttztq6wl2m
+  typescript: 4.7.3
 
 packages:
 
@@ -147,6 +151,16 @@ packages:
     resolution: {integrity: sha512-UXdBxNGqTMtm7hCwh9HtncFVLrXoqA3oJW30j6XWp5BH/wu3mVeaxo7cq5benFdBw34HB3XDT2TRPI7rXZ+mDg==}
     dev: true
 
+  /@types/pug/2.0.6:
+    resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
+    dev: true
+
+  /@types/sass/1.43.1:
+    resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
+    dependencies:
+      '@types/node': 17.0.40
+    dev: true
+
   /@vercel/nft/0.19.1:
     resolution: {integrity: sha512-klR5oN7S3WJsZz0r6Xsq7o8YlFEyU3/00VmlpZzIPVFzKfbcEjXo/sVR5lQBUqNKuOzhcbxaFtzW9aOyHjmPYA==}
     hasBin: true
@@ -256,6 +270,10 @@ packages:
       fill-range: 7.0.1
     dev: true
 
+  /buffer-crc32/0.2.13:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+    dev: true
+
   /chokidar/3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -339,6 +357,11 @@ packages:
     resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
     dev: true
 
+  /detect-indent/6.1.0:
+    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
+    engines: {node: '>=8'}
+    dev: true
+
   /detect-libc/1.0.3:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
     engines: {node: '>=0.10'}
@@ -354,6 +377,10 @@ packages:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
 
+  /es6-promise/3.3.1:
+    resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
+    dev: true
+
   /esbuild-android-64/0.14.42:
     resolution: {integrity: sha512-P4Y36VUtRhK/zivqGVMqhptSrFILAGlYp0Z8r9UQqHJ3iWztRCNWnlBzD9HRx0DbueXikzOiwyOri+ojAFfW6A==}
     engines: {node: '>=12'}
@@ -779,6 +806,12 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /magic-string/0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
   /magic-string/0.26.2:
     resolution: {integrity: sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==}
     engines: {node: '>=12'}
@@ -801,6 +834,11 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /min-indent/1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+    dev: true
+
   /minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -1155,6 +1193,15 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
+  /sander/0.5.1:
+    resolution: {integrity: sha1-dB4kXiMfB8r7b98PEzrfohalAq0=}
+    dependencies:
+      es6-promise: 3.3.1
+      graceful-fs: 4.2.10
+      mkdirp: 0.5.6
+      rimraf: 2.7.1
+    dev: true
+
   /sass/1.52.2:
     resolution: {integrity: sha512-mfHB2VSeFS7sZlPv9YohB9GB7yWIgQNTGniQwfQ04EoQN0wsQEv7SwpCwy/x48Af+Z3vDeFXz+iuXM3HK/phZQ==}
     engines: {node: '>=12.0.0'}
@@ -1199,6 +1246,16 @@ packages:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true
 
+  /sorcery/0.10.0:
+    resolution: {integrity: sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=}
+    hasBin: true
+    dependencies:
+      buffer-crc32: 0.2.13
+      minimist: 1.2.6
+      sander: 0.5.1
+      sourcemap-codec: 1.4.8
+    dev: true
+
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -1252,6 +1309,13 @@ packages:
       ansi-regex: 5.0.1
     dev: true
 
+  /strip-indent/3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      min-indent: 1.0.1
+    dev: true
+
   /strip-json-comments/2.0.1:
     resolution: {integrity: sha1-PFMZQukIwml8DsNEhYwobHygpgo=}
     engines: {node: '>=0.10.0'}
@@ -1271,6 +1335,58 @@ packages:
       svelte: 3.48.0
     dev: true
 
+  /svelte-preprocess/4.10.7_qkexsrbgfwouorfsttztq6wl2m:
+    resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==}
+    engines: {node: '>= 9.11.2'}
+    requiresBuild: true
+    peerDependencies:
+      '@babel/core': ^7.10.2
+      coffeescript: ^2.5.1
+      less: ^3.11.3 || ^4.0.0
+      node-sass: '*'
+      postcss: ^7 || ^8
+      postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0
+      pug: ^3.0.0
+      sass: ^1.26.8
+      stylus: ^0.55.0
+      sugarss: ^2.0.0
+      svelte: ^3.23.0
+      typescript: ^3.9.5 || ^4.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      coffeescript:
+        optional: true
+      less:
+        optional: true
+      node-sass:
+        optional: true
+      postcss:
+        optional: true
+      postcss-load-config:
+        optional: true
+      pug:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@types/pug': 2.0.6
+      '@types/sass': 1.43.1
+      detect-indent: 6.1.0
+      magic-string: 0.25.9
+      sass: 1.52.2
+      sorcery: 0.10.0
+      strip-indent: 3.0.0
+      svelte: 3.48.0
+      typescript: 4.7.3
+    dev: true
+
   /svelte/3.48.0:
     resolution: {integrity: sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==}
     engines: {node: '>= 8'}
@@ -1319,6 +1435,12 @@ packages:
     resolution: {integrity: sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=}
     dev: true
 
+  /typescript/4.7.3:
+    resolution: {integrity: sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: true
+
   /util-deprecate/1.0.2:
     resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=}
     dev: true
diff --git a/apps/frontpage/src/app.html b/apps/frontpage/src/app.html
index 5893110..e46fbe3 100644
--- a/apps/frontpage/src/app.html
+++ b/apps/frontpage/src/app.html
@@ -4,6 +4,8 @@
   <meta charset="utf-8"/>
   <link rel="icon"
         href="%sveltekit.assets%/favicon.png"/>
+  <link rel="stylesheet"
+        href="%sveltekit.assets%/pre.css"/>
   <script>
     const value = `; ${document.cookie}`;
     const parts = value.split(`; go_theme=`);
diff --git a/apps/frontpage/src/hooks.ts b/apps/frontpage/src/hooks.ts
new file mode 100644
index 0000000..ca80d40
--- /dev/null
+++ b/apps/frontpage/src/hooks.ts
@@ -0,0 +1,7 @@
+/** @type {import("@sveltejs/kit").Handle} */
+export async function handle({event, resolve}) {
+  const response = await resolve(event, {
+    ssr: false
+  });
+  return response;
+}
\ No newline at end of file
diff --git a/apps/frontpage/src/routes/__layout-docs.svelte b/apps/frontpage/src/routes/__layout-docs.svelte
index 6f06f52..d0a17ef 100644
--- a/apps/frontpage/src/routes/__layout-docs.svelte
+++ b/apps/frontpage/src/routes/__layout-docs.svelte
@@ -1,6 +1,13 @@
+<script>
+  import ThemeSwitcher from "$shared/components/theme-switcher.svelte";
+</script>
 <main class="padding-md">
   <nav>
     <a href="/">Go back</a>
   </nav>
   <slot></slot>
+  <div class="position-fixed right-0 top-0 margin-md z-index-2">
+    <ThemeSwitcher/>
+  </div>
+
 </main>
diff --git a/apps/frontpage/src/routes/__layout.svelte b/apps/frontpage/src/routes/__layout.svelte
index f1a7eaa..ea37fe7 100644
--- a/apps/frontpage/src/routes/__layout.svelte
+++ b/apps/frontpage/src/routes/__layout.svelte
@@ -1,5 +1,6 @@
 <script>
   import {portal_base} from "$shared/lib/configuration";
+  import ThemeSwitcher from "$shared/components/theme-switcher.svelte";
   import "./app.scss";
   import {afterNavigate} from "$app/navigation";
   import {page} from "$app/stores";
@@ -77,4 +78,8 @@
   <main class="position-relative padding-sm z-index-1 flex-grow">
     <slot></slot>
   </main>
+
+  <div class="position-fixed right-0 top-0 margin-md z-index-2">
+    <ThemeSwitcher/>
+  </div>
 </div>
diff --git a/apps/frontpage/src/routes/app.scss b/apps/frontpage/src/routes/app.scss
index 73a46ba..6ba6e97 100644
--- a/apps/frontpage/src/routes/app.scss
+++ b/apps/frontpage/src/routes/app.scss
@@ -5,3 +5,4 @@
 @use '../../web-shared/src/styles/custom-style/typography';
 @use '../../web-shared/src/styles/custom-style/util';
 @use '../../web-shared/src/styles/components/responsive-sidebar';
+@use '../../web-shared/src/styles/components/light-dark-switch';
diff --git a/apps/frontpage/static/pre.css b/apps/frontpage/static/pre.css
new file mode 100644
index 0000000..9c9446e
--- /dev/null
+++ b/apps/frontpage/static/pre.css
@@ -0,0 +1,128 @@
+:root {
+    --loader-primary: hsl(250, 84%, 54%);
+    --loader-accent: hsl(342, 89%, 48%);
+    --loader-contrast: hsl(180, 1%, 84%);
+    --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+[data-theme="dark"] :root {
+    --loader-primary: hsl(250, 93%, 65%);
+    --loader-accent: hsl(342, 92%, 54%);
+    --loader-contrast: hsl(208, 12%, 24%);
+    --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+[data-theme="dark"] {
+    background-color: hsl(203, 24%, 13%);
+}
+
+.fill-loader {
+    position: relative;
+    overflow: hidden;
+    display: inline-block;
+    margin: 3rem;
+}
+
+.fill-loader__fill {
+    position: absolute;
+}
+
+@supports (-webkit-animation-name: this) or (animation-name: this) {
+    .fill-loader__label {
+        position: absolute;
+        clip: rect(1px, 1px, 1px, 1px);
+        -webkit-clip-path: inset(50%);
+        clip-path: inset(50%);
+    }
+}
+
+@supports (-webkit-animation-name: this) or (animation-name: this) {
+    .fill-loader--v4 {
+        width: 90%;
+        max-width: 300px;
+    }
+
+    .fill-loader--v4 .fill-loader__base {
+        height: 4px;
+        background-color: var(--loader-contrast);
+    }
+
+    .fill-loader--v4 .fill-loader__fill {
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        background-color: var(--loader-primary);
+        -webkit-animation: fill-loader-4 1.6s infinite var(--loader-easing);
+        animation: fill-loader-4 1.6s infinite var(--loader-easing);
+        will-change: left, right;
+    }
+}
+
+@-webkit-keyframes fill-loader-4 {
+    0% {
+        left: 0;
+        right: 100%;
+        background-color: var(--loader-primary);
+    }
+
+    10%,
+    60% {
+        left: 0;
+    }
+
+    40%,
+    90% {
+        right: 0;
+    }
+
+    50% {
+        left: 100%;
+        background-color: var(--loader-primary);
+    }
+
+    51% {
+        left: 0;
+        right: 100%;
+        background-color: var(--loader-accent);
+    }
+
+    100% {
+        left: 100%;
+        background-color: var(--loader-accent);
+    }
+}
+
+@keyframes fill-loader-4 {
+    0% {
+        left: 0;
+        right: 100%;
+        background-color: var(--loader-primary);
+    }
+
+    10%,
+    60% {
+        left: 0;
+    }
+
+    40%,
+    90% {
+        right: 0;
+    }
+
+    50% {
+        left: 100%;
+        background-color: var(--loader-primary);
+    }
+
+    51% {
+        left: 0;
+        right: 100%;
+        background-color: var(--loader-accent);
+    }
+
+    100% {
+        left: 100%;
+        background-color: var(--loader-accent);
+    }
+}
diff --git a/apps/frontpage/svelte.config.js b/apps/frontpage/svelte.config.js
index 60a9bcf..9646d6b 100644
--- a/apps/frontpage/svelte.config.js
+++ b/apps/frontpage/svelte.config.js
@@ -1,7 +1,9 @@
 import adapter from "@sveltejs/adapter-static";
+import preprocess from "svelte-preprocess"
 
 /** @type {import("@sveltejs/kit").Config} */
 const config = {
+  preprocess: preprocess(),
   kit: {
     prerender: {
       default: true,
-- 
cgit v1.3