@jamwidgets/astro 0.5.0 → 0.5.1

package/README.md

@@ -58,6 +58,49 @@ const posts = await getCollection("posts");
 ))}
 ```
 
+Render a post's Markdown body with Astro's content component:
+
+```astro
+---
+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>
+```
+
+`post.data.content` is Markdown, not an HTML string. Do not render it with
+`set:html`; use Astro's `render()` and `<Content />` as above.
+
+For responsive uploaded images, authorize Jamwidgets' asset host in your Astro
+config. Astro will then generate correctly sized image variants for Markdown
+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`):
+
+```js
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  image: {
+    domains: ["assets.jamwidgets.com"],
+    layout: "constrained",
+    responsiveStyles: true,
+  },
+});
+```
+
 ### Loader Options
 
 ```ts

package/dist/loader.js

@@ -30,7 +30,7 @@ export function jamwidgetsPostsLoader(options) {
     return {
         name: "jamwidgets-posts-loader",
         async load(context) {
-            const { store, logger } = context;
+            const { store, logger, renderMarkdown } = context;
             try {
                 const url = new URL(`${baseUrl}/posts`);
                 url.searchParams.set("limit", String(limit));
@@ -50,12 +50,15 @@ export function jamwidgetsPostsLoader(options) {
                     throw new Error(`Failed to fetch posts: ${response.status} ${response.statusText}`);
                 }
                 const data = await response.json();
+                const entries = await Promise.all(data.posts.map(async (post) => ({
+                    id: post.slug,
+                    data: { ...post },
+                    body: post.content,
+                    rendered: await renderMarkdown(post.content),
+                })));
                 store.clear();
-                for (const post of data.posts) {
-                    store.set({
-                        id: post.slug,
-                        data: { ...post },
-                    });
+                for (const entry of entries) {
+                    store.set(entry);
                 }
                 logger.info(`Loaded ${data.posts.length} posts from Jamwidgets`);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jamwidgets/astro",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Astro components and content loader for Jamwidgets (forms, comments, reactions, posts)",
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
     "@jamwidgets/core": "^0.4.0"
   },
   "peerDependencies": {
-    "astro": "^5.0.0 || ^6.0.0 || ^7.0.0"
+    "astro": "^5.9.0 || ^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
     "astro": "^7.1.3",

package/src/Embed.astro

@@ -7,7 +7,8 @@
  * any embedded polls, reactions, etc.
  *
  * @example
- * <article set:html={post.content} />
+ * const { Content } = await render(post);
+ * <article><Content /></article>
  * <Embed siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} />
  */
 

package/src/loader.ts

@@ -78,7 +78,7 @@ export function jamwidgetsPostsLoader(options: JamwidgetsPostsLoaderOptions): Lo
     name: "jamwidgets-posts-loader",
 
     async load(context: LoaderContext) {
-      const { store, logger } = context;
+      const { store, logger, renderMarkdown } = context;
 
       try {
         const url = new URL(`${baseUrl}/posts`);
@@ -106,13 +106,18 @@ export function jamwidgetsPostsLoader(options: JamwidgetsPostsLoaderOptions): Lo
 
         const data: ApiResponse = await response.json();
 
-        store.clear();
-
-        for (const post of data.posts) {
-          store.set({
+        const entries = await Promise.all(
+          data.posts.map(async (post) => ({
             id: post.slug,
             data: { ...post },
-          });
+            body: post.content,
+            rendered: await renderMarkdown(post.content),
+          })),
+        );
+
+        store.clear();
+        for (const entry of entries) {
+          store.set(entry);
         }
 
         logger.info(`Loaded ${data.posts.length} posts from Jamwidgets`);