mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 17:48:30 -04:00
clean up middleware matcher
This commit is contained in:
parent
6cbe1ee814
commit
64caf0f88b
SSH Key Fingerprint:
SHA256:nCkvAjYA6XaSPUqc4TfbBQTpzr8Xj7ritg/sGInCdkc
@ -68,8 +68,8 @@ export const middleware = (request: NextRequest) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const config: MiddlewareConfig = {
|
export const config: MiddlewareConfig = {
|
||||||
// save compute time by skipping middleware for static and metadata files
|
// save compute time by skipping middleware for next.js internals and static files
|
||||||
matcher: [
|
matcher: [
|
||||||
"/((?!_next/static|_next/image|_vercel|api|static|\\.well-known|favicon.ico|icon.png|apple-icon.png|sitemap.xml|robots.txt|manifest.webmanifest|feed.xml|feed.atom).*)",
|
"/((?!_next/|_vercel/|api/|\\.well-known/|[^?]*\\.(?:png|jpe?g|gif|webp|avif|svg|ico|webm|mp4|ttf|woff2?|xml|atom|txt|pdf|webmanifest)).*)",
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -32,13 +32,12 @@ I've written a simple implementation below, which...
|
|||||||
...meaning that any CSS selectors beginning with `body.dark` or `body.light` will only apply when the respective mode is active. A good place to start is by separating any color rules — your background, text, links, etc. — into a different section of your CSS. Using [SASS or SCSS](https://sass-lang.com/) makes this a whole lot [easier with nesting](https://sass-lang.com/guide#topic-3) but is not required; this was written with a [KISS](https://www.youtube-nocookie.com/embed/O58A7MJfOwU?hl=en&fs=1&showinfo=1&rel=0&iv_load_policy=3) mentality.
|
...meaning that any CSS selectors beginning with `body.dark` or `body.light` will only apply when the respective mode is active. A good place to start is by separating any color rules — your background, text, links, etc. — into a different section of your CSS. Using [SASS or SCSS](https://sass-lang.com/) makes this a whole lot [easier with nesting](https://sass-lang.com/guide#topic-3) but is not required; this was written with a [KISS](https://www.youtube-nocookie.com/embed/O58A7MJfOwU?hl=en&fs=1&showinfo=1&rel=0&iv_load_policy=3) mentality.
|
||||||
|
|
||||||
<iframe
|
<iframe
|
||||||
src="https://jakejarvis.github.io/dark-mode-example/"
|
src="/static/dark-mode/example.html"
|
||||||
title="Dark Mode Example"
|
title="Dark Mode Example"
|
||||||
loading="lazy"
|
|
||||||
style={{ height: "190px", width: "100%" }}
|
style={{ height: "190px", width: "100%" }}
|
||||||
></iframe>
|
></iframe>
|
||||||
|
|
||||||
A _very_ barebones example is embedded above ([view the source here](https://github.com/jakejarvis/dark-mode-example), or [open in a new window](https://jakejarvis.github.io/dark-mode-example/) if your browser is blocking the frame) and you can try it out on this site by clicking the 💡 lightbulb in the upper right corner of this page. You'll notice that the dark theme sticks when refreshing this page, navigating between other pages, or if you were to return to this example weeks from now.
|
A _very_ barebones example is embedded above ([view the source here](https://github.com/jakejarvis/dark-mode-example), or [open in a new window](/static/dark-mode/example.html) if your browser is blocking the frame) and you can try it out on this site by clicking the 💡 lightbulb in the upper right corner of this page. You'll notice that the dark theme sticks when refreshing this page, navigating between other pages, or if you were to return to this example weeks from now.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
131
public/static/dark-mode/example.html
Normal file
131
public/static/dark-mode/example.html
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>Welcome to the dark side 🌓</title>
|
||||||
|
<style>
|
||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
|
||||||
|
|
||||||
|
/* non-color rules that apply globally */
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
}
|
||||||
|
.dark-mode-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 1em;
|
||||||
|
|
||||||
|
/* hide toggle until we're sure user has JS enabled */
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* theme-specific rules -- you probably only want color-related stuff here. */
|
||||||
|
/* SCSS makes this a whole lot easier by allowing nesting, but is not required. */
|
||||||
|
body.light {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
body.light a {
|
||||||
|
color: #06f;
|
||||||
|
}
|
||||||
|
body.dark {
|
||||||
|
background-color: #222;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
body.dark a {
|
||||||
|
color: #fe0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="light">
|
||||||
|
<h1>Welcome to the dark side 🌓</h1>
|
||||||
|
|
||||||
|
<button class="dark-mode-toggle">💡 Click to see the light... or not.</button>
|
||||||
|
|
||||||
|
<p><a href="https://github.com/jakejarvis/dark-mode-example" target="_blank" rel="noopener">View the source code</a> or <a href="https://jarv.is/notes/dark-mode/" target="_blank" rel="noopener">read the post</a>.</p>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
var classes = window.document.body.classList;
|
||||||
|
var storage = sessionStorage || localStorage; // modified for example
|
||||||
|
|
||||||
|
// check for preset `dark_mode_pref` preference in local storage
|
||||||
|
var pref_key = 'theme_example-for-dark-mode-post'; // modified for example
|
||||||
|
var pref = storage.getItem(pref_key);
|
||||||
|
|
||||||
|
// change CSS via these <body> classes:
|
||||||
|
var dark = 'dark';
|
||||||
|
var light = 'light';
|
||||||
|
|
||||||
|
// which class is <body> set to initially?
|
||||||
|
var default_theme = light;
|
||||||
|
|
||||||
|
// use an element with class `dark-mode-toggle` to trigger swap when clicked
|
||||||
|
var toggle = window.document.querySelector('.dark-mode-toggle');
|
||||||
|
|
||||||
|
// keep track of current state no matter how we got there
|
||||||
|
var active = (default_theme === dark);
|
||||||
|
|
||||||
|
// receives a class name and switches <body> to it
|
||||||
|
var activateTheme = function (theme) {
|
||||||
|
classes.remove(dark, light);
|
||||||
|
classes.add(theme);
|
||||||
|
active = (theme === dark);
|
||||||
|
};
|
||||||
|
|
||||||
|
// if user already explicitly toggled in the past, restore their preference
|
||||||
|
if (pref === dark) activateTheme(dark);
|
||||||
|
if (pref === light) activateTheme(light);
|
||||||
|
|
||||||
|
// user has never clicked the button, so go by their OS preference until/if they do so
|
||||||
|
if (!pref) {
|
||||||
|
// returns media query selector syntax
|
||||||
|
var prefers = function (theme) {
|
||||||
|
return '(prefers-color-scheme: ' + theme + ')';
|
||||||
|
};
|
||||||
|
|
||||||
|
// check for OS dark/light mode preference and switch accordingly
|
||||||
|
// default to `default_theme` set above if unsupported
|
||||||
|
if (window.matchMedia(prefers(dark)).matches)
|
||||||
|
activateTheme(dark);
|
||||||
|
else if (window.matchMedia(prefers(light)).matches)
|
||||||
|
activateTheme(light);
|
||||||
|
else
|
||||||
|
activateTheme(default_theme);
|
||||||
|
|
||||||
|
// real-time switching if supported by OS/browser
|
||||||
|
window.matchMedia(prefers(dark)).addListener(function (e) { if (e.matches) activateTheme(dark); });
|
||||||
|
window.matchMedia(prefers(light)).addListener(function (e) { if (e.matches) activateTheme(light); });
|
||||||
|
}
|
||||||
|
|
||||||
|
// don't freak out if page happens not to have a toggle
|
||||||
|
if (toggle) {
|
||||||
|
// toggle re-appears now that we know user has JS enabled
|
||||||
|
toggle.style.visibility = 'visible';
|
||||||
|
|
||||||
|
// handle toggle click
|
||||||
|
toggle.addEventListener('click', function () {
|
||||||
|
// switch to the opposite theme & save preference in local storage
|
||||||
|
if (active) {
|
||||||
|
activateTheme(light);
|
||||||
|
storage.setItem(pref_key, light);
|
||||||
|
} else {
|
||||||
|
activateTheme(dark);
|
||||||
|
storage.setItem(pref_key, dark);
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user