tidy up public directory
@ -75,9 +75,10 @@ module.exports = withBundleAnalyzer({
|
||||
},
|
||||
],
|
||||
rewrites: async () => [
|
||||
{ source: "/favicon.ico", destination: "/static/images/favicon.ico" },
|
||||
{ source: "/apple-touch-icon.png", destination: "/static/images/apple-touch-icon.png" },
|
||||
{ source: "/apple-touch-icon-precomposed.png", destination: "/static/images/apple-touch-icon.png" },
|
||||
{ source: "/favicon.ico", destination: "/static/favicons/favicon.ico" },
|
||||
{ source: "/apple-touch-icon.png", destination: "/static/favicons/apple-touch-icon.png" },
|
||||
{ source: "/apple-touch-icon-precomposed.png", destination: "/static/favicons/apple-touch-icon.png" },
|
||||
{ source: "/dark-mode-example/:path*", destination: "https://jakejarvis.github.io/dark-mode-example/:path*" },
|
||||
],
|
||||
redirects: async () => [
|
||||
{ source: "/notes/:slug/amp.html", destination: "/notes/:slug/", statusCode: 301 },
|
||||
|
||||
@ -30,7 +30,7 @@ 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://getyarn.io/yarn-clip/embed/eed08f4f-d1c9-4cc0-b041-f280a5dbf0a5?autoplay=false) mentality.
|
||||
|
||||
<iframe
|
||||
src="/dark-mode-example/example.html"
|
||||
src="/dark-mode-example/index.html"
|
||||
title="Dark Mode Example"
|
||||
sandbox="allow-same-origin allow-scripts allow-popups"
|
||||
style={{
|
||||
@ -44,7 +44,7 @@ I've written a simple implementation below, which...
|
||||
}}
|
||||
></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](/dark-mode-example/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.
|
||||
A _very_ barebones example is embedded above ([view the source here](https://github.com/jakejarvis/dark-mode-example), or [open in a new window](/dark-mode-example/index.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.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -6,8 +6,9 @@ import * as Fathom from "fathom-client";
|
||||
import * as config from "../lib/config";
|
||||
import type { AppProps } from "next/app";
|
||||
|
||||
import faviconIco from "../public/static/images/favicon.ico";
|
||||
import appleTouchIconPng from "../public/static/images/apple-touch-icon.png";
|
||||
import faviconIco from "../public/static/favicons/favicon.ico";
|
||||
import faviconPng from "../public/static/favicons/favicon.png";
|
||||
import appleTouchIconPng from "../public/static/favicons/apple-touch-icon.png";
|
||||
import meJpg from "../public/static/images/me.jpg";
|
||||
|
||||
// global styles
|
||||
@ -75,6 +76,11 @@ export default function App({ Component, pageProps }: AppProps) {
|
||||
rel: "icon",
|
||||
href: faviconIco.src,
|
||||
},
|
||||
{
|
||||
rel: "icon",
|
||||
href: faviconPng.src,
|
||||
type: "image/png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
href: appleTouchIconPng.src,
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
<!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],[type=reset],[type=submit],button{-webkit-appearance:button}[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}
|
||||
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;
|
||||
visibility: hidden;
|
||||
}
|
||||
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" 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 async defer src="example.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,4 +0,0 @@
|
||||
/* eslint-disable */
|
||||
/*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */
|
||||
// Note: Using sessionStorage instead of localStorage for the iframe'd example, since we're sandboxed from the parent window here.
|
||||
(function(){var e=window,t=e.document,i=t.body.classList,a=sessionStorage,c="dark_mode_example",d=a.getItem(c),n="dark",o="light",r=o,s=t.querySelector(".dark-mode-toggle"),m=r===n,l=function(e){i.remove(n,o);i.add(e);m=e===n};d===n&&l(n);d===o&&l(o);if(!d){var f=function(e){return"(prefers-color-scheme: "+e+")"};e.matchMedia(f(n)).matches?l(n):e.matchMedia(f(o)).matches?l(o):l(r);e.matchMedia(f(n)).addListener((function(e){e.matches&&l(n)}));e.matchMedia(f(o)).addListener((function(e){e.matches&&l(o)}))}if(s){s.style.visibility="visible";s.addEventListener("click",(function(){if(m){l(o);a.setItem(c,o)}else{l(n);a.setItem(c,n)}}),!0)}})();
|
||||
@ -5,25 +5,25 @@
|
||||
"lang": "en-us",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/static/images/android-chrome-512x512.png",
|
||||
"src": "/static/favicons/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/static/images/android-chrome-192x192.png",
|
||||
"src": "/static/favicons/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/static/images/maskable-512x512.png",
|
||||
"src": "/static/favicons/maskable-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/static/images/maskable-192x192.png",
|
||||
"src": "/static/favicons/maskable-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 611 B After Width: | Height: | Size: 611 B |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 904 B |
|
Before Width: | Height: | Size: 299 B |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 393 B |
|
Before Width: | Height: | Size: 513 B |
@ -1,7 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="64" height="64" viewbox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#6fbc4e" d="M27.7 5l17.1 9.8 8.5-4.9-17-9.9z"/>
|
||||
<path fill="#ffb900" d="M27.7 14.8l8.6 4.9v19.7l8.5 4.9V14.8L27.7 5zM19.2 39.4l-8.5-4.9v19.6l17 9.9v-9.8l-8.5-5z"/>
|
||||
<path fill="#009cdf" d="M27.7 44.3v-9.8l-8.5 4.9v9.8zM44.8 44.3l-17.1 9.9V64l25.6-14.7V9.9l-8.5 4.9z"/>
|
||||
<path fill="#6fbc4e" d="M10.7 34.5l8.5 4.9 8.5-4.9-8.5-4.9zM19.2 49.2l8.5 5 17.1-9.9-8.5-4.9z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 529 B |
|
Before Width: | Height: | Size: 12 KiB |
@ -1,16 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg viewBox="0 0 96 144" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="c1" fill="#6fbc4e">
|
||||
<polygon points="57.6 0 38.4 11.1 38.4 11.1 76.8 33.2 96 22.1 96 22.1 57.6 0 57.6 0"/>
|
||||
<polygon points="19.2 66.5 0 77.6 0 77.6 19.2 88.7 38.4 77.6 38.4 77.6 19.2 66.5 19.2 66.5"/>
|
||||
<polygon points="57.6 88.7 19.2 110.9 19.2 110.9 38.4 121.9 76.8 99.8 76.8 99.8 57.6 88.7 57.6 88.7"/>
|
||||
</g>
|
||||
<g id="c2" fill="#ffb900">
|
||||
<polygon points="38.4 11.1 38.4 33.3 57.6 44.3 57.6 88.7 76.8 99.8 76.8 33.2 38.4 11.1 38.4 11.1"/>
|
||||
<polygon points="19.2 110.9 19.2 110.8 19.2 88.7 0 77.6 0 121.9 38.4 144.1 38.4 121.9 19.2 110.9 19.2 110.9"/>
|
||||
</g>
|
||||
<g id="c3" fill="#009cdf">
|
||||
<polygon points="76.8 33.2 76.8 99.8 76.8 99.8 38.4 121.9 38.4 144.1 96 110.9 96 22.1 76.8 33.2 76.8 33.2"/>
|
||||
<polygon points="19.2 110.9 38.4 99.8 38.4 77.6 19.2 88.7 19.2 110.9 19.2 110.9"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 945 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,10 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg viewBox="0 0 96 144" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="#000000">
|
||||
<polygon points="57.6 0 38.4 11.1 38.4 11.1 76.8 33.2 96 22.1 96 22.1 57.6 0 57.6 0"/>
|
||||
<polygon points="19.2 66.5 0 77.6 0 77.6 19.2 88.7 38.4 77.6 38.4 77.6 19.2 66.5 19.2 66.5"/>
|
||||
<polygon points="57.6 88.7 19.2 110.9 19.2 110.9 38.4 121.9 76.8 99.8 76.8 99.8 57.6 88.7 57.6 88.7"/>
|
||||
<polygon points="38.4 11.1 38.4 33.3 57.6 44.3 57.6 88.7 76.8 99.8 76.8 33.2 38.4 11.1 38.4 11.1"/>
|
||||
<polygon points="19.2 110.9 19.2 110.8 19.2 88.7 0 77.6 0 121.9 38.4 144.1 38.4 121.9 19.2 110.9 19.2 110.9"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 665 B |