astro-blog-kit 0.1.0

package/components/Comments.astro

@@ -0,0 +1,245 @@
+---
+import type { WPComment } from "../utils/wordpress";
+
+interface Props {
+  comments: WPComment[];
+  postId: number;
+}
+
+const { comments, postId } = Astro.props;
+
+// Organiza comentarios en árbol (replies anidadas)
+const topLevel = comments.filter((c: WPComment) => c.parent === 0);
+const getReplies = (parentId: number) =>
+  comments.filter((c: WPComment) => c.parent === parentId);
+---
+
+<section class="comments" id="comments">
+
+  <h2 class="comments__title">
+    {comments.length === 0
+      ? "No comments yet"
+      : `${comments.length} Comment${comments.length === 1 ? "" : "s"}`
+    }
+  </h2>
+
+  {comments.length === 0 && (
+    <p class="comments__empty">Be the first to leave a comment.</p>
+  )}
+
+  {topLevel.length > 0 && (
+    <ol class="comments__list">
+      {topLevel.map((comment: WPComment) => {
+        const replies = getReplies(comment.id);
+        const avatar = comment.author_avatar_urls?.["48"];
+
+        return (
+          <li class="comment" id={`comment-${comment.id}`}>
+            <div class="comment__header">
+              {avatar && (
+                <img
+                  src={avatar}
+                  alt={comment.author_name}
+                  class="comment__avatar"
+                  width="48"
+                  height="48"
+                  loading="lazy"
+                />
+              )}
+              <div class="comment__meta">
+                <span class="comment__author">{comment.author_name}</span>
+                <time class="comment__date">
+                  {new Date(comment.date).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })}
+                </time>
+              </div>
+            </div>
+
+            <div
+              class="comment__body"
+              set:html={comment.content.rendered}
+            />
+
+            <button
+              class="comment__reply-btn"
+              data-reply-to={comment.id}
+              data-reply-name={comment.author_name}
+            >
+              ↩ Reply
+            </button>
+
+            {replies.length > 0 && (
+              <ol class="comment__replies">
+                {replies.map((reply: WPComment) => {
+                  const replyAvatar = reply.author_avatar_urls?.["48"];
+                  return (
+                    <li class="comment comment--reply" id={`comment-${reply.id}`}>
+                      <div class="comment__header">
+                        {replyAvatar && (
+                          <img
+                            src={replyAvatar}
+                            alt={reply.author_name}
+                            class="comment__avatar comment__avatar--small"
+                            width="36"
+                            height="36"
+                            loading="lazy"
+                          />
+                        )}
+                        <div class="comment__meta">
+                          <span class="comment__author">{reply.author_name}</span>
+                          <time class="comment__date">
+                            {new Date(reply.date).toLocaleDateString("en-US", {
+                              year: "numeric",
+                              month: "long",
+                              day: "numeric",
+                            })}
+                          </time>
+                        </div>
+                      </div>
+                      <div
+                        class="comment__body"
+                        set:html={reply.content.rendered}
+                      />
+                    </li>
+                  );
+                })}
+              </ol>
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  )}
+
+</section>
+
+<style>
+  .comments {
+    max-width: 720px;
+    margin: 4rem auto 0;
+    padding: 0 2rem;
+    font-family: var(--font-body);
+  }
+
+  .comments__title {
+    font-family: var(--font-display);
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-text);
+    margin: 0 0 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .comments__empty {
+    color: var(--color-muted);
+    font-size: 0.95rem;
+  }
+
+  .comments__list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  /* Comment */
+  .comment {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .comment--reply {
+    padding-left: 1.5rem;
+    border-left: 2px solid var(--color-border);
+  }
+
+  .comment__header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .comment__avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--color-border);
+    flex-shrink: 0;
+  }
+
+  .comment__avatar--small {
+    width: 36px;
+    height: 36px;
+  }
+
+  .comment__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+  }
+
+  .comment__author {
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: var(--color-text);
+  }
+
+  .comment__date {
+    font-size: 0.75rem;
+    color: var(--color-muted);
+    font-family: var(--font-mono);
+  }
+
+  .comment__body {
+    font-size: 0.95rem;
+    color: var(--color-muted-light);
+    line-height: 1.75;
+  }
+
+  .comment__body :global(p) {
+    margin: 0 0 0.75rem;
+  }
+
+  .comment__body :global(p:last-child) {
+    margin: 0;
+  }
+
+  .comment__reply-btn {
+    align-self: flex-start;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-family: var(--font-mono);
+    color: var(--color-muted);
+    padding: 0;
+    transition: color 0.15s;
+  }
+
+  .comment__reply-btn:hover {
+    color: var(--color-accent);
+  }
+
+  .comment__replies {
+    list-style: none;
+    padding: 0;
+    margin: 0.5rem 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 768px) {
+    .comments {
+      padding: 0 1.25rem;
+    }
+  }
+</style>

package/components/Pagination.astro

@@ -0,0 +1,101 @@
+---
+import type { PaginationProps } from "../types";
+
+interface Props extends PaginationProps {}
+
+const { currentPage, totalPages, basePath, blogBase, t } = Astro.props;
+
+const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+---
+
+{totalPages > 1 && (
+  <nav class="pagination" aria-label="Blog pagination">
+
+    {currentPage > 1 && (
+      
+       <a href={currentPage === 2 ? blogBase : `${basePath}${currentPage - 1}/`}
+        class="pagination__btn"
+      >
+        ← {t.blog.btn_prev}
+      </a>
+    )}
+
+    <div class="pagination__pages">
+      {pages.map((pageNum) => (
+        
+        <a  href={pageNum === 1 ? blogBase : `${basePath}${pageNum}/`}
+          class={`pagination__page ${pageNum === currentPage ? "pagination__page--active" : ""}`}
+          aria-current={pageNum === currentPage ? "page" : undefined}
+        >
+          {pageNum}
+        </a>
+      ))}
+    </div>
+
+    {currentPage < totalPages && (
+      <a href={`${basePath}${currentPage + 1}/`} class="pagination__btn">
+        {t.blog.btn_next} →
+      </a>
+    )}
+
+  </nav>
+)}
+
+<style>
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    padding-top: 3rem;
+    border-top: 2px solid var(--color-gray-200);
+  }
+
+  .pagination__btn {
+    padding: 0.6rem 1.25rem;
+    background-color: var(--color-black);
+    color: var(--color-white);
+    font-family: var(--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;
+  }
+
+  .pagination__btn:hover {
+    background-color: var(--color-yellow);
+    color: var(--color-black);
+  }
+
+  .pagination__pages {
+    display: flex;
+    gap: 0.4rem;
+  }
+
+  .pagination__page {
+    width: 2.5rem;
+    height: 2.5rem;
+    display: grid;
+    place-items: center;
+    font-weight: 700;
+    font-size: 0.9rem;
+    color: var(--color-gray-600);
+    border: 2px solid var(--color-gray-200);
+    text-decoration: none;
+    transition: border-color 0.2s ease, color 0.2s ease;
+  }
+
+  .pagination__page:hover {
+    border-color: var(--color-black);
+    color: var(--color-black);
+  }
+
+  .pagination__page--active {
+    background-color: var(--color-yellow);
+    border-color: var(--color-yellow);
+    color: var(--color-black);
+  }
+</style>

package/components/index.ts

@@ -0,0 +1,14 @@
+// ─────────────────────────────────────────────────────────────
+// astro-blog-kit · components/index.ts
+// Punto de entrada de todos los componentes.
+// Importa desde: 'astro-blog-kit/components'
+// ─────────────────────────────────────────────────────────────
+
+export { default as BlogCard } from "./BlogCard.astro";
+export { default as BlogList } from "./BlogList.astro";
+export { default as BlogPost } from "./BlogPost.astro";
+export { default as Pagination } from "./Pagination.astro";
+export { default as Comments } from "./Comments.astro";
+export { default as CommentForm } from "./CommentForm.astro";
+
+export { MagazineLayout, GridLayout, ListLayout } from "./BlogList/index.ts";

package/define-config.ts

@@ -0,0 +1,65 @@
+// ─────────────────────────────────────────────────────────────
+// astro-blog-kit · define-config.ts
+// Función helper para tipar la config del blog.
+// ─────────────────────────────────────────────────────────────
+
+import type { BlogKitConfig, BlogTheme } from "./types";
+
+export interface BlogConfig {
+  /** URL de tu WordPress. Ej: https://cms.tudominio.com */
+  wpUrl: string;
+  /** Posts por página. @default 5 */
+  postsPerPage?: number;
+  /** Layout por defecto. @default "magazine" */
+  defaultLayout?: "grid" | "list" | "magazine";
+  /** Locale por defecto. @default "en" */
+  locale?: string;
+  /** Tema visual */
+  theme?: BlogTheme;
+  /** Configuración de i18n */
+  i18n?: {
+    locales: string[];
+    defaultLocale: string;
+  };
+}
+
+/**
+ * Define la configuración del blog con tipado completo.
+ * Genera blog.config.ts en la raíz del proyecto.
+ *
+ * @example
+ * ```ts
+ * // blog.config.ts
+ * import { defineBlogConfig } from 'astro-blog-kit';
+ *
+ * export default defineBlogConfig({
+ *   wpUrl: 'https://cms.tudominio.com',
+ *   postsPerPage: 5,
+ *   defaultLayout: 'magazine',
+ *   locale: 'en',
+ *   theme: {
+ *     accent: '#facc15',
+ *   },
+ * });
+ * ```
+ */
+export function defineBlogConfig(config: BlogConfig): BlogConfig {
+  return {
+    postsPerPage: 5,
+    defaultLayout: "magazine",
+    locale: "en",
+    ...config,
+  };
+}
+
+/**
+ * Convierte BlogConfig a BlogKitConfig para usar en astro.config.mjs
+ */
+export function toBlogKitConfig(config: BlogConfig): BlogKitConfig {
+  return {
+    postsPerPage: config.postsPerPage,
+    defaultLayout: config.defaultLayout,
+    theme: config.theme,
+    i18n: config.i18n,
+  };
+}

package/index.ts

@@ -0,0 +1,41 @@
+// ─────────────────────────────────────────────────────────────
+// astro-blog-kit · index.ts
+// Punto de entrada principal del paquete.
+// Importa desde: 'astro-blog-kit'
+// ─────────────────────────────────────────────────────────────
+
+// Tipos
+export type {
+  BlogPost,
+  BlogListLayout,
+  BlogListProps,
+  BlogPostProps,
+  BlogTranslations,
+  BlogKitConfig,
+  I18nConfig,
+  PaginationProps,
+  PageStaticPath,
+  PostStaticPath,
+} from "./types";
+
+// Utils
+export {
+  // i18n
+  isI18nEnabled,
+  getLang,
+  useTranslations,
+  getBlogBase,
+  getPageBase,
+  getDateLocale,
+  // slug
+  getStaticPathsForPosts,
+  getStaticPathsForPages,
+  toSlug,
+  estimateReadingTime,
+  getFeaturedImageUrl,
+  // collections
+  normalizeWPPost,
+  sortPostsByDate,
+  filterPostsByLang,
+  preparePosts,
+} from "./utils/index.ts";

package/integration.ts

@@ -0,0 +1,137 @@
+// ─────────────────────────────────────────────────────────────
+// astro-blog-kit · integration.ts
+// ─────────────────────────────────────────────────────────────
+
+import type { AstroIntegration } from "astro";
+import type { BlogKitConfig, BlogTheme } from "./types";
+
+/**
+ * Genera el bloque de CSS variables a partir del tema.
+ */
+function generateThemeCSS(theme: BlogTheme = {}): 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",
+    containerMax: theme.containerMax ?? "1200px",
+  };
+
+  return `
+    :root {
+      --color-accent:       ${t.accent};
+      --color-bg:           ${t.background};
+      --color-surface:      ${t.surface};
+      --color-text:         ${t.text};
+      --color-muted:        ${t.muted};
+      --color-muted-light:  ${t.mutedLight};
+      --color-border:       ${t.border};
+      --color-black:        ${t.black};
+      --color-white:        ${t.white};
+      --color-yellow:       ${t.accent};
+      --color-gray-100:     #f3f4f6;
+      --color-gray-200:     #e5e7eb;
+      --color-gray-300:     #d1d5db;
+      --color-gray-400:     #9ca3af;
+      --color-gray-600:     #4b5563;
+      --font-heading:       ${t.fontHeading};
+      --font-body:          ${t.fontBody};
+      --font-mono:          ${t.fontMono};
+      --font-display:       ${t.fontDisplay};
+      --container-max:      ${t.containerMax};
+      --transition:         all 0.2s ease;
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: var(--font-body);
+      background-color: var(--color-bg);
+      color: var(--color-text);
+      line-height: 1.6;
+    }
+  `;
+}
+
+/**
+ * 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: 'magazine',
+ *       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",
+    collectionName: config.collectionName ?? "blog",
+    i18n: config.i18n ?? { locales: [], defaultLocale: "en" },
+    theme: config.theme ?? {},
+  };
+
+  return {
+    name: "astro-blog-kit",
+
+    hooks: {
+      "astro:config:setup": ({ 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);
+    })();
+  `);
+
+        // Inyecta config global
+        injectScript(
+          "page-ssr",
+          `globalThis.__BLOG_KIT_CONFIG__ = ${JSON.stringify(resolvedConfig)};`
+        );
+      },
+
+      "astro:config:done": ({ logger }) => {
+        if (resolvedConfig.i18n.locales.length > 0) {
+          logger.info(
+            `i18n enabled — locales: [${resolvedConfig.i18n.locales.join(", ")}], default: ${resolvedConfig.i18n.defaultLocale}`
+          );
+        }
+      },
+    },
+  };
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "astro-blog-kit",
+  "version": "0.1.0",
+  "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",
+  "exports": {
+    ".": "./index.ts",
+    "./integration": "./integration.ts",
+    "./components": "./components/index.ts",
+    "./utils": "./utils/index.ts"
+  },
+  "files": [
+    "index.ts",
+    "integration.ts",
+    "types.ts",
+    "virtual.d.ts",
+    "cli.ts",
+    "define-config.ts",
+    "templates",
+    "components",
+    "utils"
+  ],
+  "keywords": [
+    "astro",
+    "blog",
+    "wordpress",
+    "i18n",
+    "astro-integration",
+    "astro-component",
+    "headless-cms"
+  ],
+  "peerDependencies": {
+    "astro": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "@clack/prompts": "latest",
+    "@types/node": "latest",
+    "astro": "^6.3.1"
+  }
+}