https://github.com/mottox2/astro-loader-esa

Astro content loader for esa.io
https://github.com/mottox2/astro-loader-esa

astro astro-loader esa-io

Last synced: 3 months ago
JSON representation

Astro content loader for esa.io

• Host: GitHub
• URL: https://github.com/mottox2/astro-loader-esa
• Owner: mottox2
• Created: 2025-01-02T02:22:56.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2025-01-09T17:55:21.000Z (5 months ago)
• Last Synced: 2025-03-02T09:54:17.659Z (3 months ago)
• Topics: astro, astro-loader, esa-io
• Language: TypeScript
• Homepage:
• Size: 49.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# astro-loader-esa

A loader for Astro’s Content Layer designed to work seamlessly with esa.io data.

## Installation

```bash

npm install astro-loader-esa

```

## Usage

First, you need to create a new Personal Access Token in your esa.io account. You can do this by going to your account settings and creating a new token. Make sure to copy the token as you won't be able to see it again.

Next, You can find this by looking at the URL of your esa.io team. For example, if your team URL is `https://your-team.esa.io`, then your team name is `your-team`.

Finally, you need to add the following to your `src/content.config.ts` file:

```javascript

import { defineCollection } from "astro:content";

import { esaLoader } from "astro-loader-esa";

const esaPosts = defineCollection({

  loader: esaLoader({

    accessToken: getSecret("ESA_ACCESS_TOKEN"),

    teamName: getSecret("ESA_TEAM_NAME"),

    // https://docs.esa.io/posts/102#URI%E3%82%AF%E3%82%A8%E3%83%AA%E6%96%87%E5%AD%97%E5%88%97-2

    params: {

      q: "wip:false",

    },

  }),

});

export const collections = { esaPosts };

```

## Example

You can then use the collection in your `.astro` files like so: `src/page/index.astro`

```astro

---

import { getCollection } from "astro:content";

const posts = getCollection("esaPosts");

---

{posts.map((post) => (

  

    
{post.data.number} {post.data.name}

    
{post.data.bodyMd}

  

))}

```


You can use the single like this: `src/page/posts/[number].astro`

```astro

---

export const getStaticPaths: GetStaticPaths = async () => {

  const items = await getCollection("esaPosts");

  return items.map((item) => ({ params: { number: item.data.number } }));

};

const { number } = Astro.params;

const post = await getEntry("esaPosts", String(number));

const { Content } = await render(post);

---

{post.data.name}


```