@eduardoalvarez/arrecife 0.5.0 → 0.6.0

package/dist/og/index.js

@@ -1,36 +1,36 @@
-import { RUTA_ASSETS, caras, poses, aletas } from '../chunk-E3OMP2DL.js';
-import { fonts, dark, light, naming, gradient, tagline, typeScale } from '../chunk-TSPJOM6K.js';
+import { ASSETS_PATH, faces, poses, fins } from '../chunk-CKRSQPTX.js';
+import { fonts, dark, light, naming, gradient, tagline, typeScale } from '../chunk-O4TAH7YJ.js';
 import '../chunk-MLKGABMK.js';
 
-// src/og/plantillas.ts
+// src/og/templates.ts
 var OG = {
   width: 1200,
   height: 630,
-  margen: 64,
-  /** Alto máximo de la mascota. */
-  mascota: 430,
-  /** La aleta de la firma. */
-  aletaFirma: 34,
+  margin: 64,
+  /** The mascot's maximum height. */
+  mascot: 430,
+  /** The signature's fin. */
+  signatureFin: 34,
   /**
-   * Hueco que deja la columna cuando la pose va a la izquierda (curso).
+   * The gap the column leaves when the pose goes on the left (course).
    *
-   * Son 560 y no 420 porque una pose completa a 430 de alto mide ~534 de ancho:
-   * con el hueco justo, el tiburón se comía el titular. La reserva se mide por
-   * el ancho real de la pose, no por el margen.
+   * It is 560 and not 420 because a full pose at 430 tall measures ~534 wide:
+   * with the exact gap, the shark ate into the headline. The reserve is measured
+   * by the pose's real width, not by the margin.
    */
-  reservaMascota: 560
+  mascotReserve: 560
 };
 function el(type, props, children) {
   return { type, props: children === void 0 ? props : { ...props, children } };
 }
-function caja(style, children) {
+function box(style, children) {
   return el("div", { style: { display: "flex", ...style } }, children);
 }
-function texto(style, contenido) {
-  return el("div", { style: { display: "flex", ...style } }, contenido);
+function text(style, content) {
+  return el("div", { style: { display: "flex", ...style } }, content);
 }
-function eyebrow(contenido, color) {
-  return texto(
+function eyebrow(content, color) {
+  return text(
     {
       fontFamily: fonts.mono,
       fontSize: 20,
@@ -38,11 +38,11 @@ function eyebrow(contenido, color) {
       textTransform: "uppercase",
       color
     },
-    contenido
+    content
   );
 }
-function titular(contenido, color) {
-  return texto(
+function headline(content, color) {
+  return text(
     {
       fontFamily: fonts.display,
       fontSize: 58,
@@ -50,8 +50,8 @@ function titular(contenido, color) {
       lineHeight: 1.06,
       letterSpacing: typeScale.h1.tracking,
       color,
-      // 70 % del LIENZO, no de la columna. Con la mascota en su propia columna
-      // el 70 % relativo daba ~400px y el titular se truncaba a media palabra.
+      // 70 % of the CANVAS, not of the column. With the mascot in a column of
+      // its own, a relative 70 % gave ~400px and the headline truncated mid-word.
       maxWidth: OG.width * 0.7,
       display: "-webkit-box",
       WebkitBoxOrient: "vertical",
@@ -59,144 +59,144 @@ function titular(contenido, color) {
       overflow: "hidden",
       textOverflow: "ellipsis"
     },
-    contenido
+    content
   );
 }
-function firma(contenido, color, modo, base) {
-  return caja({ alignItems: "center", gap: 14 }, [
+function signature(content, color, mode, base) {
+  return box({ alignItems: "center", gap: 14 }, [
     el("img", {
       alt: "",
-      src: `${base}/${modo === "oscuro" ? aletas.espuma : aletas.color}`,
-      height: OG.aletaFirma,
-      style: { height: OG.aletaFirma }
+      src: `${base}/${mode === "dark" ? fins.foam : fins.color}`,
+      height: OG.signatureFin,
+      style: { height: OG.signatureFin }
     }),
-    texto({ fontFamily: fonts.mono, fontSize: 21, color }, contenido)
+    text({ fontFamily: fonts.mono, fontSize: 21, color }, content)
   ]);
 }
-function tarjeta(opciones) {
-  const columna = caja(
+function card(options) {
+  const column = box(
     {
       position: "relative",
       flexDirection: "column",
       justifyContent: "space-between",
       width: "100%",
       height: "100%",
-      padding: OG.margen,
-      // Cuando la pose va a la izquierda hay que dejarle el hueco: es lo único
-      // que cambia de la retícula, y solo lo hace la plantilla de curso.
-      paddingLeft: opciones.mascotaIzquierda ? OG.reservaMascota : OG.margen
+      padding: OG.margin,
+      // When the pose goes on the left it needs the gap left for it: it is the
+      // only thing that changes in the grid, and only the course template does it.
+      paddingLeft: options.mascotaIzquierda ? OG.mascotReserve : OG.margin
     },
     [
-      eyebrow(opciones.eyebrow.texto, opciones.eyebrow.color),
-      caja({ flexDirection: "column", gap: 18 }, [
-        titular(opciones.title, opciones.tinta),
-        opciones.bajada ? texto(
+      eyebrow(options.eyebrow.text, options.eyebrow.color),
+      box({ flexDirection: "column", gap: 18 }, [
+        headline(options.title, options.tinta),
+        options.bajada ? text(
           {
             fontFamily: fonts.sans,
             fontSize: 26,
-            color: opciones.tintaSecundaria,
+            color: options.tintaSecundaria,
             maxWidth: OG.width * 0.7
           },
-          opciones.bajada
+          options.bajada
         ) : null
       ]),
-      firma(opciones.firma, opciones.firmaColor, opciones.modo, opciones.base)
+      signature(options.signature, options.firmaColor, options.mode, options.base)
     ]
   );
-  return caja(
+  return box(
     {
       position: "relative",
       width: OG.width,
       height: OG.height,
-      backgroundImage: opciones.fondo,
-      backgroundColor: opciones.modo === "oscuro" ? dark.background : light.background,
+      backgroundImage: options.background,
+      backgroundColor: options.mode === "dark" ? dark.background : light.background,
       fontFamily: fonts.sans,
       overflow: "hidden"
     },
     [
-      opciones.mascota ? caja(
+      options.mascot ? box(
         {
           position: "absolute",
           bottom: 0,
-          ...opciones.mascotaIzquierda ? { left: 0 } : { right: 0 },
+          ...options.mascotaIzquierda ? { left: 0 } : { right: 0 },
           alignItems: "flex-end"
         },
-        opciones.mascota
+        options.mascot
       ) : null,
-      columna
+      column
     ]
   );
 }
-function mascotaPose(pose, base, alto = OG.mascota) {
-  return el("img", { alt: "", src: `${base}/${poses[pose]}`, height: alto, style: { height: alto } });
+function mascotPose(pose, base, height = OG.mascot) {
+  return el("img", { alt: "", src: `${base}/${poses[pose]}`, height, style: { height } });
 }
-function plantillaArticulo(datos) {
-  const base = datos.basePath ?? RUTA_ASSETS;
-  const cara = datos.expresion ?? "hearts";
-  const meta = [datos.category, datos.readingMinutes ? `${datos.readingMinutes} min` : void 0].filter(Boolean).join(" \xB7 ");
-  return tarjeta({
-    modo: "oscuro",
-    fondo: gradient.dark.og,
-    eyebrow: { texto: meta || "art\xEDculo", color: dark.warm },
-    title: datos.title,
-    firma: naming.domain,
+function articleTemplate(data) {
+  const base = data.basePath ?? ASSETS_PATH;
+  const face = data.expression ?? "hearts";
+  const meta = [data.category, data.readingMinutes ? `${data.readingMinutes} min` : void 0].filter(Boolean).join(" \xB7 ");
+  return card({
+    mode: "dark",
+    background: gradient.dark.og,
+    eyebrow: { text: meta || "art\xEDculo", color: dark.warm },
+    title: data.title,
+    signature: naming.domain,
     firmaColor: dark.textSecondary,
     base,
     tinta: dark.textPrimary,
     tintaSecundaria: dark.textSecondary,
-    mascota: el("img", {
+    mascot: el("img", {
       alt: "",
-      src: `${base}/${caras[cara]}`,
+      src: `${base}/${faces[face]}`,
       height: 300,
-      style: { height: 300, marginBottom: OG.margen, marginRight: OG.margen }
+      style: { height: 300, marginBottom: OG.margin, marginRight: OG.margin }
     })
   });
 }
-function plantillaCurso(datos) {
-  const base = datos.basePath ?? RUTA_ASSETS;
-  const meta = [datos.modules ? `${datos.modules} m\xF3dulos` : void 0, datos.duration].filter(Boolean).join(" \xB7 ");
-  return tarjeta({
-    modo: "claro",
-    fondo: gradient.light.og,
-    eyebrow: { texto: "nuevo curso", color: light.warm },
-    title: datos.title,
+function courseTemplate(data) {
+  const base = data.basePath ?? ASSETS_PATH;
+  const meta = [data.modules ? `${data.modules} m\xF3dulos` : void 0, data.duration].filter(Boolean).join(" \xB7 ");
+  return card({
+    mode: "light",
+    background: gradient.light.og,
+    eyebrow: { text: "nuevo curso", color: light.warm },
+    title: data.title,
     bajada: meta || void 0,
-    firma: datos.url ?? `cursos.${naming.domain}`,
+    signature: data.url ?? `cursos.${naming.domain}`,
     firmaColor: light.warm,
     base,
     tinta: light.textPrimary,
     tintaSecundaria: light.textSecondary,
     mascotaIzquierda: true,
-    mascota: mascotaPose(datos.pose ?? "desk", base)
+    mascot: mascotPose(data.pose ?? "desk", base)
   });
 }
-function plantillaCharla(datos) {
-  const base = datos.basePath ?? RUTA_ASSETS;
-  const cabeza = ["charla", datos.event, datos.year].filter(Boolean).join(" \xB7 ");
-  const pie = [datos.location, datos.event ? void 0 : naming.domain].filter(Boolean).join(" \xB7 ");
-  return tarjeta({
-    modo: "oscuro",
-    fondo: "none",
-    eyebrow: { texto: cabeza, color: dark.accent },
-    title: datos.title,
-    bajada: datos.summary,
-    firma: pie || naming.domain,
+function talkTemplate(data) {
+  const base = data.basePath ?? ASSETS_PATH;
+  const head = ["charla", data.event, data.year].filter(Boolean).join(" \xB7 ");
+  const footer = [data.location, data.event ? void 0 : naming.domain].filter(Boolean).join(" \xB7 ");
+  return card({
+    mode: "dark",
+    background: "none",
+    eyebrow: { text: head, color: dark.accent },
+    title: data.title,
+    bajada: data.summary,
+    signature: footer || naming.domain,
     firmaColor: dark.textSecondary,
     base,
     tinta: dark.textPrimary,
     tintaSecundaria: dark.textSecondary,
-    // Sangra: se sale por abajo y por la derecha, como la portada de slide.
-    mascota: el("img", {
+    // It bleeds: it runs off the bottom and the right, like a slide cover.
+    mascot: el("img", {
       alt: "",
-      src: `${base}/${poses[datos.pose ?? "surf"]}`,
+      src: `${base}/${poses[data.pose ?? "surf"]}`,
       height: 470,
       style: { height: 470, marginBottom: -46, marginRight: -36 }
     })
   });
 }
-function plantillaDefecto(datos = {}) {
-  const base = datos.basePath ?? RUTA_ASSETS;
-  return caja(
+function defaultTemplate(data = {}) {
+  const base = data.basePath ?? ASSETS_PATH;
+  return box(
     {
       width: OG.width,
       height: OG.height,
@@ -205,11 +205,11 @@ function plantillaDefecto(datos = {}) {
       fontFamily: fonts.sans
     },
     [
-      // Columna de la aleta: 290 de ancho, que es donde cae el divisor.
-      caja(
+      // The fin's column: 290 wide, which is where the divider falls.
+      box(
         { width: 290, height: "100%", alignItems: "center", justifyContent: "center" },
-        // El halo. Un círculo de bioluz al 12 % detrás de la aleta.
-        caja(
+        // The halo. A circle of biolume at 12 % behind the fin.
+        box(
           {
             width: 260,
             height: 260,
@@ -218,21 +218,21 @@ function plantillaDefecto(datos = {}) {
             alignItems: "center",
             justifyContent: "center"
           },
-          el("img", { alt: "", src: `${base}/${aletas.espuma}`, height: 200, style: { height: 200 } })
+          el("img", { alt: "", src: `${base}/${fins.foam}`, height: 200, style: { height: 200 } })
         )
       ),
-      // El divisor, exactamente en x=290.
-      caja({ width: 1, height: 340, backgroundColor: dark.border }),
-      caja(
-        { flexDirection: "column", gap: 20, paddingLeft: OG.margen, paddingRight: OG.margen, flex: 1 },
+      // The divider, exactly at x=290.
+      box({ width: 1, height: 340, backgroundColor: dark.border }),
+      box(
+        { flexDirection: "column", gap: 20, paddingLeft: OG.margin, paddingRight: OG.margin, flex: 1 },
         [
-          texto(
+          text(
             { fontFamily: fonts.sans, fontSize: 72, fontWeight: 700, color: dark.textPrimary, lineHeight: 1.05 },
-            datos.title ?? naming.wordmark
+            data.title ?? naming.wordmark
           ),
-          texto(
+          text(
             { fontFamily: fonts.sans, fontSize: 28, fontWeight: 400, color: dark.textSecondary, lineHeight: 1.4 },
-            datos.description ?? tagline.corto
+            data.description ?? tagline.short
           )
         ]
       )
@@ -240,4 +240,4 @@ function plantillaDefecto(datos = {}) {
   );
 }
 
-export { OG, plantillaArticulo, tarjeta as plantillaBase, plantillaCharla, plantillaCurso, plantillaDefecto };
+export { OG, articleTemplate, courseTemplate, defaultTemplate, card as plantillaBase, talkTemplate };

package/dist/shiki/index.cjs

@@ -2,48 +2,46 @@
 
 // src/tokens/tokens.ts
 var dark = {
-  //       hairline en hover de tarjeta
+  //       hairline on card hover
   textPrimary: "#EDF4F3",
-  //       bruma              9.50:1
+  //       haze               9.50:1
   textMuted: "#71919C",
-  //           plancton           5.57:1  nunca bajo 13px
+  //           plankton           5.57:1  never under 13px
   accent: "#35D6C0",
-  //            tinta sobre bioluz
+  //            ink over biolume
   warm: "#F2A65A",
-  error: "#E15757"
-  //                                 4.51:1 sobre surface
-};
+  error: "#E15757"};
 var brand = {
-  /** Casco · contorno y fondo de bloques de código. */
+  /** Hull · outline, and the background of code blocks. */
   hull: "#0B1524"
 };
-var sintaxis = {
-  /** El casco. Es el fondo del bloque en los dos modos. */
-  fondo: brand.hull,
-  /** Identificadores, funciones, tipos, variables. */
-  identificador: dark.textPrimary,
-  /** Cadenas, números, booleanos, null. */
+var syntax = {
+  /** The hull. It is the block background in both modes. */
+  background: brand.hull,
+  /** Identifiers, functions, types, variables. */
+  identifier: dark.textPrimary,
+  /** Strings, numbers, booleans, null. */
   literal: dark.accent,
-  /** Palabras clave, control de flujo, `import`, `this`. */
-  palabraClave: dark.warm,
-  /** Comentarios y puntuación. */
-  comentario: dark.textMuted,
+  /** Keywords, control flow, `import`, `this`. */
+  keyword: dark.warm,
+  /** Comments and punctuation. */
+  comment: dark.textMuted,
   /** `markup.deleted`, `invalid`. */
-  invalido: dark.error
+  invalid: dark.error
 };
 
-// src/shiki/tema.ts
+// src/shiki/theme.ts
 var arrecife = {
   name: "arrecife",
   type: "dark",
   colors: {
-    "editor.background": sintaxis.fondo,
-    "editor.foreground": sintaxis.identificador
+    "editor.background": syntax.background,
+    "editor.foreground": syntax.identifier
   },
   tokenColors: [
     {
       scope: ["comment", "punctuation.definition.comment", "string.comment"],
-      settings: { foreground: sintaxis.comentario, fontStyle: "italic" }
+      settings: { foreground: syntax.comment, fontStyle: "italic" }
     },
     {
       scope: [
@@ -60,7 +58,7 @@ var arrecife = {
         "variable.language.this",
         "variable.language.super"
       ],
-      settings: { foreground: sintaxis.palabraClave }
+      settings: { foreground: syntax.keyword }
     },
     {
       scope: [
@@ -77,7 +75,7 @@ var arrecife = {
         "constant.language.undefined",
         "support.constant"
       ],
-      settings: { foreground: sintaxis.literal }
+      settings: { foreground: syntax.literal }
     },
     {
       scope: [
@@ -98,7 +96,7 @@ var arrecife = {
         "support.variable.property",
         "entity.other.attribute-name"
       ],
-      settings: { foreground: sintaxis.identificador }
+      settings: { foreground: syntax.identifier }
     },
     {
       scope: [
@@ -108,16 +106,16 @@ var arrecife = {
         "punctuation.separator",
         "punctuation.terminator"
       ],
-      settings: { foreground: sintaxis.comentario }
+      settings: { foreground: syntax.comment }
     },
-    { scope: ["markup.inserted"], settings: { foreground: sintaxis.literal } },
+    { scope: ["markup.inserted"], settings: { foreground: syntax.literal } },
     {
       scope: ["markup.deleted", "invalid", "invalid.illegal"],
-      settings: { foreground: sintaxis.invalido }
+      settings: { foreground: syntax.invalid }
     },
     {
       scope: ["markup.heading", "entity.name.section"],
-      settings: { foreground: sintaxis.palabraClave, fontStyle: "bold" }
+      settings: { foreground: syntax.keyword, fontStyle: "bold" }
     },
     { scope: ["markup.bold"], settings: { fontStyle: "bold" } },
     { scope: ["markup.italic"], settings: { fontStyle: "italic" } }

package/dist/shiki/index.d.cts

@@ -1,5 +1,5 @@
-/** La forma que Shiki espera. Se declara aquí para no depender del paquete. */
-type TemaShiki = {
+/** The shape Shiki expects. Declared here so we need not depend on the package. */
+type ShikiTheme = {
     name: string;
     type: 'dark' | 'light';
     colors: Record<string, string>;
@@ -11,6 +11,6 @@ type TemaShiki = {
         };
     }[];
 };
-declare const arrecife: TemaShiki;
+declare const arrecife: ShikiTheme;
 
-export { type TemaShiki, arrecife };
+export { type ShikiTheme, arrecife };

package/dist/shiki/index.d.ts

@@ -1,5 +1,5 @@
-/** La forma que Shiki espera. Se declara aquí para no depender del paquete. */
-type TemaShiki = {
+/** The shape Shiki expects. Declared here so we need not depend on the package. */
+type ShikiTheme = {
     name: string;
     type: 'dark' | 'light';
     colors: Record<string, string>;
@@ -11,6 +11,6 @@ type TemaShiki = {
         };
     }[];
 };
-declare const arrecife: TemaShiki;
+declare const arrecife: ShikiTheme;
 
-export { type TemaShiki, arrecife };
+export { type ShikiTheme, arrecife };

package/dist/shiki/index.js

@@ -1,18 +1,18 @@
-import { sintaxis } from '../chunk-TSPJOM6K.js';
+import { syntax } from '../chunk-O4TAH7YJ.js';
 import '../chunk-MLKGABMK.js';
 
-// src/shiki/tema.ts
+// src/shiki/theme.ts
 var arrecife = {
   name: "arrecife",
   type: "dark",
   colors: {
-    "editor.background": sintaxis.fondo,
-    "editor.foreground": sintaxis.identificador
+    "editor.background": syntax.background,
+    "editor.foreground": syntax.identifier
   },
   tokenColors: [
     {
       scope: ["comment", "punctuation.definition.comment", "string.comment"],
-      settings: { foreground: sintaxis.comentario, fontStyle: "italic" }
+      settings: { foreground: syntax.comment, fontStyle: "italic" }
     },
     {
       scope: [
@@ -29,7 +29,7 @@ var arrecife = {
         "variable.language.this",
         "variable.language.super"
       ],
-      settings: { foreground: sintaxis.palabraClave }
+      settings: { foreground: syntax.keyword }
     },
     {
       scope: [
@@ -46,7 +46,7 @@ var arrecife = {
         "constant.language.undefined",
         "support.constant"
       ],
-      settings: { foreground: sintaxis.literal }
+      settings: { foreground: syntax.literal }
     },
     {
       scope: [
@@ -67,7 +67,7 @@ var arrecife = {
         "support.variable.property",
         "entity.other.attribute-name"
       ],
-      settings: { foreground: sintaxis.identificador }
+      settings: { foreground: syntax.identifier }
     },
     {
       scope: [
@@ -77,16 +77,16 @@ var arrecife = {
         "punctuation.separator",
         "punctuation.terminator"
       ],
-      settings: { foreground: sintaxis.comentario }
+      settings: { foreground: syntax.comment }
     },
-    { scope: ["markup.inserted"], settings: { foreground: sintaxis.literal } },
+    { scope: ["markup.inserted"], settings: { foreground: syntax.literal } },
     {
       scope: ["markup.deleted", "invalid", "invalid.illegal"],
-      settings: { foreground: sintaxis.invalido }
+      settings: { foreground: syntax.invalid }
     },
     {
       scope: ["markup.heading", "entity.name.section"],
-      settings: { foreground: sintaxis.palabraClave, fontStyle: "bold" }
+      settings: { foreground: syntax.keyword, fontStyle: "bold" }
     },
     { scope: ["markup.bold"], settings: { fontStyle: "bold" } },
     { scope: ["markup.italic"], settings: { fontStyle: "italic" } }