From 98708a9b6e6e39699940580fdca111106a05bea5 Mon Sep 17 00:00:00 2001
From: AleksandrSl <sl.aleksandr28@gmail.com>
Date: Sun, 21 Apr 2024 18:45:18 +0200
Subject: [PATCH 01/16] fix: add fallback font

---
 src/components/Timer.astro | 243 +++++++++++++++++++------------------
 1 file changed, 127 insertions(+), 116 deletions(-)

diff --git a/src/components/Timer.astro b/src/components/Timer.astro
index a0d467a..8578829 100644
--- a/src/components/Timer.astro
+++ b/src/components/Timer.astro
@@ -1,9 +1,9 @@
 ---
 interface Props {
   steps: {
-    description: null | string;
-    time: number;
-    water: number;
+    description: null | string
+    time: number
+    water: number
   }
 }
 
@@ -16,9 +16,15 @@ const { steps } = Astro.props
       <!-- Background Circle -->
       <circle class="baseArc" cx="100" cy="100" fill="none" r="90" stroke-width="8"></circle>
       <!-- Progress Arc -->
-      <circle class="progressArc" cx="100" cy="100" fill="none" id="progressArc" r="90" stroke-linecap="round"
-          stroke-width="8"
-      ></circle>
+      <circle
+        class="progressArc"
+        cx="100"
+        cy="100"
+        fill="none"
+        id="progressArc"
+        r="90"
+        stroke-linecap="round"
+        stroke-width="8"></circle>
     </svg>
     <div class="time segmented-1" id="time"></div>
     <div class="steps">
@@ -56,14 +62,19 @@ const { steps } = Astro.props
 
   @font-palette-values --segmented-1 {
     font-family: Segmented;
-    override-colors: 0 oklch(0 0 0), 1 oklch(0 0 0 / 0.08);
+    override-colors:
+      0 oklch(0 0 0),
+      1 oklch(0 0 0 / 0.08);
   }
 
   .segmented-1 {
-    font-family: Segmented;
+    font-family: Segmented, system-ui;
     font-palette: --segmented-1;
     /*font-feature-settings: 'ss${formattedCurrentStyleNumber}' on;*/
-    font-variation-settings: 'wght' 600, 'wdth' 100, 'slnt' 5;
+    font-variation-settings:
+      'wght' 600,
+      'wdth' 100,
+      'slnt' 5;
   }
 
   .steps {
@@ -98,131 +109,131 @@ const { steps } = Astro.props
 </style>
 
 <script>
-type Step = {
-  description: null | string;
-  time: number;
-  water: number;
-}
+  type Step = {
+    description: null | string
+    time: number
+    water: number
+  }
 
-let startTime: number
-let elapsedTime = 0
-let isRunning = false
-let stepIndex = 0
-const reverseTimer = true
-
-const root = document.getElementById('timer-root')
-const timeSlot = document.getElementById('time')
-const descriptionSlot = document.getElementById('description')
-const totalWeightSlot = document.getElementById('totalWeight')
-const nextStepSlot = document.getElementById('nextStep')
-const progressArc = document.getElementById('progressArc')
-
-const steps: Step[] = root?.dataset.steps
-  ? JSON.parse(root.dataset.steps).map((it: Step) => ({
-    ...it,
-    time: it.time * 1000
-  }))
-  : []
-
-let step = steps[stepIndex]
-let nextStep = steps[stepIndex + 1]
-let timeLeft = 0
-
-function updateStep (index: number) {
-  if (!descriptionSlot || !totalWeightSlot) return
-  stepIndex = index
-  step = steps[stepIndex]
-  nextStep = steps[stepIndex + 1]
-  descriptionSlot.textContent = step.description
-  totalWeightSlot.textContent = `${step.water}g`
-  // nextStepSlot.textContent = nextStep ? nextStep.description : "";
-}
+  let startTime: number
+  let elapsedTime = 0
+  let isRunning = false
+  let stepIndex = 0
+  const reverseTimer = true
+
+  const root = document.getElementById('timer-root')
+  const timeSlot = document.getElementById('time')
+  const descriptionSlot = document.getElementById('description')
+  const totalWeightSlot = document.getElementById('totalWeight')
+  const nextStepSlot = document.getElementById('nextStep')
+  const progressArc = document.getElementById('progressArc')
+
+  const steps: Step[] = root?.dataset.steps
+    ? JSON.parse(root.dataset.steps).map((it: Step) => ({
+        ...it,
+        time: it.time * 1000
+      }))
+    : []
+
+  let step = steps[stepIndex]
+  let nextStep = steps[stepIndex + 1]
+  let timeLeft = 0
+
+  function updateStep(index: number) {
+    if (!descriptionSlot || !totalWeightSlot) return
+    stepIndex = index
+    step = steps[stepIndex]
+    nextStep = steps[stepIndex + 1]
+    descriptionSlot.textContent = step.description
+    totalWeightSlot.textContent = `${step.water}g`
+    // nextStepSlot.textContent = nextStep ? nextStep.description : "";
+  }
 
-function updateTime (time: number) {
-  if (!timeSlot || !progressArc) return
-  elapsedTime = time
-  timeLeft = step.time - time
-  const displayTime = reverseTimer ? timeLeft : elapsedTime
-  timeSlot.textContent = formatTime(displayTime)
-  progressArc.setAttribute('stroke-dasharray', getDashArray((displayTime / step.time) * 100))
-}
+  function updateTime(time: number) {
+    if (!timeSlot || !progressArc) return
+    elapsedTime = time
+    timeLeft = step.time - time
+    const displayTime = reverseTimer ? timeLeft : elapsedTime
+    timeSlot.textContent = formatTime(displayTime)
+    progressArc.setAttribute('stroke-dasharray', getDashArray((displayTime / step.time) * 100))
+  }
 
-function startTimer () {
-  isRunning = true
-  startTime = performance.now() - elapsedTime
-  requestAnimationFrame(updateTimer)
-}
+  function startTimer() {
+    isRunning = true
+    startTime = performance.now() - elapsedTime
+    requestAnimationFrame(updateTimer)
+  }
 
-function stopTimer () {
-  isRunning = false
-}
+  function stopTimer() {
+    isRunning = false
+  }
 
-function resetTimer () {
-  stopTimer()
-  updateTime(0)
-}
+  function resetTimer() {
+    stopTimer()
+    updateTime(0)
+  }
 
-function updateTimer (currentTime: number) {
-  if (!isRunning) return
+  function updateTimer(currentTime: number) {
+    if (!isRunning) return
 
-  updateTime(currentTime - startTime)
+    updateTime(currentTime - startTime)
 
-  if (elapsedTime > step.time) {
-    resetTimer()
-    if (stepIndex + 1 >= steps.length) {
-      console.debug('stopping brew', stepIndex, steps.length)
-      stopBrew()
-    } else {
-      updateStep(stepIndex + 1)
-      startTimer()
+    if (elapsedTime > step.time) {
+      resetTimer()
+      if (stepIndex + 1 >= steps.length) {
+        console.debug('stopping brew', stepIndex, steps.length)
+        stopBrew()
+      } else {
+        updateStep(stepIndex + 1)
+        startTimer()
+      }
     }
-  }
 
-  requestAnimationFrame(updateTimer)
-}
+    requestAnimationFrame(updateTimer)
+  }
 
-function formatTime (time: number) {
-  const totalMilliseconds = Math.floor(time)
-  const minutes = Math.floor((totalMilliseconds % 3600_000) / 60_000)
-  const seconds = Math.floor((totalMilliseconds % 60_000) / 1000)
-  // const milliseconds = totalMilliseconds % 1000;
+  function formatTime(time: number) {
+    const totalMilliseconds = Math.floor(time)
+    const minutes = Math.floor((totalMilliseconds % 3600_000) / 60_000)
+    const seconds = Math.floor((totalMilliseconds % 60_000) / 1000)
+    // const milliseconds = totalMilliseconds % 1000;
 
-  return pad(minutes) + ':' + pad(seconds)
-  // + ":" + milliseconds.toString().padStart(3, "0");
-}
+    return pad(minutes) + ':' + pad(seconds)
+    // + ":" + milliseconds.toString().padStart(3, "0");
+  }
 
-function getDashArray (percent: number) {
-  const circumference = 2 * Math.PI * 90
-  const dashArray = circumference * (percent / 100)
-  return `${dashArray} ${circumference}`
-}
+  function getDashArray(percent: number) {
+    const circumference = 2 * Math.PI * 90
+    const dashArray = circumference * (percent / 100)
+    return `${dashArray} ${circumference}`
+  }
 
-function pad (value: number) {
-  return value < 10 ? '0' + value : value
-}
+  function pad(value: number) {
+    return value < 10 ? '0' + value : value
+  }
 
-function stopBrew () {
-  updateStep(0)
-  resetTimer()
-}
+  function stopBrew() {
+    updateStep(0)
+    resetTimer()
+  }
 
-const startTimerBtn = document.getElementById('startTimer')
-const stopTimerBtn = document.getElementById('stopTimer')
-const stopBrewBtn = document.getElementById('stopBrew')
+  const startTimerBtn = document.getElementById('startTimer')
+  const stopTimerBtn = document.getElementById('stopTimer')
+  const stopBrewBtn = document.getElementById('stopBrew')
 
-if (startTimerBtn && stopBrewBtn && stopTimerBtn) {
-  startTimerBtn.addEventListener('click', () => {
-    startTimer()
-  })
+  if (startTimerBtn && stopBrewBtn && stopTimerBtn) {
+    startTimerBtn.addEventListener('click', () => {
+      startTimer()
+    })
 
-  stopTimerBtn.addEventListener('click', () => {
-    stopTimer()
-  })
+    stopTimerBtn.addEventListener('click', () => {
+      stopTimer()
+    })
 
-  stopBrewBtn.addEventListener('click', () => {
-    stopBrew()
-  })
-}
+    stopBrewBtn.addEventListener('click', () => {
+      stopBrew()
+    })
+  }
 
-stopBrew()
+  stopBrew()
 </script>

From 7313eb163c544661182cdde8b724575caede8d5b Mon Sep 17 00:00:00 2001
From: AleksandrSl <sl.aleksandr28@gmail.com>
Date: Sun, 21 Apr 2024 21:53:02 +0200
Subject: [PATCH 02/16] feat: add timer as a separate page

---
 src/components/Recipe.astro                   | 15 +++-
 src/components/Timer.astro                    | 69 ++++++++++++-----
 .../{[name].astro => [name]/index.astro}      |  0
 .../recipes/[method]/[name]/timer.astro       | 75 +++++++++++++++++++
 src/styles/colors.css                         |  6 ++
 5 files changed, 145 insertions(+), 20 deletions(-)
 rename src/pages/[lang]/recipes/[method]/{[name].astro => [name]/index.astro} (100%)
 create mode 100644 src/pages/[lang]/recipes/[method]/[name]/timer.astro

diff --git a/src/components/Recipe.astro b/src/components/Recipe.astro
index a81257f..1e25fb0 100644
--- a/src/components/Recipe.astro
+++ b/src/components/Recipe.astro
@@ -15,13 +15,15 @@ type Entry = CollectionEntry<'recipes'>
 type Props = { recipe: Entry['data'] }
 
 const { recipe } = Astro.props
+const { name } = Astro.params
 
 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 methodHref = getRelativeLocaleUrl(locale, `/recipes/${recipe.method}`)
+const timerHref = getRelativeLocaleUrl(locale, `/recipes/${recipe.method}/${name}/timer`)
 const DEFAULT_GROUP = Symbol('default')
 
 const formattedSteps = recipe.steps
@@ -61,7 +63,7 @@ const groupedSteps = formattedSteps
 
 <div class="root">
   <h1 class="title">
-    <a class="method-link" {href}>{messages[recipe.method as keyof typeof messages]}</a> / {recipe.name}
+    <a class="method-link" {methodHref}>{messages[recipe.method as keyof typeof messages]}</a> / {recipe.name}
   </h1>
   <RecipeProperties properties={recipe.properties} />
   <div>
@@ -98,6 +100,9 @@ const groupedSteps = formattedSteps
     <span>{messages.source}:</span>
     <Author image={recipe.authorImg} link={recipe.link} name={recipe.author} />
   </div>
+  {recipe.steps
+    ? <a class="timer-link" href={timerHref}>Open timer</a>
+    : null}
 </div>
 
 <style>
@@ -183,6 +188,12 @@ const groupedSteps = formattedSteps
     align-items: center;
     gap: 12px;
   }
+
+  .timer-link {
+    display: inline-block;
+    margin-block-start: 24px;
+    color: inherit;
+  }
 </style>
 
 <!-- TODO: Drop these styles, when we migrate new recipes to MDX or frontmatter -->
diff --git a/src/components/Timer.astro b/src/components/Timer.astro
index 8578829..c3d12f1 100644
--- a/src/components/Timer.astro
+++ b/src/components/Timer.astro
@@ -26,7 +26,7 @@ const { steps } = Astro.props
         stroke-linecap="round"
         stroke-width="8"></circle>
     </svg>
-    <div class="time segmented-1" id="time"></div>
+    <div class="time segmented" id="time"></div>
     <div class="steps">
       <div class="step" id="step">
         <div id="description"></div>
@@ -36,18 +36,18 @@ const { steps } = Astro.props
       <!--</div>-->
     </div>
   </div>
-  <div>
-    <button id="startTimer">Start</button>
-    <button id="stopTimer">Stop</button>
-    <button id="stopBrew">Reset</button>
+  <div class="control-panel">
+    <button class="control-panel--btn" id="startTimer">Start</button>
+    <button class="control-panel--btn" id="stopTimer">Pause</button>
+    <button class="control-panel--btn" id="stopBrew">Reset</button>
   </div>
 </div>
 
 <style>
   .wrapper {
     position: relative;
-    width: 500px;
-    height: 500px;
+    max-width: 500px;
+    margin-inline: auto;
   }
 
   .time {
@@ -60,23 +60,36 @@ const { steps } = Astro.props
     font-size: 50px;
   }
 
-  @font-palette-values --segmented-1 {
+  @font-palette-values --segmented-light {
     font-family: Segmented;
     override-colors:
       0 oklch(0 0 0),
       1 oklch(0 0 0 / 0.08);
   }
 
-  .segmented-1 {
+  @font-palette-values --segmented-dark {
+    font-family: Segmented;
+    override-colors:
+      0 oklch(100 0 0),
+      1 oklch(100 0 0 / 0.08);
+  }
+
+  .segmented {
     font-family: Segmented, system-ui;
-    font-palette: --segmented-1;
-    /*font-feature-settings: 'ss${formattedCurrentStyleNumber}' on;*/
     font-variation-settings:
       'wght' 600,
       'wdth' 100,
       'slnt' 5;
   }
 
+  html[data-theme='dark'] .segmented {
+    font-palette: --segmented-dark;
+  }
+
+  .segmented {
+    font-palette: --segmented-light;
+  }
+
   .steps {
     position: absolute;
     left: 50%;
@@ -92,6 +105,10 @@ const { steps } = Astro.props
     gap: 12px;
     font-size: 30px;
     color: var(--text-primary);
+
+    @media screen and (max-width: 500px) {
+      font-size: 20px;
+    }
   }
 
   .nextStep {
@@ -100,11 +117,27 @@ const { steps } = Astro.props
   }
 
   .baseArc {
-    stroke: oklch(0 0 0 / 0.08);
+    stroke: var(--color-timer-base-arc);
   }
 
   .progressArc {
-    stroke: oklch(0 0 0);
+    stroke: var(--color-timer-progress-arc);
+  }
+
+  .control-panel {
+    position: sticky;
+    inset-block-end: 0;
+    background: var(--color-background);
+    padding: 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    justify-content: center;
+  }
+
+  .control-panel--btn {
+    font-size: 16px;
+    padding: 8px 14px;
   }
 </style>
 
@@ -112,7 +145,7 @@ const { steps } = Astro.props
   type Step = {
     description: null | string
     time: number
-    water: number
+    water: string
   }
 
   let startTime: number
@@ -130,9 +163,9 @@ const { steps } = Astro.props
 
   const steps: Step[] = root?.dataset.steps
     ? JSON.parse(root.dataset.steps).map((it: Step) => ({
-        ...it,
-        time: it.time * 1000
-      }))
+      ...it,
+      time: it.time * 1000
+    }))
     : []
 
   let step = steps[stepIndex]
@@ -145,7 +178,7 @@ const { steps } = Astro.props
     step = steps[stepIndex]
     nextStep = steps[stepIndex + 1]
     descriptionSlot.textContent = step.description
-    totalWeightSlot.textContent = `${step.water}g`
+    totalWeightSlot.textContent = step.water
     // nextStepSlot.textContent = nextStep ? nextStep.description : "";
   }
 
diff --git a/src/pages/[lang]/recipes/[method]/[name].astro b/src/pages/[lang]/recipes/[method]/[name]/index.astro
similarity index 100%
rename from src/pages/[lang]/recipes/[method]/[name].astro
rename to src/pages/[lang]/recipes/[method]/[name]/index.astro
diff --git a/src/pages/[lang]/recipes/[method]/[name]/timer.astro b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
new file mode 100644
index 0000000..b46122d
--- /dev/null
+++ b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
@@ -0,0 +1,75 @@
+---
+import type { GetStaticPaths } from 'astro'
+import type { CollectionEntry } from 'astro:content'
+
+import { getCollection } from 'astro:content'
+import { getRelativeLocaleUrl } from 'astro:i18n'
+
+import Timer from '../../../../../components/Timer.astro'
+import { commonMessages } from '../../../../../i18n/locales/common/en'
+import { createPropertyFormatters } from '../../../../../i18n/utils'
+import Layout from '../../../../../layouts/Layout.astro'
+
+interface Props {
+  entry: CollectionEntry<'recipes'>
+}
+
+const { entry } = Astro.props
+const { method, name } = Astro.params
+const locale = Astro.currentLocale || 'en'
+const messages = commonMessages(locale)
+
+export const getStaticPaths = (async () => {
+  const recipes = await getCollection('recipes')
+  return recipes
+    .filter(entry => entry.data.steps !== undefined)
+    .map(entry => {
+      const [lang, method, name] = entry.slug.split('/')
+
+      return {
+        params: { lang, method, name },
+        props: { entry }
+      }
+    })
+}) satisfies GetStaticPaths
+const { weight } = createPropertyFormatters(Astro.currentLocale)
+
+function timeToSeconds (s: string) {
+  const coefficients = [1, 60, 24 * 60]
+  return s.split(':').map(Number).reverse().reduce((acc, cur, index) => acc + cur * coefficients[index], 0)
+}
+
+const methodHref = getRelativeLocaleUrl(locale, `/recipes/${method}`)
+const recipeHref = getRelativeLocaleUrl(locale, `/recipes/${method}/${name}`)
+const formattedSteps = entry.data.steps.map(step => ({
+  ...step,
+  time: timeToSeconds(step.time),
+  water: weight(step.water)
+}))
+---
+
+<Layout title={entry.data.title} description={entry.data.description} author={entry.data.author}>
+  <h1 class="title">
+    <a class="link" {methodHref}>{messages[entry.data.method]}</a>
+    / <a class="link" href={recipeHref}>{entry.data.name}</a>
+    / Timer
+  </h1>
+  <Timer steps={formattedSteps} />
+</Layout>
+
+<style>
+  .title {
+    margin-block: 0 28px;
+    font-size: 24px;
+    text-transform: capitalize;
+  }
+
+  .link {
+    display: inline-block;
+    color: inherit;
+  }
+
+  .link:visited {
+    color: inherit;
+  }
+</style>
diff --git a/src/styles/colors.css b/src/styles/colors.css
index 70d6295..e13b70b 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -21,6 +21,9 @@
 
   --color-author-icon-background: transparent;
   --color-focus: black;
+
+  --color-timer-progress-arc: oklch(0 0 0);
+  --color-timer-base-arc: oklch(0 0 0 / 0.08);
 }
 
 html[data-theme='dark'] {
@@ -42,4 +45,7 @@ html[data-theme='dark'] {
   --color-footer-boder: transparent;
   --color-author-icon-background: white;
   --color-focus: white;
+
+  --color-timer-progress-arc: oklch(100 0 0);
+  --color-timer-base-arc: oklch(100 0 0 / 0.08);
 }

From f9a752afe8f3623cda3c30b970c8783d332a3bd7 Mon Sep 17 00:00:00 2001
From: AleksandrSl <sl.aleksandr28@gmail.com>
Date: Sun, 21 Apr 2024 22:06:41 +0200
Subject: [PATCH 03/16] fix: correct type errors and links

---
 src/components/Recipe.astro                          | 2 +-
 src/components/Timer.astro                           | 4 ++--
 src/pages/[lang]/recipes/[method]/[name]/timer.astro | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Recipe.astro b/src/components/Recipe.astro
index 1e25fb0..45cebf1 100644
--- a/src/components/Recipe.astro
+++ b/src/components/Recipe.astro
@@ -63,7 +63,7 @@ const groupedSteps = formattedSteps
 
 <div class="root">
   <h1 class="title">
-    <a class="method-link" {methodHref}>{messages[recipe.method as keyof typeof messages]}</a> / {recipe.name}
+    <a class="method-link" href={methodHref}>{messages[recipe.method as keyof typeof messages]}</a> / {recipe.name}
   </h1>
   <RecipeProperties properties={recipe.properties} />
   <div>
diff --git a/src/components/Timer.astro b/src/components/Timer.astro
index c3d12f1..355e7eb 100644
--- a/src/components/Timer.astro
+++ b/src/components/Timer.astro
@@ -1,10 +1,10 @@
 ---
-interface Props {
+type Props = {
   steps: {
     description: null | string
     time: number
     water: number
-  }
+  }[]
 }
 
 const { steps } = Astro.props
diff --git a/src/pages/[lang]/recipes/[method]/[name]/timer.astro b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
index b46122d..5e75f36 100644
--- a/src/pages/[lang]/recipes/[method]/[name]/timer.astro
+++ b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
@@ -5,7 +5,7 @@ import type { CollectionEntry } from 'astro:content'
 import { getCollection } from 'astro:content'
 import { getRelativeLocaleUrl } from 'astro:i18n'
 
-import Timer from '../../../../../components/Timer.astro'
+import TimerComponent from '../../../../../components/Timer.astro'
 import { commonMessages } from '../../../../../i18n/locales/common/en'
 import { createPropertyFormatters } from '../../../../../i18n/utils'
 import Layout from '../../../../../layouts/Layout.astro'
@@ -41,7 +41,7 @@ function timeToSeconds (s: string) {
 
 const methodHref = getRelativeLocaleUrl(locale, `/recipes/${method}`)
 const recipeHref = getRelativeLocaleUrl(locale, `/recipes/${method}/${name}`)
-const formattedSteps = entry.data.steps.map(step => ({
+const formattedSteps = entry.data.steps!.map(step => ({
   ...step,
   time: timeToSeconds(step.time),
   water: weight(step.water)
@@ -50,11 +50,11 @@ const formattedSteps = entry.data.steps.map(step => ({
 
 <Layout title={entry.data.title} description={entry.data.description} author={entry.data.author}>
   <h1 class="title">
-    <a class="link" {methodHref}>{messages[entry.data.method]}</a>
+    <a class="link" href={methodHref}>{messages[entry.data.method]}</a>
     / <a class="link" href={recipeHref}>{entry.data.name}</a>
     / Timer
   </h1>
-  <Timer steps={formattedSteps} />
+  <TimerComponent steps={formattedSteps} />
 </Layout>
 
 <style>

From 5eed9f2ad3f74168d153e480f468d25e8f3467bd Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Wed, 15 Jan 2025 11:13:03 +0100
Subject: [PATCH 04/16] feat: join strat/pause button

---
 src/components/Timer.astro | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/Timer.astro b/src/components/Timer.astro
index 355e7eb..2c9323b 100644
--- a/src/components/Timer.astro
+++ b/src/components/Timer.astro
@@ -38,7 +38,6 @@ const { steps } = Astro.props
   </div>
   <div class="control-panel">
     <button class="control-panel--btn" id="startTimer">Start</button>
-    <button class="control-panel--btn" id="stopTimer">Pause</button>
     <button class="control-panel--btn" id="stopBrew">Reset</button>
   </div>
 </div>
@@ -138,6 +137,9 @@ const { steps } = Astro.props
   .control-panel--btn {
     font-size: 16px;
     padding: 8px 14px;
+    border-radius: 4px;
+    border: none;
+    min-width: 100px;
   }
 </style>
 
@@ -160,6 +162,7 @@ const { steps } = Astro.props
   const totalWeightSlot = document.getElementById('totalWeight')
   const nextStepSlot = document.getElementById('nextStep')
   const progressArc = document.getElementById('progressArc')
+  const startTimerBtn = document.getElementById('startTimer')!
 
   const steps: Step[] = root?.dataset.steps
     ? JSON.parse(root.dataset.steps).map((it: Step) => ({
@@ -191,14 +194,24 @@ const { steps } = Astro.props
     progressArc.setAttribute('stroke-dasharray', getDashArray((displayTime / step.time) * 100))
   }
 
+  function toggleTimer() {
+    if (isRunning) {
+      stopTimer()
+    } else {
+      startTimer()
+    }
+  }
+
   function startTimer() {
     isRunning = true
     startTime = performance.now() - elapsedTime
     requestAnimationFrame(updateTimer)
+    startTimerBtn.textContent = 'Pause'
   }
 
   function stopTimer() {
     isRunning = false
+    startTimerBtn.textContent = 'Start'
   }
 
   function resetTimer() {
@@ -229,10 +242,8 @@ const { steps } = Astro.props
     const totalMilliseconds = Math.floor(time)
     const minutes = Math.floor((totalMilliseconds % 3600_000) / 60_000)
     const seconds = Math.floor((totalMilliseconds % 60_000) / 1000)
-    // const milliseconds = totalMilliseconds % 1000;
 
     return pad(minutes) + ':' + pad(seconds)
-    // + ":" + milliseconds.toString().padStart(3, "0");
   }
 
   function getDashArray(percent: number) {
@@ -250,19 +261,12 @@ const { steps } = Astro.props
     resetTimer()
   }
 
-  const startTimerBtn = document.getElementById('startTimer')
-  const stopTimerBtn = document.getElementById('stopTimer')
   const stopBrewBtn = document.getElementById('stopBrew')
 
-  if (startTimerBtn && stopBrewBtn && stopTimerBtn) {
+  if (startTimerBtn && stopBrewBtn) {
     startTimerBtn.addEventListener('click', () => {
-      startTimer()
+      toggleTimer()
     })
-
-    stopTimerBtn.addEventListener('click', () => {
-      stopTimer()
-    })
-
     stopBrewBtn.addEventListener('click', () => {
       stopBrew()
     })

From 8899c56e92415b722e5f0af12edc44215ffd6b11 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Wed, 15 Jan 2025 11:15:13 +0100
Subject: [PATCH 05/16] feat: move timer link above the source

I'd say the source is the least helpful information
---
 src/components/Recipe.astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Recipe.astro b/src/components/Recipe.astro
index 45cebf1..5064097 100644
--- a/src/components/Recipe.astro
+++ b/src/components/Recipe.astro
@@ -96,13 +96,13 @@ const groupedSteps = formattedSteps
     }
     <slot />
   </div>
+  {recipe.steps
+    ? <a class="timer-link" href={timerHref}>Open timer</a>
+    : null}
   <div class="source">
     <span>{messages.source}:</span>
     <Author image={recipe.authorImg} link={recipe.link} name={recipe.author} />
   </div>
-  {recipe.steps
-    ? <a class="timer-link" href={timerHref}>Open timer</a>
-    : null}
 </div>
 
 <style>

From b0e93fc58220438776a7ecb3ffeb60238b12e368 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Wed, 15 Jan 2025 11:21:43 +0100
Subject: [PATCH 06/16] feat: rollback change

I don't care much, let it be interface
---
 src/components/Timer.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Timer.astro b/src/components/Timer.astro
index 2c9323b..01e3a5b 100644
--- a/src/components/Timer.astro
+++ b/src/components/Timer.astro
@@ -1,5 +1,5 @@
 ---
-type Props = {
+interface Props {
   steps: {
     description: null | string
     time: number

From 58589712d67c88ef54e0cc8fbb478171490b2035 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Wed, 15 Jan 2025 11:31:38 +0100
Subject: [PATCH 07/16] fix: margin around timer link

---
 src/components/Recipe.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Recipe.astro b/src/components/Recipe.astro
index 5064097..e2e1640 100644
--- a/src/components/Recipe.astro
+++ b/src/components/Recipe.astro
@@ -191,7 +191,7 @@ const groupedSteps = formattedSteps
 
   .timer-link {
     display: inline-block;
-    margin-block-start: 24px;
+    margin-block: 24px;
     color: inherit;
   }
 </style>

From dd48bf89d7a685280bd7dae34a6a77d38010121b Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Wed, 15 Jan 2025 11:47:43 +0100
Subject: [PATCH 08/16] feat: strictly parse methods

---
 src/components/Recipe.astro  | 2 +-
 src/constants/brewMethods.ts | 8 ++++++++
 src/content/config.ts        | 4 +++-
 3 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 src/constants/brewMethods.ts

diff --git a/src/components/Recipe.astro b/src/components/Recipe.astro
index e2e1640..6eb0cc7 100644
--- a/src/components/Recipe.astro
+++ b/src/components/Recipe.astro
@@ -63,7 +63,7 @@ const groupedSteps = formattedSteps
 
 <div class="root">
   <h1 class="title">
-    <a class="method-link" href={methodHref}>{messages[recipe.method as keyof typeof messages]}</a> / {recipe.name}
+    <a class="method-link" href={methodHref}>{messages[recipe.method]}</a> / {recipe.name}
   </h1>
   <RecipeProperties properties={recipe.properties} />
   <div>
diff --git a/src/constants/brewMethods.ts b/src/constants/brewMethods.ts
new file mode 100644
index 0000000..86cfabd
--- /dev/null
+++ b/src/constants/brewMethods.ts
@@ -0,0 +1,8 @@
+export const BREW_METHODS = [
+  'aeropress',
+  'cezve',
+  'chemex',
+  'coldbrew',
+  'pourover',
+  'summer'
+] as const
diff --git a/src/content/config.ts b/src/content/config.ts
index a30b940..5b7b4b1 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -1,6 +1,8 @@
 /* eslint-disable perfectionist/sort-objects */
 import { defineCollection, z } from 'astro:content'
 
+import { BREW_METHODS } from '@/constants/brewMethods.ts'
+
 const recipeStep = z.object({
   description: z.string().optional(),
   time: z.string(),
@@ -13,7 +15,7 @@ const recipesCollection = defineCollection({
     title: z.string(),
     description: z.string(),
     name: z.string(),
-    method: z.string(),
+    method: z.enum(BREW_METHODS),
     properties: z.object({
       coffeeWeight: z.number(),
       water: z.number(),

From 3b29f43b214acf9455e1c1b20bea8e2802b9d4a1 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Wed, 15 Jan 2025 11:48:23 +0100
Subject: [PATCH 09/16] chore: linter

---
 src/pages/[lang]/recipes/[method]/[name]/timer.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/[lang]/recipes/[method]/[name]/timer.astro b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
index 5e75f36..26aac7e 100644
--- a/src/pages/[lang]/recipes/[method]/[name]/timer.astro
+++ b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
@@ -48,7 +48,7 @@ const formattedSteps = entry.data.steps!.map(step => ({
 }))
 ---
 
-<Layout title={entry.data.title} description={entry.data.description} author={entry.data.author}>
+<Layout author={entry.data.author} description={entry.data.description} title={entry.data.title}>
   <h1 class="title">
     <a class="link" href={methodHref}>{messages[entry.data.method]}</a>
     / <a class="link" href={recipeHref}>{entry.data.name}</a>

From 1ab12b5a30ed9e519129b31eba12e50efb0bf413 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Wed, 15 Jan 2025 12:13:50 +0100
Subject: [PATCH 10/16] feat: translate timer

---
 src/components/Timer.astro      | 17 ++++++++++++-----
 src/i18n/locales/common/en.ts   |  3 +++
 src/i18n/locales/common/ru.json |  5 ++++-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/Timer.astro b/src/components/Timer.astro
index 01e3a5b..37e967e 100644
--- a/src/components/Timer.astro
+++ b/src/components/Timer.astro
@@ -1,4 +1,5 @@
 ---
+import { commonMessages } from '@/i18n/locales/common/en'
 interface Props {
   steps: {
     description: null | string
@@ -6,11 +7,13 @@ interface Props {
     water: number
   }[]
 }
+const locale = Astro.currentLocale || 'en'
+const messages = commonMessages(locale)
 
 const { steps } = Astro.props
 ---
 
-<div data-steps={JSON.stringify(steps)} id="timer-root">
+<div data-locale={locale} data-steps={JSON.stringify(steps)} id="timer-root">
   <div class="wrapper">
     <svg viewBox="0 0 200 200">
       <!-- Background Circle -->
@@ -37,8 +40,8 @@ const { steps } = Astro.props
     </div>
   </div>
   <div class="control-panel">
-    <button class="control-panel--btn" id="startTimer">Start</button>
-    <button class="control-panel--btn" id="stopBrew">Reset</button>
+    <button class="control-panel--btn" id="startTimer">{messages.start}</button>
+    <button class="control-panel--btn" id="stopBrew">{messages.reset}</button>
   </div>
 </div>
 
@@ -144,6 +147,8 @@ const { steps } = Astro.props
 </style>
 
 <script>
+  import { commonMessages } from '@/i18n/locales/common/en'
+
   type Step = {
     description: null | string
     time: number
@@ -164,6 +169,8 @@ const { steps } = Astro.props
   const progressArc = document.getElementById('progressArc')
   const startTimerBtn = document.getElementById('startTimer')!
 
+  const messages = commonMessages(root?.dataset.locale)
+
   const steps: Step[] = root?.dataset.steps
     ? JSON.parse(root.dataset.steps).map((it: Step) => ({
       ...it,
@@ -206,12 +213,12 @@ const { steps } = Astro.props
     isRunning = true
     startTime = performance.now() - elapsedTime
     requestAnimationFrame(updateTimer)
-    startTimerBtn.textContent = 'Pause'
+    startTimerBtn.textContent = messages['pause']
   }
 
   function stopTimer() {
     isRunning = false
-    startTimerBtn.textContent = 'Start'
+    startTimerBtn.textContent = messages['start']
   }
 
   function resetTimer() {
diff --git a/src/i18n/locales/common/en.ts b/src/i18n/locales/common/en.ts
index ab2426e..03b4f24 100644
--- a/src/i18n/locales/common/en.ts
+++ b/src/i18n/locales/common/en.ts
@@ -13,11 +13,14 @@ export function commonMessages (locale?: string) {
     description: 'Recipes for brewing alternatives',
     languageName: 'English',
     menu: 'Menu',
+    pause: 'Pause',
     pourover: 'Pourover',
+    reset: 'Reset',
     sections: 'Sections',
     settings: 'Settings',
     source: 'Source',
     sourceCode: params('Source code on {link}'),
+    start: 'Start',
     summer: 'Summer',
     switchTo: params('Switch to {link}'),
     title: 'Recipes'
diff --git a/src/i18n/locales/common/ru.json b/src/i18n/locales/common/ru.json
index 00555ad..e5d54aa 100644
--- a/src/i18n/locales/common/ru.json
+++ b/src/i18n/locales/common/ru.json
@@ -15,5 +15,8 @@
   "settings": "Настройки",
   "sourceCode": "Исходный код на {link}",
   "summer": "Лето",
-  "switchTo": "Переключиться на {link}"
+  "switchTo": "Переключиться на {link}",
+  "start": "Старт",
+  "pause": "Пауза",
+  "reset": "Сбросить"
 }

From d84169b4350c4047e89fdd61e6364af4d24c4e21 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Wed, 15 Jan 2025 12:14:11 +0100
Subject: [PATCH 11/16] feat: reformat russian aeroplan-01.md

---
 .../recipes/ru/pourover/aeroplan-01.md        | 88 ++++---------------
 1 file changed, 15 insertions(+), 73 deletions(-)

diff --git a/src/content/recipes/ru/pourover/aeroplan-01.md b/src/content/recipes/ru/pourover/aeroplan-01.md
index a4ff5d0..3fb8029 100644
--- a/src/content/recipes/ru/pourover/aeroplan-01.md
+++ b/src/content/recipes/ru/pourover/aeroplan-01.md
@@ -11,86 +11,28 @@ properties:
   time: '3:25'
   temperature: 95
 
+steps:
+- description: Интенсивно по спирали
+  water: 50
+  time: '0:50'
+- description: От центра к краям кофейной таблетки
+  water: 120
+  time: '0:30'
+- description: В центр и возвращаемся к завариванию по спирали
+  water: 180
+  time: '0:40'
+- description: В центр воронки
+  water: 309
+  time: '1:25'
+
 author: Aeroplan.Coffee
 authorImg: aeroplan
 
 link: https://www.instagram.com/aeroplancoffee/
 tags:
-  - pourover
+- pourover
 ---
 
-## Рецепт
-
-
-<div class="time-line">
-
-Время
-
-Вес
-
-Итого
-
-</div>
-
-### Предсмачивание
-
-<div class="time-line">
-
-0:00
-
-50 г
-
-50 г
-
-</div>
-
-<p class="time-note">по спирали и интенсивно</p>
-
-### Вливания
-
-<div class="time-line">
-
-0:50
-
-70 г
-
-120 г
-
-</div>
-
-<p class="time-note">от центра к краям кофейной таблетки</p>
-
-
-<div class="time-line">
-
-1:20
-
-60 г
-
-180 г
-
-</div>
-
-<p class="time-note">в центр и возвращаемся к завариванию по спирали</p>
-
-<div class="time-line">
-
-2:00
-
-129 г
-
-309 г
-
-</div>
-
-<p class="time-note">в центр воронки</p>
-
-<br>
-
-Общее время экстракции __3:25__
-
-<br>
-
 <div class="info-note">
 
 ## Примечание

From 5c9ddbaa4158ab7b4392dc06aef56d2721ae7141 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Thu, 16 Jan 2025 23:47:09 +0100
Subject: [PATCH 12/16] feat: fix timer types and add group

Drop unused next step as well
---
 src/components/Timer.astro                    | 28 +++++++++++--------
 .../recipes/en/pourover/aeroplan-01.md        |  6 +++-
 .../recipes/ru/pourover/aeroplan-01.md        |  4 +++
 .../recipes/[method]/[name]/timer.astro       |  8 +++---
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/components/Timer.astro b/src/components/Timer.astro
index 37e967e..8f4272e 100644
--- a/src/components/Timer.astro
+++ b/src/components/Timer.astro
@@ -2,9 +2,10 @@
 import { commonMessages } from '@/i18n/locales/common/en'
 interface Props {
   steps: {
-    description: null | string
+    description?: string
+    group?: string
     time: number
-    water: number
+    water: string
   }[]
 }
 const locale = Astro.currentLocale || 'en'
@@ -32,11 +33,10 @@ const { steps } = Astro.props
     <div class="time segmented" id="time"></div>
     <div class="steps">
       <div class="step" id="step">
+        <div class="group" id="group"></div>
         <div id="description"></div>
         <div id="totalWeight"></div>
       </div>
-      <!--<div class="nextStep" id="nextStep">-->
-      <!--</div>-->
     </div>
   </div>
   <div class="control-panel">
@@ -52,6 +52,13 @@ const { steps } = Astro.props
     margin-inline: auto;
   }
 
+  .group {
+    color: var(--text-secondary);
+    font-size: 20px;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+
   .time {
     position: absolute;
     left: 50%;
@@ -150,9 +157,10 @@ const { steps } = Astro.props
   import { commonMessages } from '@/i18n/locales/common/en'
 
   type Step = {
-    description: null | string
+    description?: string
     time: number
     water: string
+    group?: string
   }
 
   let startTime: number
@@ -163,9 +171,9 @@ const { steps } = Astro.props
 
   const root = document.getElementById('timer-root')
   const timeSlot = document.getElementById('time')
+  const groupSlot = document.getElementById('group')
   const descriptionSlot = document.getElementById('description')
   const totalWeightSlot = document.getElementById('totalWeight')
-  const nextStepSlot = document.getElementById('nextStep')
   const progressArc = document.getElementById('progressArc')
   const startTimerBtn = document.getElementById('startTimer')!
 
@@ -179,17 +187,15 @@ const { steps } = Astro.props
     : []
 
   let step = steps[stepIndex]
-  let nextStep = steps[stepIndex + 1]
   let timeLeft = 0
 
   function updateStep(index: number) {
-    if (!descriptionSlot || !totalWeightSlot) return
+    if (!descriptionSlot || !totalWeightSlot || !groupSlot) return
     stepIndex = index
     step = steps[stepIndex]
-    nextStep = steps[stepIndex + 1]
-    descriptionSlot.textContent = step.description
+    groupSlot.textContent = step.group ?? null
+    descriptionSlot.textContent = step.description ?? null
     totalWeightSlot.textContent = step.water
-    // nextStepSlot.textContent = nextStep ? nextStep.description : "";
   }
 
   function updateTime(time: number) {
diff --git a/src/content/recipes/en/pourover/aeroplan-01.md b/src/content/recipes/en/pourover/aeroplan-01.md
index 4186f0e..e3b9f99 100644
--- a/src/content/recipes/en/pourover/aeroplan-01.md
+++ b/src/content/recipes/en/pourover/aeroplan-01.md
@@ -12,18 +12,22 @@ properties:
   temperature: 95
 
 steps:
-  - description: Pre-wetting in a spiral and intensely
+  - description: In a spiral and intensely
     water: 50
     time: "0:50"
+    group: Pre-wetting
   - description: From the center to the edges of the coffee tablet
     water: 70
     time: "0:30"
+    group: Infusions
   - description: To the center and back to spiral brewing
     water: 60
     time: "0:40"
+    group: Infusions
   - description: Into the center of the funnel
     water: 29
     time: "1:25"
+    group: Infusions
 
 author: Aeroplan.Coffee
 authorImg: aeroplan
diff --git a/src/content/recipes/ru/pourover/aeroplan-01.md b/src/content/recipes/ru/pourover/aeroplan-01.md
index 3fb8029..4ea5334 100644
--- a/src/content/recipes/ru/pourover/aeroplan-01.md
+++ b/src/content/recipes/ru/pourover/aeroplan-01.md
@@ -15,15 +15,19 @@ steps:
 - description: Интенсивно по спирали
   water: 50
   time: '0:50'
+  group: Предсмачивание
 - description: От центра к краям кофейной таблетки
   water: 120
   time: '0:30'
+  group: Вливания
 - description: В центр и возвращаемся к завариванию по спирали
   water: 180
   time: '0:40'
+  group: Вливания
 - description: В центр воронки
   water: 309
   time: '1:25'
+  group: Вливания
 
 author: Aeroplan.Coffee
 authorImg: aeroplan
diff --git a/src/pages/[lang]/recipes/[method]/[name]/timer.astro b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
index 26aac7e..d662730 100644
--- a/src/pages/[lang]/recipes/[method]/[name]/timer.astro
+++ b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
@@ -5,10 +5,10 @@ import type { CollectionEntry } from 'astro:content'
 import { getCollection } from 'astro:content'
 import { getRelativeLocaleUrl } from 'astro:i18n'
 
-import TimerComponent from '../../../../../components/Timer.astro'
-import { commonMessages } from '../../../../../i18n/locales/common/en'
-import { createPropertyFormatters } from '../../../../../i18n/utils'
-import Layout from '../../../../../layouts/Layout.astro'
+import TimerComponent from '@/components/Timer.astro'
+import { commonMessages } from '@/i18n/locales/common/en'
+import { createPropertyFormatters } from '@/i18n/utils'
+import Layout from '@/layouts/Layout.astro'
 
 interface Props {
   entry: CollectionEntry<'recipes'>

From 4d4d502ea8e671be2c5fa45a1ef254197a0550e3 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Thu, 16 Jan 2025 23:50:38 +0100
Subject: [PATCH 13/16] fix: formatting

---
 .../recipes/ru/pourover/aeroplan-01.md        | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/content/recipes/ru/pourover/aeroplan-01.md b/src/content/recipes/ru/pourover/aeroplan-01.md
index 4ea5334..fba82e9 100644
--- a/src/content/recipes/ru/pourover/aeroplan-01.md
+++ b/src/content/recipes/ru/pourover/aeroplan-01.md
@@ -12,29 +12,29 @@ properties:
   temperature: 95
 
 steps:
-- description: Интенсивно по спирали
-  water: 50
-  time: '0:50'
-  group: Предсмачивание
-- description: От центра к краям кофейной таблетки
-  water: 120
-  time: '0:30'
-  group: Вливания
-- description: В центр и возвращаемся к завариванию по спирали
-  water: 180
-  time: '0:40'
-  group: Вливания
-- description: В центр воронки
-  water: 309
-  time: '1:25'
-  group: Вливания
+  - description: Интенсивно по спирали
+    water: 50
+    time: '0:50'
+    group: Предсмачивание
+  - description: От центра к краям кофейной таблетки
+    water: 120
+    time: '0:30'
+    group: Вливания
+  - description: В центр и возвращаемся к завариванию по спирали
+    water: 180
+    time: '0:40'
+    group: Вливания
+  - description: В центр воронки
+    water: 309
+    time: '1:25'
+    group: Вливания
 
 author: Aeroplan.Coffee
 authorImg: aeroplan
 
 link: https://www.instagram.com/aeroplancoffee/
 tags:
-- pourover
+  - pourover
 ---
 
 <div class="info-note">

From 825a2eebdebde30f6e7c58072db9694c0b532ca1 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Thu, 16 Jan 2025 23:59:29 +0100
Subject: [PATCH 14/16] feat: lessen font size for mobiles

---
 src/components/Timer.astro | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Timer.astro b/src/components/Timer.astro
index 8f4272e..b1a0fe4 100644
--- a/src/components/Timer.astro
+++ b/src/components/Timer.astro
@@ -57,6 +57,10 @@ const { steps } = Astro.props
     font-size: 20px;
     text-transform: uppercase;
     font-weight: 600;
+
+    @media screen and (max-width: 500px) {
+      font-size: 14px;
+    }
   }
 
   .time {
@@ -116,15 +120,10 @@ const { steps } = Astro.props
     color: var(--text-primary);
 
     @media screen and (max-width: 500px) {
-      font-size: 20px;
+      font-size: 18px;
     }
   }
 
-  .nextStep {
-    margin-block-start: 12px;
-    color: var(--text-secondary);
-  }
-
   .baseArc {
     stroke: var(--color-timer-base-arc);
   }

From 8491479b915edb46236350c454332158c37994b2 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Tue, 21 Jan 2025 23:20:39 +0100
Subject: [PATCH 15/16] feat: ignore timers from indexing

We don't need them in the index since they are not informational
---
 public/robots.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/robots.txt b/public/robots.txt
index ce2fcc1..13a32c1 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,4 +1,5 @@
 User-agent: *
 Allow: /
+Disallow: /*/recipes/*/timer/
 
 Sitemap: https://trybrew.app/sitemap-index.xml

From dfbf9926d346aa7fc60fdf0da0f48dd2abe4c3f3 Mon Sep 17 00:00:00 2001
From: Aleksandr Slepchenkov <sl.aleksandr28@gmail.com>
Date: Tue, 21 Jan 2025 23:28:58 +0100
Subject: [PATCH 16/16] fix: use total water amount in timer

---
 src/components/Timer.astro                    |  6 ++---
 .../recipes/[method]/[name]/timer.astro       | 26 ++++++++++++-------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/Timer.astro b/src/components/Timer.astro
index b1a0fe4..4a8eb74 100644
--- a/src/components/Timer.astro
+++ b/src/components/Timer.astro
@@ -5,7 +5,7 @@ interface Props {
     description?: string
     group?: string
     time: number
-    water: string
+    totalWater: string
   }[]
 }
 const locale = Astro.currentLocale || 'en'
@@ -158,7 +158,7 @@ const { steps } = Astro.props
   type Step = {
     description?: string
     time: number
-    water: string
+    totalWater: string
     group?: string
   }
 
@@ -194,7 +194,7 @@ const { steps } = Astro.props
     step = steps[stepIndex]
     groupSlot.textContent = step.group ?? null
     descriptionSlot.textContent = step.description ?? null
-    totalWeightSlot.textContent = step.water
+    totalWeightSlot.textContent = step.totalWater
   }
 
   function updateTime(time: number) {
diff --git a/src/pages/[lang]/recipes/[method]/[name]/timer.astro b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
index d662730..2aebfff 100644
--- a/src/pages/[lang]/recipes/[method]/[name]/timer.astro
+++ b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
@@ -9,7 +9,9 @@ import TimerComponent from '@/components/Timer.astro'
 import { commonMessages } from '@/i18n/locales/common/en'
 import { createPropertyFormatters } from '@/i18n/utils'
 import Layout from '@/layouts/Layout.astro'
+import { humanTimeToSeconds } from '@/utils'
 
+type Entry = CollectionEntry<'recipes'>
 interface Props {
   entry: CollectionEntry<'recipes'>
 }
@@ -34,18 +36,22 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths
 const { weight } = createPropertyFormatters(Astro.currentLocale)
 
-function timeToSeconds (s: string) {
-  const coefficients = [1, 60, 24 * 60]
-  return s.split(':').map(Number).reverse().reduce((acc, cur, index) => acc + cur * coefficients[index], 0)
-}
-
 const methodHref = getRelativeLocaleUrl(locale, `/recipes/${method}`)
 const recipeHref = getRelativeLocaleUrl(locale, `/recipes/${method}/${name}`)
-const formattedSteps = entry.data.steps!.map(step => ({
-  ...step,
-  time: timeToSeconds(step.time),
-  water: weight(step.water)
-}))
+const formattedSteps = entry.data.steps!
+  .reduce<({ totalWater: number } & Exclude<Entry['data']['steps'], undefined>[number])[]>((acc, step, index) => {
+    const previousStepTotalWater = index > 0 ? acc[index - 1].totalWater : 0
+    acc.push({
+      ...step,
+      totalWater: step.water + previousStepTotalWater
+    })
+    return acc
+  }, [])
+  .map(step => ({
+    ...step,
+    time: humanTimeToSeconds(step.time),
+    totalWater: weight(step.totalWater)
+  }))
 ---
 
 <Layout author={entry.data.author} description={entry.data.description} title={entry.data.title}>