fwoppydwisk/diskfloppy.me
fwoppydwisk/diskfloppy.me
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Activity Actions

Get scheme cookie server-side instead of client-side on page load

Browse source
This commit is contained in:
floppydiskette 2024-01-22 01:16:42 +00:00
parent 75fed3cbc1
commit 6fa9efcc74
Signed by: fwoppydwisk
SSH key fingerprint: SHA256:Hqn452XQ1ETzUt/FthJu6+OFkS4NBxCv5VQSEvuk7CE
4 changed files with 9 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Http/Middleware/EncryptCookies.php
View file

@ -12,6 +12,6 @@ class EncryptCookies extends Middleware
* @var array<int, string> * @var array<int, string>
*/ */
protected $except = [ protected $except = [
// "colorscheme"
]; ];
} }

23
public/js/themeSwap.js → public/js/schemeSwap.js
View file

@ -1,5 +1,5 @@
/** /**
* Retrieves a cookie's value * Retrieves a cookies value
* @param {string} cname Cookie name * @param {string} cname Cookie name
* @returns {string} Cookie value * @returns {string} Cookie value
*/ */
@ -44,29 +44,10 @@ function cookieExists(cname) {
/** /**
* Swaps the colorscheme * Swaps the colorscheme
* @param option * @param {string} scheme Color scheme ID
*/ */
function swapScheme(scheme) { function swapScheme(scheme) {
setCookie("colorscheme", scheme, 90); setCookie("colorscheme", scheme, 90);
document.getElementById("css-colorscheme").href = `/css/colorschemes/${scheme}.css`; document.getElementById("css-colorscheme").href = `/css/colorschemes/${scheme}.css`;
console.log(`Set colorscheme to ${getCookie("colorscheme")}`) 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);
}
}

7
resources/views/includes/head.blade.php
View file

@ -1,13 +1,16 @@
@php // Get colorscheme from cookie and apply immediately
$colorscheme = request()->cookie('colorscheme', 'catppuccin-macchiato');
@endphp
<!-- Global --> <!-- Global -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#333333"> <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="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-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/> <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>' : '' !!} {!! (intval(date('n')) == 12) ? '<script src="/js/christmas/snow.js"></script>' : '' !!}
<!-- Page-specific --> <!-- Page-specific -->

2
resources/views/layouts/default.blade.php
View file

@ -4,7 +4,7 @@
@include('includes.head') @include('includes.head')
</head> </head>
<body onload="setDefaultScheme()"> <body>
<div class="page"> <div class="page">
<div id="header" class="header"> <div id="header" class="header">
@include('includes.header') @include('includes.header')