Astro Contentful

Astro Contentful lets you use Contentful in Astro.

---
import Entry from '@astropub/contentful:entries/t1h1x38!astro'
---
<h1>
  <Entry of="title" />
</h1>

<Entry of="content">
  <p>Fallback content.</p>
</Entry>

---
import EntryList from '@astropub/contentful:entries?content_type=blog!astro'
---
<EntryList>{
  Entry => (
    <h1>
      <Entry of="title" />
    </h1>

    <Entry of="content">
      <p>Fallback content.</p>
    </Entry>
  )
}</EntryList>

Usage

Install Astro Contentful to your project.

npm install @astropub/contentful

Use Astro Contentful components in your project.

---
// data
import entry from '@astropub/contentful:entries/t1h1x38'
import entryList from '@astropub/contentful:entries'
import oneEntryList from '@astropub/contentful:entries?content_type=blog'

// components
import Entry from '@astropub/contentful:entries/t1h1x38!astro'
import EntryList from '@astropub/contentful:entries!astro'
import OneEntryList from '@astropub/contentful:entries?content_type=blog!astro'
---

Enjoy!

Project Structure

Inside of this Astro project, you'll see the following folders and files:

/
├── demo/
│   ├── public/
│   └── src/
│       └── pages/
            ├── index.astro
│           └── ...etc
└── packages/
    └── contentful/
        ├── package.json
        └── ...etc

This project uses workspaces to develop a single package, @astropub/contentful.

It also includes a minimal Astro project, demo, for developing and demonstrating the component.

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run start	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run serve	Preview your build locally, before deploying

Want to learn more? Read the Astro documentation or jump into the Astro Discord.