Using Skrip with Astro

Setup

Install the package in your Astro project.

Fetching All Posts

---
// src/pages/blog/index.astro
const res = await fetch('http://localhost:3000/api/collections/blog')
const { collection } = await res.json()
const posts = collection.items
---

<ul>
  {posts.map(post => (
    <li>
      <a href={`/blog/${post.slug}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

Dynamic Routes

---
// src/pages/blog/[slug].astro
export async function getStaticPaths() {
  const res = await fetch('http://localhost:3000/api/collections/blog')
  const { collection } = await res.json()

  return collection.items.map(item => ({
    params: { slug: item.slug },
    props: { item },
  }))
}

const { item } = Astro.props
---

<article>
  <h1>{item.data.title}</h1>
  <p set:html={item.content} />
</article>

Astro's static build will pre-render every page at build time — no runtime API calls needed.