# Leaflet Astro Loader This loader is for [leaflet.pub](https://leaflet.pub/). It fetches leaflet document records from your personal data server to then be used on your astro site. There are two different types of loaders you can use from this package: - **Static Loader:** Fetches data at build time and is served statically on your website - **Live Loader (experimental astro feature):** Fetches data on each request. **Note**: This package does not provide any caching mechanisms for the live loader. So to avoid slamming your PDS (or someone elses PDS) with requests it's probably a good idea to set up some sort of cache either using cache headers or some other means. ## Installation ```bash npm install @nulfrost/leaflet-loader-astro ``` ## Usage ### Build-time loader: leafletStaticLoader (recommended) ```ts // src/content.config.ts import { defineCollection, z } from "astro:content"; import { leafletStaticLoader } from "@nulfrost/leaflet-loader-astro"; const documents = defineCollection({ loader: leafletStaticLoader({ repo: "did:plc:qttsv4e7pu2jl3ilanfgc3zn" }), }); export const collections = { documents }; ``` ```ts // src/pages/index.astro --- import { getCollection } from "astro:content"; const documents = await getCollection("documents"); --- Astro

Astro + Leaflet.pub

``` ```ts // src/pages/blog/[blog].astro --- import { getCollection, getEntry } from "astro:content"; import { render } from "astro:content"; export async function getStaticPaths() { const documents = await getCollection("documents"); return documents.map((document) => ({ params: { blog: document.id }, props: document, })); } const document = await getEntry("documents", Astro.params.blog); if (!document) { throw new Error(`Document with id "${Astro.params.blog}" not found`); } const { Content } = await render(document); --- ``` ### Live loader: leafletLiveLoader ```ts // astro.config.mjs // @ts-check import { defineConfig } from "astro/config"; // https://astro.build/config export default defineConfig({ experimental: { liveContentCollections: true, // make sure to enable this }, }); ``` ```ts // src/live.config.ts import { defineLiveCollection, z } from "astro:content"; import { leafletLiveLoader } from "@nulfrost/leaflet-loader-astro"; const documents = defineLiveCollection({ loader: leafletLiveLoader({ repo: "did:plc:qttsv4e7pu2jl3ilanfgc3zn" }), }); export const collections = { documents }; ``` ```ts // src/pages/index.astro --- import { getLiveCollection } from "astro:content"; export const prerender = false; const documents = await getLiveCollection("documents"); --- Astro

Astro + Leaflet.pub

``` ```ts // src/pages/blog/[blog].astro --- import { getLiveEntry } from "astro:content"; import { render } from "astro:content"; export const prerender = false; const document = await getLiveEntry("documents", Astro.params.blog); if (!document) { throw new Error(`Document with id "${Astro.params.blog}" not found`); } const { Content } = await render(document?.entry); --- ``` ## License MIT For questions, contributions, and support, please open an issue on GitHub.