wp-astrojs-integration 0.1.0

package/dist/schemas/index.js

@@ -0,0 +1,199 @@
+import { z } from 'astro/zod';
+/**
+ * Base schema shared by all WordPress content types
+ * Can be extended with custom fields using .extend() or .merge()
+ */
+export const baseWordPressSchema = z.object({
+    id: z.number(),
+    date: z.string(),
+    date_gmt: z.string(),
+    guid: z.object({
+        rendered: z.string(),
+    }),
+    modified: z.string(),
+    modified_gmt: z.string(),
+    slug: z.string(),
+    status: z.string(),
+    type: z.string(),
+    link: z.string().url(),
+    title: z.object({
+        rendered: z.string(),
+    }),
+    author: z.number(),
+    meta: z.union([z.record(z.any()), z.array(z.any())]).optional(),
+    _links: z.any(),
+});
+/**
+ * Schema for content types (posts and pages)
+ * Extend this for custom post types with content fields
+ */
+export const contentWordPressSchema = baseWordPressSchema.extend({
+    content: z.object({
+        rendered: z.string(),
+        protected: z.boolean(),
+    }),
+    excerpt: z.object({
+        rendered: z.string(),
+        protected: z.boolean(),
+    }),
+    featured_media: z.number().optional(),
+    comment_status: z.string(),
+    ping_status: z.string(),
+    template: z.string(),
+    acf: z.union([z.record(z.any()), z.array(z.any())]).optional(),
+    _embedded: z.any().optional(),
+});
+/**
+ * Default schema for WordPress posts
+ * Extend with .extend() to add custom ACF fields or taxonomies
+ *
+ * @example
+ * const customPostSchema = postSchema.extend({
+ *   acf: z.object({
+ *     custom_field: z.string().optional(),
+ *   }).optional(),
+ * });
+ */
+export const postSchema = contentWordPressSchema.extend({
+    sticky: z.boolean(),
+    format: z.string(),
+    categories: z.array(z.number()).default([]),
+    tags: z.array(z.number()).default([]),
+});
+/**
+ * Default schema for WordPress pages
+ * Extend with .extend() to add custom ACF fields
+ *
+ * @example
+ * const customPageSchema = pageSchema.extend({
+ *   acf: z.object({
+ *     hero_image: z.number().optional(),
+ *   }).optional(),
+ * });
+ */
+export const pageSchema = contentWordPressSchema.extend({
+    parent: z.number().default(0),
+    menu_order: z.number().default(0),
+    class_list: z.array(z.string()).default([]),
+});
+/**
+ * Schema for WordPress media items
+ */
+export const mediaSchema = baseWordPressSchema.extend({
+    comment_status: z.string(),
+    ping_status: z.string(),
+    alt_text: z.string(),
+    caption: z.object({
+        rendered: z.string(),
+    }),
+    description: z.object({
+        rendered: z.string(),
+    }),
+    media_type: z.string(),
+    mime_type: z.string(),
+    media_details: z.object({
+        width: z.number(),
+        height: z.number(),
+        file: z.string(),
+        filesize: z.number().optional(),
+        sizes: z.record(z.object({
+            file: z.string(),
+            width: z.number(),
+            height: z.number(),
+            filesize: z.number().optional(),
+            mime_type: z.string(),
+            source_url: z.string(),
+        })),
+        image_meta: z.any(),
+    }),
+    source_url: z.string(),
+});
+/**
+ * Schema for WordPress categories and taxonomies
+ * Extend with .extend() to add custom ACF fields to taxonomies
+ *
+ * @example
+ * const customCategorySchema = categorySchema.extend({
+ *   acf: z.object({
+ *     color: z.string().optional(),
+ *   }).optional(),
+ * });
+ */
+export const categorySchema = z.object({
+    id: z.number(),
+    count: z.number(),
+    description: z.string(),
+    link: z.string().url(),
+    name: z.string(),
+    slug: z.string(),
+    taxonomy: z.string(),
+    parent: z.number().default(0),
+    meta: z.array(z.any()).or(z.record(z.any())),
+    acf: z.union([z.record(z.any()), z.array(z.any())]).optional(),
+    _embedded: z.any().optional(),
+    _links: z.any(),
+});
+/**
+ * Schema for WordPress embedded media (used in _embedded field)
+ */
+export const embeddedMediaSchema = z.object({
+    id: z.number(),
+    date: z.string(),
+    slug: z.string(),
+    type: z.string(),
+    link: z.string(),
+    title: z.object({
+        rendered: z.string(),
+    }),
+    author: z.number(),
+    featured_media: z.number(),
+    caption: z.object({
+        rendered: z.string(),
+    }),
+    alt_text: z.string(),
+    media_type: z.string(),
+    mime_type: z.string(),
+    media_details: z.object({
+        width: z.number(),
+        height: z.number(),
+        file: z.string(),
+        filesize: z.number().optional(),
+        sizes: z.record(z.object({
+            file: z.string(),
+            width: z.number(),
+            height: z.number(),
+            filesize: z.number().optional(),
+            mime_type: z.string(),
+            source_url: z.string(),
+        })),
+        image_meta: z.any().optional(),
+    }),
+    source_url: z.string(),
+    acf: z.any().optional(),
+    _links: z.any().optional(),
+});
+/**
+ * Schema for WordPress site settings (requires authentication)
+ */
+export const settingsSchema = z.object({
+    title: z.string(),
+    description: z.string(),
+    url: z.string().url(),
+    email: z.string().email().optional(),
+    timezone: z.string(),
+    date_format: z.string(),
+    time_format: z.string(),
+    start_of_week: z.number(),
+    language: z.string(),
+    use_smilies: z.boolean(),
+    default_category: z.number(),
+    default_post_format: z.string(),
+    posts_per_page: z.number(),
+    show_on_front: z.string(),
+    page_on_front: z.number(),
+    page_for_posts: z.number(),
+    default_ping_status: z.string(),
+    default_comment_status: z.string(),
+    site_logo: z.number().nullable().optional(),
+    site_icon: z.number().nullable().optional(),
+});

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "wp-astrojs-integration",
+  "version": "0.1.0",
+  "description": "Fast and better WordPress integration for Astro.js with live loaders, client API, and Gutenberg block support",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components": {
+      "import": "./src/components/index.ts"
+    },
+    "./components/WPImage.astro": {
+      "import": "./src/components/WPImage.astro"
+    },
+    "./components/WPContent.astro": {
+      "import": "./src/components/WPContent.astro"
+    }
+  },
+  "files": [
+    "dist",
+    "src/components"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "astro",
+    "wordpress",
+    "cms",
+    "gutenberg",
+    "headless",
+    "astro-integration",
+    "wp-api"
+  ],
+  "author": "juvojustin",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JUVOJustin/astrojs-wp-integration.git"
+  },
+  "bugs": {
+    "url": "https://github.com/JUVOJustin/astrojs-wp-integration/issues"
+  },
+  "homepage": "https://github.com/JUVOJustin/astrojs-wp-integration#readme",
+  "license": "MIT",
+  "peerDependencies": {
+    "astro": "^5.0.0"
+  },
+  "dependencies": {
+    "astro": "^5.16.6"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2"
+  }
+}

package/src/components/WPContent.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * WPContent component for rendering WordPress Gutenberg content
+ * Automatically loads block styles from WordPress site
+ * 
+ * Features:
+ * - Dynamically loads Gutenberg block CSS from WordPress
+ * - Supports both posts and pages with Gutenberg content
+ * - Handles embedded media and custom blocks
+ */
+
+interface Props {
+  /** Rendered HTML content from WordPress */
+  content: string;
+  /** WordPress base URL for loading block styles */
+  baseUrl: string;
+  /** Additional CSS classes to apply */
+  class?: string;
+  /** Whether to load block styles (default: true) */
+  loadBlockStyles?: boolean;
+}
+
+const {
+  content,
+  baseUrl,
+  class: className = '',
+  loadBlockStyles = true,
+} = Astro.props;
+
+// Build the block styles URL
+const blockStylesUrl = loadBlockStyles
+  ? `${baseUrl}/wp-includes/css/dist/block-library/style.min.css`
+  : null;
+
+// Optional: Load theme styles for blocks
+const themeBlockStylesUrl = loadBlockStyles
+  ? `${baseUrl}/wp-includes/css/dist/block-library/theme.min.css`
+  : null;
+---
+
+{loadBlockStyles && blockStylesUrl && (
+  <>
+    <link rel="stylesheet" href={blockStylesUrl} />
+    {themeBlockStylesUrl && <link rel="stylesheet" href={themeBlockStylesUrl} />}
+  </>
+)}
+
+<div class:list={['wp-block-content', className]} set:html={content} />

package/src/components/WPImage.astro

@@ -0,0 +1,106 @@
+---
+import type { WordPressMedia, WordPressEmbeddedMedia } from '../schemas';
+
+/**
+ * Props for the WPImage component.
+ * Accepts either a mediaId for fetching, or pre-loaded media data from embedded responses.
+ */
+interface Props {
+  /** Media ID for fetching from WordPress API */
+  mediaId?: number;
+  /** Pre-loaded media data from _embed=true responses */
+  media?: WordPressMedia | WordPressEmbeddedMedia;
+  /** WordPress base URL (required if using mediaId) */
+  baseUrl?: string;
+  class?: string;
+  loading?: 'lazy' | 'eager';
+  decoding?: 'async' | 'auto' | 'sync';
+  width?: number;
+  height?: number;
+  sizes?: string;
+}
+
+const {
+  mediaId,
+  media: providedMedia,
+  baseUrl,
+  class: className = '',
+  loading = 'lazy',
+  decoding = 'async',
+  width: customWidth,
+  height: customHeight,
+  sizes = 'auto',
+} = Astro.props;
+
+let media: WordPressMedia | WordPressEmbeddedMedia | undefined;
+
+if (providedMedia) {
+  media = providedMedia;
+} else if (mediaId && baseUrl) {
+  try {
+    const url = new URL(`${baseUrl}/index.php?rest_route=/wp/v2/media/${mediaId}`);
+    const response = await fetch(url.toString());
+    if (response.ok) {
+      media = await response.json();
+    }
+  } catch (error) {
+    console.error(`Failed to fetch media ${mediaId}:`, error);
+  }
+}
+
+if (!media) {
+  console.error('WPImage: Either (mediaId + baseUrl) or media prop must be provided');
+  return;
+}
+
+/** Size data structure from WordPress media_details.sizes */
+type MediaSize = {
+  file: string;
+  width: number;
+  height: number;
+  filesize?: number;
+  mime_type: string;
+  source_url: string;
+};
+
+/**
+ * Generates srcset string from WordPress media sizes for responsive images.
+ */
+function generateSrcset(media: WordPressMedia | WordPressEmbeddedMedia): string {
+  if (!media.media_details?.sizes) {
+    return '';
+  }
+
+  const srcsetItems: string[] = [];
+  const sizes = media.media_details.sizes as Record<string, MediaSize>;
+
+  Object.entries(sizes).forEach(([_sizeName, sizeData]) => {
+    srcsetItems.push(`${sizeData.source_url} ${sizeData.width}w`);
+  });
+
+  srcsetItems.sort((a, b) => {
+    const widthA = parseInt(a.split(' ')[1]);
+    const widthB = parseInt(b.split(' ')[1]);
+    return widthA - widthB;
+  });
+
+  return srcsetItems.join(', ');
+}
+
+const alt = media.alt_text || media.title?.rendered || '';
+const width = customWidth || media.media_details?.width;
+const height = customHeight || media.media_details?.height;
+const srcset = generateSrcset(media);
+---
+
+<img
+  src={media.source_url}
+  srcset={srcset || undefined}
+  alt={alt}
+  width={width}
+  height={height}
+  loading={loading}
+  decoding={decoding}
+  sizes={sizes}
+  class={className}
+/>

package/src/components/index.ts

@@ -0,0 +1,9 @@
+/**
+ * WordPress Astro.js Integration Components
+ * 
+ * Export Astro components for WordPress content rendering
+ */
+
+// Re-export components for named imports
+export { default as WPImage } from './WPImage.astro';
+export { default as WPContent } from './WPContent.astro';