From 6fa9efcc74a9c36f9e2178ee5427eafb8d470d99 Mon Sep 17 00:00:00 2001
From: Frankie B <git@diskfloppy.me>
Date: Mon, 22 Jan 2024 01:16:42 +0000
Subject: Get scheme cookie server-side instead of client-side on page load

---
 app/Http/Middleware/EncryptCookies.php    |  2 +-
 public/js/schemeSwap.js                   | 53 +++++++++++++++++++++++
 public/js/themeSwap.js                    | 72 -------------------------------
 resources/views/includes/head.blade.php   |  7 ++-
 resources/views/layouts/default.blade.php |  2 +-
 5 files changed, 60 insertions(+), 76 deletions(-)
 create mode 100644 public/js/schemeSwap.js
 delete mode 100644 public/js/themeSwap.js

diff --git a/app/Http/Middleware/EncryptCookies.php b/app/Http/Middleware/EncryptCookies.php
index 867695b..5ee1433 100644
--- a/app/Http/Middleware/EncryptCookies.php
+++ b/app/Http/Middleware/EncryptCookies.php
@@ -12,6 +12,6 @@ class EncryptCookies extends Middleware
      * @var array<int, string>
      */
     protected $except = [
-        //
+        "colorscheme"
     ];
 }
diff --git a/public/js/schemeSwap.js b/public/js/schemeSwap.js
new file mode 100644
index 0000000..de5a6b2
--- /dev/null
+++ b/public/js/schemeSwap.js
@@ -0,0 +1,53 @@
+/**
+ * Retrieves a cookies value
+ * @param {string} cname Cookie name
+ * @returns {string}     Cookie value
+ */
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for(let i = 0; i <ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
+/**
+ * Sets/creates a cookie
+ * @param {string} cname  Cookie name
+ * @param {string} cvalue Cookie value
+ * @param {number} exdays Cookie lifespan (days)
+ */
+function setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    let expires = "expires="+ d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+/**
+ * Checks if a cookie exists
+ * @param {string} cname Cookie name
+ * @returns {boolean}    If cookie exists or not
+ */
+function cookieExists(cname) {
+    const cvalue = getCookie(cname);
+    return cvalue !== "";
+}
+
+/**
+ * Swaps the colorscheme
+ * @param {string} scheme Color scheme ID
+ */
+function swapScheme(scheme) {
+    setCookie("colorscheme", scheme, 90);
+    document.getElementById("css-colorscheme").href = `/css/colorschemes/${scheme}.css`;
+    console.log(`Set colorscheme to ${getCookie("colorscheme")}`)
+}
diff --git a/public/js/themeSwap.js b/public/js/themeSwap.js
deleted file mode 100644
index 18faaee..0000000
--- a/public/js/themeSwap.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Retrieves a cookie's value
- * @param {string} cname Cookie name
- * @returns {string}     Cookie value
- */
-function getCookie(cname) {
-    let name = cname + "=";
-    let decodedCookie = decodeURIComponent(document.cookie);
-    let ca = decodedCookie.split(';');
-    for(let i = 0; i <ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) == ' ') {
-            c = c.substring(1);
-        }
-        if (c.indexOf(name) == 0) {
-            return c.substring(name.length, c.length);
-        }
-    }
-    return "";
-}
-
-/**
- * Sets/creates a cookie
- * @param {string} cname  Cookie name
- * @param {string} cvalue Cookie value
- * @param {number} exdays Cookie lifespan (days)
- */
-function setCookie(cname, cvalue, exdays) {
-    const d = new Date();
-    d.setTime(d.getTime() + (exdays*24*60*60*1000));
-    let expires = "expires="+ d.toUTCString();
-    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
-}
-
-/**
- * Checks if a cookie exists
- * @param {string} cname Cookie name
- * @returns {boolean}    If cookie exists or not
- */
-function cookieExists(cname) {
-    const cvalue = getCookie(cname);
-    return cvalue !== "";
-}
-
-/**
- * Swaps the colorscheme
- * @param option
- */
-function swapScheme(scheme) {
-    setCookie("colorscheme", scheme, 90);
-    document.getElementById("css-colorscheme").href = `/css/colorschemes/${scheme}.css`;
-    console.log(`Set colorscheme to ${getCookie("colorscheme")}`)
-}
-
-function setDefaultScheme() {
-    if (!cookieExists("colorscheme")) {
-        setCookie("colorscheme", "catppuccin-macchiato", 90);
-        console.debug("Set default colorscheme");
-    } else {
-        const scheme = getCookie("colorscheme");
-        const schemeselector = document.getElementById("scheme-selector");
-        if (scheme && schemeselector) {
-            for (let option of schemeselector.options) {
-                if (option.value == scheme) {
-                    option.selected = true;
-                    break;
-                }
-            }
-        }
-        swapScheme(scheme);
-    }
-}
diff --git a/resources/views/includes/head.blade.php b/resources/views/includes/head.blade.php
index 3d51672..d6d1280 100644
--- a/resources/views/includes/head.blade.php
+++ b/resources/views/includes/head.blade.php
@@ -1,13 +1,16 @@
+@php // Get colorscheme from cookie and apply immediately
+    $colorscheme = request()->cookie('colorscheme', 'catppuccin-macchiato');
+@endphp
     <!-- Global -->
     <meta charset="utf-8">
     <meta property="og:type" content="website">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#333333">
-    <link rel="stylesheet" href="/css/colorschemes/catppuccin-macchiato.css" id="css-colorscheme"/>
+    <link rel="stylesheet" href="{{ asset("/css/colorschemes/{$colorscheme}.css") }}" id="css-colorscheme"/>
     <link rel="stylesheet" href="/css/master.css"/>
     <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
     <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
-    <script src="/js/themeSwap.js"></script>
+    <script src="/js/schemeSwap.js"></script>
     {!! (intval(date('n')) == 12) ? '<script src="/js/christmas/snow.js"></script>' : '' !!}
 
     <!-- Page-specific -->
diff --git a/resources/views/layouts/default.blade.php b/resources/views/layouts/default.blade.php
index 144c32b..996d895 100644
--- a/resources/views/layouts/default.blade.php
+++ b/resources/views/layouts/default.blade.php
@@ -4,7 +4,7 @@
     @include('includes.head')
 </head>
 
-<body onload="setDefaultScheme()">
+<body>
 <div class="page">
     <div id="header" class="header">
         @include('includes.header')
-- 
cgit v1.2.3-54-g00ecf