1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 22:46:39 -04:00

set <meta name="theme-color" ...> dynamically

This commit is contained in:
2022-01-01 12:11:15 -05:00
parent b5d039b9d6
commit c420967b4c
5 changed files with 54 additions and 28 deletions

View File

@ -1,4 +1,5 @@
import { useState, useEffect, useCallback } from "react";
import * as config from "../../lib/config";
import BulbOffIcon from "../icons/svg/bulb-off.svg";
import BulbOnIcon from "../icons/svg/bulb-on.svg";
@ -13,13 +14,13 @@ export const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, p
// TODO: there's probably (definitely) a cleaner way to do this, maybe with react hooks..?
export const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
// sets appropriate `<html data-theme="...">` and color-scheme CSS properties
// sets appropriate `<html data-theme="...">`, `<meta name="color-scheme" ...>`, and color-scheme CSS property
export const updateDOM = (dark: boolean) => {
const root = document.documentElement;
const theme = dark ? "dark" : "light";
root.setAttribute("data-theme", theme);
root.style.colorScheme = theme;
document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
document.documentElement.style.colorScheme = dark ? "dark" : "light";
document.head
.querySelector("meta[name=theme-color]")
?.setAttribute("content", dark ? config.themeColorDark : config.themeColorLight);
};
export default function ThemeToggle({ className = "" }) {

View File

@ -7,7 +7,7 @@ export const buildFeed = (notes: any[]) => {
link: `${config.baseURL}/`,
title: config.siteName,
description: config.longDescription,
copyright: "CC-BY-4.0",
copyright: "https://creativecommons.org/licenses/by/4.0/",
updated: new Date(),
image: `${config.baseURL}/static/images/me.jpg`,
feedLinks: {

View File

@ -1,9 +1,11 @@
// Site info
export const siteName = "Jake Jarvis";
export const siteDomain = "jarv.is";
export const shortDescription = "Front-End Web Developer in Boston, MA 👨‍💻";
export const shortDescription = "Front-End Web Developer in Boston, MA";
export const longDescription =
"Hi there! I'm a frontend web developer based in Boston, Massachusetts specializing in the JAMstack, modern JavaScript frameworks, and progressive web apps.";
export const themeColorLight = "#fcfcfc";
export const themeColorDark = "#252525";
export const githubRepo = "jakejarvis/jarv.is";
export const fathomSiteId = "WBGNQUKW";
export const fathomCustomDomain = "blue-chilly.jarv.is";

View File

@ -81,16 +81,24 @@ export default function App({ Component, pageProps }: AppProps) {
},
{
rel: "alternate",
href: `/feed.xml`,
href: "/feed.xml",
type: "application/rss+xml",
title: `${config.siteName} (RSS)`,
},
{
rel: "alternate",
href: `/feed.atom`,
href: "/feed.atom",
type: "application/atom+xml",
title: `${config.siteName} (Atom)`,
},
{
rel: "preconnect",
href: `https://${config.fathomCustomDomain}`,
},
{
rel: "dns-prefetch",
href: `https://${config.fathomCustomDomain}`,
},
{
rel: "webmention",
href: `https://webmention.io/${config.webmentionId}/webmention`,
@ -99,13 +107,17 @@ export default function App({ Component, pageProps }: AppProps) {
rel: "pingback",
href: `https://webmention.io/${config.webmentionId}/xmlrpc`,
},
{
rel: "license",
href: "https://creativecommons.org/licenses/by/4.0/",
},
{
rel: "humans",
href: `/humans.txt`,
href: "/humans.txt",
},
{
rel: "pgpkey",
href: `/pubkey.asc`,
href: "/pubkey.asc",
type: "application/pgp-keys",
},
]}
@ -123,11 +135,23 @@ export default function App({ Component, pageProps }: AppProps) {
content: config.monetization,
},
{
name: "twitter:dnt",
content: "on",
name: "google-site-verification",
content: "qQhmLTwjNWYgQ7W42nSTq63xIrTch13X_11mmxBE9zk",
},
{
name: "twitter:widgets:csp",
name: "facebook-domain-verification",
content: "q45jxbgyp22ef55xror1pvbehisg9m",
},
{
name: "msvalidate.01",
content: "164551986DA47F7F6FC0D21A93FFFCA6",
},
{
name: "yandex-verification",
content: "634a039ec46fa286",
},
{
name: "twitter:dnt",
content: "on",
},
]}
@ -149,14 +173,19 @@ export default function App({ Component, pageProps }: AppProps) {
]}
/>
{/* Inline script to restore light/dark theme preference ASAP */}
{/*
Inline script to restore light/dark theme preference ASAP:
`<html data-theme="...">`, `<meta name="color-scheme" ...>`, and color-scheme style
*/}
<Script id="restore_theme" strategy="afterInteractive">{`try {
var root = document.documentElement,
pref = localStorage.getItem("dark_mode"),
theme = pref === "true" || (!pref && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
root.setAttribute("data-theme", theme);
root.style.colorScheme = theme;
var pref = localStorage.getItem("dark_mode"),
dark = pref === "true" || (!pref && window.matchMedia("(prefers-color-scheme: dark)").matches),
meta = document.createElement("meta");
document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
document.documentElement.style.colorScheme = dark ? "dark" : "light";
meta.setAttribute("name", "theme-color");
meta.content = dark ? "${config.themeColorDark}" : "${config.themeColorLight}";
document.head.prepend(meta);
} catch (e) {}`}</Script>
<Component {...pageProps} />

View File

@ -1,6 +0,0 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>Verification: 7432e013ad0164ab</body>
</html>