React 18 (#863)

* gymnastics to make theme script work with react 18 hydration * try next 12.1.3 canary to fix SSG head tags? * revert theme script changes * next 12.1.3-canary.3 * double-revert some of the use-theme.tsx changes * separate theme restoration script & move to _document * bump next * bump next (again) * clean up some theme stuff * use hashed image URLs in webmanifest and feeds * text experimental react config * Update ThemeScript.tsx * switch selfie image to `layout="raw"` * use `layout="raw"` for all non-imported images * revert raw images in some places, messes up responsiveness * fix nitpicky "no divs inside buttons" html validation error * fix react-player hydration errors * fix hydration errors from server/client time zone differences * clean up hydration fixes * Update format-date.ts * last-minute cleanup
2025-11-20 19:20:50 -05:00 · 2022-04-06 09:37:16 -04:00
parent 0a741b4282
commit eccf2108c7
29 changed files with 575 additions and 541 deletions
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,9 +4,10 @@ import { DefaultSeo, SocialProfileJsonLd } from "next-seo";
 import * as Fathom from "fathom-client";
 import { ThemeProvider } from "../hooks/use-theme";
 import Layout from "../components/Layout";
-import { globalStyles, theme, darkTheme } from "../lib/styles/stitches.config";
 import * as config from "../lib/config";
 import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo";
+import { themeClassNames } from "../lib/styles/helpers/themes";
+import { globalStyles } from "../lib/styles/stitches.config";
 import type { ReactElement, ReactNode } from "react";
 import type { NextPage } from "next";
 import type { AppProps as NextAppProps } from "next/app";
@@ -55,14 +56,7 @@ const App = ({ Component, pageProps }: AppProps) => {
  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);

  return (
-    <ThemeProvider
-      // theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there
-      attribute="class"
-      value={{
-        light: theme.className,
-        dark: darkTheme.className,
-      }}
-    >
+    <ThemeProvider classNames={themeClassNames}>
      {/* all SEO config is in ../lib/config/seo.ts except for canonical URLs, which require access to next router */}
      <DefaultSeo
        {...defaultSeo}
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,12 +1,16 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import ThemeScript from "../components/ThemeScript/ThemeScript";
 import { getCssText, fonts } from "../lib/styles/stitches.config";
 import * as config from "../lib/config";

 // https://nextjs.org/docs/advanced-features/custom-document
 const Document = () => {
  return (
-    <Html lang={config.siteLocale?.replace("_", "-")}>
+    <Html lang={config.siteLocale}>
      <Head>
+        {/* inject a small script to set/restore the user's theme ASAP */}
+        <ThemeScript />
+
        {/* preload highest priority fonts defined in ../lib/styles/fonts/ */}
        {fonts.preloadUrls.map((relativeUrl, index) => (
          <link
--- a/pages/notes/[slug].tsx
+++ b/pages/notes/[slug].tsx
@@ -1,7 +1,6 @@
 import { InView } from "react-intersection-observer";
 import { NextSeo, ArticleJsonLd } from "next-seo";
 import { MDXRemote } from "next-mdx-remote";
-import { htmlEscape } from "escape-goat";
 import Content from "../../components/Content";
 import NoteMeta from "../../components/NoteMeta";
 import Comments from "../../components/Comments";
@@ -42,8 +41,8 @@ const Note = ({ frontMatter, source }: NoteType) => {
      />
      <ArticleJsonLd
        url={frontMatter.permalink}
-        title={htmlEscape(frontMatter.title)}
-        description={htmlEscape(frontMatter.description)}
+        title={frontMatter.title}
+        description={frontMatter.description}
        datePublished={frontMatter.date}
        dateModified={frontMatter.date}
        images={frontMatter.image && [`${config.baseUrl}${frontMatter.image}`]}
--- a/pages/notes/index.tsx
+++ b/pages/notes/index.tsx
@@ -1,8 +1,8 @@
 import { NextSeo } from "next-seo";
-import { format } from "date-fns";
 import Content from "../../components/Content";
 import NotesList, { NotesListProps } from "../../components/NotesList";
 import { getAllNotes } from "../../lib/helpers/parse-notes";
+import { formatDateTZ } from "../../lib/helpers/format-date";
 import type { GetStaticProps } from "next";

 const Notes = ({ notesByYear }: NotesListProps) => (
@@ -26,7 +26,7 @@ export const getStaticProps: GetStaticProps = async () => {
  const notesByYear: NotesListProps["notesByYear"] = {};

  getAllNotes().map((note) => {
-    const year = format(new Date(note.date), "yyyy");
+    const year = formatDateTZ(note.date, "yyyy");
    (notesByYear[year] || (notesByYear[year] = [])).push(note);
  });

--- a/pages/site.webmanifest.ts
+++ b/pages/site.webmanifest.ts
@@ -1,4 +1,5 @@
 import * as config from "../lib/config";
+import { favicons } from "../lib/config/seo";
 import type { GetServerSideProps } from "next";

 export const getServerSideProps: GetServerSideProps = async (context) => {
@@ -8,10 +9,30 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
    description: config.longDescription,
    lang: config.siteLocale,
    icons: [
-      { src: "/static/favicons/android-chrome-512x512.png", sizes: "512x512", type: "image/png", purpose: "any" },
-      { src: "/static/favicons/android-chrome-192x192.png", sizes: "192x192", type: "image/png", purpose: "any" },
-      { src: "/static/favicons/maskable-512x512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
-      { src: "/static/favicons/maskable-192x192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
+      {
+        src: favicons.chrome512Png.src,
+        sizes: `${favicons.chrome512Png.width}x${favicons.chrome512Png.height}`,
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: favicons.chrome192Png.src,
+        sizes: `${favicons.chrome192Png.width}x${favicons.chrome192Png.height}`,
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: favicons.maskable512Png.src,
+        sizes: `${favicons.maskable512Png.width}x${favicons.maskable512Png.height}`,
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: favicons.maskable192Png.src,
+        sizes: `${favicons.maskable192Png.width}x${favicons.maskable192Png.height}`,
+        type: "image/png",
+        purpose: "maskable",
+      },
    ],
    display: "browser",
    start_url: "/",