astro-blog-kit 0.3.5 → 0.3.7

package/components/Pagination.astro

@@ -12,8 +12,8 @@ const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
   <nav class="pagination" aria-label="Blog pagination">
 
     {currentPage > 1 && (
-      
-       <a href={currentPage === 2 ? blogBase : `${basePath}${currentPage - 1}/`}
+      <a
+        href={currentPage === 2 ? blogBase : `${basePath}${currentPage - 1}/`}
         class="pagination__btn"
       >
         ← {t.blog.btn_prev}
@@ -22,8 +22,8 @@ const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
 
     <div class="pagination__pages">
       {pages.map((pageNum) => (
-        
-        <a  href={pageNum === 1 ? blogBase : `${basePath}${pageNum}/`}
+        <a
+          href={pageNum === 1 ? blogBase : `${basePath}${pageNum}/`}
           class={`pagination__page ${pageNum === currentPage ? "pagination__page--active" : ""}`}
           aria-current={pageNum === currentPage ? "page" : undefined}
         >
@@ -49,25 +49,25 @@ const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
     gap: 0.75rem;
     flex-wrap: wrap;
     padding-top: 3rem;
-    border-top: 2px solid var(--bk-gray-200);
+    border-top: 2px solid var(--bk-border);
   }
 
   .pagination__btn {
     padding: 0.6rem 1.25rem;
-    background-color: var(--bk-black);
-    color: var(--bk-white);
+    background-color: var(--bk-pagination-btn-bg);
+    color: var(--bk-pagination-btn-text);
     font-family: var(--bk-font-heading);
     font-size: 0.9rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     text-decoration: none;
-    transition: background-color 0.2s ease, color 0.2s ease;
+    transition: var(--bk-transition);
   }
 
   .pagination__btn:hover {
-    background-color: var(--bk-yellow);
-    color: var(--bk-black);
+    background-color: var(--bk-pagination-btn-hover-bg);
+    color: var(--bk-pagination-btn-hover-text);
   }
 
   .pagination__pages {
@@ -83,19 +83,19 @@ const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
     font-weight: 700;
     font-size: 0.9rem;
     color: var(--bk-muted);
-    border: 2px solid var(--bk-gray-200);
+    border: 2px solid var(--bk-border);
     text-decoration: none;
-    transition: border-color 0.2s ease, color 0.2s ease;
+    transition: var(--bk-transition);
   }
 
   .pagination__page:hover {
-    border-color: var(--bk-black);
-    color: var(--bk-black);
+    border-color: var(--bk-pagination-btn-bg);
+    color: var(--bk-text);
   }
 
   .pagination__page--active {
-    background-color: var(--bk-yellow);
-    border-color: var(--bk-yellow);
-    color: var(--bk-black);
+    background-color: var(--bk-pagination-active-bg);
+    border-color: var(--bk-pagination-active-bg);
+    color: var(--bk-pagination-active-text);
   }
 </style>

package/integration.ts

@@ -4,140 +4,108 @@
 
 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;
+import type { BlogKitConfig, BlogTheme, BlogUI } from "./types";
 
 /**
- * Genera el bloque de CSS variables a partir del tema.
+ * Genera el bloque de CSS variables a partir del tema y la UI.
  */
-function generateThemeCSS(theme: BlogTheme = {}): string {
+function generateThemeCSS(theme: BlogTheme = {}, ui: BlogUI = {}): string {
   const t = {
-    accent: theme.accent ?? "#facc15",
-    background: theme.background ?? "#ffffff",
-    surface: theme.surface ?? "#f8f8f8",
-    text: theme.text ?? "#0a0a0a",
-    muted: theme.muted ?? "#6b7280",
-    mutedLight: theme.mutedLight ?? "#9ca3af",
-    border: theme.border ?? "#e5e7eb",
-    black: theme.black ?? "#0a0a0a",
-    white: theme.white ?? "#ffffff",
-    fontHeading: theme.fontHeading ?? "Georgia, serif",
-    fontBody: theme.fontBody ?? "system-ui, sans-serif",
-    fontMono: theme.fontMono ?? "monospace",
-    fontDisplay: theme.fontDisplay ?? "Georgia, serif",
+    accent:       theme.accent       ?? "#facc15",
+    background:   theme.background   ?? "#ffffff",
+    surface:      theme.surface      ?? "#f8f8f8",
+    text:         theme.text         ?? "#0a0a0a",
+    muted:        theme.muted        ?? "#6b7280",
+    mutedLight:   theme.mutedLight   ?? "#9ca3af",
+    border:       theme.border       ?? "#e5e7eb",
+    black:        theme.black        ?? "#0a0a0a",
+    white:        theme.white        ?? "#ffffff",
+    fontHeading:  theme.fontHeading  ?? "Georgia, serif",
+    fontBody:     theme.fontBody     ?? "system-ui, sans-serif",
+    fontMono:     theme.fontMono     ?? "monospace",
+    fontDisplay:  theme.fontDisplay  ?? "Georgia, serif",
     containerMax: theme.containerMax ?? "1200px",
   };
 
-  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;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-`.trim();
+  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;`,
+    `  --bk-pagination-btn-bg:         ${ui.paginationBtnBg         ?? t.accent};`,
+    `  --bk-pagination-btn-text:       ${ui.paginationBtnText       ?? t.black};`,
+    `  --bk-pagination-btn-hover-bg:   ${ui.paginationBtnHoverBg   ?? t.text};`,
+    `  --bk-pagination-btn-hover-text: ${ui.paginationBtnHoverText ?? t.white};`,
+    `  --bk-pagination-active-bg:      ${ui.paginationActiveBg      ?? t.accent};`,
+    `  --bk-pagination-active-text:    ${ui.paginationActiveText    ?? t.black};`,
+    `  --bk-comment-btn-bg:            ${ui.commentButtonColor      ?? t.accent};`,
+    `  --bk-comment-btn-text:          ${ui.commentButtonTextColor  ?? t.black};`,
+    "}",
+  ].join("\n");
 }
 
 /**
- * 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';
+ * Plugin de Vite que inyecta el CSS del tema como módulo CSS real,
+ * compatible con Rolldown (Astro 7+).
  */
-function createThemePlugin(theme: BlogTheme): Plugin {
-  const css = generateThemeCSS(theme);
+function createThemePlugin(theme: BlogTheme, ui: BlogUI): Plugin {
+  const THEME_ID = "\0astro-blog-kit-theme.css";
+  const css = generateThemeCSS(theme, ui);
 
   return {
     name: "astro-blog-kit:theme",
+    enforce: "pre",
+
     resolveId(id) {
-      if (id === VIRTUAL_MODULE_ID) {
-        return RESOLVED_VIRTUAL_MODULE_ID;
+      if (id === "astro-blog-kit-theme.css") {
+        return THEME_ID;
       }
     },
+
     load(id) {
-      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
-        // Retornamos CSS puro — Vite lo procesa como módulo CSS
-        return `export default ${JSON.stringify(css)};`;
+      if (id === THEME_ID) {
+        return css;
+      }
+    },
+
+    transform(code, id) {
+      if (id === THEME_ID) {
+        return { code, map: null, meta: { vite: { lang: "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,
-//         };
-//       }
-//     },
   };
 }
 
 /**
  * Integración principal de astro-blog-kit.
- *
- * @example
- * ```js
- * // astro.config.mjs
- * import { defineConfig } from 'astro/config';
- * import { blogKit } from 'astro-blog-kit/integration';
- *
- * export default defineConfig({
- *   integrations: [
- *     blogKit({
- *       postsPerPage: 6,
- *       defaultLayout: 'featured',
- *       theme: {
- *         accent: '#facc15',
- *         fontHeading: 'Inter, sans-serif',
- *       },
- *     }),
- *   ],
- * });
- * ```
  */
 export function blogKit(config: BlogKitConfig = {}): AstroIntegration {
   const resolvedConfig: Required<BlogKitConfig> = {
-    postsPerPage: config.postsPerPage ?? 5,
-    defaultLayout: config.defaultLayout ?? "magazine",
+    postsPerPage:   config.postsPerPage   ?? 5,
+    defaultLayout:  config.defaultLayout  ?? "magazine",
     collectionName: config.collectionName ?? "blog",
-    i18n: config.i18n ?? { locales: [], defaultLocale: "en" },
-    theme: config.theme ?? {},
-    hero: config.hero ?? {},   // ← agregar
-    ui: config.ui ?? {},
+    i18n:           config.i18n           ?? { locales: [], defaultLocale: "en" },
+    theme:          config.theme          ?? {},
+    hero:           config.hero           ?? {},
+    ui:             config.ui             ?? {},
   };
 
   return {
@@ -149,20 +117,15 @@ export function blogKit(config: BlogKitConfig = {}): AstroIntegration {
           `astro-blog-kit initialized — layout: ${resolvedConfig.defaultLayout}, postsPerPage: ${resolvedConfig.postsPerPage}`
         );
 
-        // Registra el virtual module como plugin de Vite
-        // Esto garantiza que las CSS variables existen en SSR y en el build estático
+        // Pasa tanto theme como ui al plugin
         updateConfig({
           vite: {
-            plugins: [createThemePlugin(resolvedConfig.theme)],
+            plugins: [createThemePlugin(resolvedConfig.theme, resolvedConfig.ui)],
           },
         });
 
-        // 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}";`);
+        injectScript("page-ssr", `import "astro-blog-kit-theme.css";`);
 
-        // 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.5",
+  "version": "0.3.7",
   "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",

package/types.ts

@@ -2,32 +2,17 @@
 // astro-blog-kit · types.ts
 // ─────────────────────────────────────────────────────────────
 
-// ── Post ──────────────────────────────────────────────────────
-
 export interface BlogPost {
   id?: number;
   slug: string;
   date: string;
   modified?: string;
-  title: {
-    rendered: string;
-  };
-  excerpt: {
-    rendered: string;
-  };
-  content: {
-    rendered: string;
-  };
+  title: { rendered: string };
+  excerpt: { rendered: string };
+  content: { rendered: string };
   _embedded?: {
-    "wp:featuredmedia"?: Array<{
-      source_url: string;
-      alt_text?: string;
-    }>;
-    "wp:term"?: {
-      id: number;
-      name: string;
-      slug: string;
-    }[][];
+    "wp:featuredmedia"?: Array<{ source_url: string; alt_text?: string }>;
+    "wp:term"?: { id: number; name: string; slug: string }[][];
   };
   heroImage?: string;
   lang?: string;
@@ -35,12 +20,8 @@ export interface BlogPost {
   readingTime?: number;
 }
 
-// ── Layouts ───────────────────────────────────────────────────
-
 export type BlogListLayout = "grid" | "magazine" | "featured" | "cards";
 
-// ── i18n ──────────────────────────────────────────────────────
-
 export interface I18nConfig {
   locales: string[];
   defaultLocale: string;
@@ -58,8 +39,6 @@ export interface BlogTranslations {
   };
 }
 
-// ── Paginación ────────────────────────────────────────────────
-
 export interface PaginationProps {
   currentPage: number;
   totalPages: number;
@@ -68,8 +47,6 @@ export interface PaginationProps {
   t: BlogTranslations;
 }
 
-// ── BlogList ──────────────────────────────────────────────────
-
 export interface BlogListProps {
   posts: BlogPost[];
   currentPage: number;
@@ -79,66 +56,39 @@ export interface BlogListProps {
   dateLocale: string;
   t: BlogTranslations;
   locale: string;
-  /** @default "magazine" */
   layout?: BlogListLayout;
 }
 
-// ── BlogPost componente ───────────────────────────────────────
-
 export interface BlogPostProps {
   post: BlogPost;
   t: BlogTranslations;
   lang: string;
 }
 
-// ── Tema ──────────────────────────────────────────────────────
-
 export interface BlogTheme {
-  /** Color de acento principal. @default "#facc15" */
   accent?: string;
-  /** Color de fondo. @default "#ffffff" */
   background?: string;
-  /** Color de superficie (cards, sidebars). @default "#f8f8f8" */
   surface?: string;
-  /** Color de texto principal. @default "#0a0a0a" */
   text?: string;
-  /** Color de texto secundario. @default "#6b7280" */
   muted?: string;
-  /** Color de texto secundario claro. @default "#9ca3af" */
   mutedLight?: string;
-  /** Color de bordes. @default "#e5e7eb" */
   border?: string;
-  /** Color negro para layouts. @default "#0a0a0a" */
   black?: string;
-  /** Color blanco para layouts. @default "#ffffff" */
   white?: string;
-  /** Fuente de títulos. @default "Georgia, serif" */
   fontHeading?: string;
-  /** Fuente de cuerpo. @default "system-ui, sans-serif" */
   fontBody?: string;
-  /** Fuente monospace. @default "monospace" */
   fontMono?: string;
-  /** Fuente display (títulos grandes). @default "Georgia, serif" */
   fontDisplay?: string;
-  /** Ancho máximo del contenedor. @default "1200px" */
   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;
@@ -152,35 +102,33 @@ export interface BlogUI {
   commentButtonTextColor?: string;
   /** Estilo de paginación. @default "minimal" */
   paginationStyle?: "minimal" | "numbered";
+  /** Fondo botones PREV/NEXT. @default accent */
+  paginationBtnBg?: string;
+  /** Texto botones PREV/NEXT. @default black */
+  paginationBtnText?: string;
+  /** Fondo botones PREV/NEXT en hover. @default text */
+  paginationBtnHoverBg?: string;
+  /** Texto botones PREV/NEXT en hover. @default white */
+  paginationBtnHoverText?: string;
+  /** Fondo página activa. @default accent */
+  paginationActiveBg?: string;
+  /** Texto página activa. @default black */
+  paginationActiveText?: string;
 }
 
-// ── Config del paquete ────────────────────────────────────────
-
 export interface BlogKitConfig {
-  /** @default 5 */
   postsPerPage?: number;
   i18n?: I18nConfig;
-  /** @default "magazine" */
   defaultLayout?: BlogListLayout;
-  /** @default "blog" */
   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 ────────────────────────────────────────────
-
 export interface PageStaticPath {
   params: { page: string };
-  props: {
-    posts: BlogPost[];
-    currentPage: number;
-    totalPages: number;
-  };
+  props: { posts: BlogPost[]; currentPage: number; totalPages: number };
 }
 
 export interface PostStaticPath {