@jjlmoya/utils-cooking 1.24.0 → 1.25.0

package/src/tool/yeast-converter/index.ts

@@ -0,0 +1,11 @@
+import type { ToolDefinition } from '../../types';
+import { yeastConverter } from './entry';
+
+export * from './entry';
+
+export const YEAST_CONVERTER_TOOL: ToolDefinition = {
+	entry: yeastConverter,
+	Component: () => import('./component.astro'),
+	SEOComponent: () => import('./seo.astro'),
+	BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/yeast-converter/init.ts

@@ -0,0 +1,277 @@
+type YeastType = 'fresh' | 'dry' | 'sourdough';
+type UnitType = 'g' | 'oz' | 'lb' | 'mg';
+
+interface ConversionResult {
+	fresh: number | null;
+	dry: number | null;
+	sourdough: number | null;
+	flourAdjustment: number | null;
+	waterAdjustment: number | null;
+}
+
+const UNIT_TO_GRAMS: Record<UnitType, number> = {
+	g: 1,
+	oz: 28.3495,
+	lb: 453.592,
+	mg: 0.001,
+};
+
+function toGrams(amount: number, unit: UnitType): number {
+	return amount * UNIT_TO_GRAMS[unit];
+}
+
+function fromGrams(amount: number, unit: UnitType): number {
+	return amount / UNIT_TO_GRAMS[unit];
+}
+
+function calculateFreshYeast(amount: number): ConversionResult {
+	return {
+		fresh: amount,
+		dry: amount / 3,
+		sourdough: amount * 5,
+		flourAdjustment: (amount * 5) / 2,
+		waterAdjustment: (amount * 5) / 2,
+	};
+}
+
+function calculateDryYeast(amount: number): ConversionResult {
+	return {
+		dry: amount,
+		fresh: amount * 3,
+		sourdough: amount * 15,
+		flourAdjustment: (amount * 15) / 2,
+		waterAdjustment: (amount * 15) / 2,
+	};
+}
+
+function calculateSourdough(amount: number): ConversionResult {
+	return {
+		sourdough: amount,
+		fresh: amount / 5,
+		dry: amount / 15,
+		flourAdjustment: amount / 2,
+		waterAdjustment: amount / 2,
+	};
+}
+
+function calculateConversions(amount: number, sourceType: YeastType): ConversionResult {
+	if (amount <= 0) {
+		return { fresh: null, dry: null, sourdough: null, flourAdjustment: null, waterAdjustment: null };
+	}
+
+	if (sourceType === 'fresh') return calculateFreshYeast(amount);
+	if (sourceType === 'dry') return calculateDryYeast(amount);
+	return calculateSourdough(amount);
+}
+
+interface ConverterContext {
+	amountInput: HTMLInputElement;
+	sourceSelect: HTMLSelectElement;
+	unitSelect: HTMLSelectElement;
+	resultsContainer: HTMLDivElement;
+	ui: Record<string, string>;
+}
+
+const STORAGE_KEYS = {
+	unit: 'yeast-converter-unit',
+	amount: 'yeast-converter-amount',
+	sourceType: 'yeast-converter-source',
+};
+
+function saveToStorage(key: string, value: string): void {
+	try {
+		localStorage.setItem(key, value);
+	} catch {
+	}
+}
+
+function loadFromStorage(key: string, defaultValue: string): string {
+	try {
+		return localStorage.getItem(key) ?? defaultValue;
+	} catch {
+		return defaultValue;
+	}
+}
+
+function formatAmount(amount: number | null): string {
+	if (amount === null || isNaN(amount)) return '—';
+	if (Number.isInteger(amount)) return amount.toString();
+	const rounded = Math.round(amount * 100) / 100;
+	return rounded.toString();
+}
+
+function getResultItems(
+	result: ConversionResult,
+	sourceType: YeastType,
+	unit: UnitType,
+	ui: Record<string, string>,
+): Array<{ label: string; value: number | null; unit: UnitType }> {
+	const items: Array<{ label: string; value: number | null; unit: UnitType }> = [];
+	if (sourceType !== 'fresh') {
+		const value = result.fresh !== null ? fromGrams(result.fresh, unit) : null;
+		items.push({ label: ui.freshYeast, value, unit });
+	}
+	if (sourceType !== 'dry') {
+		const value = result.dry !== null ? fromGrams(result.dry, unit) : null;
+		items.push({ label: ui.dryYeast, value, unit });
+	}
+	if (sourceType !== 'sourdough') {
+		const value = result.sourdough !== null ? fromGrams(result.sourdough, unit) : null;
+		items.push({ label: ui.sourdough, value, unit });
+	}
+	return items;
+}
+
+function renderResultRows(container: HTMLDivElement, items: Array<{ label: string; value: number | null; unit: string }>): void {
+	items.forEach((item) => {
+		const row = document.createElement('div');
+		row.className = 'yc-result-row';
+		row.innerHTML = `<span class="yc-result-label">${item.label}</span><span class="yc-result-value">${formatAmount(item.value)} ${item.unit}</span>`;
+		container.appendChild(row);
+	});
+}
+
+function renderAdjustmentCard(container: HTMLDivElement, result: ConversionResult, unit: UnitType, ui: Record<string, string>): void {
+	const adjustmentCard = document.createElement('div');
+	adjustmentCard.className = 'yc-adjustment-card';
+	const flourValue = result.flourAdjustment !== null ? fromGrams(result.flourAdjustment, unit) : null;
+	const waterValue = result.waterAdjustment !== null ? fromGrams(result.waterAdjustment, unit) : null;
+	adjustmentCard.innerHTML = `<h4 class="yc-adjustment-title">${ui.recipeAdjustment}</h4><div class="yc-adjustment-items"><div class="yc-adjustment-item"><span class="yc-adjustment-label">${ui.flourSubtract}</span><span class="yc-adjustment-value">${formatAmount(flourValue)} ${unit}</span></div><div class="yc-adjustment-item"><span class="yc-adjustment-label">${ui.waterSubtract}</span><span class="yc-adjustment-value">${formatAmount(waterValue)} ${unit}</span></div></div>`;
+	container.appendChild(adjustmentCard);
+}
+
+interface RenderState {
+	result: ConversionResult;
+	sourceType: YeastType;
+	unit: UnitType;
+}
+
+function renderResults(container: HTMLDivElement, state: RenderState, ctx: ConverterContext): void {
+	container.innerHTML = '';
+
+	if (state.result.fresh === null) {
+		container.innerHTML = `<div class="yc-empty-state"><p>${ctx.ui.enterAmount}</p></div>`;
+		return;
+	}
+
+	const items = getResultItems(state.result, state.sourceType, state.unit, ctx.ui);
+	renderResultRows(container, items);
+
+	if (state.sourceType === 'sourdough') {
+		renderAdjustmentCard(container, state.result, state.unit, ctx.ui);
+	}
+}
+
+function updateState(ctx: ConverterContext): void {
+	const amount = parseFloat(ctx.amountInput.value) || 0;
+	const sourceType = (ctx.sourceSelect.value || 'fresh') as YeastType;
+	const unit = (ctx.unitSelect.value || 'g') as UnitType;
+	const amountInGrams = toGrams(amount, unit);
+	const result = calculateConversions(amountInGrams, sourceType);
+	const state: RenderState = { result, sourceType, unit };
+	renderResults(ctx.resultsContainer, state, ctx);
+}
+
+function buildYeastLines(result: ConversionResult, unit: UnitType): string {
+	const lines: string[] = [];
+	if (result.fresh !== null) lines.push(`Fresh Yeast: ${formatAmount(fromGrams(result.fresh, unit))}${unit}`);
+	if (result.dry !== null) lines.push(`Dry Yeast: ${formatAmount(fromGrams(result.dry, unit))}${unit}`);
+	if (result.sourdough !== null) lines.push(`Sourdough Starter: ${formatAmount(fromGrams(result.sourdough, unit))}${unit}`);
+	return lines.join('\n');
+}
+
+function buildCopyText(result: ConversionResult, sourceType: YeastType, unit: UnitType): string {
+	let text = buildYeastLines(result, unit);
+
+	if (sourceType === 'sourdough' && result.flourAdjustment !== null && result.waterAdjustment !== null) {
+		text += '\n\nRecipe Adjustment:\n';
+		const flourVal = formatAmount(fromGrams(result.flourAdjustment, unit));
+		const waterVal = formatAmount(fromGrams(result.waterAdjustment, unit));
+		text += `Flour to subtract: ${flourVal}${unit}\n`;
+		text += `Water to subtract: ${waterVal}${unit}`;
+	}
+	return text;
+}
+
+function setupCopyButton(copyBtn: HTMLButtonElement, ctx: ConverterContext): void {
+	copyBtn.addEventListener('click', () => {
+		const amount = parseFloat(ctx.amountInput.value) || 0;
+		const sourceType = (ctx.sourceSelect.value || 'fresh') as YeastType;
+		const unit = (ctx.unitSelect.value || 'g') as UnitType;
+		const amountInGrams = toGrams(amount, unit);
+		const result = calculateConversions(amountInGrams, sourceType);
+		const textToCopy = buildCopyText(result, sourceType, unit);
+
+		navigator.clipboard.writeText(textToCopy).then(() => {
+			const originalText = copyBtn.innerHTML;
+			copyBtn.textContent = ctx.ui.copied ?? 'Copied!';
+			copyBtn.classList.add('yc-copied');
+			setTimeout(() => {
+				copyBtn.innerHTML = originalText;
+				copyBtn.classList.remove('yc-copied');
+			}, 2000);
+		});
+	});
+}
+
+function setupResetButton(resetBtn: HTMLButtonElement, ctx: ConverterContext, update: () => void): void {
+	resetBtn.addEventListener('click', () => {
+		ctx.amountInput.value = '';
+		ctx.sourceSelect.value = 'fresh';
+		update();
+	});
+}
+
+function restoreSavedState(
+	amountInput: HTMLInputElement,
+	sourceSelect: HTMLSelectElement,
+	unitSelect: HTMLSelectElement,
+): void {
+	unitSelect.value = loadFromStorage(STORAGE_KEYS.unit, 'g');
+	amountInput.value = loadFromStorage(STORAGE_KEYS.amount, '');
+	sourceSelect.value = loadFromStorage(STORAGE_KEYS.sourceType, 'fresh');
+}
+
+function setupEventListeners(
+	ctx: ConverterContext,
+	resetBtn: HTMLButtonElement,
+	copyBtn: HTMLButtonElement,
+	update: () => void,
+): void {
+	ctx.amountInput.addEventListener('input', () => {
+		saveToStorage(STORAGE_KEYS.amount, ctx.amountInput.value);
+		update();
+	});
+
+	ctx.sourceSelect.addEventListener('change', () => {
+		saveToStorage(STORAGE_KEYS.sourceType, ctx.sourceSelect.value);
+		update();
+	});
+
+	ctx.unitSelect.addEventListener('change', () => {
+		saveToStorage(STORAGE_KEYS.unit, ctx.unitSelect.value);
+		update();
+	});
+
+	setupResetButton(resetBtn, ctx, update);
+	setupCopyButton(copyBtn, ctx);
+}
+
+export function initYeastConverter(ui: Record<string, string>): void {
+	const amountInput = document.getElementById('yeast-amount') as HTMLInputElement | null;
+	const sourceSelect = document.getElementById('yeast-source') as HTMLSelectElement | null;
+	const unitSelect = document.getElementById('yeast-unit') as HTMLSelectElement | null;
+	const resetBtn = document.getElementById('reset-btn') as HTMLButtonElement | null;
+	const resultsContainer = document.getElementById('results-container') as HTMLDivElement | null;
+	const copyBtn = document.getElementById('copy-btn') as HTMLButtonElement | null;
+
+	if (!amountInput || !sourceSelect || !unitSelect || !resultsContainer || !resetBtn || !copyBtn) {
+		return;
+	}
+
+	restoreSavedState(amountInput, sourceSelect, unitSelect);
+	const ctx: ConverterContext = { amountInput, sourceSelect, unitSelect, resultsContainer, ui };
+	const update = () => updateState(ctx);
+	setupEventListeners(ctx, resetBtn, copyBtn, update);
+	update();
+}

package/src/tool/yeast-converter/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { YEAST_CONVERTER_TOOL } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+	locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await YEAST_CONVERTER_TOOL.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/yeast-converter/yeast-converter-fresh-dry-sourdough-starter.css

@@ -0,0 +1,388 @@
+:root {
+	--yc-primary: hsl(220deg, 90%, 56%);
+	--yc-primary-light: hsl(220deg, 90%, 92%);
+	--yc-bg-card: hsl(0deg, 0%, 100%);
+	--yc-bg-app: hsl(210deg, 20%, 98%);
+	--yc-border: hsl(210deg, 20%, 90%);
+	--yc-text-main: hsl(210deg, 30%, 20%);
+	--yc-text-muted: hsl(210deg, 15%, 50%);
+	--yc-shadow-lg: 0 10px 15px -3px rgb(0, 0, 0, 0.1);
+	--yc-radius: 1rem;
+	--yc-white: hsl(0deg, 0%, 100%);
+}
+
+.theme-dark {
+	--yc-bg-card: hsl(220deg, 25%, 12%);
+	--yc-bg-app: hsl(220deg, 30%, 7%);
+	--yc-border: hsl(220deg, 20%, 20%);
+	--yc-text-main: hsl(210deg, 20%, 95%);
+	--yc-text-muted: hsl(210deg, 15%, 70%);
+	--yc-primary-light: hsl(220deg, 90%, 12%);
+}
+
+.yeast-converter-container {
+	max-width: 100%;
+	padding: 1.5rem;
+	background: var(--yc-bg-card);
+	border: 1px solid var(--yc-border);
+	border-radius: var(--yc-radius);
+	box-shadow: var(--yc-shadow-lg);
+}
+
+.yc-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 1.5rem;
+	margin-bottom: 2rem;
+}
+
+@media (min-width: 768px) {
+	.yc-grid {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+.yc-section {
+	background: var(--yc-bg-app);
+	padding: 1.5rem;
+	border-radius: 1.25rem;
+	border: 1px solid var(--yc-border);
+}
+
+.yc-section-primary {
+	background: var(--yc-bg-card);
+	border: 2px solid var(--yc-primary);
+}
+
+.yc-section-title {
+	font-size: 1.125rem;
+	font-weight: 700;
+	color: var(--yc-text-main);
+	margin-bottom: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.yc-section-primary .yc-section-title {
+	color: var(--yc-primary);
+}
+
+.yc-type-selector {
+	position: relative;
+	margin-bottom: 1rem;
+}
+
+.yc-select {
+	width: 100%;
+	padding: 0.75rem 2.5rem 0.75rem 1rem;
+	border-radius: 0.75rem;
+	border: 1px solid var(--yc-border);
+	background: var(--yc-bg-card);
+	color: var(--yc-text-main);
+	font-weight: 600;
+	font-size: 1rem;
+	appearance: none;
+	cursor: pointer;
+	transition: border-color 0.2s;
+}
+
+.yc-select:hover {
+	border-color: var(--yc-primary);
+}
+
+.yc-select:focus {
+	outline: none;
+	border-color: var(--yc-primary);
+	box-shadow: 0 0 0 3px var(--yc-primary-light);
+}
+
+.yc-select-icon {
+	position: absolute;
+	right: 0.75rem;
+	top: 50%;
+	transform: translateY(-50%);
+	pointer-events: none;
+	color: var(--yc-text-muted);
+	width: 1.25rem;
+	height: 1.25rem;
+}
+
+.yc-field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.yc-label {
+	font-size: 0.75rem;
+	font-weight: 700;
+	color: var(--yc-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+.yc-input-wrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.yc-input {
+	width: 100%;
+	padding: 0.75rem 2.5rem 0.75rem 1rem;
+	border-radius: 0.75rem;
+	border: 1px solid var(--yc-border);
+	background: var(--yc-bg-card);
+	color: var(--yc-text-main);
+	font-weight: 600;
+	font-size: 1.125rem;
+	text-align: left;
+	transition: border-color 0.2s;
+}
+
+.yc-input:focus {
+	outline: none;
+	border-color: var(--yc-primary);
+	box-shadow: 0 0 0 3px var(--yc-primary-light);
+}
+
+.yc-input::placeholder {
+	color: var(--yc-text-muted);
+}
+
+.yc-unit-select {
+	position: absolute;
+	right: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	background: var(--yc-bg-card);
+	border: 1px solid var(--yc-border);
+	color: var(--yc-text-main);
+	font-weight: 600;
+	font-size: 0.875rem;
+	cursor: pointer;
+	padding: 0.5rem 0.75rem;
+	appearance: none;
+	padding-right: 1.75rem;
+	border-radius: 0.5rem;
+}
+
+.yc-unit-select:hover {
+	border-color: var(--yc-primary);
+	background: var(--yc-primary-light);
+}
+
+.yc-unit-select:focus {
+	outline: none;
+	border-color: var(--yc-primary);
+	box-shadow: 0 0 0 3px var(--yc-primary-light);
+}
+
+.yc-reset-btn {
+	width: 100%;
+	padding: 0.75rem;
+	margin-top: 1rem;
+	border: 1px solid var(--yc-border);
+	background: transparent;
+	color: var(--yc-text-muted);
+	border-radius: 0.75rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+}
+
+.yc-reset-btn:hover {
+	border-color: var(--yc-primary);
+	color: var(--yc-primary);
+	background: var(--yc-primary-light);
+}
+
+.yc-reset-btn svg {
+	width: 1.125rem;
+	height: 1.125rem;
+}
+
+.yc-results-card {
+	padding: 1.5rem;
+	background: var(--yc-bg-app);
+	border: 1px solid var(--yc-border);
+	border-radius: 1.25rem;
+}
+
+.yc-results-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 1.5rem;
+	gap: 1rem;
+}
+
+.yc-results-title {
+	font-size: 1.125rem;
+	font-weight: 700;
+	color: var(--yc-text-main);
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin: 0;
+}
+
+.yc-results-title svg {
+	width: 1.5rem;
+	height: 1.5rem;
+	color: var(--yc-primary);
+}
+
+.yc-copy-btn {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.625rem 1rem;
+	background: var(--yc-primary);
+	color: var(--yc-white);
+	border: none;
+	border-radius: 0.75rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s;
+	white-space: nowrap;
+}
+
+.yc-copy-btn:hover {
+	background: hsl(220deg, 90%, 50%);
+	transform: translateY(-2px);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.yc-copy-btn.yc-copied {
+	background: hsl(120deg, 50%, 50%);
+}
+
+.yc-copy-btn svg {
+	width: 1.125rem;
+	height: 1.125rem;
+}
+
+.yc-results-container {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.yc-empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 1rem;
+	padding: 2rem 1rem;
+	text-align: center;
+	color: var(--yc-text-muted);
+}
+
+.yc-empty-icon {
+	width: 3rem;
+	height: 3rem;
+	opacity: 0.5;
+}
+
+.yc-empty-state p {
+	margin: 0;
+	font-size: 0.95rem;
+}
+
+.yc-result-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem;
+	background: var(--yc-bg-card);
+	border: 1px solid var(--yc-border);
+	border-radius: 0.75rem;
+	transition: all 0.2s;
+}
+
+.yc-result-row:hover {
+	border-color: var(--yc-primary);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.yc-result-label {
+	font-weight: 600;
+	color: var(--yc-text-main);
+}
+
+.yc-result-value {
+	font-weight: 700;
+	color: var(--yc-primary);
+	font-size: 1.125rem;
+}
+
+.yc-adjustment-card {
+	padding: 1.5rem;
+	background: hsl(120deg, 50%, 95%);
+	border: 1px solid hsl(120deg, 50%, 80%);
+	border-radius: 0.75rem;
+	margin-top: 1rem;
+}
+
+.theme-dark .yc-adjustment-card {
+	background: hsl(120deg, 30%, 20%);
+	border-color: hsl(120deg, 30%, 35%);
+}
+
+.yc-adjustment-title {
+	font-size: 0.95rem;
+	font-weight: 700;
+	color: hsl(120deg, 60%, 30%);
+	margin: 0 0 1rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.theme-dark .yc-adjustment-title {
+	color: hsl(120deg, 60%, 70%);
+}
+
+.yc-adjustment-items {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.yc-adjustment-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.5rem 0;
+	border-bottom: 1px solid hsl(120deg, 50%, 85%);
+}
+
+.theme-dark .yc-adjustment-item {
+	border-bottom-color: hsl(120deg, 30%, 40%);
+}
+
+.yc-adjustment-item:last-child {
+	border-bottom: none;
+}
+
+.yc-adjustment-label {
+	color: var(--yc-text-main);
+	font-weight: 500;
+}
+
+.yc-adjustment-value {
+	color: hsl(120deg, 60%, 30%);
+	font-weight: 700;
+	font-size: 1.05rem;
+}
+
+.theme-dark .yc-adjustment-value {
+	color: hsl(120deg, 60%, 70%);
+}

package/src/tools.ts

@@ -12,6 +12,7 @@ import { INGREDIENT_RESCALER_TOOL } from './tool/ingredient-rescaler';
 import { SOURDOUGH_CALCULATOR_TOOL } from './tool/sourdough-calculator';
 import { ROUX_GUIDE_TOOL } from './tool/roux-guide';
 import { COOKWARE_GUIDE_TOOL } from './tool/cookware-guide';
+import { YEAST_CONVERTER_TOOL } from './tool/yeast-converter';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   AMERICAN_KITCHEN_CONVERTER_TOOL,
@@ -26,6 +27,7 @@ export const ALL_TOOLS: ToolDefinition[] = [
   SOURDOUGH_CALCULATOR_TOOL,
   ROUX_GUIDE_TOOL,
   COOKWARE_GUIDE_TOOL,
+  YEAST_CONVERTER_TOOL,
 ];