feat: simplify recipe table

OdinVerst · Jan 15, 2025 · 7b07a62 · 7b07a62
1 parent 96ed242
commit 7b07a62
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 19 deletions.
diff --git a/src/components/Recipe.astro b/src/components/Recipe.astro
@@ -6,6 +6,7 @@ import { getRelativeLocaleUrl } from 'astro:i18n'
 import { commonMessages } from '@/i18n/locales/common/en'
 import { createPropertyFormatters } from '@/i18n/utils'
 
+import { getRecipeMessages } from '../i18n/locales/recipe/en'
 import { humanTimeToSeconds, secondsTimeToHuman } from '../utils'
 import Author from './Author.astro'
 import RecipeProperties from './RecipeProperties.astro'
@@ -17,23 +18,28 @@ const { recipe } = Astro.props
 
 const locale = Astro.currentLocale || 'en'
 const messages = commonMessages(locale)
+const recipeMessages = getRecipeMessages(locale)
 const { time, weight } = createPropertyFormatters(Astro.currentLocale)
 
 const href = getRelativeLocaleUrl(locale, `/recipes/${recipe.method}`)
 
 const formattedSteps = recipe.steps
-  ?.reduce<({ totalTime: number; totalWater: number } & Exclude<Entry['data']['steps'], undefined>[number])[]>((acc, step, index) => {
+  ?.reduce<({ endTime: number; startTime: number; totalWater: number } & Exclude<Entry['data']['steps'], undefined>[number])[]>((acc, step, index) => {
+    const previousStepEndTime = index > 0 ? acc[index - 1].endTime : 0
+    const previousStepTotalWater = index > 0 ? acc[index - 1].totalWater : 0
     acc.push({
       ...step,
-      totalTime: humanTimeToSeconds(step.time) + (index > 0 ? acc[index - 1].totalTime : 0),
-      totalWater: step.water + (index > 0 ? acc[index - 1].totalWater : 0)
+      endTime: humanTimeToSeconds(step.time) + previousStepEndTime,
+      startTime: previousStepEndTime,
+      totalWater: step.water + previousStepTotalWater
     })
     return acc
   }, [])
   .map(step => ({
     ...step,
+    endTime: time(secondsTimeToHuman(step.endTime)),
+    startTime: time(secondsTimeToHuman(step.startTime)),
     time: time(step.time),
-    totalTime: time(secondsTimeToHuman(step.totalTime)),
     totalWater: weight(step.totalWater),
     water: weight(step.water)
   }))
@@ -51,20 +57,26 @@ const formattedSteps = recipe.steps
         <>
           <h2>Recipe</h2>
           <table>
-            <thead>
+            <tbody>
               <tr>
-                <th>Total time</th>
-                <th>Weight</th>
-                <th>Total weight</th>
-                <th>Notes</th>
+                <td colspan="3">
+                  <span class="recipe-steps-subheader">{recipeMessages.prewetting}</span>
+                </td>
               </tr>
-            </thead>
-            <tbody>
-              {formattedSteps.map(it => {
+              <tr>
+                <td>{formattedSteps[0].startTime} &rArr; {formattedSteps[0].endTime}</td>
+                <td>{formattedSteps[0].totalWater}</td>
+                <td>{formattedSteps[0].description}</td>
+              </tr>
+              <tr>
+                <td colspan="3">
+                  <span class="recipe-steps-subheader">{recipeMessages.infusions}</span>
+                </td>
+              </tr>
+              {formattedSteps.slice(1).map(it => {
                 return (
                   <tr>
-                    <td>{it.totalTime}</td>
-                    <td>{it.water}</td>
+                    <td>{it.startTime} &rArr; {it.endTime}</td>
                     <td>{it.totalWater}</td>
                     <td>{it.description}</td>
                   </tr>
@@ -112,6 +124,13 @@ const formattedSteps = recipe.steps
     color: inherit;
   }
 
+  .recipe-steps-subheader {
+    color: var(--text-secondary);
+    font-size: 14px;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+
   table {
     margin-block-end: 24px;
   }

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -1,6 +1,12 @@
 /* eslint-disable perfectionist/sort-objects */
 import { defineCollection, z } from 'astro:content'
 
+const recipeStep = z.object({
+  description: z.string().optional(),
+  time: z.string(),
+  water: z.number()
+})
+
 const recipesCollection = defineCollection({
   schema: z.object({
     title: z.string(),
@@ -14,11 +20,7 @@ const recipesCollection = defineCollection({
       temperature: z.union([z.string(), z.number()]).optional(),
       ice: z.number().optional()
     }),
-    steps: z.array(z.object({
-      description: z.string().optional(),
-      time: z.string(),
-      water: z.number()
-    })).optional(),
+    steps: z.array(recipeStep).optional(),
     author: z.string(),
     authorImg: z.string().optional(),
     link: z.string().optional(),

diff --git a/src/i18n/locales/recipe/en.ts b/src/i18n/locales/recipe/en.ts
@@ -0,0 +1,8 @@
+import { t } from '../../utils'
+
+export const getRecipeMessages = (locale?: string) => {
+  return t(locale, 'recipe', {
+    infusions: 'Infusions',
+    prewetting: 'Pre-wetting'
+  })
+}
diff --git a/src/i18n/locales/recipe/ru.json b/src/i18n/locales/recipe/ru.json
@@ -0,0 +1,4 @@
+{
+  "infusions": "Вливания",
+  "prewetting": "Предсмачивание"
+}