I work at Kinsta
contact me hi@maciekpalmowski.dev
I work at Kinsta
contact me hi@maciekpalmowski.dev
Headless vs monolith is like building Legos vs knitting
├── src/
│ ├── components/
│ │ ├── Header.astro
│ ├── layouts/
│ │ └── PostLayout.astro
│ └── pages/
│ │ └── index.astro
│ └── styles/
│ └── global.css
├── public/
│ └── social-image.png
├── astro.config.mjs
├── package.json
---
// Component Script (JavaScript)
---
---
const name = "WordUp Trójmiasto";
---
Hello {name}!
---
const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0];
---
Hello {randomUser.name.first}
{randomUser.name.last}!
---
---
<html lang="en">
<head>
My Cool Astro Site
</head>
<body>
<slot />
</body>
</html>
---
import MyLayout from '../layouts/MyLayout.astro';
---
<MyLayout>
Hello WordUp.
</MyLayout>
src/pages/index.astro -> mysite.com/ src/pages/about.astro -> mysite.com/about src/pages/test/about.astro -> mysite.com/test/about
pages/blog/[slug].astro → (/blog/hello-world, /blog/post-2, etc.) pages/[username]/settings.astro → (/fred/settings, /drew/settings, etc.) pages/[lang]-[version]/info.astro → (/en-v1/info, /fr-v2/info, etc.)
PUBLIC_API_URL = https://domain.com/wp-json/wp/v2
const API_URL = import.meta.env.PUBLIC_API_URL;
const res = await fetch( `${API_URL}/articles?per_page=50` );
const data = res.json();
---
import Article from '../components/Article.astro';
...
const data = res.json();
---
Articles archive
{data.map(post => <Article post={post}/>)}
First we have to create a pages/[slug].astro file.
---
export async function getStaticPaths() {
const posts = await fetch(...);
return posts.data.map((post) => {
return {
params: { slug: post.slug },
props: { post }
};
});
}
const {post} = Astro.props;
---
{post.title.rendered}
const slug = 'about';
const response = await fetch(import.meta.env.WORDPRESS_API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: `
{
page(id:"${slug}", idType:URI) {
title
content
}
}
`
});
const data = await response.json();