@jjlmoya/utils-cooking 1.2.0

package/src/tool/roux-guide/index.ts

@@ -0,0 +1,24 @@
+import type { CookingToolEntry, ToolDefinition } from '../../types';
+import RouxGuideComponent from './component.astro';
+import RouxGuideSEO from './seo.astro';
+import RouxGuideBibliography from './bibliography.astro';
+
+export const rouxGuide: CookingToolEntry = {
+	id: 'roux-guide',
+	icons: {
+		bg: 'mdi:chef-hat',
+		fg: 'mdi:pot-mix',
+	},
+	i18n: {
+		es: () => import('./i18n/es').then((m) => m.content),
+		en: () => import('./i18n/en').then((m) => m.content),
+		fr: () => import('./i18n/fr').then((m) => m.content),
+	},
+};
+
+export const ROUX_GUIDE_TOOL: ToolDefinition = {
+	entry: rouxGuide,
+	Component: RouxGuideComponent,
+	SEOComponent: RouxGuideSEO,
+	BibliographyComponent: RouxGuideBibliography,
+};

package/src/tool/roux-guide/init.ts

@@ -0,0 +1,187 @@
+type LiquidType = 'milk' | 'lightStock' | 'darkStock' | 'tomato';
+type TextureLevel = 1 | 2 | 3 | 4;
+
+interface LiquidConfig {
+	name: string;
+	rouxType: 'white' | 'blond' | 'brown';
+	tip: string;
+}
+
+interface RouxInfo {
+	label: string;
+	time: string;
+	description: string;
+}
+
+interface State {
+	volume: number;
+	liquid: LiquidType;
+	level: TextureLevel;
+}
+
+const VISCOSITY_RATIOS: Record<TextureLevel, number> = {
+	1: 50,
+	2: 90,
+	3: 130,
+	4: 185,
+};
+
+const LIQUID_CONFIG: Record<LiquidType, LiquidConfig> = {
+	milk: {
+		name: 'Béchamel',
+		rouxType: 'white',
+		tip: 'Usa leche fría. Añádela gradualmente al principio o de golpe si bates fuerte.',
+	},
+	lightStock: {
+		name: 'Velouté',
+		rouxType: 'blond',
+		tip: 'Usa fondo de ave o pescado. Deja que el roux huela a galleta antes de ligar.',
+	},
+	darkStock: {
+		name: 'Espagnole',
+		rouxType: 'brown',
+		tip: 'Para salsas oscuras potentes. El roux debe estar color chocolate, pero sin quemarse.',
+	},
+	tomato: {
+		name: 'Salsa de Tomate',
+		rouxType: 'blond',
+		tip: 'El roux ayudará a dar cuerpo y suavidad a la textura final del tomate.',
+	},
+};
+
+const ROUX_INFO: Record<'white' | 'blond' | 'brown', RouxInfo> = {
+	white: {
+		label: 'Blanco',
+		time: '2-3 min',
+		description: 'Cocina solo hasta perder el olor a harina cruda. Sin color.',
+	},
+	blond: {
+		label: 'Rubio',
+		time: '5-8 min',
+		description: 'Busca un color de mantequilla tostada y un aroma a nueces.',
+	},
+	brown: {
+		label: 'Oscuro',
+		time: '15-20 min',
+		description: 'Fuego muy suave. Color chocolate. Nota: requiere un 10% más de peso.',
+	},
+};
+
+interface RouxElements {
+	volumeInput: HTMLInputElement;
+	liquidBtns: NodeListOf<Element>;
+	textureBtns: NodeListOf<Element>;
+	progressBar: HTMLElement;
+	butterOut: HTMLElement;
+	flourOut: HTMLElement;
+	rouxLabel: HTMLElement;
+	cookInst: HTMLElement;
+	sauceName: HTMLElement;
+	ratioDisp: HTMLElement;
+	chefTip: HTMLElement;
+}
+
+function getRequiredElements(): Record<string, HTMLElement | null> {
+	return {
+		volumeInput: document.getElementById('volume-input'),
+		progressBar: document.getElementById('progress-bar'),
+		butterOut: document.getElementById('butter-output'),
+		flourOut: document.getElementById('flour-output'),
+		rouxLabel: document.getElementById('roux-type-label'),
+		cookInst: document.getElementById('cooking-instructions'),
+		sauceName: document.getElementById('sauce-name'),
+		ratioDisp: document.getElementById('ratio-display'),
+		chefTip: document.getElementById('chef-tip'),
+	};
+}
+
+function validateElements(els: Record<string, HTMLElement | null>): boolean {
+	const requiredKeys = ['volumeInput', 'progressBar', 'butterOut', 'flourOut', 'rouxLabel', 'cookInst', 'sauceName', 'ratioDisp', 'chefTip'];
+	return requiredKeys.every((key) => els[key]);
+}
+
+function setupElements(): RouxElements | null {
+	const els = getRequiredElements();
+	if (!validateElements(els)) return null;
+
+	const volumeInput = els.volumeInput as HTMLInputElement;
+	return {
+		volumeInput,
+		liquidBtns: document.querySelectorAll('.liquid-btn'),
+		textureBtns: document.querySelectorAll('.texture-btn'),
+		progressBar: els.progressBar as HTMLElement,
+		butterOut: els.butterOut as HTMLElement,
+		flourOut: els.flourOut as HTMLElement,
+		rouxLabel: els.rouxLabel as HTMLElement,
+		cookInst: els.cookInst as HTMLElement,
+		sauceName: els.sauceName as HTMLElement,
+		ratioDisp: els.ratioDisp as HTMLElement,
+		chefTip: els.chefTip as HTMLElement,
+	};
+}
+
+function setupLiquidButtons(els: RouxElements, state: State, updateCalculations: () => void): void {
+	els.liquidBtns.forEach((btn) => {
+		btn.addEventListener('click', () => {
+			els.liquidBtns.forEach((b) => {
+				b.classList.remove('active', 'bg-white', 'dark:bg-slate-700', 'shadow-md', 'ring-2', 'ring-indigo-500/20');
+			});
+			btn.classList.add('active', 'bg-white', 'dark:bg-slate-700', 'shadow-md', 'ring-2', 'ring-indigo-500/20');
+			state.liquid = (btn as HTMLElement).dataset.type as LiquidType || 'milk';
+			updateCalculations();
+		});
+	});
+}
+
+function setupTextureButtons(els: RouxElements, state: State, updateCalculations: () => void): void {
+	els.textureBtns.forEach((btn) => {
+		btn.addEventListener('click', () => {
+			els.textureBtns.forEach((b) => {
+				b.classList.remove('active', 'border-amber-500/50', 'bg-amber-50', 'dark:bg-amber-900/10');
+				b.classList.add('border-slate-100', 'dark:border-slate-800', 'bg-white', 'dark:bg-slate-900');
+			});
+
+			btn.classList.remove('border-slate-100', 'dark:border-slate-800', 'bg-white', 'dark:bg-slate-900');
+			btn.classList.add('active', 'border-amber-500/50', 'bg-amber-50', 'dark:bg-amber-900/10');
+			state.level = parseInt((btn as HTMLElement).dataset.level || '2') as TextureLevel;
+			updateCalculations();
+		});
+	});
+}
+
+function updateDisplay(els: RouxElements, state: State): void {
+	const config = LIQUID_CONFIG[state.liquid];
+	const baseRatio = VISCOSITY_RATIOS[state.level];
+	const liters = state.volume / 1000;
+	const correctionFactor = config.rouxType === 'brown' ? 1.15 : 1.0;
+	const totalRoux = Math.round(baseRatio * liters * correctionFactor);
+	const each = Math.round(totalRoux / 2);
+
+	els.butterOut.textContent = each.toString();
+	els.flourOut.textContent = each.toString();
+
+	const info = ROUX_INFO[config.rouxType];
+	els.rouxLabel.textContent = info.label;
+	els.cookInst.textContent = `${info.description} (${info.time})`;
+	els.sauceName.textContent = config.name;
+	els.ratioDisp.textContent = `${totalRoux}g/L`;
+	els.chefTip.textContent = `"${config.tip}"`;
+	els.progressBar.style.width = `${(state.level / 4) * 100}%`;
+}
+
+export function initRouxGuide(): void {
+	const els = setupElements();
+	if (!els) return;
+
+	const state: State = { volume: 1000, liquid: 'milk', level: 2 };
+	const updateCalculations = () => updateDisplay(els, state);
+
+	els.volumeInput.addEventListener('input', (e) => {
+		state.volume = parseInt((e.target as HTMLInputElement).value) || 0;
+		updateCalculations();
+	});
+
+	setupLiquidButtons(els, state, updateCalculations);
+	setupTextureButtons(els, state, updateCalculations);
+	updateCalculations();
+}

package/src/tool/roux-guide/seo.astro

@@ -0,0 +1,8 @@
+---
+import { SEORenderer } from "@jjlmoya/utils-shared";
+import { content } from "./i18n/es";
+
+const locale = "es";
+---
+
+<SEORenderer content={{ sections: content.seo, locale }} />

package/src/tool/sourdough-calculator/SourdoughCalculator.css

@@ -0,0 +1,369 @@
+:root {
+	--sc-primary: hsl(38deg, 92%, 50%);
+	--sc-primary-light: hsl(38deg, 92%, 90%);
+	--sc-success: hsl(142deg, 72%, 45%);
+	--sc-bg-card: hsl(0deg, 0%, 100%);
+	--sc-bg-app: hsl(210deg, 20%, 98%);
+	--sc-border: hsl(210deg, 20%, 90%);
+	--sc-text-main: hsl(210deg, 30%, 20%);
+	--sc-text-muted: hsl(210deg, 15%, 50%);
+	--sc-text-disabled: hsl(210deg, 15%, 75%);
+	--sc-shadow-md: 0 4px 6px -1px rgb(0, 0, 0, 0.1);
+	--sc-shadow-lg: 0 10px 15px -3px rgb(0, 0, 0, 0.1);
+	--sc-radius: 1rem;
+	--sc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-dark {
+	--sc-bg-card: hsl(220deg, 25%, 12%);
+	--sc-bg-app: hsl(220deg, 30%, 7%);
+	--sc-border: hsl(220deg, 20%, 20%);
+	--sc-text-main: hsl(210deg, 20%, 95%);
+	--sc-text-muted: hsl(210deg, 15%, 70%);
+	--sc-text-disabled: hsl(210deg, 15%, 50%);
+	--sc-primary-light: hsl(38deg, 92%, 12%);
+}
+
+.sourdough-calculator {
+	width: 100%;
+	max-width: 100%;
+	padding: 2rem;
+	background: var(--sc-bg-card);
+	border: 1px solid var(--sc-border);
+	border-radius: var(--sc-radius);
+	box-shadow: var(--sc-shadow-lg);
+}
+
+.sc-header {
+	width: 100%;
+	height: 0.5rem;
+	background: var(--sc-primary);
+	border-radius: var(--sc-radius) var(--sc-radius) 0 0;
+	margin: -2rem -2rem 2rem;
+}
+
+.sc-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 3rem;
+}
+
+@media (min-width: 1024px) {
+	.sc-grid {
+		grid-template-columns: 2fr 3fr;
+	}
+
+	.sc-grid > * {
+		min-width: 0;
+	}
+}
+
+.sc-section {
+	display: flex;
+	flex-direction: column;
+	gap: 2.5rem;
+}
+
+.sc-control-group {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.sc-label {
+	font-size: 0.875rem;
+	font-weight: 700;
+	color: var(--sc-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.sc-input {
+	width: 100%;
+	padding: 1rem;
+	border: 2px solid var(--sc-border);
+	border-radius: 0.75rem;
+	background: var(--sc-bg-app);
+	color: var(--sc-text-main);
+	font-weight: 600;
+	font-size: 2rem;
+	text-align: center;
+	transition: var(--sc-transition);
+}
+
+.sc-input:focus {
+	outline: none;
+	border-color: var(--sc-primary);
+	box-shadow: 0 0 0 3px hsl(38deg, 92%, 50%, 0.1);
+}
+
+.sc-input::placeholder {
+	color: var(--sc-text-disabled);
+}
+
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+.sc-ratio-buttons {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 0.75rem;
+}
+
+.ratio-btn {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 0.75rem 0.5rem;
+	border-radius: 0.75rem;
+	border: 2px solid var(--sc-border);
+	background: var(--sc-bg-app);
+	color: var(--sc-text-muted);
+	font-weight: 600;
+	cursor: pointer;
+	transition: var(--sc-transition);
+}
+
+.ratio-btn:hover {
+	border-color: var(--sc-primary);
+	color: var(--sc-primary);
+}
+
+.ratio-btn.ratio-active {
+	background: var(--sc-primary-light);
+	border-color: var(--sc-primary);
+	color: var(--sc-primary);
+	box-shadow: var(--sc-shadow-md);
+}
+
+.ratio-btn.ratio-inactive {
+	background: var(--sc-bg-app);
+	border-color: var(--sc-border);
+	color: var(--sc-text-muted);
+}
+
+.sc-ratio-label {
+	font-size: 0.625rem;
+	text-transform: uppercase;
+	opacity: 0.75;
+	margin-bottom: 0.25rem;
+}
+
+.sc-ratio-value {
+	font-size: 1.125rem;
+	font-weight: 700;
+}
+
+.sc-custom-inputs {
+	display: none;
+	gap: 1.5rem;
+	padding: 1.5rem;
+	background: var(--sc-bg-app);
+	border-radius: 0.75rem;
+	border: 1px solid var(--sc-border);
+}
+
+.sc-custom-inputs.visible {
+	display: flex;
+	justify-content: space-around;
+	align-items: flex-end;
+}
+
+.sc-custom-input-group {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.custom-input {
+	padding: 0.75rem;
+	border: 1px solid var(--sc-border);
+	border-radius: 0.5rem;
+	background: var(--sc-bg-card);
+	color: var(--sc-text-main);
+	width: 80px;
+	text-align: center;
+	font-weight: 600;
+	font-size: 1rem;
+	transition: var(--sc-transition);
+}
+
+.custom-input:focus {
+	outline: none;
+	border-color: var(--sc-primary);
+}
+
+.sc-custom-label {
+	font-size: 0.625rem;
+	text-transform: uppercase;
+	font-weight: 700;
+	color: var(--sc-text-muted);
+	margin-bottom: 0.25rem;
+	display: block;
+	text-align: center;
+}
+
+.sc-results {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.sc-results-header {
+	padding: 1rem;
+	background: var(--sc-bg-app);
+	border: 1px solid var(--sc-border);
+	border-radius: 0.75rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.sc-results-title {
+	font-size: 0.75rem;
+	font-weight: 700;
+	color: var(--sc-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+.sc-hydration-badge {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--sc-primary);
+	background: var(--sc-primary-light);
+	padding: 0.25rem 0.75rem;
+	border-radius: 9999px;
+}
+
+.sc-result-rows {
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+	border: 1px solid var(--sc-border);
+	border-radius: 0.75rem;
+	overflow: hidden;
+}
+
+.sc-result-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem;
+	border-bottom: 1px solid var(--sc-border);
+	transition: var(--sc-transition);
+}
+
+.sc-result-row:last-child {
+	border-bottom: none;
+}
+
+.sc-result-row:hover {
+	background: var(--sc-primary-light);
+}
+
+.sc-result-content {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	flex: 1;
+}
+
+.sc-result-icon {
+	width: 3rem;
+	height: 3rem;
+	border-radius: 0.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5rem;
+}
+
+.sc-result-icon.starter {
+	background: hsl(38deg, 92%, 90%);
+	color: var(--sc-primary);
+}
+
+.theme-dark .sc-result-icon.starter {
+	background: hsl(38deg, 92%, 15%);
+}
+
+.sc-result-icon.flour {
+	background: hsl(45deg, 93%, 90%);
+	color: hsl(45deg, 93%, 50%);
+}
+
+.theme-dark .sc-result-icon.flour {
+	background: hsl(45deg, 93%, 15%);
+}
+
+.sc-result-icon.water {
+	background: hsl(196deg, 95%, 90%);
+	color: hsl(196deg, 95%, 50%);
+}
+
+.theme-dark .sc-result-icon.water {
+	background: hsl(196deg, 95%, 15%);
+}
+
+.sc-result-name {
+	font-weight: 700;
+	color: var(--sc-text-main);
+	font-size: 1.125rem;
+}
+
+.sc-result-desc {
+	font-size: 0.875rem;
+	color: var(--sc-text-muted);
+}
+
+.sc-result-value {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 0.25rem;
+}
+
+.sc-result-amount {
+	font-size: 1.875rem;
+	font-weight: 800;
+	color: var(--sc-text-main);
+	line-height: 1;
+}
+
+.sc-result-unit {
+	font-size: 0.875rem;
+	color: var(--sc-text-muted);
+	font-weight: 600;
+}
+
+.sc-total {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	gap: 1rem;
+	padding: 1rem;
+	margin-top: 1rem;
+	opacity: 0.75;
+}
+
+.sc-total-label {
+	font-size: 0.875rem;
+	font-weight: 600;
+	color: var(--sc-text-muted);
+	text-transform: uppercase;
+}
+
+.sc-total-value {
+	font-size: 1.25rem;
+	font-weight: 700;
+	color: var(--sc-text-main);
+}

package/src/tool/sourdough-calculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { content } from './i18n/es';
+---
+
+<Bibliography links={content.bibliography} />