npm - @pyreon/zero - Versions diffs - 0.12.1 → 0.12.2 - Mend

@pyreon/zero 0.12.1 → 0.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/lib/index.js +1476 -82
package/lib/index.js.map +1 -1
package/lib/types/adapters/cloudflare.d.ts +26 -0
package/lib/types/adapters/cloudflare.d.ts.map +1 -0
package/lib/types/adapters/index.d.ts +3 -0
package/lib/types/adapters/index.d.ts.map +1 -1
package/lib/types/adapters/netlify.d.ts +21 -0
package/lib/types/adapters/netlify.d.ts.map +1 -0
package/lib/types/adapters/vercel.d.ts +21 -0
package/lib/types/adapters/vercel.d.ts.map +1 -0
package/lib/types/ai.d.ts +182 -0
package/lib/types/ai.d.ts.map +1 -0
package/lib/types/csp.d.ts +107 -0
package/lib/types/csp.d.ts.map +1 -0
package/lib/types/env.d.ts +118 -0
package/lib/types/env.d.ts.map +1 -0
package/lib/types/favicon.d.ts +42 -0
package/lib/types/favicon.d.ts.map +1 -1
package/lib/types/index.d.ts +13 -3
package/lib/types/index.d.ts.map +1 -1
package/lib/types/logger.d.ts +68 -0
package/lib/types/logger.d.ts.map +1 -0
package/lib/types/meta.d.ts +36 -0
package/lib/types/meta.d.ts.map +1 -1
package/lib/types/og-image.d.ts +107 -0
package/lib/types/og-image.d.ts.map +1 -0
package/lib/types/types.d.ts +1 -1
package/lib/types/types.d.ts.map +1 -1
package/package.json +35 -10
package/src/adapters/cloudflare.ts +82 -0
package/src/adapters/index.ts +13 -1
package/src/adapters/netlify.ts +84 -0
package/src/adapters/vercel.ts +84 -0
package/src/ai.ts +623 -0
package/src/csp.ts +207 -0
package/src/env.ts +344 -0
package/src/favicon.ts +221 -80
package/src/index.ts +41 -2
package/src/logger.ts +144 -0
package/src/meta.tsx +84 -2
package/src/og-image.ts +378 -0
package/src/types.ts +1 -1

package/src/meta.tsx CHANGED Viewed

@@ -1,7 +1,10 @@
 import type { VNodeChild } from '@pyreon/core'
 import { useHead } from '@pyreon/head'
+import type { FaviconPluginConfig } from './favicon'
+import { faviconLinks } from './favicon'
 import type { I18nRoutingConfig } from './i18n-routing'
 import { extractLocaleFromPath } from './i18n-routing'
+import { ogImagePath } from './og-image'
 // ─── Meta component ────────────────────────────────────────────────────────
@@ -16,6 +19,10 @@ export interface MetaProps {
   image?: string
   /** Image alt text for accessibility. */
   imageAlt?: string
+  /** Image width in pixels (og:image:width). Helps crawlers layout before loading. */
+  imageWidth?: number
+  /** Image height in pixels (og:image:height). */
+  imageHeight?: number
   /** Open Graph type. Default: "website" */
   type?: 'website' | 'article' | 'product' | 'profile'
   /** Site name for og:site_name. */
@@ -32,6 +39,8 @@ export interface MetaProps {
   alternateLocales?: Array<{ locale: string; url: string }>
   /** Robots directives. Default: "index, follow" */
   robots?: string
+  /** Convenience: set `true` to emit `noindex, nofollow`. Overrides `robots`. */
+  noIndex?: boolean
   /** Published time (ISO 8601) for article type. */
   publishedTime?: string
   /** Modified time (ISO 8601) for article type. */
@@ -44,6 +53,19 @@ export interface MetaProps {
   jsonLd?: Record<string, unknown>
   /** Additional custom meta tags. */
   extra?: Array<{ name?: string; property?: string; content: string }>
+  /**
+   * Open Graph video URL. Also sets og:video:type if the URL ends with
+   * a known extension (.mp4, .webm).
+   */
+  video?: string
+  /** Video width in pixels. */
+  videoWidth?: number
+  /** Video height in pixels. */
+  videoHeight?: number
+  /**
+   * Open Graph audio URL.
+   */
+  audio?: string
   /**
    * I18n routing config — when provided, auto-generates hreflang alternate
    * links for all locales based on the current path.
@@ -52,6 +74,22 @@ export interface MetaProps {
   i18n?: I18nRoutingConfig
   /** Base URL for building absolute hreflang URLs. e.g. "https://example.com" */
   origin?: string
+  /**
+   * Favicon plugin config — when provided, injects locale-aware favicon
+   * `<link>` tags into `<head>`. Uses the current locale to select
+   * the correct favicon set.
+   */
+  favicon?: FaviconPluginConfig
+  /**
+   * OG image template name — auto-resolves to the correct locale-specific
+   * OG image path generated by `ogImagePlugin`.
+   * Sets both `og:image` and `twitter:image` unless `image` is also provided.
+   */
+  ogTemplate?: string
+  /** Output directory for OG images. Default: "og" */
+  ogImageDir?: string
+  /** OG image format. Default: "png" */
+  ogImageFormat?: 'png' | 'jpeg'
   children?: VNodeChild
 }
@@ -116,14 +154,29 @@ export function buildMetaTags(
   const script: Array<{ type: string; children: string }> = []
   const {
-    title, description, canonical, image, imageAlt,
+    title, description, canonical, imageAlt, imageWidth, imageHeight,
     type = 'website', siteName,
     twitterCard = 'summary_large_image', twitterSite, twitterCreator,
     locale = 'en_US', alternateLocales,
-    robots = 'index, follow',
     publishedTime, modifiedTime, author, tags, jsonLd, extra,
+    video, videoWidth, videoHeight, audio,
+    favicon, ogTemplate, ogImageDir, ogImageFormat,
   } = props
+  // noIndex convenience overrides robots
+  const robots = props.noIndex ? 'noindex, nofollow' : (props.robots ?? 'index, follow')
+  // Resolve image: explicit `image` prop takes precedence over `ogTemplate`
+  const image = props.image ?? (
+    ogTemplate
+      ? ogImagePath(ogTemplate, locale !== 'en_US' ? locale : undefined, ogImageDir, ogImageFormat)
+      : undefined
+  )
+  // Auto-resolve image dimensions for OG template images
+  const resolvedImageWidth = imageWidth ?? (ogTemplate && !props.image ? 1200 : undefined)
+  const resolvedImageHeight = imageHeight ?? (ogTemplate && !props.image ? 630 : undefined)
   if (description) meta.push({ name: 'description', content: description })
   if (robots) meta.push({ name: 'robots', content: robots })
   if (author) meta.push({ name: 'author', content: author })
@@ -133,10 +186,27 @@ export function buildMetaTags(
   if (canonical) meta.push({ property: 'og:url', content: canonical })
   if (image) meta.push({ property: 'og:image', content: image })
   if (imageAlt) meta.push({ property: 'og:image:alt', content: imageAlt })
+  if (resolvedImageWidth) meta.push({ property: 'og:image:width', content: String(resolvedImageWidth) })
+  if (resolvedImageHeight) meta.push({ property: 'og:image:height', content: String(resolvedImageHeight) })
   meta.push({ property: 'og:type', content: type })
   if (siteName) meta.push({ property: 'og:site_name', content: siteName })
   meta.push({ property: 'og:locale', content: locale })
+  // Video
+  if (video) {
+    meta.push({ property: 'og:video', content: video })
+    if (videoWidth) meta.push({ property: 'og:video:width', content: String(videoWidth) })
+    if (videoHeight) meta.push({ property: 'og:video:height', content: String(videoHeight) })
+    // Auto-detect video type from extension
+    if (video.endsWith('.mp4')) meta.push({ property: 'og:video:type', content: 'video/mp4' })
+    else if (video.endsWith('.webm')) meta.push({ property: 'og:video:type', content: 'video/webm' })
+  }
+  // Audio
+  if (audio) {
+    meta.push({ property: 'og:audio', content: audio })
+  }
   if (type === 'article') {
     if (publishedTime) meta.push({ property: 'article:published_time', content: publishedTime })
     if (modifiedTime) meta.push({ property: 'article:modified_time', content: modifiedTime })
@@ -206,5 +276,17 @@ export function buildMetaTags(
     })
   }
+  // Favicon: inject locale-aware favicon links
+  if (favicon) {
+    const faviconLocale = locale !== 'en_US' ? locale : undefined
+    for (const fl of faviconLinks(faviconLocale, favicon)) {
+      link.push(fl as Record<string, string>)
+    }
+    // Theme color meta from favicon config
+    if (favicon.themeColor) {
+      meta.push({ name: 'theme-color', content: favicon.themeColor })
+    }
+  }
   return { meta, link, script }
 }

package/src/og-image.ts ADDED Viewed

@@ -0,0 +1,378 @@
+/**
+ * OG Image generation plugin.
+ *
+ * Generates Open Graph images at build time from templates with
+ * text overlays. Supports locale-specific text for i18n apps.
+ * Uses sharp for image processing (same optional dep as favicon/image plugins).
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { ogImagePlugin } from "@pyreon/zero/og-image"
+ *
+ * export default {
+ *   plugins: [
+ *     ogImagePlugin({
+ *       locales: ["en", "de", "cs"],
+ *       templates: [{
+ *         name: "default",
+ *         background: "./src/assets/og-bg.jpg",
+ *         layers: [{
+ *           text: { en: "Build faster", de: "Schneller bauen", cs: "Stavte rychleji" },
+ *           y: "40%",
+ *           fontSize: 72,
+ *         }],
+ *       }],
+ *     }),
+ *   ],
+ * }
+ * ```
+ */
+import { existsSync } from 'node:fs'
+import { join } from 'node:path'
+import type { Plugin } from 'vite'
+let sharpWarned = false
+function warnSharpMissing() {
+  if (sharpWarned) return
+  sharpWarned = true
+  // oxlint-disable-next-line no-console
+  console.warn(
+    '\n[zero:og-image] sharp not installed — OG images will not be generated. Install for full support: bun add -D sharp\n',
+  )
+}
+// ─── Types ──────────────────────────────────────────────────────────────────
+export interface OgImageLayer {
+  /**
+   * Text content. Can be:
+   * - A string (same for all locales)
+   * - A record mapping locale → text
+   * - A function receiving locale and returning text
+   */
+  text: string | Record<string, string> | ((locale: string) => string)
+  /** X position — number (px) or string with % (e.g. "50%"). Default: "50%" */
+  x?: number | string
+  /** Y position — number (px) or string with % (e.g. "40%"). Default: "50%" */
+  y?: number | string
+  /** Font size in px. Default: 64 */
+  fontSize?: number
+  /** Font family. Default: "sans-serif" */
+  fontFamily?: string
+  /** Font weight. Default: "bold" */
+  fontWeight?: string
+  /** Text color. Default: "#ffffff" */
+  color?: string
+  /** Text anchor (alignment). Default: "middle" */
+  textAnchor?: 'start' | 'middle' | 'end'
+  /** Max width in px before wrapping. Default: 80% of image width. */
+  maxWidth?: number
+}
+export interface OgImageTemplate {
+  /** Template name — used for output file naming. */
+  name: string
+  /**
+   * Background: path to an image file, or a solid color config.
+   *
+   * @example "./src/assets/og-bg.jpg"
+   * @example { color: "#0066ff", width: 1200, height: 630 }
+   */
+  background: string | { color: string; width?: number; height?: number }
+  /** Output width. Default: 1200 */
+  width?: number
+  /** Output height. Default: 630 */
+  height?: number
+  /** Output format. Default: "png" */
+  format?: 'png' | 'jpeg'
+  /** JPEG quality (1-100). Default: 90 */
+  quality?: number
+  /** Text layers to overlay on the background. */
+  layers?: OgImageLayer[]
+}
+export interface OgImagePluginConfig {
+  /** Templates to generate. */
+  templates: OgImageTemplate[]
+  /** Locales to generate for. When omitted, generates a single image per template. */
+  locales?: string[]
+  /** Output directory prefix. Default: "og" */
+  outDir?: string
+}
+// ─── Helpers ────────────────────────────────────────────────────────────────
+function resolvePosition(value: number | string | undefined, dimension: number, fallback = '50%'): number {
+  if (value === undefined) value = fallback
+  if (typeof value === 'number') return value
+  if (value.endsWith('%')) return Math.round((Number.parseFloat(value) / 100) * dimension)
+  return Number.parseInt(value, 10) || 0
+}
+function resolveLayerText(layer: OgImageLayer, locale: string): string {
+  if (typeof layer.text === 'string') return layer.text
+  if (typeof layer.text === 'function') return layer.text(locale)
+  return layer.text[locale] ?? layer.text[Object.keys(layer.text)[0] ?? ''] ?? ''
+}
+function escapeXml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;')
+}
+/**
+ * Build an SVG overlay with text layers.
+ * @internal Exported for testing.
+ */
+export function buildTextOverlaySvg(
+  layers: OgImageLayer[],
+  width: number,
+  height: number,
+  locale: string,
+): string {
+  const textElements = layers.map((layer) => {
+    const text = resolveLayerText(layer, locale)
+    const x = resolvePosition(layer.x, width, '50%')
+    const y = resolvePosition(layer.y, height, '50%')
+    const fontSize = layer.fontSize ?? 64
+    const fontFamily = layer.fontFamily ?? 'sans-serif'
+    const fontWeight = layer.fontWeight ?? 'bold'
+    const color = layer.color ?? '#ffffff'
+    const anchor = layer.textAnchor ?? 'middle'
+    const maxWidth = layer.maxWidth ?? Math.round(width * 0.8)
+    // Word wrapping via tspan elements.
+    // Width estimation: Latin chars ~0.55em, CJK chars ~1.0em, narrow chars ~0.35em.
+    const words = text.split(' ')
+    const lines: string[] = []
+    let currentLine = ''
+    const estimateWidth = (s: string): number => {
+      let width = 0
+      for (let i = 0; i < s.length; i++) {
+        const code = s.charCodeAt(i)
+        if (code >= 0x3000 && code <= 0x9FFF) {
+          // CJK characters — full width
+          width += fontSize * 1.0
+        } else if (code <= 0x7E && 'iljft!|:;.,\''.includes(s[i]!)) {
+          // Narrow Latin characters
+          width += fontSize * 0.35
+        } else {
+          // Regular Latin characters
+          width += fontSize * 0.55
+        }
+      }
+      return width
+    }
+    for (const word of words) {
+      const testLine = currentLine ? `${currentLine} ${word}` : word
+      if (estimateWidth(testLine) > maxWidth && currentLine) {
+        lines.push(currentLine)
+        currentLine = word
+      } else {
+        currentLine = testLine
+      }
+    }
+    if (currentLine) lines.push(currentLine)
+    const tspans = lines
+      .map((line, i) => {
+        const dy = i === 0 ? '0' : `${fontSize * 1.2}`
+        return `<tspan x="${x}" dy="${dy}">${escapeXml(line)}</tspan>`
+      })
+      .join('')
+    return `<text x="${x}" y="${y}" font-size="${fontSize}" font-family="${escapeXml(fontFamily)}" font-weight="${fontWeight}" fill="${color}" text-anchor="${anchor}" dominant-baseline="middle">${tspans}</text>`
+  })
+  return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">${textElements.join('')}</svg>`
+}
+/**
+ * Render an OG image from a template for a specific locale.
+ * @internal Exported for testing.
+ */
+export async function renderOgImage(
+  template: OgImageTemplate,
+  locale: string,
+  rootDir: string,
+): Promise<Uint8Array | null> {
+  try {
+    const sharp = await import('sharp').then((m) => m.default ?? m)
+    const width = template.width ?? 1200
+    const height = template.height ?? 630
+    let pipeline: any
+    if (typeof template.background === 'string') {
+      const bgPath = join(rootDir, template.background)
+      pipeline = sharp(bgPath).resize(width, height, { fit: 'cover' })
+    } else {
+      pipeline = (sharp as any)({
+        create: {
+          width,
+          height,
+          channels: 4,
+          background: template.background.color,
+        },
+      })
+    }
+    // Overlay text layers if any
+    if (template.layers && template.layers.length > 0) {
+      const svgOverlay = buildTextOverlaySvg(template.layers, width, height, locale)
+      pipeline = pipeline.composite([{
+        input: Buffer.from(svgOverlay),
+        top: 0,
+        left: 0,
+      }])
+    }
+    if (template.format === 'jpeg') {
+      return await pipeline.jpeg({ quality: template.quality ?? 90 }).toBuffer()
+    }
+    return await pipeline.png().toBuffer()
+  } catch {
+    warnSharpMissing()
+    return null
+  }
+}
+// ─── Path utility ───────────────────────────────────────────────────────────
+/**
+ * Compute the OG image path for a template and locale.
+ *
+ * @example
+ * ```ts
+ * ogImagePath("default", "de")      // → "/og/default-de.png"
+ * ogImagePath("default")            // → "/og/default.png"
+ * ogImagePath("hero", "en", "images") // → "/images/hero-en.png"
+ * ```
+ */
+export function ogImagePath(
+  templateName: string,
+  locale?: string,
+  outDir = 'og',
+  format: 'png' | 'jpeg' = 'png',
+): string {
+  const ext = format === 'jpeg' ? 'jpg' : 'png'
+  const suffix = locale ? `-${locale}` : ''
+  return `/${outDir}/${templateName}${suffix}.${ext}`
+}
+// ─── Vite plugin ────────────────────────────────────────────────────────────
+/**
+ * OG image generation Vite plugin.
+ *
+ * Generates Open Graph images at build time. In dev, generates on-demand.
+ * Requires `sharp` as an optional dependency.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { ogImagePlugin } from "@pyreon/zero/og-image"
+ *
+ * export default {
+ *   plugins: [
+ *     ogImagePlugin({
+ *       locales: ["en", "de"],
+ *       templates: [{
+ *         name: "default",
+ *         background: { color: "#0066ff" },
+ *         layers: [{ text: { en: "Hello", de: "Hallo" }, fontSize: 72 }],
+ *       }],
+ *     }),
+ *   ],
+ * }
+ * ```
+ */
+export function ogImagePlugin(config: OgImagePluginConfig): Plugin {
+  const outDir = config.outDir ?? 'og'
+  let root = ''
+  let isBuild = false
+  return {
+    name: 'pyreon-zero-og-image',
+    enforce: 'pre',
+    configResolved(resolvedConfig) {
+      root = resolvedConfig.root
+      isBuild = resolvedConfig.command === 'build'
+    },
+    // Dev: generate on-demand
+    configureServer(server) {
+      const devCache = new Map<string, Uint8Array>()
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url ?? ''
+        if (!url.startsWith(`/${outDir}/`)) return next()
+        // Parse: /og/default-en.png → template=default, locale=en
+        const fileName = url.slice(outDir.length + 2) // strip /{outDir}/
+        const match = fileName.match(/^(.+?)(?:-([a-z]{2,5}))?\.(png|jpe?g)$/)
+        if (!match) return next()
+        const [, templateName, locale, ext] = match
+        const template = config.templates.find((t) => t.name === templateName)
+        if (!template) return next()
+        const resolvedLocale = locale ?? config.locales?.[0] ?? 'en'
+        const cacheKey = `${templateName}:${resolvedLocale}`
+        let buffer = devCache.get(cacheKey)
+        if (!buffer) {
+          const result = await renderOgImage(template, resolvedLocale, root)
+          if (!result) return next()
+          buffer = result
+          devCache.set(cacheKey, result)
+        }
+        const contentType = ext === 'jpg' || ext === 'jpeg' ? 'image/jpeg' : 'image/png'
+        res.setHeader('Content-Type', contentType)
+        res.setHeader('Cache-Control', 'no-cache')
+        res.end(Buffer.from(buffer))
+      })
+    },
+    // Build: generate all variants
+    async generateBundle() {
+      if (!isBuild) return
+      for (const template of config.templates) {
+        const locales = config.locales ?? [undefined]
+        const format = template.format ?? 'png'
+        const ext = format === 'jpeg' ? 'jpg' : 'png'
+        for (const locale of locales) {
+          // Validate background exists if it's a file path
+          if (typeof template.background === 'string') {
+            const bgPath = join(root, template.background)
+            if (!existsSync(bgPath)) {
+              // oxlint-disable-next-line no-console
+              console.warn(`[zero:og-image] Background not found: ${bgPath}`)
+              continue
+            }
+          }
+          const buffer = await renderOgImage(template, locale ?? 'en', root)
+          if (!buffer) continue
+          const suffix = locale ? `-${locale}` : ''
+          this.emitFile({
+            type: 'asset',
+            fileName: `${outDir}/${template.name}${suffix}.${ext}`,
+            source: buffer,
+          })
+        }
+      }
+    },
+  }
+}

package/src/types.ts CHANGED Viewed

@@ -75,7 +75,7 @@ export interface ZeroConfig {
   isr?: ISRConfig
   /** Deploy adapter. Default: "node" */
-  adapter?: 'node' | 'bun' | 'static'
+  adapter?: 'node' | 'bun' | 'static' | 'vercel' | 'cloudflare' | 'netlify'
   /** Base URL path. Default: "/" */
   base?: string