astro-blog-kit 0.3.0 → 0.3.2

package/define-config.ts

@@ -1,9 +1,8 @@
 // ─────────────────────────────────────────────────────────────
 // astro-blog-kit · define-config.ts
-// Función helper para tipar la config del blog.
 // ─────────────────────────────────────────────────────────────
 
-import type { BlogKitConfig, BlogTheme } from "./types";
+import type { BlogKitConfig, BlogTheme, BlogHero, BlogUI } from "./types";
 
 export interface BlogConfig {
   /** URL de tu WordPress. Ej: https://cms.tudominio.com */
@@ -14,8 +13,12 @@ export interface BlogConfig {
   defaultLayout?: "grid" | "magazine" | "featured" | "cards";
   /** Locale por defecto. @default "en" */
   locale?: string;
-  /** Tema visual */
+  /** Tema visual (colores, fuentes, tamaños) */
   theme?: BlogTheme;
+  /** Textos del hero/header del blog */
+  hero?: BlogHero;
+  /** Overrides de UI (botones, paginación, labels) */
+  ui?: BlogUI;
   /** Configuración de i18n */
   i18n?: {
     locales: string[];
@@ -25,7 +28,6 @@ export interface BlogConfig {
 
 /**
  * Define la configuración del blog con tipado completo.
- * Genera blog.config.ts en la raíz del proyecto.
  *
  * @example
  * ```ts
@@ -35,10 +37,26 @@ export interface BlogConfig {
  * export default defineBlogConfig({
  *   wpUrl: 'https://cms.tudominio.com',
  *   postsPerPage: 5,
- *   defaultLayout: 'magazine',
+ *   defaultLayout: 'featured',
  *   locale: 'en',
  *   theme: {
  *     accent: '#facc15',
+ *     background: '#0a1a0a',
+ *     text: '#ffffff',
+ *   },
+ *   hero: {
+ *     tagline: 'Technical Resources',
+ *     titleLine1: 'Building',
+ *     titleLine2: 'Insights',
+ *     description: 'Practical knowledge for architects and engineers.',
+ *   },
+ *   ui: {
+ *     readMoreLabel: 'Read more →',
+ *     btnPrev: 'Previous',
+ *     btnNext: 'Next',
+ *     commentButtonColor: '#facc15',
+ *     commentButtonTextColor: '#0a0a0a',
+ *     paginationStyle: 'minimal',
  *   },
  * });
  * ```
@@ -60,6 +78,80 @@ export function toBlogKitConfig(config: BlogConfig): BlogKitConfig {
     postsPerPage: config.postsPerPage,
     defaultLayout: config.defaultLayout,
     theme: config.theme,
+    hero: config.hero,
+    ui: config.ui,
     i18n: config.i18n,
   };
+}
+
+/**
+ * Resuelve los textos del hero con fallbacks según el locale.
+ * Usado internamente por BlogList.astro
+ */
+export function resolveHero(
+  hero: BlogHero | undefined,
+  locale: string
+): Required<BlogHero> {
+  const defaults: Record<string, Required<BlogHero>> = {
+    en: {
+      tagline: "Our Blog",
+      titleLine1: "Latest",
+      titleLine2: "Articles",
+      description: "Welcome to our blog.",
+    },
+    es: {
+      tagline: "Nuestro Blog",
+      titleLine1: "Últimos",
+      titleLine2: "Artículos",
+      description: "Bienvenido a nuestro blog.",
+    },
+  };
+
+  const d = defaults[locale] ?? defaults["en"];
+
+  return {
+    tagline: hero?.tagline ?? d.tagline,
+    titleLine1: hero?.titleLine1 ?? d.titleLine1,
+    titleLine2: hero?.titleLine2 ?? d.titleLine2,
+    description: hero?.description ?? d.description,
+  };
+}
+
+/**
+ * Resuelve los labels de UI con fallbacks según el locale.
+ * Usado internamente por BlogList.astro y Pagination.astro
+ */
+export function resolveUI(
+  ui: BlogUI | undefined,
+  locale: string
+): Required<BlogUI> {
+  const defaults: Record<string, Required<BlogUI>> = {
+    en: {
+      readMoreLabel: "Read more →",
+      btnPrev: "Previous",
+      btnNext: "Next",
+      commentButtonColor: "var(--bk-accent)",
+      commentButtonTextColor: "var(--bk-black)",
+      paginationStyle: "minimal",
+    },
+    es: {
+      readMoreLabel: "Leer más →",
+      btnPrev: "Anterior",
+      btnNext: "Siguiente",
+      commentButtonColor: "var(--bk-accent)",
+      commentButtonTextColor: "var(--bk-black)",
+      paginationStyle: "minimal",
+    },
+  };
+
+  const d = defaults[locale] ?? defaults["en"];
+
+  return {
+    readMoreLabel: ui?.readMoreLabel ?? d.readMoreLabel,
+    btnPrev: ui?.btnPrev ?? d.btnPrev,
+    btnNext: ui?.btnNext ?? d.btnNext,
+    commentButtonColor: ui?.commentButtonColor ?? d.commentButtonColor,
+    commentButtonTextColor: ui?.commentButtonTextColor ?? d.commentButtonTextColor,
+    paginationStyle: ui?.paginationStyle ?? d.paginationStyle,
+  };
 }

package/integration.ts

@@ -3,8 +3,12 @@
 // ─────────────────────────────────────────────────────────────
 
 import type { AstroIntegration } from "astro";
+import type { Plugin } from "vite";
 import type { BlogKitConfig, BlogTheme } from "./types";
 
+const VIRTUAL_MODULE_ID = "virtual:astro-blog-kit/theme";
+const RESOLVED_VIRTUAL_MODULE_ID = "\0" + VIRTUAL_MODULE_ID;
+
 /**
  * Genera el bloque de CSS variables a partir del tema.
  */
@@ -27,36 +31,79 @@ function generateThemeCSS(theme: BlogTheme = {}): string {
   };
 
   return `
-    :root {
-      --bk-accent:       ${t.accent};
-      --bk-background:   ${t.background};
-      --bk-surface:      ${t.surface};
-      --bk-text:         ${t.text};
-      --bk-muted:        ${t.muted};
-      --bk-muted-light:  ${t.mutedLight};
-      --bk-border:       ${t.border};
-      --bk-black:        ${t.black};
-      --bk-white:        ${t.white};
-      --bk-yellow:       ${t.accent};
-      --bk-gray-100:     #f3f4f6;
-      --bk-gray-200:     #e5e7eb;
-      --bk-gray-300:     #d1d5db;
-      --bk-gray-400:     #9ca3af;
-      --bk-gray-600:     #4b5563;
-      --bk-font-heading:       ${t.fontHeading};
-      --bk-font-body:          ${t.fontBody};
-      --bk-font-mono:          ${t.fontMono};
-      --bk-font-display:       ${t.fontDisplay};
-      --bk-container-max:      ${t.containerMax};
-      --bk-transition:         all 0.2s ease;
-    }
+:root {
+  --bk-accent:        ${t.accent};
+  --bk-background:    ${t.background};
+  --bk-surface:       ${t.surface};
+  --bk-text:          ${t.text};
+  --bk-muted:         ${t.muted};
+  --bk-muted-light:   ${t.mutedLight};
+  --bk-border:        ${t.border};
+  --bk-black:         ${t.black};
+  --bk-white:         ${t.white};
+  --bk-yellow:        ${t.accent};
+  --bk-gray-100:      #f3f4f6;
+  --bk-gray-200:      #e5e7eb;
+  --bk-gray-300:      #d1d5db;
+  --bk-gray-400:      #9ca3af;
+  --bk-gray-600:      #4b5563;
+  --bk-font-heading:  ${t.fontHeading};
+  --bk-font-body:     ${t.fontBody};
+  --bk-font-mono:     ${t.fontMono};
+  --bk-font-display:  ${t.fontDisplay};
+  --bk-container-max: ${t.containerMax};
+  --bk-transition:    all 0.2s ease;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+`.trim();
+}
+
+/**
+ * Plugin de Vite que expone el tema como un virtual module CSS.
+ * Esto permite que Astro procese el CSS en SSR correctamente,
+ * sin depender de JavaScript en el cliente para inyectar variables.
+ *
+ * Uso en cualquier componente .astro del paquete:
+ *   import 'virtual:astro-blog-kit/theme';
+ */
+function createThemePlugin(theme: BlogTheme): Plugin {
+  const css = generateThemeCSS(theme);
 
-    *, *::before, *::after {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-  `;
+  return {
+    name: "astro-blog-kit:theme",
+    resolveId(id) {
+      if (id === VIRTUAL_MODULE_ID) {
+        return RESOLVED_VIRTUAL_MODULE_ID;
+      }
+    },
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+        // Retornamos CSS puro — Vite lo procesa como módulo CSS
+        return css;
+      }
+    },
+    // Fuerza el tipo del módulo como CSS para que Vite lo trate correctamente
+    transform(code, id) {
+      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+        return {
+          code: `
+const style = document.createElement('style');
+style.id = 'astro-blog-kit-theme';
+style.textContent = ${JSON.stringify(css)};
+if (!document.getElementById('astro-blog-kit-theme')) {
+  document.head.appendChild(style);
+}
+          `.trim(),
+          map: null,
+        };
+      }
+    },
+  };
 }
 
 /**
@@ -72,7 +119,7 @@ function generateThemeCSS(theme: BlogTheme = {}): string {
  *   integrations: [
  *     blogKit({
  *       postsPerPage: 6,
- *       defaultLayout: 'magazine',
+ *       defaultLayout: 'featured',
  *       theme: {
  *         accent: '#facc15',
  *         fontHeading: 'Inter, sans-serif',
@@ -89,29 +136,33 @@ export function blogKit(config: BlogKitConfig = {}): AstroIntegration {
     collectionName: config.collectionName ?? "blog",
     i18n: config.i18n ?? { locales: [], defaultLocale: "en" },
     theme: config.theme ?? {},
+    hero: config.hero ?? {},   // ← agregar
+    ui: config.ui ?? {},
   };
 
   return {
     name: "astro-blog-kit",
 
     hooks: {
-      "astro:config:setup": ({ injectScript, logger }) => {
+      "astro:config:setup": ({ updateConfig, injectScript, logger }) => {
         logger.info(
           `astro-blog-kit initialized — layout: ${resolvedConfig.defaultLayout}, postsPerPage: ${resolvedConfig.postsPerPage}`
         );
 
-        // Inyecta CSS variables del tema globalmente
-        const themeCSS = generateThemeCSS(resolvedConfig.theme);
-        injectScript("head-inline", `
-    (() => {
-      const style = document.createElement('style');
-      style.id = 'astro-blog-kit-theme';
-      style.textContent = \`${themeCSS.replace(/`/g, "\\`")}\`;
-      document.head.appendChild(style);
-    })();
-  `);
+        // Registra el virtual module como plugin de Vite
+        // Esto garantiza que las CSS variables existen en SSR y en el build estático
+        updateConfig({
+          vite: {
+            plugins: [createThemePlugin(resolvedConfig.theme)],
+          },
+        });
+
+        // Inyecta el virtual module en cada página como CSS real
+        // "page-ssr" = se ejecuta en el servidor, garantiza que el style
+        // esté disponible antes del primer paint
+        injectScript("page-ssr", `import "${VIRTUAL_MODULE_ID}";`);
 
-        // Inyecta config global
+        // Inyecta config global accesible desde cualquier componente
         injectScript(
           "page-ssr",
           `globalThis.__BLOG_KIT_CONFIG__ = ${JSON.stringify(resolvedConfig)};`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-blog-kit",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A ready-to-use blog system for Astro with WordPress headless support, optional i18n, multiple layouts, and a comment system.",
   "type": "module",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "headless-cms"
   ],
   "peerDependencies": {
-    "astro": "^4.0.0 || ^5.0.0 || ^6.0.0"
+    "astro": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "dependencies": {
     "@clack/prompts": "latest"

package/templates/blog-config.ts.template

@@ -1,24 +1,41 @@
-import { defineBlogConfig } from 'astro-blog-kit';
-
-export default defineBlogConfig({
-  wpUrl: import.meta.env.WP_API_URL || '__WP_URL__',
-  postsPerPage: __POSTS_PER_PAGE__,
-  defaultLayout: '__DEFAULT_LAYOUT__',
-  locale: '__LOCALE__',
-  theme: {
-    accent: '#facc15',
-    background: '#ffffff',
-    surface: '#f8f8f8',
-    text: '#0a0a0a',
-    muted: '#6b7280',
-    mutedLight: '#4b5563',
-    border: '#e5e7eb',
-    black: '#0a0a0a',
-    white: '#ffffff',
-    fontHeading: 'Georgia, serif',
-    fontBody: 'system-ui, sans-serif',
-    fontMono: 'monospace',
-    fontDisplay: 'Georgia, serif',
-    containerMax: '1200px',
-  },
-});
+import { defineBlogConfig } from 'astro-blog-kit';
+
+export default defineBlogConfig({
+  wpUrl: import.meta.env.WP_API_URL || '__WP_URL__',
+  postsPerPage: __POSTS_PER_PAGE__,
+  defaultLayout: '__DEFAULT_LAYOUT__',
+  locale: '__LOCALE__',
+
+  theme: {
+    accent:      '#facc15',
+    background:  '#ffffff',
+    surface:     '#f8f8f8',
+    text:        '#0a0a0a',
+    muted:       '#6b7280',
+    mutedLight:  '#4b5563',
+    border:      '#e5e7eb',
+    black:       '#0a0a0a',
+    white:       '#ffffff',
+    fontHeading: 'Georgia, serif',
+    fontBody:    'system-ui, sans-serif',
+    fontMono:    'monospace',
+    fontDisplay: 'Georgia, serif',
+    containerMax:'1200px',
+  },
+
+  hero: {
+    tagline:     '__T_TAGLINE__',
+    titleLine1:  '__T_TITLE_LINE1__',
+    titleLine2:  '__T_TITLE_LINE2__',
+    description: '__T_DESCRIPTION__',
+  },
+
+  ui: {
+    readMoreLabel:          '__T_BTNCTA__',
+    btnPrev:                '__T_BTN_PREV__',
+    btnNext:                '__T_BTN_NEXT__',
+    commentButtonColor:     'var(--bk-accent)',
+    commentButtonTextColor: 'var(--bk-black)',
+    paginationStyle:        'minimal',
+  },
+});

package/templates/blog-index.astro.template

@@ -1,37 +1,42 @@
----
-import { BlogList } from "astro-blog-kit/components";
-import { createWPClient } from "astro-blog-kit/utils";
-import config from "../../../blog.config";
-__LAYOUT_IMPORT__
-
-const wp = createWPClient(config.wpUrl);
-const { posts, totalPages } = await wp.getPosts({ perPage: config.postsPerPage ?? 5 });
-
-const bt = {
-  blog: {
-    tagline: "__T_TAGLINE__",
-    title_line1: "__T_TITLE_LINE1__",
-    title_line2: "__T_TITLE_LINE2__",
-    description: "__T_DESCRIPTION__",
-    btncta: "__T_BTNCTA__",
-    btn_prev: "__T_BTN_PREV__",
-    btn_next: "__T_BTN_NEXT__",
-  },
-};
-
-const base = import.meta.env.BASE_URL;
----
-
-__LAYOUT_OPEN__
-  <BlogList
-    posts={posts}
-    currentPage={1}
-    totalPages={totalPages}
-    basePath={`${base}blog/page/`}
-    blogBase={`${base}blog/`}
-    dateLocale={config.locale ?? "en"}
-    t={bt}
-    locale={config.locale ?? "en"}
-    layout={config.defaultLayout ?? "magazine"}
-  />
-__LAYOUT_CLOSE__
+---
+import { BlogList } from 'astro-blog-kit/components';
+import { createWPClient } from 'astro-blog-kit/utils';
+import { resolveHero, resolveUI } from 'astro-blog-kit';
+import config from '../../../blog.config';
+__LAYOUT_IMPORT__
+
+const wp = createWPClient(config.wpUrl);
+const { posts, totalPages } = await wp.getPosts({ perPage: config.postsPerPage ?? 5 });
+
+const locale = config.locale ?? 'en';
+const hero = resolveHero(config.hero, locale);
+const ui = resolveUI(config.ui, locale);
+
+const t = {
+  blog: {
+    tagline:     hero.tagline,
+    title_line1: hero.titleLine1,
+    title_line2: hero.titleLine2,
+    description: hero.description,
+    btncta:      ui.readMoreLabel,
+    btn_prev:    ui.btnPrev,
+    btn_next:    ui.btnNext,
+  },
+};
+
+const base = import.meta.env.BASE_URL;
+---
+
+__LAYOUT_OPEN__
+  <BlogList
+    posts={posts}
+    currentPage={1}
+    totalPages={totalPages}
+    basePath={`${base}blog/page/`}
+    blogBase={`${base}blog/`}
+    dateLocale={locale}
+    t={t}
+    locale={locale}
+    layout={config.defaultLayout ?? 'magazine'}
+  />
+__LAYOUT_CLOSE__

package/types.ts

@@ -4,10 +4,6 @@
 
 // ── Post ──────────────────────────────────────────────────────
 
-/**
- * Forma normalizada de un post de blog.
- * Compatible con WordPress REST API (_embedded).
- */
 export interface BlogPost {
   id?: number;
   slug: string;
@@ -95,7 +91,7 @@ export interface BlogPostProps {
   lang: string;
 }
 
-// ── Config del paquete ────────────────────────────────────────
+// ── Tema ──────────────────────────────────────────────────────
 
 export interface BlogTheme {
   /** Color de acento principal. @default "#facc15" */
@@ -128,6 +124,38 @@ export interface BlogTheme {
   containerMax?: string;
 }
 
+// ── Hero del blog ─────────────────────────────────────────────
+
+export interface BlogHero {
+  /** Texto del badge superior. @default "Our Blog" */
+  tagline?: string;
+  /** Primera línea del título. @default "Latest" */
+  titleLine1?: string;
+  /** Segunda línea del título (resaltada). @default "Articles" */
+  titleLine2?: string;
+  /** Párrafo descriptivo debajo del título. @default "Welcome to our blog." */
+  description?: string;
+}
+
+// ── UI overrides ──────────────────────────────────────────────
+
+export interface BlogUI {
+  /** Texto del botón "leer más". @default "Read more →" */
+  readMoreLabel?: string;
+  /** Texto del botón de página anterior. @default "Previous" */
+  btnPrev?: string;
+  /** Texto del botón de página siguiente. @default "Next" */
+  btnNext?: string;
+  /** Color de fondo del botón de comentarios. @default var(--bk-accent) */
+  commentButtonColor?: string;
+  /** Color del texto del botón de comentarios. @default var(--bk-black) */
+  commentButtonTextColor?: string;
+  /** Estilo de paginación. @default "minimal" */
+  paginationStyle?: "minimal" | "numbered";
+}
+
+// ── Config del paquete ────────────────────────────────────────
+
 export interface BlogKitConfig {
   /** @default 5 */
   postsPerPage?: number;
@@ -138,6 +166,10 @@ export interface BlogKitConfig {
   collectionName?: string;
   /** Tema visual del blog */
   theme?: BlogTheme;
+  /** Textos del hero/header del blog */
+  hero?: BlogHero;
+  /** Overrides de UI (botones, paginación, labels) */
+  ui?: BlogUI;
 }
 
 // ── getStaticPaths ────────────────────────────────────────────