diff --git a/src/components/Recipe.astro b/src/components/Recipe.astro index 25c38c6..bac0281 100644 --- 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[number])[]>((acc, step, index) => { + ?.reduce<({ endTime: number; startTime: number; totalWater: number } & Exclude[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 <>

Recipe

- + - - - - + - - - {formattedSteps.map(it => { + + + + + + + + + {formattedSteps.slice(1).map(it => { return ( - - + @@ -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 index e180037..aa83552 100644 --- 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 new file mode 100644 index 0000000..f3d69cf --- /dev/null +++ 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 new file mode 100644 index 0000000..19611ee --- /dev/null +++ b/src/i18n/locales/recipe/ru.json @@ -0,0 +1,4 @@ +{ + "infusions": "Вливания", + "prewetting": "Предсмачивание" +}
Total timeWeightTotal weightNotes + {recipeMessages.prewetting} +
{formattedSteps[0].startTime} ⇒ {formattedSteps[0].endTime}{formattedSteps[0].totalWater}{formattedSteps[0].description}
+ {recipeMessages.infusions} +
{it.totalTime}{it.water}{it.startTime} ⇒ {it.endTime} {it.totalWater} {it.description}