astro-loader-valise

An Astro content loader for Valise. Loaders are available for both artwork and collections. See the Valise API docs for details of the schema.

Installation

npm install astro-loader-valise

Quick start

1. Configure your content collection

Create or update your src/content.config.ts or src/content/config.ts:

import { defineCollection } from "astro:content";
import { artworkLoader } from "astro-loader-valise";

const artwork = defineCollection({
  loader: artworkLoader("your-valise-api-key"),
});

export const collections = { artwork };

2. Use in your pages

---
import { getCollection } from "astro:content";
const artwork = await getCollection("artwork");
---

<ul>
  {artwork.map((item) => <li>{item.data.title}</li>)}
</ul>

Safely storing your API key

See the Astro docs for how to use server-side environment variables. Your Valise API key should never be committed to revision control or published in your client bundle.

In astro.config.mjs:

import { defineConfig, envField } from "astro/config";

export default defineConfig({
  env: {
    schema: {
      VALISE_API_KEY: envField.string({ context: "server", access: "secret" }),
    }
  }
})

In src/content.config.ts:

import { VALISE_API_KEY } from "astro:env/server";