refactor: Move shared preloaded js and css into web-shared

11 files changed, 152 insertions, 435 deletions

diff --git a/apps/frontpage/src/app.html b/apps/frontpage/src/app.html
index 1c46682..922aeec 100644
--- a/apps/frontpage/src/app.html
+++ b/apps/frontpage/src/app.html
@@ -4,151 +4,8 @@
   <meta charset="utf-8"/>
   <link rel="icon"
         href="%sveltekit.assets%/favicon.png"/>
-  <style>
-    :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);
-      }
-    }
-  </style>
-  <script>
-    const value = `; ${document.cookie}`;
-    const parts = value.split(`; go_theme=`);
-    let currentTheme = "system";
-    if (parts.length === 2) {
-      currentTheme = parts.pop().split(";").shift();
-    }
-    if (currentTheme === "light") {
-      document.querySelector("html").dataset.theme = "light";
-    } else if (currentTheme === "dark") {
-      document.querySelector("html").dataset.theme = "dark";
-    } else {
-      document.querySelector("html").dataset.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    }
-  </script>
+  <link rel="stylesheet" href="%sveltekit.assets%/preload.css">
+  <script src="%sveltekit.assets%/preload.js"></script>
   <meta name="viewport"
         content="width=device-width, initial-scale=1"/>
   %sveltekit.head%
diff --git a/apps/frontpage/static/preload.css b/apps/frontpage/static/preload.css
new file mode 120000
index 0000000..e248c5b
--- /dev/null
+++ b/apps/frontpage/static/preload.css
@@ -0,0 +1 @@
+/Users/ivarlovlie/i2r/greatoffice/apps/web-shared/src/assets/preload.css
\ No newline at end of file
diff --git a/apps/frontpage/static/preload.js b/apps/frontpage/static/preload.js
new file mode 120000
index 0000000..3fa1cc7
--- /dev/null
+++ b/apps/frontpage/static/preload.js
@@ -0,0 +1 @@
+/Users/ivarlovlie/i2r/greatoffice/apps/web-shared/src/assets/preload.js
\ No newline at end of file
diff --git a/apps/portal/src/_assets/preload.css b/apps/portal/src/_assets/preload.css
new file mode 120000
index 0000000..e248c5b
--- /dev/null
+++ b/apps/portal/src/_assets/preload.css
@@ -0,0 +1 @@
+/Users/ivarlovlie/i2r/greatoffice/apps/web-shared/src/assets/preload.css
\ No newline at end of file
diff --git a/apps/portal/src/_assets/preload.js b/apps/portal/src/_assets/preload.js
new file mode 120000
index 0000000..3fa1cc7
--- /dev/null
+++ b/apps/portal/src/_assets/preload.js
@@ -0,0 +1 @@
+/Users/ivarlovlie/i2r/greatoffice/apps/web-shared/src/assets/preload.js
\ No newline at end of file
diff --git a/apps/portal/src/index.html b/apps/portal/src/index.html
index c196872..2102205 100644
--- a/apps/portal/src/index.html
+++ b/apps/portal/src/index.html
@@ -25,151 +25,8 @@
           content="#da532c">
     <link rel="icon"
           href="./_assets/pwa/favicon.svg">
-    <script>
-		const value = `; ${document.cookie}`;
-		const parts = value.split(`; go_theme=`);
-		let currentTheme = "system";
-		if (parts.length === 2) {
-			currentTheme = parts.pop().split(";").shift();
-		}
-		if (currentTheme === "light") {
-			document.querySelector("html").dataset.theme = "light";
-		} else if (currentTheme === "dark") {
-			document.querySelector("html").dataset.theme = "dark";
-		} else {
-			document.querySelector("html").dataset.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-		}
-    </script>
-    <style>
-        :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);
-            }
-        }
-    </style>
+    <link rel="stylesheet" href="./_assets/preload.css">
+    <script src="./_assets/preload.js"></script>
     <title>Portal - Greatoffice</title>
 </head>
 
diff --git a/apps/projects/src/_assets/preload.css b/apps/projects/src/_assets/preload.css
new file mode 120000
index 0000000..e248c5b
--- /dev/null
+++ b/apps/projects/src/_assets/preload.css
@@ -0,0 +1 @@
+/Users/ivarlovlie/i2r/greatoffice/apps/web-shared/src/assets/preload.css
\ No newline at end of file
diff --git a/apps/projects/src/_assets/preload.js b/apps/projects/src/_assets/preload.js
new file mode 120000
index 0000000..3fa1cc7
--- /dev/null
+++ b/apps/projects/src/_assets/preload.js
@@ -0,0 +1 @@
+/Users/ivarlovlie/i2r/greatoffice/apps/web-shared/src/assets/preload.js
\ No newline at end of file
diff --git a/apps/projects/src/index.html b/apps/projects/src/index.html
index f3d1e0b..80eab63 100644
--- a/apps/projects/src/index.html
+++ b/apps/projects/src/index.html
@@ -25,151 +25,8 @@
           content="#da532c">
     <link rel="icon"
           href="./_assets/pwa/favicon.svg">
-    <script>
-		const value = `; ${document.cookie}`;
-		const parts = value.split(`; go_theme=`);
-		let currentTheme = "system";
-		if (parts.length === 2) {
-			currentTheme = parts.pop().split(";").shift();
-		}
-		if (currentTheme === "light") {
-			document.querySelector("html").dataset.theme = "light";
-		} else if (currentTheme === "dark") {
-			document.querySelector("html").dataset.theme = "dark";
-		} else {
-			document.querySelector("html").dataset.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-		}
-    </script>
-    <style>
-        :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);
-            }
-        }
-    </style>
+    <link rel="stylesheet" href="./_assets/preload.css">
+    <script src="./_assets/preload.js"></script>
     <title>Projects - Greatoffice</title>
 </head>
 
diff --git a/apps/web-shared/src/assets/preload.css b/apps/web-shared/src/assets/preload.css
new file mode 100644
index 0000000..3ee8bda
--- /dev/null
+++ b/apps/web-shared/src/assets/preload.css
@@ -0,0 +1,127 @@
+:root {
+    --loader-primary: hsl(210, 92%, 44%);
+    --loader-accent: hsl(350, 47%, 42%);
+    --loader-contrast: hsl(230, 2%, 48%);
+    --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+[data-theme="dark"] :root {
+    --loader-primary: hsl(250, 100%, 69%);
+    --loader-accent: hsl(342, 92%, 47%);
+    --loader-contrast: hsl(250, 100%, 69%);
+    --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+[data-theme="dark"] {
+    background-color: hsl(232, 11%, 15%);
+}
+
+.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);
+    }
+}
\ No newline at end of file
diff --git a/apps/web-shared/src/assets/preload.js b/apps/web-shared/src/assets/preload.js
new file mode 100644
index 0000000..379902f
--- /dev/null
+++ b/apps/web-shared/src/assets/preload.js
@@ -0,0 +1,13 @@
+const value = `; ${document.cookie}`;
+const parts = value.split(`; go_theme=`);
+let currentTheme = "system";
+if (parts.length === 2) {
+    currentTheme = parts.pop().split(";").shift();
+}
+if (currentTheme === "light") {
+    document.querySelector("html").dataset.theme = "light";
+} else if (currentTheme === "dark") {
+    document.querySelector("html").dataset.theme = "dark";
+} else {
+    document.querySelector("html").dataset.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
\ No newline at end of file