@jamwidgets/astro

Installation

npm install @jamwidgets/astro

Add your site key to .env:

JAMWIDGETS_SITE_KEY=your_site_key_here

Styling

Widgets inherit your site's typography and text color by default. Set shared semantic tokens on a wrapper to brand every widget consistently:

.article-widgets {
  --jamwidgets-color-text: var(--color-ink);
  --jamwidgets-color-muted: var(--color-ink-muted);
  --jamwidgets-color-surface: var(--color-paper);
  --jamwidgets-color-border: var(--color-rule);
  --jamwidgets-color-accent: var(--color-link);
  --jamwidgets-color-on-accent: white;
}

Pass theme="light", theme="dark", or theme="auto" for an explicit preset. Form controls adapt to the widget's container width rather than the browser viewport.

Content Loader

Fetch posts from Jamwidgets at build time using Astro's content collections:

// src/content.config.ts
import { defineCollection } from "astro:content"
import { jamwidgetsPostsLoader } from "@jamwidgets/astro/loader"

const posts = defineCollection({
  loader: jamwidgetsPostsLoader({
    siteKey: import.meta.env.JAMWIDGETS_SITE_KEY,
  }),
})

export const collections = { posts }

List posts in an index page:

---
import { getCollection } from "astro:content"
const posts = await getCollection("posts")
---

{posts.map((post) => (
  <article>
    <h2>{post.data.title}</h2>
    <p>{post.data.excerpt}</p>
  </article>
))}

Render a post body through Astro's Markdown pipeline. Do not pass post.data.content to set:html; the API field contains Markdown, not HTML.

---
import { getEntry, render } from "astro:content"
import { Image } from "astro:assets"

const post = await getEntry("posts", "hello-world")
if (!post) throw new Error("Post not found")
const { Content } = await render(post)
---

{post.data.coverImage && (
  <Image
    src={post.data.coverImage}
    inferSize
    layout="full-width"
    alt={post.data.title}
  />
)}
<article><Content /></article>

To let Astro generate responsive sizes for uploaded post images, authorize the hosted asset domain and enable responsive images. The hostname below is for Jamwidgets Cloud; self-hosted deployments use the hostname configured by ASSET_BASE_URL, or fall back to <AWS_S3_BUCKET>.s3.<AWS_S3_REGION>.amazonaws.com.

// astro.config.mjs
import { defineConfig } from "astro/config"

export default defineConfig({
  image: {
    domains: ["assets.jamwidgets.com"],
    layout: "constrained",
    responsiveStyles: true,
  },
})