jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-16 20:05:31 -04:00
Code Issues Activity

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

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-01 12:11:15 -05:00
parent b5d039b9d6
commit c420967b4c
5 changed files with 54 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/page-header/ThemeToggle.tsx
View File

@@ -1,4 +1,5 @@
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import * as config from "../../lib/config";
import BulbOffIcon from "../icons/svg/bulb-off.svg"; import BulbOffIcon from "../icons/svg/bulb-off.svg";
import BulbOnIcon from "../icons/svg/bulb-on.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..? // TODO: there's probably (definitely) a cleaner way to do this, maybe with react hooks..?
export const isDark = () => document.documentElement.getAttribute("data-theme") === "dark"; 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) => { export const updateDOM = (dark: boolean) => {
const root = document.documentElement; document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
const theme = dark ? "dark" : "light"; document.documentElement.style.colorScheme = dark ? "dark" : "light";
document.head
root.setAttribute("data-theme", theme); .querySelector("meta[name=theme-color]")
root.style.colorScheme = theme; ?.setAttribute("content", dark ? config.themeColorDark : config.themeColorLight);
}; };
export default function ThemeToggle({ className = "" }) { export default function ThemeToggle({ className = "" }) {

2
lib/build-feed.ts
View File

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

4
lib/config.js
View File

@@ -1,9 +1,11 @@
// Site info // Site info
export const siteName = "Jake Jarvis"; export const siteName = "Jake Jarvis";
export const siteDomain = "jarv.is"; 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 = 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."; "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 githubRepo = "jakejarvis/jarv.is";
export const fathomSiteId = "WBGNQUKW"; export const fathomSiteId = "WBGNQUKW";
export const fathomCustomDomain = "blue-chilly.jarv.is"; export const fathomCustomDomain = "blue-chilly.jarv.is";

57
pages/_app.tsx
View File

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

6
public/yandex_7432e013ad0164ab.html
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>