feat: convert barn-01.md to a new format

OdinVerst · Apr 22, 2024 · 26d2b43 · 26d2b43
1 parent 7d8a3c9
commit 26d2b43
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 77 deletions.
diff --git a/src/components/Recipe.astro b/src/components/Recipe.astro
@@ -4,7 +4,8 @@ import type { CollectionEntry } from 'astro:content'
 import { getRelativeLocaleUrl } from 'astro:i18n'
 
 import { commonMessages } from '@/i18n/locales/common/en'
-
+import { createPropertyFormatters } from '@/i18n/utils'
+import { humanTimeToSeconds, secondsTimeToHuman } from '../utils'
 import Author from './Author.astro'
 import RecipeProperties from './RecipeProperties.astro'
 
@@ -15,8 +16,21 @@ const { recipe } = Astro.props
 
 const locale = Astro.currentLocale || 'en'
 const messages = commonMessages(locale)
+const { time, weight } = createPropertyFormatters(Astro.currentLocale)
 
 const href = getRelativeLocaleUrl(locale, `/recipes/${recipe.method}`)
+
+const formattedSteps = recipe.steps
+  ?.reduce((acc, step, index) => {
+    acc.push({ ...step, totalTime: humanTimeToSeconds(step.time) + (index > 0 ? acc[index - 1].totalTime : 0) })
+    return acc
+  }, [] as { description?: string; time: string; totalTime: number; water: number }[])
+  .map(step => ({
+    ...step,
+    time: time(step.time),
+    totalTime: time(secondsTimeToHuman(step.totalTime)),
+    water: weight(step.water)
+  }))
 ---
 
 <div class="root">
@@ -26,24 +40,26 @@ const href = getRelativeLocaleUrl(locale, `/recipes/${recipe.method}`)
   <RecipeProperties properties={recipe.properties} />
   <div>
     {
-      recipe.steps
+      formattedSteps
         ? (
         <>
           <h2>Recipe</h2>
           <table>
             <thead>
               <tr>
+                <th>Total time</th>
                 <th>Time</th>
                 <th>Weight</th>
                 <th>Notes</th>
               </tr>
             </thead>
             <tbody>
-              {recipe.steps.map(it => {
+              {formattedSteps.map(it => {
                 return (
                   <tr>
+                    <td>{it.totalTime}</td>
                     <td>{it.time}</td>
-                    <td>{it.water} gr.</td>
+                    <td>{it.water}</td>
                     <td>{it.description}</td>
                   </tr>
                 )

diff --git a/src/content/recipes/en/pourover/barn-01.md b/src/content/recipes/en/pourover/barn-01.md
@@ -11,6 +11,19 @@ properties:
   time: '2:30'
   temperature: 94
 
+steps:
+  - description: Pre-wetting
+    water: 35
+    time: '0:30'
+  - water: 65
+    time: '0:30'
+  - water: 50
+    time: '0:20'
+  - water: 50
+    time: '0:25'
+  - water: 50
+    time: '0:25'
+
 author: The Barn
 authorImg: barn
 
@@ -19,77 +32,4 @@ tags:
   - pourover
 ---
 
-## Recipe
-
-
-<div class="time-line">
-
-Time
-
-Weight
-
-Total
-
-</div>
-
-### Pre-wetting
-
-<div class="time-line">
-
-0:00
-
-35 gr
-
-35 gr
-
-</div>
-
-### Infusions
-
-<div class="time-line">
-
-0:30
-
-65 gr
-
-100 gr
-
-</div>
-
-<div class="time-line">
-
-1:00
-
-50 gr.
-
-150 gr.
-
-</div>
-
-<div class="time-line">
-
-1:20
-
-50 gr.
-
-200 gr.
-
-</div>
-
-<div class="time-line">
-
-1:45
-
-50 gr.
-
-250 gr.
-
-</div>
-
-<br>
-
 Total extraction time __2:00 - 2:30__
-
-<br>
-
-
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -11,3 +11,15 @@ export async function getCollectionByLocale (
   })
   return recipes
 }
+
+export function humanTimeToSeconds (time: string) {
+  const coefficients = [1, 60, 24 * 60]
+  return time.split(':').map(Number).reverse().reduce((acc, cur, index) => acc + cur * coefficients[index], 0)
+}
+
+export function secondsTimeToHuman (time: number) {
+  const minutes = Math.floor((time % 3600) / 60)
+  const seconds = Math.floor((time % 60))
+
+  return minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0')
+}