From 36faa6c23499fba3e68cc0da83c8fd35d5e7faae Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Sat, 1 Mar 2025 16:08:12 -0500 Subject: [PATCH] simplify theme provider --- .node-version | 2 +- app/contact/form.tsx | 4 +- app/notes/[slug]/page.tsx | 2 +- app/page.tsx | 11 +-- components/Code/Code.tsx | 7 +- components/Comments/Comments.tsx | 4 +- components/ThemeToggle/ThemeToggle.tsx | 6 +- components/Time/Time.tsx | 8 +- contexts/ThemeContext.tsx | 47 +++++----- package.json | 8 +- pnpm-lock.yaml | 120 ++++++++++++------------- 11 files changed, 99 insertions(+), 120 deletions(-) diff --git a/.node-version b/.node-version index d5b283a3..7d41c735 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -22.13.1 +22.14.0 diff --git a/app/contact/form.tsx b/app/contact/form.tsx index 2728b5f8..f3280889 100644 --- a/app/contact/form.tsx +++ b/app/contact/form.tsx @@ -13,7 +13,7 @@ import { SiMarkdown } from "react-icons/si"; import styles from "./form.module.css"; const ContactForm = () => { - const { activeTheme } = useTheme(); + const { theme } = useTheme(); const [formState, formAction, pending] = useActionState< Partial<{ success: boolean; message: string; payload: FormData }>, FormData @@ -81,7 +81,7 @@ const ContactForm = () => { diff --git a/app/notes/[slug]/page.tsx b/app/notes/[slug]/page.tsx index 7ca8f798..3b678f5c 100644 --- a/app/notes/[slug]/page.tsx +++ b/app/notes/[slug]/page.tsx @@ -28,7 +28,7 @@ export async function generateStaticParams() { const slugs = await getPostSlugs(); // map slugs into a static paths object required by next.js - return slugs.map((slug: string) => ({ + return slugs.map((slug) => ({ slug, })); } diff --git a/app/page.tsx b/app/page.tsx index 6d0cf3c8..e4067283 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -283,7 +283,7 @@ export default function Page() { > Bluesky - ,{" "} + , or{" "} Mastodon - - , or{" "} - - SMS {" "} as well!

diff --git a/components/Code/Code.tsx b/components/Code/Code.tsx index d37be969..dac69026 100644 --- a/components/Code/Code.tsx +++ b/components/Code/Code.tsx @@ -1,11 +1,10 @@ import CodeBlock from "../CodeBlock"; import CodeInline from "../CodeInline"; -import type { PropsWithChildren } from "react"; +import type { ComponentPropsWithoutRef } from "react"; -export type CodeProps = PropsWithChildren<{ +export type CodeProps = ComponentPropsWithoutRef<"code"> & { forceBlock?: boolean; - className?: string; -}>; +}; // a simple wrapper component that "intelligently" picks between inline code and code blocks (w/ optional syntax // highlighting & a clipboard button) diff --git a/components/Comments/Comments.tsx b/components/Comments/Comments.tsx index 06c87539..51dc652c 100644 --- a/components/Comments/Comments.tsx +++ b/components/Comments/Comments.tsx @@ -14,7 +14,7 @@ export type CommentsProps = ComponentPropsWithoutRef<"div"> & { }; const Comments = ({ title, className, ...rest }: CommentsProps) => { - const { activeTheme } = useTheme(); + const { theme } = useTheme(); // fail silently if giscus isn't configured if (!config.giscusConfig) { @@ -36,7 +36,7 @@ const Comments = ({ title, className, ...rest }: CommentsProps) => { emitMetadata="0" inputPosition="top" loading="lazy" - theme={activeTheme === "dark" ? activeTheme : "light"} + theme={theme === "dark" ? theme : "light"} /> ); diff --git a/components/ThemeToggle/ThemeToggle.tsx b/components/ThemeToggle/ThemeToggle.tsx index 4aa6c65d..673627d5 100644 --- a/components/ThemeToggle/ThemeToggle.tsx +++ b/components/ThemeToggle/ThemeToggle.tsx @@ -14,13 +14,13 @@ export type ThemeToggleProps = { const ThemeToggle = ({ className }: ThemeToggleProps) => { const hasMounted = useHasMounted(); - const { activeTheme, setTheme } = useTheme(); + const { theme, setTheme } = useTheme(); const isFirstMount = useFirstMountState(); const prefersReducedMotion = useReducedMotion() ?? false; const maskId = useId(); // SSR-safe ID to cross-reference areas of the SVG - // default to light since `activeTheme` might be undefined - const safeTheme = activeTheme === "dark" ? activeTheme : "light"; + // default to light since `theme` might be undefined + const safeTheme = theme === "dark" ? theme : "light"; // accessibility: disable animation if user prefers reduced motion useEffect(() => { diff --git a/components/Time/Time.tsx b/components/Time/Time.tsx index 66805c2e..c549b0fd 100644 --- a/components/Time/Time.tsx +++ b/components/Time/Time.tsx @@ -1,14 +1,14 @@ import { formatDate } from "../../lib/helpers/format-date"; +import type { ComponentPropsWithoutRef } from "react"; -export type TimeProps = { +export type TimeProps = ComponentPropsWithoutRef<"time"> & { date: string | number | Date; format?: string; - className?: string; }; -const Time = ({ date, format = "MMM D", className }: TimeProps) => { +const Time = ({ date, format = "MMM D", ...rest }: TimeProps) => { return ( -