Fixes

KiraLT · Oct 31, 2023 · fd5de65 · fd5de65
1 parent 50c985b
commit fd5de65
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 74 deletions.
diff --git a/export-images.config.js b/export-images.config.js
@@ -2,9 +2,7 @@
  * @type {import('next-export-optimize-images').Config}
  */
 const config = {
-    convertFormat: [
-        ['png', 'webp'],
-    ]
+    convertFormat: [['png', 'webp']],
 }
-  
-module.exports = config
+
+module.exports = config
diff --git a/next.config.js b/next.config.js
@@ -5,13 +5,14 @@ const withPWA = require('next-pwa')({
 
 const withExportImages = require('next-export-optimize-images')
 
-
-module.exports = withPWA(withExportImages({
-    reactStrictMode: false,
-    output: 'export',
-    trailingSlash: true,
-    images: {
-        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-        imageSizes:  [16, 32, 48, 64, 96, 128, 256, 384],
-    }
-}))
+module.exports = withPWA(
+    withExportImages({
+        reactStrictMode: false,
+        output: 'export',
+        trailingSlash: true,
+        images: {
+            deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+            imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+        },
+    }),
+)
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -50,8 +50,8 @@ export const metadata: Metadata = {
         initialScale: 1,
         width: 'device-width',
         userScalable: false,
-        viewportFit: 'cover', 
-    }
+        viewportFit: 'cover',
+    },
 }
 
 export default function RootLayout({

diff --git a/src/app/list/edit-list.tsx b/src/app/list/edit-list.tsx
@@ -1,8 +1,5 @@
 import { List, getListRecipes } from '@/controllers/lists'
-import {
-    Recipe,
-    getAllRecipes,
-} from '@/controllers/recipes'
+import { Recipe, getAllRecipes } from '@/controllers/recipes'
 import Fuse from 'fuse.js'
 import { useState, useMemo } from 'react'
 import { FaBars } from 'react-icons/fa6'

diff --git a/src/app/lists/content.tsx b/src/app/lists/content.tsx
@@ -22,7 +22,9 @@ export default function Content(): JSX.Element {
                     <li className="flex justify-between items-center my-2 border-primary-content">
                         <div>
                             <Link href={getListUrl(v)}>
-                                <span className="text-truncate">{v.name || 'Unnamed list'}</span>{' '}
+                                <span className="text-truncate">
+                                    {v.name || 'Unnamed list'}
+                                </span>{' '}
                             </Link>
                             <small className="text-muted">
                                 ({v.recipes.length} recipes)

diff --git a/src/app/recipes/[slug]/page.tsx b/src/app/recipes/[slug]/page.tsx
@@ -49,19 +49,27 @@ export default function Page({ params: { slug } }: Props): JSX.Element {
         <article>
             <script
                 type="application/ld+json"
-                dangerouslySetInnerHTML={{ __html: JSON.stringify({
-                    '@type': 'Recipe',
-                    name: recipe.data.name,
-                    description: recipe.data.description || '',
-                    recipeIngredient: Object.entries(recipe.data.ingredients).map(
-                        ([ingredient, quantity]) =>
-                            `${formatQuantity(quantity)} ${titleCase(ingredient)}`,
-                    ),
-                    recipeInstructions: recipe.data.instructions.map((v) => ({
-                        '@type': 'HowToStep',
-                        text: v,
-                    })),
-                } satisfies RecipeLd)}}
+                dangerouslySetInnerHTML={{
+                    __html: JSON.stringify({
+                        '@type': 'Recipe',
+                        name: recipe.data.name,
+                        description: recipe.data.description || '',
+                        recipeIngredient: Object.entries(
+                            recipe.data.ingredients,
+                        ).map(
+                            ([ingredient, quantity]) =>
+                                `${formatQuantity(quantity)} ${titleCase(
+                                    ingredient,
+                                )}`,
+                        ),
+                        recipeInstructions: recipe.data.instructions.map(
+                            (v) => ({
+                                '@type': 'HowToStep',
+                                text: v,
+                            }),
+                        ),
+                    } satisfies RecipeLd),
+                }}
             />
             <h1 className="text-4xl mb-4">{recipe.data.name}</h1>
             <div className="md:hidden mb-4">
@@ -88,9 +96,12 @@ export default function Page({ params: { slug } }: Props): JSX.Element {
                 </div>
                 <div className="md:w-1/3 hidden md:block">
                     <Image
-                        src={recipe.image}
+                        src={recipe.image.src}
+                        width={400}
+                        height={200}
                         alt={recipe.data.name}
                         className="object-cover h-48 w-96 dark:opacity-50"
+                        placeholder="blur"
                     />
                     <Ingredients ingredients={recipe.data.ingredients} />
                 </div>

diff --git a/src/components/recipes.tsx b/src/components/recipes.tsx
@@ -2,11 +2,7 @@ import { Recipe } from '@/controllers/recipes'
 import Image from 'next/image'
 import Link from 'next/link'
 
-export function Recipes({
-    recipes,
-}: {
-    recipes: Recipe[]
-}): JSX.Element {
+export function Recipes({ recipes }: { recipes: Recipe[] }): JSX.Element {
     return (
         <>
             {!recipes?.length && (
@@ -18,21 +14,25 @@ export function Recipes({
                 {recipes.map((recipe) => {
                     const ratio = recipe.image.height / recipe.image.width
 
-                    return <Link
-                        key={recipe.slug}
-                        href={`/recipes/${recipe.slug}`}
-                        className="bg-base-200 rounded-md"
-                    >
-                        <Image
-                            src={recipe.image}
-                            alt={recipe.data.name}
-                            placeholder={'blur'}
-                            className="object-cover h-48 w-96 dark:opacity-50"
-                        />
-                        <div className="p-2 pt-1">
-                            <h3 className="text-lg">{recipe.data.name}</h3>
-                        </div>
-                    </Link>
+                    return (
+                        <Link
+                            key={recipe.slug}
+                            href={`/recipes/${recipe.slug}`}
+                            className="bg-base-200 rounded-md"
+                        >
+                            <Image
+                                src={recipe.image.src}
+                                width={400}
+                                height={200}
+                                alt={recipe.data.name}
+                                placeholder="blur"
+                                className="object-cover h-48 w-96 dark:opacity-50"
+                            />
+                            <div className="p-2 pt-1">
+                                <h3 className="text-lg">{recipe.data.name}</h3>
+                            </div>
+                        </Link>
+                    )
                 })}
             </div>
         </>

diff --git a/src/controllers/lists/index.ts b/src/controllers/lists/index.ts
@@ -41,11 +41,7 @@ export function getListFromUrlQuery(
     query: Record<string, string | string[] | undefined | null>,
 ): List {
     const name = typeof query.n === 'string' ? query.n : ''
-    const recipeIds =
-        typeof query.r === 'string'
-            ? query.r
-                  .split(' ')
-            : []
+    const recipeIds = typeof query.r === 'string' ? query.r.split(' ') : []
 
     return {
         name,
@@ -61,5 +57,7 @@ export function replaceList(oldList: List, newList: List): void {
 }
 
 export function getListRecipes(list: List): Recipe[] {
-    return list.recipes.flatMap((recipeId) => recipes.filter((v) => v.slug === recipeId))
-}
+    return list.recipes.flatMap((recipeId) =>
+        recipes.filter((v) => v.slug === recipeId),
+    )
+}
diff --git a/src/controllers/recipes/data/index.ts b/src/controllers/recipes/data/index.ts
@@ -27,25 +27,30 @@ declare const require: {
 const loader = require.context('.', true, /\.(json|png)$/)
 
 export const recipes = groupBy(
-    loader.keys().map(v => {
+    loader.keys().map((v) => {
         const slug = v.split('/').slice(-2, -1)[0]
         if (v.endsWith('.png')) {
             return {
                 slug,
                 type: 'image' as const,
-                data: loader<{ default: StaticImageData }>(v).default
+                data: loader<{ default: StaticImageData }>(v).default,
             }
         }
         return {
             slug,
             type: 'recipe',
-            data:loader(v)
+            data: loader(v),
         }
-    }), v => v.slug
-).map<Recipe>(([slug, values]) => {
-    return {
-        slug,
-        data: values.find(v => v.type === 'recipe')?.data as Recipe['data'],
-        image: values.find(v => v.type === 'image')?.data as Recipe['image']
-    }
-}).filter(v => v.data && v.image)
+    }),
+    (v) => v.slug,
+)
+    .map<Recipe>(([slug, values]) => {
+        return {
+            slug,
+            data: values.find((v) => v.type === 'recipe')
+                ?.data as Recipe['data'],
+            image: values.find((v) => v.type === 'image')
+                ?.data as Recipe['image'],
+        }
+    })
+    .filter((v) => v.data && v.image)