astro-loader-npm-packages 📦

Astro Content Layer loader to load npm packages from a given author.

Features

A loader for the experimental Astro Content Layer API using the npm public registry search API to load all packages from a given author.

Important

The Astro Content Layer API and this loader are experimental and subject to change.

Installation

Install the package using your package manager:

npm i @hideoo/astro-loader-npm-packages

Configuration

To use this loader, enable the experimental Content Layer API in your Astro project by editing your astro.config.mjs file:

export default defineConfig({
+  experimental: {
+    contentLayer: true,
+  },
});

You can then use the loader in your Content Layer configuration located in the src/content/config.ts file:

import { npmPackagesLoader } from '@hideoo/astro-loader-npm-packages'
import { defineCollection } from 'astro:content'

// Define a collection using the loader.
const packages = defineCollection({
  loader: npmPackagesLoader({
    // The author to load packages from.
    author: 'hideoo',
  }),
})

export const collections = { packages }

Usage

To query and render the loaded packages, you can use the same API as content collections:

---
import { getCollection } from 'astro:content'

const packages = await getCollection('packages')
---

<ul>
  {
    packages.map(({ data, id }) => (
      <li>
        <a href={`/pkg/${id}/`}>{data.package.name}</a>
      </li>
    ))
  }
</ul>

To learn more about querying and rendering, check the Astro Content Layer API documentation.

License

Licensed under the MIT License, Copyright © HiDeoo.

See LICENSE for more information.