diff --git a/packages/astro/src/env.d.ts b/packages/astro/src/env.d.ts
index acef35f..22bb805 100644
--- a/packages/astro/src/env.d.ts
+++ b/packages/astro/src/env.d.ts
@@ -1,2 +1,5 @@
///
///
+interface ImportMetaEnv {
+ readonly BUILDER_API_PUBLIC_KEY: string;
+}
diff --git a/packages/astro/src/pages/cms-experiments/builderio/builder-preview.astro b/packages/astro/src/pages/cms-experiments/builderio/builder-preview.astro
new file mode 100644
index 0000000..eada544
--- /dev/null
+++ b/packages/astro/src/pages/cms-experiments/builderio/builder-preview.astro
@@ -0,0 +1,19 @@
+---
+const builderAPIpublicKey = import.meta.env.BUILDER_API_PUBLIC_KEY;
+const builderModel = import.meta.env.BUILDER_BLOGPOST_MODEL;
+---
+
+
+
+ Preview for builder.io
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/astro/src/pages/cms-experiments/builderio/index.astro b/packages/astro/src/pages/cms-experiments/builderio/index.astro
new file mode 100644
index 0000000..8319bb5
--- /dev/null
+++ b/packages/astro/src/pages/cms-experiments/builderio/index.astro
@@ -0,0 +1,31 @@
+---
+const builderAPIpublicKey = import.meta.env.BUILDER_API_PUBLIC_KEY;
+const builderModel = import.meta.env.BUILDER_BLOGPOST_MODEL;
+
+const { results: posts } = await fetch(
+ `https://cdn.builder.io/api/v3/content/${builderModel}?${new URLSearchParams({
+ apiKey: builderAPIpublicKey,
+ fields: ["data.slug", "data.title"].join(","),
+ cachebust: "true",
+ }).toString()}`
+)
+ .then((res) => res.json())
+ .catch();
+---
+
+
+
+ Blog Index
+
+
+
+ {
+ posts.map(({ data: { slug, title } }) => (
+ -
+ {title}
+
+ ))
+ }
+
+
+
diff --git a/packages/astro/src/pages/cms-experiments/builderio/posts/[slug].astro b/packages/astro/src/pages/cms-experiments/builderio/posts/[slug].astro
new file mode 100644
index 0000000..208b0ab
--- /dev/null
+++ b/packages/astro/src/pages/cms-experiments/builderio/posts/[slug].astro
@@ -0,0 +1,55 @@
+---
+export async function getStaticPaths() {
+ const builderModel = import.meta.env.BUILDER_BLOGPOST_MODEL;
+ const builderAPIpublicKey = import.meta.env.BUILDER_API_PUBLIC_KEY;
+ const { results: posts } = await fetch(
+ `https://cdn.builder.io/api/v3/content/${builderModel}?${new URLSearchParams(
+ {
+ apiKey: builderAPIpublicKey,
+ fields: ["data.slug", "data.title"].join(","),
+ cachebust: "true",
+ }
+ ).toString()}`
+ )
+ .then((res) => res.json())
+ .catch
+ // ...catch some errors...);
+ ();
+ //return {};
+ return [
+ ...posts.map(({ data: { slug, title } }) => ({
+ params: { slug },
+ props: { title },
+ })),
+ ];
+}
+const { slug } = Astro.params;
+const { title } = Astro.props;
+const builderModel = import.meta.env.BUILDER_BLOGPOST_MODEL;
+const builderAPIpublicKey = import.meta.env.BUILDER_API_PUBLIC_KEY;
+// Builder's API requires this field but for this use case the url doesn't seem to matter - the API returns the same HTML
+const encodedUrl = encodeURIComponent("moot");
+const { html: postHTML } = await fetch(
+ `https://cdn.builder.io/api/v1/qwik/${builderModel}?${new URLSearchParams({
+ apiKey: builderAPIpublicKey,
+ url: encodedUrl,
+ "query.data.slug": slug,
+ cachebust: "true",
+ }).toString()}`
+)
+ .then((res) => res.json())
+ .catch();
+---
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+