@jjlmoya/utils-cooking 1.23.0 → 1.25.0

package/src/tool/roux-guide/roux-ratio-calculator-thickening-sauce-guide.css

@@ -1,21 +1,483 @@
 :root {
-		--rg-primary: hsl(38deg, 92%, 50%);
-		--rg-primary-light: hsl(38deg, 92%, 90%);
-		--rg-secondary: hsl(25deg, 95%, 53%);
-		--rg-bg-card: hsl(0deg, 0%, 100%);
-		--rg-bg-app: hsl(210deg, 20%, 98%);
-		--rg-border: hsl(210deg, 20%, 90%);
-		--rg-text-main: hsl(210deg, 30%, 20%);
-		--rg-text-muted: hsl(210deg, 15%, 50%);
-		--rg-shadow-lg: 0 10px 15px -3px rgb(0, 0, 0, 0.1);
-		--rg-radius: 1rem;
+	--rg-primary: hsl(38deg, 92%, 50%);
+	--rg-primary-light: hsl(38deg, 92%, 90%);
+	--rg-secondary: hsl(25deg, 95%, 53%);
+	--rg-bg-card: hsl(0deg, 0%, 100%);
+	--rg-bg-app: hsl(210deg, 20%, 98%);
+	--rg-border: hsl(210deg, 20%, 90%);
+	--rg-text-main: hsl(210deg, 30%, 20%);
+	--rg-text-muted: hsl(210deg, 15%, 50%);
+	--rg-shadow-lg: 0 10px 15px -3px rgb(0, 0, 0, 0.1);
+	--rg-radius: 1rem;
+}
+
+.theme-dark {
+	--rg-bg-card: hsl(220deg, 25%, 12%);
+	--rg-bg-app: hsl(220deg, 30%, 7%);
+	--rg-border: hsl(220deg, 20%, 20%);
+	--rg-text-main: hsl(210deg, 20%, 95%);
+	--rg-text-muted: hsl(210deg, 15%, 70%);
+	--rg-primary-light: hsl(38deg, 92%, 12%);
+}
+
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+.rg-container {
+	width: 100%;
+	max-width: 100%;
+	padding: 1rem;
+}
+
+.rg-card {
+	background: var(--rg-bg-card);
+	border: 1px solid var(--rg-border);
+	border-radius: var(--rg-radius);
+	box-shadow: var(--rg-shadow-lg);
+	overflow: hidden;
+}
+
+.rg-progress-wrapper {
+	height: 0.375rem;
+	width: 100%;
+	background: var(--rg-bg-app);
+	position: relative;
+}
+
+.rg-progress-bar {
+	height: 100%;
+	background: linear-gradient(to right, var(--rg-primary), var(--rg-secondary));
+	transition: width 0.3s ease;
+	width: 50%;
+}
+
+.rg-content {
+	padding: 2rem;
+}
+
+@media (max-width: 1024px) {
+	.rg-content {
+		padding: 1.5rem;
+	}
+}
+
+@media (max-width: 640px) {
+	.rg-content {
+		padding: 1rem;
+	}
+}
+
+.rg-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 3rem;
+}
+
+@media (min-width: 1024px) {
+	.rg-grid {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+.rg-controls {
+	display: flex;
+	flex-direction: column;
+	gap: 2.5rem;
+}
+
+.rg-control-group {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.rg-label {
+	font-size: 0.75rem;
+	font-weight: 700;
+	color: var(--rg-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+
+.rg-step {
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 50%;
+	background: hsl(38deg, 92%, 90%);
+	color: var(--rg-primary);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 700;
+	font-size: 0.75rem;
+}
+
+.theme-dark .rg-step {
+	background: hsl(38deg, 92%, 12%);
+}
+
+.rg-volume-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+@media (min-width: 640px) {
+	.rg-volume-wrapper {
+		flex-direction: row;
+		gap: 1rem;
+	}
+}
+
+.rg-input-group {
+	position: relative;
+	flex: 1;
+}
+
+.rg-input {
+	width: 100%;
+	padding: 1rem 2rem 1rem 1rem;
+	border: 2px solid var(--rg-border);
+	border-radius: 0.75rem;
+	background: var(--rg-bg-app);
+	color: var(--rg-text-main);
+	font-weight: 600;
+	font-size: 1.875rem;
+	text-align: center;
+	transition: all 0.3s ease;
+}
+
+.rg-input:focus {
+	outline: none;
+	border-color: var(--rg-primary);
+	box-shadow: 0 0 0 3px hsl(38deg, 92%, 50%, 0.1);
+}
+
+.rg-unit {
+	position: absolute;
+	right: 1rem;
+	top: 50%;
+	transform: translateY(-50%);
+	color: var(--rg-text-muted);
+	font-weight: 600;
+	font-size: 0.875rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	pointer-events: none;
+}
+
+.rg-liquid-buttons {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+	.rg-liquid-buttons {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.rg-liquid-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.75rem;
+	border: 2px solid var(--rg-border);
+	border-radius: 0.75rem;
+	background: var(--rg-bg-card);
+	color: var(--rg-text-muted);
+	cursor: pointer;
+	transition: all 0.3s ease;
+}
+
+.rg-liquid-btn:hover {
+	border-color: var(--rg-primary);
+	color: var(--rg-primary);
+}
+
+.rg-liquid-btn.active {
+	background: var(--rg-bg-app);
+	border-color: var(--rg-primary);
+	color: var(--rg-primary);
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.rg-btn-icon {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+.rg-texture-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 0.75rem;
+}
+
+@media (min-width: 640px) {
+	.rg-texture-grid {
+		grid-template-columns: repeat(4, 1fr);
 	}
+}
+
+.rg-texture-btn {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 1rem 0.75rem;
+	border: 2px solid var(--rg-border);
+	border-radius: 0.75rem;
+	background: var(--rg-bg-card);
+	color: var(--rg-text-muted);
+	cursor: pointer;
+	transition: all 0.3s ease;
+	text-align: center;
+}
+
+.rg-texture-btn:hover {
+	border-color: var(--rg-primary);
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.rg-texture-btn.active {
+	background: var(--rg-primary-light);
+	border-color: var(--rg-primary);
+	color: var(--rg-primary);
+}
+
+.rg-texture-visual {
+	width: 1.5rem;
+	height: 1.5rem;
+	border: 1px solid currentcolor;
+	border-radius: 0.25rem;
+	overflow: hidden;
+	display: flex;
+	align-items: flex-end;
+}
+
+.rg-texture-bar {
+	width: 100%;
+	background: currentcolor;
+	transition: height 0.3s ease;
+}
+
+.rg-texture-btn[data-level="1"] .rg-texture-bar {
+	height: 25%;
+}
+
+.rg-texture-btn[data-level="2"] .rg-texture-bar {
+	height: 50%;
+}
+
+.rg-texture-btn[data-level="3"] .rg-texture-bar {
+	height: 75%;
+}
+
+.rg-texture-btn[data-level="4"] .rg-texture-bar {
+	height: 100%;
+}
+
+.rg-texture-label {
+	font-size: 0.75rem;
+	font-weight: 600;
+	line-height: 1.2;
+}
+
+.rg-results {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+.rg-result-hero {
+	background: linear-gradient(135deg, var(--rg-primary), var(--rg-secondary));
+	border-radius: var(--rg-radius);
+	padding: 2rem;
+	color: var(--rg-bg-card);
+	box-shadow: var(--rg-shadow-lg);
+	position: relative;
+	overflow: hidden;
+}
+
+.rg-result-hero::before {
+	content: '';
+	position: absolute;
+	top: -50%;
+	left: -50%;
+	width: 200%;
+	height: 200%;
+	background: radial-gradient(circle, hsla(0deg, 0%, 100%, 0.1), transparent 60%);
+	pointer-events: none;
+}
+
+.rg-result-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 1.5rem;
+	position: relative;
+	z-index: 1;
+}
+
+.rg-result-label {
+	font-size: 0.75rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+	opacity: 0.8;
+}
+
+.rg-roux-type {
+	font-size: 0.75rem;
+	font-weight: 600;
+	background: hsla(0deg, 0%, 0%, 0.2);
+	padding: 0.5rem 1rem;
+	border-radius: 0.5rem;
+	text-transform: capitalize;
+}
+
+.rg-result-amounts {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	margin-bottom: 1.5rem;
+	position: relative;
+	z-index: 1;
+	text-align: center;
+}
+
+.rg-amount {
+	flex: 1;
+}
+
+.rg-amount-value {
+	font-size: 2.5rem;
+	font-weight: 800;
+	margin-bottom: 0.5rem;
+	line-height: 1;
+}
+
+.rg-amount-unit {
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	opacity: 0.8;
+}
+
+.rg-amount-plus {
+	font-size: 1.5rem;
+	opacity: 0.3;
+	margin: 0 1rem;
+}
+
+.rg-instructions-box {
+	background: hsla(0deg, 0%, 0%, 0.2);
+	border-radius: 0.75rem;
+	border: 1px solid hsla(0deg, 0%, 100%, 0.1);
+	padding: 1rem;
+	position: relative;
+	z-index: 1;
+	backdrop-filter: blur(4px);
+}
+
+.rg-instructions-header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-bottom: 0.75rem;
+	color: hsl(38deg, 92%, 90%);
+}
+
+.rg-instructions-icon {
+	width: 1rem;
+	height: 1rem;
+}
+
+.rg-instructions-title {
+	font-size: 0.75rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+}
+
+.rg-instructions-text {
+	font-size: 0.875rem;
+	font-weight: 500;
+	line-height: 1.5;
+	color: hsl(38deg, 92%, 95%);
+	margin: 0;
+}
+
+.rg-sauce-info {
+	background: var(--rg-bg-app);
+	border: 1px solid var(--rg-border);
+	border-radius: var(--rg-radius);
+	padding: 1.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.rg-sauce-header {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	margin-bottom: 0.5rem;
+}
+
+.rg-sauce-icon {
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: 0.5rem;
+	background: hsl(38deg, 92%, 90%);
+	color: var(--rg-primary);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.theme-dark .rg-sauce-icon {
+	background: hsl(38deg, 92%, 12%);
+}
+
+.rg-icon-lg {
+	width: 1.25rem;
+	height: 1.25rem;
+}
+
+.rg-sauce-name {
+	font-size: 1rem;
+	font-weight: 700;
+	color: var(--rg-text-main);
+	flex: 1;
+}
+
+.rg-sauce-ratio {
+	font-size: 0.75rem;
+	font-weight: 700;
+	color: var(--rg-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	white-space: nowrap;
+}
 
-	.theme-dark {
-		--rg-bg-card: hsl(220deg, 25%, 12%);
-		--rg-bg-app: hsl(220deg, 30%, 7%);
-		--rg-border: hsl(220deg, 20%, 20%);
-		--rg-text-main: hsl(210deg, 20%, 95%);
-		--rg-text-muted: hsl(210deg, 15%, 70%);
-		--rg-primary-light: hsl(38deg, 92%, 12%);
-	}
+.rg-sauce-tip {
+	font-size: 0.875rem;
+	font-weight: 500;
+	line-height: 1.6;
+	color: var(--rg-text-muted);
+	font-style: italic;
+	background: var(--rg-bg-card);
+	padding: 1rem;
+	border-radius: 0.75rem;
+	border: 1px solid var(--rg-border);
+	margin: 0;
+}

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

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

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

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

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

@@ -0,0 +1,14 @@
+export const bibliography = [
+		{
+			name: 'Tartine Bread - Chad Robertson',
+			url: 'https://www.penguinrandomhouse.com/books/310016/tartine-bread-by-chad-robertson/',
+		},
+		{
+			name: 'The Flavor Bible - Scaling and Ratios',
+			url: 'https://www.flavorprints.com/',
+		},
+		{
+			name: 'Full Proof Baking - Guides on Sourdough',
+			url: 'https://www.fullproofbaking.com/',
+		},
+	];

package/src/tool/sourdough-calculator/i18n/de.ts

@@ -1,4 +1,5 @@
 import type { ToolLocaleContent } from '../../../types';
+import { bibliography } from '../bibliography';
 
 const title = "Sauerteig Rechner: Fermentationsverhältnisse";
 const description = "Berechnen Sie automatisch die Proportionen von Sauerteig, Mehl und Wasser zur Pflege Ihres Ansatzes. Vordefinierte oder benutzerdefinierte Verhältnisse.";
@@ -72,15 +73,7 @@ export const content: ToolLocaleContent = {
 	title,
 	description,
 	faqTitle: 'Häufig gestellte Fragen',
-	faq,
-	bibliographyTitle: 'Bibliografie',
-	bibliography: [
-		{
-			name: 'Tartine Bread - Chad Robertson',
-			url: 'https://www.penguinrandomhouse.com/books/310016/tartine-bread-by-chad-robertson/',
-		},
-	],
-	howTo,
+	faq,  howTo,
 	seo: [
 		{
 			type: 'title',
@@ -138,5 +131,6 @@ export const content: ToolLocaleContent = {
 		totalDough: 'Gesamtgewicht',
 		mm: 'ASG',
 	},
+  bibliography,
 	schemas: [faqSchema, howToSchema, appSchema],
 };

package/src/tool/sourdough-calculator/i18n/en.ts

@@ -1,4 +1,5 @@
 import type { ToolLocaleContent } from '../../../types';
+import { bibliography } from '../bibliography';
 
 const title = "Sourdough Starter Feeding Calculator";
 const description = "Automatically calculate exact proportions of starter, flour, and water for your sourdough maintenance and feeding. Preset or custom ratios available.";
@@ -97,23 +98,7 @@ export const content: ToolLocaleContent = {
       question: 'Does the calculator round the grams?',
       answer: 'Yes. It rounds to the nearest whole number for practicality. For maximum precision, use a digital scale; however, small rounding differences won\'t significantly impact fermentation.',
     },
-  ],
-  bibliographyTitle: 'Bibliography & Resources',
-  bibliography: [
-    {
-      name: 'Tartine Bread - Chad Robertson',
-      url: 'https://www.penguinrandomhouse.com/books/310016/tartine-bread-by-chad-robertson/',
-    },
-    {
-      name: 'The Flavor Bible - Scaling and Ratios',
-      url: 'https://www.flavorprints.com/',
-    },
-    {
-      name: 'Full Proof Baking - Guides on Sourdough',
-      url: 'https://www.fullproofbaking.com/',
-    },
-  ],
-  howTo: [
+  ],  howTo: [
     {
       name: 'Enter total amount needed',
       text: 'Define the total weight of sourdough starter you need for your recipe (e.g., 300g for a typical loaf).',
@@ -309,5 +294,6 @@ export const content: ToolLocaleContent = {
     totalDough: 'Total Dough',
     mm: 'ST',
   },
+  bibliography,
   schemas: [faqSchema, howToSchema, appSchema],
 };

package/src/tool/sourdough-calculator/i18n/es.ts

@@ -1,4 +1,5 @@
 import type { ToolLocaleContent } from '../../../types';
+import { bibliography } from '../bibliography';
 
 const title = "Calculadora de Masa Madre Ratios de Fermentación";
 const description = "Calcula automáticamente las proporciones de masa madre, harina y agua para mantener tu cultivo. Ratios predefinidos o personalizados.";
@@ -97,23 +98,7 @@ export const content: ToolLocaleContent = {
 			question: '¿La calculadora redondea los gramos?',
 			answer: 'Sí. Redondea al número entero más cercano para practicidad. Si necesitas máxima precisión, usa una báscula digital. Los pequeños redondeos no afectan significativamente la fermentación.',
 		},
-	],
-	bibliographyTitle: 'Bibliografía',
-	bibliography: [
-		{
-			name: 'Tartine Bread - Chad Robertson',
-			url: 'https://www.penguinrandomhouse.com/books/310016/tartine-bread-by-chad-robertson/',
-		},
-		{
-			name: 'The Flavor Bible - Scaling and Ratios',
-			url: 'https://www.flavorprints.com/',
-		},
-		{
-			name: 'Full Proof Baking - Guides on Sourdough',
-			url: 'https://www.fullproofbaking.com/',
-		},
-	],
-	howTo: [
+	],  howTo: [
 		{
 			name: 'Ingresa la cantidad total que necesitas',
 			text: 'Define el peso total de masa madre que requieres para tu receta (ej: 300g para un pan típico).',
@@ -127,7 +112,7 @@ export const content: ToolLocaleContent = {
 			text: 'La calculadora te muestra cuánto de masa madre, harina y agua necesitas. Mezcla estos ingredientes y deja fermentar según tu protocolo.',
 		},
 	],
-	seo: [
+  seo: [
 		{
 			type: 'title',
 			text: 'Guía Maestra para el Mantenimiento y Refresco de Masa Madre',
@@ -310,5 +295,6 @@ export const content: ToolLocaleContent = {
 		totalDough: 'Total Masa',
 		mm: 'MM',
 	},
+  bibliography,
 	schemas: [faqSchema, howToSchema, appSchema],
 };

package/src/tool/sourdough-calculator/i18n/fr.ts

@@ -1,4 +1,5 @@
 import type { ToolLocaleContent } from "../../../types";
+import { bibliography } from '../bibliography';
 
 const title = "Calculateur de Rafraîchissement du Levain";
 const description = "Le choix le plus courant en boulangerie artisanale moderne. Très facile à mélanger et à incorporer.";
@@ -109,21 +110,6 @@ export const content: ToolLocaleContent = {
         "Oui. Il arrondit à l'entier le plus proche par praticité. Pour une précision maximale, utilisez une balance digitale ; toutefois, de petits écarts d'arrondi n'impactent pas significativement la fermentation.",
     },
   ],
-  bibliographyTitle: "Bibliographie et Ressources",
-  bibliography: [
-    {
-      name: "Tartine Bread - Chad Robertson",
-      url: "https://www.penguinrandomhouse.com/books/310016/tartine-bread-by-chad-robertson/",
-    },
-    {
-      name: "The Flavor Bible - Scaling and Ratios",
-      url: "https://www.flavorprints.com/",
-    },
-    {
-      name: "Full Proof Baking - Guides on Sourdough",
-      url: "https://www.fullproofbaking.com/",
-    },
-  ],
   howTo: [
     {
       name: "Entrez la quantité totale",
@@ -320,5 +306,6 @@ export const content: ToolLocaleContent = {
     totalDough: "Total Levain",
     mm: "Levain",
   },
+  bibliography,
   schemas: [faqSchema, howToSchema, appSchema],
 };