@eduardoalvarez/arrecife 0.1.0

package/dist/og/index.js

@@ -0,0 +1,242 @@
+import { RUTA_ASSETS, caras, poses, aletas } from '../chunk-E3OMP2DL.js';
+import { fonts, dark, light, naming, gradient, tagline, typeScale } from '../chunk-DHF63QNM.js';
+
+// src/og/plantillas.ts
+var OG = {
+  width: 1200,
+  height: 630,
+  margen: 64,
+  /** Alto máximo de la mascota. */
+  mascota: 430,
+  /** La aleta de la firma. */
+  aletaFirma: 34,
+  /**
+   * Hueco que deja la columna cuando la pose va a la izquierda (curso).
+   *
+   * 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.
+   */
+  reservaMascota: 560
+};
+function el(type, props, children) {
+  return { type, props: children === void 0 ? props : { ...props, children } };
+}
+function caja(style, children) {
+  return el("div", { style: { display: "flex", ...style } }, children);
+}
+function texto(style, contenido) {
+  return el("div", { style: { display: "flex", ...style } }, contenido);
+}
+function eyebrow(contenido, color) {
+  return texto(
+    {
+      fontFamily: fonts.mono,
+      fontSize: 20,
+      letterSpacing: typeScale.eyebrow.tracking,
+      textTransform: "uppercase",
+      color
+    },
+    contenido
+  );
+}
+function titular(contenido, color) {
+  return texto(
+    {
+      fontFamily: fonts.display,
+      fontSize: 58,
+      fontWeight: 800,
+      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.
+      maxWidth: OG.width * 0.7,
+      display: "-webkit-box",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: 3,
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    contenido
+  );
+}
+function firma(contenido, color, modo, base) {
+  return caja({ alignItems: "center", gap: 14 }, [
+    el("img", {
+      alt: "",
+      src: `${base}/${modo === "oscuro" ? aletas.espuma : aletas.color}`,
+      height: OG.aletaFirma,
+      style: { height: OG.aletaFirma }
+    }),
+    texto({ fontFamily: fonts.mono, fontSize: 21, color }, contenido)
+  ]);
+}
+function tarjeta(opciones) {
+  const columna = caja(
+    {
+      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
+    },
+    [
+      eyebrow(opciones.eyebrow.texto, opciones.eyebrow.color),
+      caja({ flexDirection: "column", gap: 18 }, [
+        titular(opciones.title, opciones.tinta),
+        opciones.bajada ? texto(
+          {
+            fontFamily: fonts.sans,
+            fontSize: 26,
+            color: opciones.tintaSecundaria,
+            maxWidth: OG.width * 0.7
+          },
+          opciones.bajada
+        ) : null
+      ]),
+      firma(opciones.firma, opciones.firmaColor, opciones.modo, opciones.base)
+    ]
+  );
+  return caja(
+    {
+      position: "relative",
+      width: OG.width,
+      height: OG.height,
+      backgroundImage: opciones.fondo,
+      backgroundColor: opciones.modo === "oscuro" ? dark.background : light.background,
+      fontFamily: fonts.sans,
+      overflow: "hidden"
+    },
+    [
+      opciones.mascota ? caja(
+        {
+          position: "absolute",
+          bottom: 0,
+          ...opciones.mascotaIzquierda ? { left: 0 } : { right: 0 },
+          alignItems: "flex-end"
+        },
+        opciones.mascota
+      ) : null,
+      columna
+    ]
+  );
+}
+function mascotaPose(pose, base, alto = OG.mascota) {
+  return el("img", { alt: "", src: `${base}/${poses[pose]}`, height: alto, style: { height: alto } });
+}
+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,
+    firmaColor: dark.textSecondary,
+    base,
+    tinta: dark.textPrimary,
+    tintaSecundaria: dark.textSecondary,
+    mascota: el("img", {
+      alt: "",
+      src: `${base}/${caras[cara]}`,
+      height: 300,
+      style: { height: 300, marginBottom: OG.margen, marginRight: OG.margen }
+    })
+  });
+}
+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,
+    bajada: meta || void 0,
+    firma: datos.url ?? `cursos.${naming.domain}`,
+    firmaColor: light.warm,
+    base,
+    tinta: light.textPrimary,
+    tintaSecundaria: light.textSecondary,
+    mascotaIzquierda: true,
+    mascota: mascotaPose(datos.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,
+    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", {
+      alt: "",
+      src: `${base}/${poses[datos.pose ?? "surf"]}`,
+      height: 470,
+      style: { height: 470, marginBottom: -46, marginRight: -36 }
+    })
+  });
+}
+function plantillaDefecto(datos = {}) {
+  const base = datos.basePath ?? RUTA_ASSETS;
+  return caja(
+    {
+      width: OG.width,
+      height: OG.height,
+      alignItems: "center",
+      backgroundColor: dark.background,
+      fontFamily: fonts.sans
+    },
+    [
+      // Columna de la aleta: 290 de ancho, que es donde cae el divisor.
+      caja(
+        { width: 290, height: "100%", alignItems: "center", justifyContent: "center" },
+        // El halo. Un círculo de bioluz al 12 % detrás de la aleta.
+        caja(
+          {
+            width: 260,
+            height: 260,
+            borderRadius: 999,
+            backgroundColor: `${dark.accent}1F`,
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          el("img", { alt: "", src: `${base}/${aletas.espuma}`, 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 },
+        [
+          texto(
+            { fontFamily: fonts.sans, fontSize: 72, fontWeight: 700, color: dark.textPrimary, lineHeight: 1.05 },
+            datos.title ?? naming.wordmark
+          ),
+          texto(
+            { fontFamily: fonts.sans, fontSize: 28, fontWeight: 400, color: dark.textSecondary, lineHeight: 1.4 },
+            datos.description ?? tagline.corto
+          )
+        ]
+      )
+    ]
+  );
+}
+
+export { OG, plantillaArticulo, tarjeta as plantillaBase, plantillaCharla, plantillaCurso, plantillaDefecto };

package/dist/shiki/index.cjs

@@ -0,0 +1,127 @@
+'use strict';
+
+// src/tokens/tokens.ts
+var dark = {
+  //       hairline en hover de tarjeta
+  textPrimary: "#EDF4F3",
+  //       bruma              9.50:1
+  textMuted: "#71919C",
+  //           plancton           5.57:1  nunca bajo 13px
+  accent: "#35D6C0",
+  //            tinta sobre bioluz
+  warm: "#F2A65A",
+  error: "#E15757"
+  //                                 4.51:1 sobre surface
+};
+var brand = {
+  /** Casco · contorno y fondo de bloques de código. */
+  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. */
+  literal: dark.accent,
+  /** Palabras clave, control de flujo, `import`, `this`. */
+  palabraClave: dark.warm,
+  /** Comentarios y puntuación. */
+  comentario: dark.textMuted,
+  /** `markup.deleted`, `invalid`. */
+  invalido: dark.error
+};
+
+// src/shiki/tema.ts
+var arrecife = {
+  name: "arrecife",
+  type: "dark",
+  colors: {
+    "editor.background": sintaxis.fondo,
+    "editor.foreground": sintaxis.identificador
+  },
+  tokenColors: [
+    {
+      scope: ["comment", "punctuation.definition.comment", "string.comment"],
+      settings: { foreground: sintaxis.comentario, fontStyle: "italic" }
+    },
+    {
+      scope: [
+        "keyword",
+        "keyword.control",
+        "keyword.operator.new",
+        "keyword.operator.expression",
+        "storage",
+        "storage.type",
+        "storage.modifier",
+        "meta.import keyword",
+        "keyword.control.import",
+        "keyword.control.from",
+        "variable.language.this",
+        "variable.language.super"
+      ],
+      settings: { foreground: sintaxis.palabraClave }
+    },
+    {
+      scope: [
+        "string",
+        "string.quoted",
+        "string.template",
+        "punctuation.definition.string",
+        "string.regexp",
+        "constant.character.escape",
+        "constant.numeric",
+        "constant.language",
+        "constant.language.boolean",
+        "constant.language.null",
+        "constant.language.undefined",
+        "support.constant"
+      ],
+      settings: { foreground: sintaxis.literal }
+    },
+    {
+      scope: [
+        "entity.name.function",
+        "support.function",
+        "variable.function",
+        "entity.name.type",
+        "entity.name.class",
+        "entity.name.namespace",
+        "entity.other.inherited-class",
+        "support.type",
+        "support.class",
+        "entity.name.tag",
+        "variable",
+        "variable.other",
+        "variable.parameter",
+        "meta.object-literal.key",
+        "support.variable.property",
+        "entity.other.attribute-name"
+      ],
+      settings: { foreground: sintaxis.identificador }
+    },
+    {
+      scope: [
+        "keyword.operator",
+        "punctuation",
+        "meta.brace",
+        "punctuation.separator",
+        "punctuation.terminator"
+      ],
+      settings: { foreground: sintaxis.comentario }
+    },
+    { scope: ["markup.inserted"], settings: { foreground: sintaxis.literal } },
+    {
+      scope: ["markup.deleted", "invalid", "invalid.illegal"],
+      settings: { foreground: sintaxis.invalido }
+    },
+    {
+      scope: ["markup.heading", "entity.name.section"],
+      settings: { foreground: sintaxis.palabraClave, fontStyle: "bold" }
+    },
+    { scope: ["markup.bold"], settings: { fontStyle: "bold" } },
+    { scope: ["markup.italic"], settings: { fontStyle: "italic" } }
+  ]
+};
+
+exports.arrecife = arrecife;

package/dist/shiki/index.d.cts

@@ -0,0 +1,16 @@
+/** La forma que Shiki espera. Se declara aquí para no depender del paquete. */
+type TemaShiki = {
+    name: string;
+    type: 'dark' | 'light';
+    colors: Record<string, string>;
+    tokenColors: readonly {
+        scope: readonly string[];
+        settings: {
+            foreground?: string;
+            fontStyle?: string;
+        };
+    }[];
+};
+declare const arrecife: TemaShiki;
+
+export { type TemaShiki, arrecife };

package/dist/shiki/index.d.ts

@@ -0,0 +1,16 @@
+/** La forma que Shiki espera. Se declara aquí para no depender del paquete. */
+type TemaShiki = {
+    name: string;
+    type: 'dark' | 'light';
+    colors: Record<string, string>;
+    tokenColors: readonly {
+        scope: readonly string[];
+        settings: {
+            foreground?: string;
+            fontStyle?: string;
+        };
+    }[];
+};
+declare const arrecife: TemaShiki;
+
+export { type TemaShiki, arrecife };

package/dist/shiki/index.js

@@ -0,0 +1,95 @@
+import { sintaxis } from '../chunk-DHF63QNM.js';
+
+// src/shiki/tema.ts
+var arrecife = {
+  name: "arrecife",
+  type: "dark",
+  colors: {
+    "editor.background": sintaxis.fondo,
+    "editor.foreground": sintaxis.identificador
+  },
+  tokenColors: [
+    {
+      scope: ["comment", "punctuation.definition.comment", "string.comment"],
+      settings: { foreground: sintaxis.comentario, fontStyle: "italic" }
+    },
+    {
+      scope: [
+        "keyword",
+        "keyword.control",
+        "keyword.operator.new",
+        "keyword.operator.expression",
+        "storage",
+        "storage.type",
+        "storage.modifier",
+        "meta.import keyword",
+        "keyword.control.import",
+        "keyword.control.from",
+        "variable.language.this",
+        "variable.language.super"
+      ],
+      settings: { foreground: sintaxis.palabraClave }
+    },
+    {
+      scope: [
+        "string",
+        "string.quoted",
+        "string.template",
+        "punctuation.definition.string",
+        "string.regexp",
+        "constant.character.escape",
+        "constant.numeric",
+        "constant.language",
+        "constant.language.boolean",
+        "constant.language.null",
+        "constant.language.undefined",
+        "support.constant"
+      ],
+      settings: { foreground: sintaxis.literal }
+    },
+    {
+      scope: [
+        "entity.name.function",
+        "support.function",
+        "variable.function",
+        "entity.name.type",
+        "entity.name.class",
+        "entity.name.namespace",
+        "entity.other.inherited-class",
+        "support.type",
+        "support.class",
+        "entity.name.tag",
+        "variable",
+        "variable.other",
+        "variable.parameter",
+        "meta.object-literal.key",
+        "support.variable.property",
+        "entity.other.attribute-name"
+      ],
+      settings: { foreground: sintaxis.identificador }
+    },
+    {
+      scope: [
+        "keyword.operator",
+        "punctuation",
+        "meta.brace",
+        "punctuation.separator",
+        "punctuation.terminator"
+      ],
+      settings: { foreground: sintaxis.comentario }
+    },
+    { scope: ["markup.inserted"], settings: { foreground: sintaxis.literal } },
+    {
+      scope: ["markup.deleted", "invalid", "invalid.illegal"],
+      settings: { foreground: sintaxis.invalido }
+    },
+    {
+      scope: ["markup.heading", "entity.name.section"],
+      settings: { foreground: sintaxis.palabraClave, fontStyle: "bold" }
+    },
+    { scope: ["markup.bold"], settings: { fontStyle: "bold" } },
+    { scope: ["markup.italic"], settings: { fontStyle: "italic" } }
+  ]
+};
+
+export { arrecife };