Add dark mode (#3)

* wip

* wip

* wip

* wip

* wip

package.json

@@ -7,6 +7,7 @@
     "build:vercel": "prisma generate && prisma db push && next build",
     "dev": "next dev",
     "lint": "next lint",
+    "lint:fix": "next lint -- --fix",
     "start": "next start",
     "test": "jest"
   },

src/components/nav.tsx

@@ -2,18 +2,9 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import MenuIcon from '../icons/menu.svg'
 import XIcon from '../icons/x.svg'
+import { VALID_TAGS } from '~/constants/tags'
 import { Search } from './search'
 
-const links = [
-  { href: '/breakfast', label: 'breakfast', text: 'brkfst' },
-  { href: '/lunch', label: 'lunch', text: 'lnch' },
-  { href: '/dinner', label: 'dinner', text: 'dnnr' },
-  { href: '/snacks', label: 'snacks', text: 'snks' },
-  { href: '/dessert', label: 'dessert', text: 'dssrt' },
-  { href: '/vegan', label: 'vegan', text: 'vgn' },
-  { href: '/drinks', label: 'drinks', text: 'drnks' },
-]
-
 type NavProps = {
   open: boolean
   onToggle: () => void
@@ -31,28 +22,28 @@ export const Nav: React.FC<NavProps> = ({ open, onToggle }) => {
       <nav className="flex flex-wrap items-stretch gap-4">
         <Link
           href="/"
-          className="print-exact group bg-black px-3 py-2 leading-snug text-white"
+          className="print-exact group bg-black px-3 py-2 leading-snug text-white dark:bg-white dark:text-black"
         >
           <span className="group-hover:hidden">r.c.p.s</span>
           <span className="hidden group-hover:inline">recipes</span>
         </Link>
 
         <div className="hidden flex-wrap items-center gap-4 md:flex">
-          {links.map(link => (
+          {VALID_TAGS.map(tag => (
             <Link
-              key={link.label}
-              href={link.href}
+              key={tag.value}
+              href={`/${tag.value}`}
               className="font-semibold underline hover:text-red-600"
-              title={link.label}
+              title={tag.name}
             >
-              {link.text}
+              {tag.short}
             </Link>
           ))}
         </div>
 
         <div className="flex flex-1 flex-wrap items-stretch justify-end gap-4">
           <button
-            className="flex items-center justify-center self-center p-1.5 transition-colors hover:bg-gray-100 print:hidden md:hidden"
+            className="flex items-center justify-center self-center p-1.5 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 print:hidden md:hidden"
             onClick={onToggle}
           >
             {open ? (
@@ -76,14 +67,14 @@ export const Nav: React.FC<NavProps> = ({ open, onToggle }) => {
       {open && (
         <div className="flex flex-1 flex-col gap-4">
           <div className="flex flex-1 flex-col justify-center gap-1 overflow-y-auto text-center text-lg font-semibold">
-            {links.map(link => (
+            {VALID_TAGS.map(tag => (
               <Link
-                key={link.label}
-                href={link.href}
-                title={link.label}
-                className="p-3 hover:bg-gray-100"
+                key={tag.value}
+                href={`/${tag.value}`}
+                title={tag.name}
+                className="p-3 hover:bg-gray-100 dark:hover:bg-gray-800"
               >
-                {link.label}
+                {tag.name}
               </Link>
             ))}
           </div>

src/components/pulsing-items.tsx

@@ -19,7 +19,7 @@ export const PulsingItems: React.FC<PulsingItemProps> = ({
         <div
           key={index}
           className={cx(
-            'w-full animate-pulse rounded-lg bg-gray-100',
+            'w-full animate-pulse rounded-lg bg-gray-100 dark:bg-gray-900',
             classNameItem,
             itemHeightClass,
           )}

src/components/recipes/card.tsx

@@ -28,7 +28,7 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({
     <article
       aria-label={recipe?.title}
       className={cx(
-        'flex flex-col gap-6 border border-black p-4 text-sm md:p-8 md:text-base',
+        'flex flex-col gap-6 border border-black p-4 text-sm dark:border-gray-700 md:p-8 md:text-base',
         className,
       )}
     >

src/components/recipes/category-list.tsx

@@ -28,9 +28,10 @@ export const CategoryList: React.FC<CategoryListProps> = ({
           key={category.value}
           onClick={() => handleClick(category)}
           className={cx(
-            'print-exact border border-black p-4 text-left ring-gray-300 transition-shadow hover:bg-gray-50 hover:text-black hover:ring-2 hover:ring-offset-2',
-            isSelected(category.value) &&
-              'bg-black text-white hover:bg-gray-800 hover:text-white',
+            'print-exact border border-black p-4 text-left ring-gray-300 transition-shadow hover:bg-gray-50 hover:text-black hover:ring-2 hover:ring-offset-2 dark:ring-gray-700 dark:ring-offset-black',
+            isSelected(category.value)
+              ? 'bg-black text-white hover:bg-gray-800 hover:text-white dark:bg-white dark:text-black dark:hover:bg-white dark:hover:text-black'
+              : 'dark:border-gray-700 dark:hover:bg-gray-900 dark:hover:text-white',
           )}
         >
           {category.name}

src/components/recipes/summary.tsx

@@ -15,7 +15,7 @@ export const RecipeSummary: React.FC<RecipeSummaryProps> = ({
   <Link
     href={`/recipe/${recipe.slug}`}
     className={cx(
-      'flex flex-col gap-6 border border-black p-4 text-sm ring-gray-200 transition-shadow hover:bg-gray-50 hover:ring-4 hover:ring-offset-4 md:p-8 md:text-base',
+      'flex flex-col gap-6 border border-black p-4 text-sm ring-gray-200 transition-shadow hover:bg-gray-50 hover:ring-4 hover:ring-offset-4 dark:border-gray-700 dark:ring-gray-700 dark:ring-offset-black dark:hover:bg-gray-900 md:p-8 md:text-base',
       className,
     )}
   >

src/components/search.tsx

@@ -72,7 +72,7 @@ export const Search: React.FC<SearchProps> = ({
           onChange={e => setQuery(e.target.value)}
           onKeyDown={handleSubmit}
           className={cx(
-            'w-full rounded-none border border-black p-2 leading-none outline-none transition-shadow focus:ring-4 focus:ring-gray-300',
+            'w-full rounded-none border border-black bg-white p-2 leading-none outline-none ring-offset-2 transition-shadow focus:ring-2 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:ring-offset-black dark:focus:border-gray-500 dark:focus:ring-gray-700',
             !expanded && 'h-full max-w-xs flex-1 self-stretch text-sm',
             inputClassName,
           )}

src/constants/tags.ts

@@ -1,78 +1,79 @@
-export type Tag = (typeof validTags)[number]
+export type Tag = (typeof VALID_TAGS)[number]
 export type Category = Tag['categories'][number]
 
-export const validTags = [
+export const VALID_TAGS = [
   {
     name: 'Breakfast',
     value: 'breakfast',
+    short: 'brkfst',
     categories: [
       { name: 'Hot', value: 'hot' },
       { name: 'Cold', value: 'cold' },
       { name: 'Overnight', value: 'overnight' },
       { name: 'Sweet', value: 'sweet' },
       { name: 'Savory', value: 'savory' },
+      { name: 'Vegan', value: 'vegan' },
     ],
   },
   {
     name: 'Lunch',
     value: 'lunch',
+    short: 'lnch',
     categories: [
       { name: 'Hot', value: 'hot' },
       { name: 'Cold', value: 'cold' },
       { name: 'Light', value: 'light' },
       { name: 'Spicy', value: 'spicy' },
       { name: 'Sandwiches', value: 'sandwiches' },
+      { name: 'Vegan', value: 'vegan' },
     ],
   },
   {
     name: 'Dinner',
     value: 'dinner',
+    short: 'dnnr',
     categories: [
       { name: 'Hot', value: 'hot' },
       { name: 'Cold', value: 'cold' },
       { name: 'Light', value: 'light' },
       { name: 'Spicy', value: 'spicy' },
       { name: 'Sandwiches', value: 'sandwiches' },
       { name: 'Pasta', value: 'pasta' },
+      { name: 'Vegan', value: 'vegan' },
     ],
   },
   {
     name: 'Snacks',
     value: 'snacks',
+    short: 'sncks',
     categories: [
       { name: 'Hot', value: 'hot' },
       { name: 'Cold', value: 'cold' },
       { name: 'Protein', value: 'protein' },
       { name: 'Fruit', value: 'fruit' },
       { name: 'Savory', value: 'savory' },
       { name: 'Sweet', value: 'sweet' },
+      { name: 'Vegan', value: 'vegan' },
     ],
   },
   {
     name: 'Dessert',
     value: 'dessert',
+    short: 'dssrt',
     categories: [
       { name: 'Hot', value: 'hot' },
       { name: 'Cold', value: 'cold' },
       { name: 'Fruit', value: 'fruit' },
       { name: 'Chocolate', value: 'chocolate' },
       { name: 'Ice Cream', value: 'ice-cream' },
       { name: 'Pastry', value: 'pastry' },
-    ],
-  },
-  {
-    name: 'Vegan',
-    value: 'vegan',
-    categories: [
-      { name: 'Breakfast', value: 'breakfast' },
-      { name: 'Lunch', value: 'lunch' },
-      { name: 'Dinner', value: 'dinner' },
-      { name: 'Snacks', value: 'snacks' },
+      { name: 'Vegan', value: 'vegan' },
     ],
   },
   {
     name: 'Drinks',
     value: 'drinks',
+    short: 'drnks',
     categories: [
       { name: 'Hot', value: 'hot' },
       { name: 'Cold', value: 'cold' },

src/pages/[tag]/index.tsx

@@ -2,12 +2,12 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { RecipeList } from '~/components/list'
 import { CategoryList } from '~/components/recipes/category-list'
-import { validTags } from '~/constants/tags'
+import { VALID_TAGS } from '~/constants/tags'
 import { api } from '~/utils/api'
 
 export const getServerSideProps = async ({ params }: SSPC) => {
   const tagParam = params?.tag as string | undefined
-  const tag = validTags.find(t => t.value === tagParam?.toLowerCase().trim())
+  const tag = VALID_TAGS.find(t => t.value === tagParam?.toLowerCase().trim())
   if (!tag) return { notFound: true }
 
   return { props: { tag } }

src/pages/_app.tsx

@@ -32,9 +32,9 @@ const MyApp: AppType = ({ Component, pageProps }) => {
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
       </Head>
       <main
-        className={`${monoFont.variable} mx-auto flex h-full w-full max-w-5xl flex-col font-mono`}
+        className={`${monoFont.variable} mx-auto flex h-full w-full max-w-5xl flex-col`}
       >
-        <div className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+        <div className="flex flex-1 flex-col gap-4 p-4 font-mono  md:gap-8 md:p-8">
           <Nav open={navOpen} onToggle={() => setNavOpen(!navOpen)} />
           {!navOpen && <Component {...pageProps} />}
         </div>

src/pages/_document.tsx

@@ -0,0 +1,30 @@
+import Document, {
+  type DocumentContext,
+  type DocumentInitialProps,
+  Html,
+  Head,
+  Main,
+  NextScript,
+} from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext,
+  ): Promise<DocumentInitialProps> {
+    return await Document.getInitialProps(ctx)
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body className="bg-white text-black dark:bg-black dark:text-white">
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument

tailwind.config.ts

@@ -1,10 +1,15 @@
 import { type Config } from 'tailwindcss'
+import defaultColors from 'tailwindcss/colors'
 import defaultTheme from 'tailwindcss/defaultTheme'
 
 export default {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'media',
   theme: {
     extend: {
+      colors: {
+        gray: { ...defaultColors.neutral },
+      },
       fontFamily: {
         mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
       },