astro-blog-kit 0.1.0

package/templates/api-comments.ts.template

@@ -0,0 +1,122 @@
+export const prerender = false;
+
+import type { APIRoute } from "astro";
+
+const WP_API_URL = process.env.WP_API_URL ?? import.meta.env.WP_API_URL;
+const WP_APP_PASSWORD = process.env.WP_APP_PASSWORD ?? import.meta.env.WP_APP_PASSWORD;
+const WP_APP_USER = process.env.WP_APP_USER ?? import.meta.env.WP_APP_USER;
+
+export const POST: APIRoute = async ({ request }) => {
+  const contentType = request.headers.get("content-type") ?? "";
+  if (!contentType.includes("application/json")) {
+    return new Response(JSON.stringify({ error: "Invalid content type" }), {
+      status: 400,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  let body: {
+    post: number;
+    author_name: string;
+    author_email: string;
+    content: string;
+    parent?: number;
+  };
+
+  try {
+    body = await request.json();
+  } catch {
+    return new Response(JSON.stringify({ error: "Invalid JSON" }), {
+      status: 400,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  if (!body.post || !body.author_name || !body.author_email || !body.content) {
+    return new Response(JSON.stringify({ error: "Missing required fields" }), {
+      status: 422,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(body.author_email)) {
+    return new Response(JSON.stringify({ error: "Invalid email" }), {
+      status: 422,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const sanitizedContent = body.content
+    .replace(/<[^>]*>/g, "")
+    .trim()
+    .slice(0, 5000);
+
+  if (sanitizedContent.length === 0) {
+    return new Response(JSON.stringify({ error: "Comment content is empty" }), {
+      status: 422,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const wpPayload = {
+    post: body.post,
+    author_name: body.author_name.trim().slice(0, 245),
+    author_email: body.author_email.trim(),
+    content: sanitizedContent,
+    parent: body.parent ?? 0,
+  };
+
+  try {
+    const credentials = btoa(`${WP_APP_USER}:${WP_APP_PASSWORD}`);
+
+    const wpResponse = await fetch(`${WP_API_URL}/wp-json/wp/v2/comments`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Basic ${credentials}`,
+      },
+      body: JSON.stringify(wpPayload),
+    });
+
+    const wpData = await wpResponse.json();
+
+    if (!wpResponse.ok) {
+      console.error("WP API error:", wpData);
+      return new Response(
+        JSON.stringify({ error: "Failed to submit comment" }),
+        {
+          status: wpResponse.status,
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+    }
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        message: "Comment submitted and awaiting moderation",
+        id: wpData.id,
+      }),
+      {
+        status: 201,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  } catch (error) {
+    console.error("Proxy error:", error);
+    return new Response(
+      JSON.stringify({ error: "Internal server error" }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+};
+
+export const GET: APIRoute = () =>
+  new Response(JSON.stringify({ error: "Method not allowed" }), {
+    status: 405,
+    headers: { "Content-Type": "application/json" },
+  });

package/templates/blog-config.ts.template

@@ -0,0 +1,24 @@
+import { defineBlogConfig } from 'astro-blog-kit';
+
+export default defineBlogConfig({
+  wpUrl: '__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',
+  },
+});

package/templates/blog-index.astro.template

@@ -0,0 +1,41 @@
+---
+import { BlogList } from "astro-blog-kit/components";
+import { createWPClient } from "astro-blog-kit/utils";
+import config from "../../blog.config";
+
+const wp = createWPClient(config.wpUrl);
+const { posts, totalPages } = await wp.getPosts({ perPage: config.postsPerPage ?? 5 });
+
+const t = {
+  blog: {
+    tagline: "Our Blog",
+    title_line1: "Latest",
+    title_line2: "Articles",
+    description: "Welcome to our blog.",
+    btncta: "Read more",
+    btn_prev: "Previous",
+    btn_next: "Next",
+  },
+};
+---
+
+<html lang={config.locale ?? "en"}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Blog</title>
+  </head>
+  <body>
+    <BlogList
+      posts={posts}
+      currentPage={1}
+      totalPages={totalPages}
+      basePath="/blog/page/"
+      blogBase="/blog/"
+      dateLocale={config.locale ?? "en"}
+      t={t}
+      locale={config.locale ?? "en"}
+      layout={config.defaultLayout ?? "magazine"}
+    />
+  </body>
+</html>

package/templates/blog-page.astro.template

@@ -0,0 +1,46 @@
+---
+import { BlogList } from "astro-blog-kit/components";
+import { createWPClient, getStaticPathsForPages } from "astro-blog-kit/utils";
+import config from "../../../../blog.config";
+
+export async function getStaticPaths() {
+  const wp = createWPClient(config.wpUrl);
+  const { posts } = await wp.getPosts({ perPage: 100 });
+  return getStaticPathsForPages(posts, { postsPerPage: config.postsPerPage ?? 5 });
+}
+
+const { posts, currentPage, totalPages } = Astro.props;
+
+const t = {
+  blog: {
+    tagline: "Our Blog",
+    title_line1: "Latest",
+    title_line2: "Articles",
+    description: "Welcome to our blog.",
+    btncta: "Read more",
+    btn_prev: "Previous",
+    btn_next: "Next",
+  },
+};
+---
+
+<html lang={config.locale ?? "en"}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Blog — Page {currentPage}</title>
+  </head>
+  <body>
+    <BlogList
+      posts={posts}
+      currentPage={currentPage}
+      totalPages={totalPages}
+      basePath="/blog/page/"
+      blogBase="/blog/"
+      dateLocale={config.locale ?? "en"}
+      t={t}
+      locale={config.locale ?? "en"}
+      layout={config.defaultLayout ?? "magazine"}
+    />
+  </body>
+</html>

package/templates/blog-slug.astro.template

@@ -0,0 +1,41 @@
+---
+import { BlogPost, Comments, CommentForm } from "astro-blog-kit/components";
+import { createWPClient, getStaticPathsForPosts } from "astro-blog-kit/utils";
+import config from "../../../blog.config";
+
+export async function getStaticPaths() {
+  const wp = createWPClient(config.wpUrl);
+  const posts = await wp.getAllPosts();
+  return getStaticPathsForPosts(posts);
+}
+
+const { post } = Astro.props;
+
+const wp = createWPClient(config.wpUrl);
+const comments = post.id ? await wp.getComments(post.id) : [];
+
+const t = {
+  blog: {
+    tagline: "Our Blog",
+    title_line1: "Latest",
+    title_line2: "Articles",
+    description: "Welcome to our blog.",
+    btncta: "Read more",
+    btn_prev: "Back to blog",
+    btn_next: "Next",
+  },
+};
+---
+
+<html lang={config.locale ?? "en"}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title set:html={post.title.rendered} />
+  </head>
+  <body>
+    <BlogPost post={post} t={t} lang={config.locale ?? "en"} />
+    <Comments comments={comments} postId={post.id ?? 0} />
+    <CommentForm postId={post.id ?? 0} apiRoute="/api/comments" />
+  </body>
+</html>

package/types.ts

@@ -0,0 +1,157 @@
+// ─────────────────────────────────────────────────────────────
+// astro-blog-kit · types.ts
+// ─────────────────────────────────────────────────────────────
+
+// ── Post ──────────────────────────────────────────────────────
+
+/**
+ * Forma normalizada de un post de blog.
+ * Compatible con WordPress REST API (_embedded).
+ */
+export interface BlogPost {
+  id?: number;
+  slug: string;
+  date: string;
+  modified?: 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;
+    }[][];
+  };
+  heroImage?: string;
+  lang?: string;
+  tags?: string[];
+  readingTime?: number;
+}
+
+// ── Layouts ───────────────────────────────────────────────────
+
+export type BlogListLayout = "grid" | "list" | "magazine";
+
+// ── i18n ──────────────────────────────────────────────────────
+
+export interface I18nConfig {
+  locales: string[];
+  defaultLocale: string;
+}
+
+export interface BlogTranslations {
+  blog: {
+    tagline: string;
+    title_line1: string;
+    title_line2: string;
+    description: string;
+    btncta: string;
+    btn_prev: string;
+    btn_next: string;
+  };
+}
+
+// ── Paginación ────────────────────────────────────────────────
+
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  basePath: string;
+  blogBase: string;
+  t: BlogTranslations;
+}
+
+// ── BlogList ──────────────────────────────────────────────────
+
+export interface BlogListProps {
+  posts: BlogPost[];
+  currentPage: number;
+  totalPages: number;
+  basePath: string;
+  blogBase: string;
+  dateLocale: string;
+  t: BlogTranslations;
+  locale: string;
+  /** @default "magazine" */
+  layout?: BlogListLayout;
+}
+
+// ── BlogPost componente ───────────────────────────────────────
+
+export interface BlogPostProps {
+  post: BlogPost;
+  t: BlogTranslations;
+  lang: string;
+}
+
+// ── Config del paquete ────────────────────────────────────────
+
+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;
+}
+
+export interface BlogKitConfig {
+  /** @default 5 */
+  postsPerPage?: number;
+  i18n?: I18nConfig;
+  /** @default "magazine" */
+  defaultLayout?: BlogListLayout;
+  /** @default "blog" */
+  collectionName?: string;
+  /** Tema visual del blog */
+  theme?: BlogTheme;
+}
+
+// ── getStaticPaths ────────────────────────────────────────────
+
+export interface PageStaticPath {
+  params: { page: string };
+  props: {
+    posts: BlogPost[];
+    currentPage: number;
+    totalPages: number;
+  };
+}
+
+export interface PostStaticPath {
+  params: { slug: string };
+  props: { post: BlogPost };
+}

package/utils/collections.ts

@@ -0,0 +1,87 @@
+// ─────────────────────────────────────────────────────────────
+// astro-blog-kit · utils/collections.ts
+// Normalización de datos y helpers de filtrado/ordenamiento.
+// Enfocado en WordPress como fuente principal.
+// ─────────────────────────────────────────────────────────────
+
+import type { BlogPost, BlogKitConfig } from "../types";
+
+// ── Normalización WordPress → BlogPost ────────────────────────
+
+/**
+ * Normaliza un post de la WordPress REST API al formato BlogPost.
+ *
+ * @example
+ * const response = await fetch('/wp-json/wp/v2/posts?_embed');
+ * const wpPosts = await response.json();
+ * const posts = wpPosts.map(normalizeWPPost);
+ */
+export function normalizeWPPost(wpPost: Record<string, any>): BlogPost {
+  return {
+    id: wpPost.id,
+    slug: wpPost.slug,
+    date: wpPost.date,
+    modified: wpPost.modified,
+    title: {
+      rendered: wpPost.title?.rendered ?? "",
+    },
+    excerpt: {
+      rendered: wpPost.excerpt?.rendered ?? "",
+    },
+    content: {
+      rendered: wpPost.content?.rendered ?? "",
+    },
+    _embedded: wpPost._embedded,
+    lang: wpPost.lang,
+    tags: wpPost._embedded?.["wp:term"]?.[0]?.map(
+      (t: { name: string }) => t.name
+    ),
+  };
+}
+
+// ── Filtros y ordenamiento ────────────────────────────────────
+
+/**
+ * Ordena posts por fecha descendente (más reciente primero).
+ */
+export function sortPostsByDate(posts: BlogPost[]): BlogPost[] {
+  return [...posts].sort(
+    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+}
+
+/**
+ * Filtra posts por locale.
+ * Si el post no tiene lang definido, se incluye en todos los locales.
+ *
+ * @example
+ * filterPostsByLang(posts, 'es') // posts en español + posts sin lang
+ */
+export function filterPostsByLang(
+  posts: BlogPost[],
+  lang: string
+): BlogPost[] {
+  return posts.filter((post) => !post.lang || post.lang === lang);
+}
+
+/**
+ * Aplica filtros según la config y ordena por fecha:
+ * - Filtra por lang si i18n está activo
+ * - Ordena por fecha descendente
+ *
+ * @example
+ * const posts = preparePosts(allPosts, 'es', config);
+ */
+export function preparePosts(
+  posts: BlogPost[],
+  lang?: string,
+  config?: BlogKitConfig
+): BlogPost[] {
+  let result = [...posts];
+
+  if (lang && config?.i18n) {
+    result = filterPostsByLang(result, lang);
+  }
+
+  return sortPostsByDate(result);
+}

package/utils/i18n.ts

@@ -0,0 +1,129 @@
+// ─────────────────────────────────────────────────────────────
+// astro-blog-kit · utils/i18n.ts
+// ─────────────────────────────────────────────────────────────
+
+import type { BlogKitConfig, BlogTranslations, I18nConfig } from "../types";
+
+// ── Helper interno ────────────────────────────────────────────
+
+/**
+ * Determina si i18n está habilitado en la config del paquete.
+ */
+export function isI18nEnabled(
+  config?: BlogKitConfig
+): config is BlogKitConfig & { i18n: I18nConfig } {
+  return Array.isArray(config?.i18n?.locales) && config.i18n.locales.length > 0;
+}
+
+// ── getLang ───────────────────────────────────────────────────
+
+/**
+ * Extrae el locale activo de la URL actual.
+ * Si i18n no está activo, devuelve el defaultLocale.
+ *
+ * @example
+ * getLang(Astro.url, import.meta.env.BASE_URL, config) // → 'es'
+ */
+export function getLang(
+  url: URL,
+  base: string,
+  config?: BlogKitConfig
+): string {
+  const defaultLocale = config?.i18n?.defaultLocale ?? "en";
+
+  if (!isI18nEnabled(config)) {
+    return defaultLocale;
+  }
+
+  const basePath = base.endsWith("/") ? base.slice(0, -1) : base;
+  const pathname = url.pathname.replace(basePath, "") || "/";
+  const segments = pathname.split("/").filter(Boolean);
+  const candidate = segments[0];
+
+  if (candidate && config.i18n.locales.includes(candidate)) {
+    return candidate;
+  }
+
+  return defaultLocale;
+}
+
+// ── useTranslations ───────────────────────────────────────────
+
+/**
+ * Devuelve el objeto de traducciones para el locale dado.
+ *
+ * @example
+ * const t = useTranslations('es', { en, es });
+ */
+export function useTranslations<T extends BlogTranslations>(
+  lang: string,
+  translations: Record<string, T>,
+  fallbackLang = "en"
+): T {
+  return (
+    translations[lang] ??
+    translations[fallbackLang] ??
+    Object.values(translations)[0]
+  );
+}
+
+// ── URL helpers ───────────────────────────────────────────────
+
+/**
+ * Devuelve la URL base del blog para el locale actual.
+ *
+ * - Sin i18n:              /blog/
+ * - Con i18n + default:    /blog/
+ * - Con i18n + otro lang:  /es/blog/
+ */
+export function getBlogBase(
+  lang: string,
+  base: string,
+  config?: BlogKitConfig
+): string {
+  const b = base.endsWith("/") ? base : `${base}/`;
+
+  if (!isI18nEnabled(config)) {
+    return `${b}blog/`;
+  }
+
+  const isDefault = lang === config.i18n.defaultLocale;
+  return isDefault ? `${b}blog/` : `${b}${lang}/blog/`;
+}
+
+/**
+ * Devuelve la URL base de paginación para el locale actual.
+ *
+ * @example
+ * getPageBase('es', '/', config) // → '/es/blog/page/'
+ */
+export function getPageBase(
+  lang: string,
+  base: string,
+  config?: BlogKitConfig
+): string {
+  return `${getBlogBase(lang, base, config)}page/`;
+}
+
+/**
+ * Devuelve el locale BCP 47 para toLocaleDateString.
+ *
+ * @example
+ * getDateLocale('es') // → 'es-US'
+ */
+export function getDateLocale(
+  lang: string,
+  map?: Record<string, string>
+): string {
+  const defaults: Record<string, string> = {
+    en: "en-US",
+    es: "es-US",
+    fr: "fr-FR",
+    de: "de-DE",
+    pt: "pt-BR",
+    it: "it-IT",
+  };
+
+  const merged = { ...defaults, ...map };
+  return merged[lang] ?? `${lang}-${lang.toUpperCase()}`;
+}

package/utils/index.ts

@@ -0,0 +1,41 @@
+// ─────────────────────────────────────────────────────────────
+// astro-blog-kit · utils/index.ts
+// Punto de entrada de todas las utilidades.
+// Importa desde: 'astro-blog-kit/utils'
+// ─────────────────────────────────────────────────────────────
+
+export {
+  isI18nEnabled,
+  getLang,
+  useTranslations,
+  getBlogBase,
+  getPageBase,
+  getDateLocale,
+} from "./i18n";
+
+export {
+  getStaticPathsForPosts,
+  getStaticPathsForPages,
+  toSlug,
+  estimateReadingTime,
+  getFeaturedImageUrl,
+} from "./slug";
+
+export {
+  normalizeWPPost,
+  sortPostsByDate,
+  filterPostsByLang,
+  preparePosts,
+} from "./collections";
+
+export {
+  createWPClient,
+} from "./wordpress";
+
+export type {
+  WPComment,
+  WPCategory,
+  WPTag,
+  FetchPostsOptions,
+  SubmitCommentPayload,
+} from "./wordpress";