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:
@ -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 = "" }) {
|
||||
|
@ -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: {
|
||||
|
@ -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";
|
||||
|
@ -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} />
|
||||
|
@ -1,6 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
</head>
|
||||
<body>Verification: 7432e013ad0164ab</body>
|
||||
</html>
|
Reference in New Issue
Block a user