Incrustar · Cooking Chart

En una línea

Carga el script una vez y escribe la receta en CCL dentro de <cooking-chart>. La sangría da igual.

<script src="https://cookingchart.org/embed.js" defer></script>

<cooking-chart>
  receta "Tostada con tomate"
  ingredientes
    pan     1 rebanada
    tomate  1 ud
    aceite  1 cda
  tostada = tostar(pan) 3min desatendido
  rallado = rallar(tomate) 2min
  plato   = montar(tostada, rallado, aceite) 1min
  servir plato
</cooking-chart>

Resultado

receta "Tostada con tomate" ingredientes pan 1 rebanada tomate 1 ud aceite 1 cda tostada = tostar(pan) 3min desatendido rallado = rallar(tomate) 2min plato = montar(tostada, rallado, aceite) 1min servir plato

Desde un fichero .ccl

Si tus recetas viven en ficheros, apunta a ellos con src. Con controls el lector puede alternar entre lo antes posible y justo a tiempo.

Los ficheros de tu propia web funcionan siempre; los de otro dominio necesitan que ese servidor permita CORS.

<cooking-chart src="/recetas/pan_casero.ccl" controls></cooking-chart>

Resultado

Gráfico, plan y modo de elaboración

Además del gráfico, el componente puede mostrar la receta como texto: el modo de elaboración, con frases en el orden en que se cocina, y el plan de trabajo, paso a paso con sus minutos. Elige cuáles con view; si son varias, salen en pestañas en ese orden.

Con schema, la receta se publica también como datos estructurados de schema.org, los que usan los buscadores para mostrar recetas.

<cooking-chart src="/recetas/tacos_pollo.ccl" view="method chart plan" schema></cooking-chart>

Resultado

En Markdown

Si tu blog es estático (Hugo, Astro, Jekyll, Eleventy…), no hace falta HTML: cualquier bloque de código marcado como ccl se convierte solo en un gráfico.

<!-- Una sola vez, en la plantilla de tu blog -->
<script src="https://cookingchart.org/embed.js" defer></script>

<!-- En cualquier artículo .md -->
```ccl
receta "Huevo pasado por agua"
ingredientes
  huevo 1 ud
  agua  500 ml
agua_hirviendo = hervir(agua) 5min
huevo_cocido   = cocer(huevo, agua_hirviendo) 6min sin espera
servir huevo_cocido
```

Opciones

Atributos de <cooking-chart>. Todos son opcionales.

Atributo	Valores	Qué hace
src	URL	Carga la receta de un fichero `.ccl` en lugar del texto de la etiqueta.
mode	`asap` · `jit`	Lo antes posible o justo a tiempo. Por defecto, el `plan` que declare la receta.
lang	`es` · `en`	Fuerza el idioma de los textos del gráfico. Por defecto, el de la receta.
controls	—	Muestra el selector de planificación.
variant	`signature`	Miniatura sin texto: la firma visual de la receta.
view	`chart` · `method` · `plan` · `all`	Qué mostrar: gráfico, modo de elaboración o plan de trabajo. Varias separadas por espacios salen en pestañas. Por defecto, `chart`.
schema	—	Publica la receta como JSON-LD de schema.org/Recipe en la página.

Con un iframe

Para plataformas que no dejan añadir scripts pero sí iframes. El editor genera el código con el botón Incrustar. La receta viaja en el hash de la URL (lo que va detrás de #), que el navegador nunca envía al servidor.

<iframe src="https://cookingchart.org/e#ccl=cmVjZXRhICJ4Ii…"
        width="100%" height="420" style="border:0"
        loading="lazy" title="Lasaña boloñesa"></iframe>

Como imagen

Si la plataforma no admite ni scripts ni iframes (redes sociales, algunos gestores de newsletters), usa Descargar SVG en el editor. Pierdes la interactividad, pero el dibujo es idéntico y escala sin perder calidad.

JavaScript

El script expone window.CookingChart y cada <cooking-chart> tiene una pequeña API.

<cooking-chart id="mi-receta"></cooking-chart>

<script>
  const el = document.getElementById('mi-receta');

  // Cambiar la receta: se vuelve a dibujar
  el.source = textoDeLaReceta;

  // Saber cuándo se ha dibujado (y si había errores)
  el.addEventListener('cooking-chart:render', e => {
    const { recipe, diagnostics, ok } = e.detail;
  });

  // Validar sin dibujar
  const { ok, diagnostics } = CookingChart.parse(texto, { locale: 'es' });
</script>

API	Qué hace
el.source = texto	Cambia la receta del elemento y la vuelve a dibujar.
cooking-chart:render	Evento tras cada dibujo; `detail` trae la receta, los diagnósticos y si es válida.
CookingChart.parse(texto, opciones)	Analiza una receta sin dibujarla. `{ locale: "es" }` para mensajes en español.
CookingChart.prepare(receta, modo)	Planifica una receta analizada: horarios, holguras, carriles.
CookingChart.method(planificada)	El modo de elaboración como datos: ingredientes, utensilios y frases por momento.
CookingChart.schema(planificada)	El objeto schema.org/Recipe, para publicarlo como prefieras.
CookingChart.upgrade(raíz)	Convierte bloques `ccl` añadidos después de cargar la página.
CookingChart.registerPack(paquete)	Registra un paquete de vocabulario (ver más abajo).

Estilo

El gráfico va dentro de un Shadow DOM: los estilos de tu web no lo rompen y los suyos no tocan tu web. Ocupa el ancho de su contenedor; para limitarlo, dale estilo a la etiqueta. La tarjeta interior se expone como ::part(card).

Los colores de los pasos forman parte del estándar y no se cambian: así cualquier lector reconoce un Cooking Chart en cualquier web.

cooking-chart { max-width: 960px; margin: 2rem auto; }

/* La tarjeta interior se puede retocar desde fuera */
cooking-chart::part(card) { border-radius: 0; border-color: #ddd; }

Vocabulario propio

Si tus recetas usan verbos que no están en el vocabulario base (una marca de robot de cocina, técnicas de pastelería…), registra un paquete y actívalo en la receta con usa "nombre". Para algo puntual basta con un verbo con prefijo x- y @tipo:.

<script src="https://cookingchart.org/embed.js"></script>
<script>
  CookingChart.registerPack({
    id: 'thermomix', version: '0.1',
    names: { es: 'thermomix', en: 'thermomix' },
    verbs: [
      // [id, tipo, atención, formas en español, formas en inglés]
      ['varoma', 'heat', 'passive', 'cocer_al_vapor', 'steam'],
      ['turbo',  'prep', 'active',  'turbo',          'turbo']
    ]
  });
</script>
<!-- y en la receta:  usa "thermomix" -->

Privacidad

El script no usa cookies, no rastrea y no envía tus recetas a ningún sitio: todo el análisis y el dibujo ocurren en el navegador del lector. Solo descarga la librería de dibujo (d3) de un CDN público si tu página no la tiene ya.