Skip to content

CMS builder.io #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nickvisut wants to merge 7 commits into
base: main
Choose a base branch
from
Open

CMS builder.io #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8aca3a9
add footer nav WIP
nickvisut Feb 1, 2024
1e4b571
tweak footer styles
nickvisut Feb 1, 2024
f7cf740
add icons to footer
nickvisut Feb 1, 2024
14b8886
remove extraneous icons
nickvisut Feb 1, 2024
27d9e57
Merge remote-tracking branch 'upstream/main'
nickvisut Feb 22, 2024
6ce2b30
Merge remote-tracking branch 'upstream/main'
nickvisut Feb 29, 2024
913ffd3
try out builder.io cms
nickvisut Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/astro/src/env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
interface ImportMetaEnv {
readonly BUILDER_API_PUBLIC_KEY: string;
}
19 changes: 19 additions & 0 deletions packages/astro/src/pages/cms-experiments/builderio/builder-preview.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
const builderAPIpublicKey = import.meta.env.BUILDER_API_PUBLIC_KEY;
const builderModel = import.meta.env.BUILDER_BLOGPOST_MODEL;
---

<html lang="en">
<head>
<title>Preview for builder.io</title>
</head>
<body>
<header>This is your header</header>

<builder-component model={builderModel} api-key={builderAPIpublicKey}
></builder-component>
<script async src="https://cdn.builder.io/js/webcomponents"></script>

<footer>This is your footer</footer>
</body>
</html>
31 changes: 31 additions & 0 deletions packages/astro/src/pages/cms-experiments/builderio/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
---

<html lang="en">
<head>
<title>Blog Index</title>
</head>
<body>
<ul>
{
posts.map(({ data: { slug, title } }) => (
<li>
<a href={`posts/${slug}`}>{title}</a>
</li>
))
}
</ul>
</body>
</html>
55 changes: 55 additions & 0 deletions packages/astro/src/pages/cms-experiments/builderio/posts/[slug].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
---

<html lang="en">
<head>
<title>{title}</title>
</head>
<body>
<header>This is your header</header>
<article>
<Fragment set:html={postHTML} />
</article>
<footer>The is your footer</footer>
</body>
</html>