astro-blog-kit 0.3.6 → 0.3.8

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,12 +4,12 @@
 
 import type { AstroIntegration } from "astro";
 import type { Plugin } from "vite";
-import type { BlogKitConfig, BlogTheme } from "./types";
+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",
@@ -29,27 +29,35 @@ 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;`,
+    `  --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");
 }
@@ -58,9 +66,9 @@ function generateThemeCSS(theme: BlogTheme = {}): string {
  * Plugin de Vite que inyecta el CSS del tema como módulo CSS real,
  * compatible con Rolldown (Astro 7+).
  */
-function createThemePlugin(theme: BlogTheme): Plugin {
+function createThemePlugin(theme: BlogTheme, ui: BlogUI): Plugin {
   const THEME_ID = "\0astro-blog-kit-theme.css";
-  const css = generateThemeCSS(theme);
+  const css = generateThemeCSS(theme, ui);
 
   return {
     name: "astro-blog-kit:theme",
@@ -109,9 +117,10 @@ export function blogKit(config: BlogKitConfig = {}): AstroIntegration {
           `astro-blog-kit initialized — layout: ${resolvedConfig.defaultLayout}, postsPerPage: ${resolvedConfig.postsPerPage}`
         );
 
+        // Pasa tanto theme como ui al plugin
         updateConfig({
           vite: {
-            plugins: [createThemePlugin(resolvedConfig.theme)],
+            plugins: [createThemePlugin(resolvedConfig.theme, resolvedConfig.ui)],
           },
         });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-blog-kit",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "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 {