https://github.com/hideoo/astro-loader-npm-packages

Astro Content Layer loader to load npm packages from a given author
https://github.com/hideoo/astro-loader-npm-packages

astro astro-loader npm packages

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/hideoo/astro-loader-npm-packages
• Owner: HiDeoo
• License: mit
• Created: 2024-08-30T09:37:47.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-10-11T15:36:20.000Z (4 months ago)
• Last Synced: 2025-01-31T03:12:21.028Z (11 days ago)
• Topics: astro, astro-loader, npm, packages
• Language: TypeScript
• Homepage:
• Size: 114 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  
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](https://astro.build/blog/future-of-astro-content-layer/) using the npm [public registry search API](https://github.com/npm/registry/blob/main/docs/REGISTRY-API.md#get-v1search) 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:

```shell

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

```

## Configuration

To use this loader, enable the [experimental Content Layer API](https://docs.astro.build/en/reference/configuration-reference/#experimentalcontentlayer) in your Astro project by editing your `astro.config.mjs` file:

```diff

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:

```ts

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:

```astro

---

import { getCollection } from 'astro:content'

const packages = await getCollection('packages')

---



  {

    packages.map(({ data, id }) => (

      


        {data.package.name}

      

    ))

  }



```


To learn more about querying and rendering, check the [Astro Content Layer API documentation](https://docs.astro.build/en/reference/configuration-reference/#querying-and-rendering-with-the-content-layer-api).

## License

Licensed under the MIT License, Copyright © HiDeoo.

See [LICENSE](https://github.com/HiDeoo/astro-loader-npm-packages/blob/main/LICENSE) for more information.