leaflet.pub astro loader
besaid.zone
1# Leaflet Astro Loader
2
3This 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.
4
5There are two different types of loaders you can use from this package:
6
7- **Static Loader:** Fetches data at build time and is served statically on your website
8- **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.
9
10## Installation
11
12```bash
13npm install @nulfrost/leaflet-loader-astro
14```
15
16## Usage
17
18### Build-time loader: leafletStaticLoader (recommended)
19
20```ts
21// src/content.config.ts
22import { defineCollection, z } from "astro:content";
23import { leafletStaticLoader } from "leaflet-loader-astro";
24
25const documents = defineCollection({
26 loader: leafletStaticLoader({ repo: "did:plc:qttsv4e7pu2jl3ilanfgc3zn" }),
27});
28
29export const collections = { documents };
30```
31
32```ts
33// src/pages/index.astro
34---
35import { getCollection } from "astro:content";
36
37const documents = await getCollection("documents");
38---
39
40<html lang="en">
41 <head>
42 <meta charset="utf-8" />
43 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
44 <meta name="viewport" content="width=device-width" />
45 <meta name="generator" content={Astro.generator} />
46 <title>Astro</title>
47 </head>
48 <body>
49 <h1>Astro + Leaflet.pub</h1>
50 <ul>
51 {documents.map(document => <li>
52 <a href={`/blogs/${document.id}`}>{document.data.title}</a>
53 </li>)}
54 </ul>
55 </body>
56</html>
57```
58
59```ts
60// src/pages/blog/[blog].astro
61---
62import { getCollection, getEntry } from "astro:content";
63import { render } from "astro:content";
64
65export async function getStaticPaths() {
66 const documents = await getCollection("documents");
67 return documents.map((document) => ({
68 params: { blog: document.id },
69 props: document,
70 }));
71}
72
73const document = await getEntry("documents", Astro.params.blog);
74
75if (!document) {
76 throw new Error(`Document with id "${Astro.params.blog}" not found`);
77}
78
79const { Content } = await render(document);
80---
81
82<Content />
83```
84
85### Live loader: leafletLiveLoader
86
87```ts
88// astro.config.mjs
89
90// @ts-check
91import { defineConfig } from "astro/config";
92
93// https://astro.build/config
94export default defineConfig({
95 experimental: {
96 liveContentCollections: true, // make sure to enable this
97 },
98});
99```
100
101```ts
102// src/live.config.ts
103import { defineLiveCollection, z } from "astro:content";
104import { leafletLiveLoader } from "leaflet-loader-astro";
105
106const documents = defineLiveCollection({
107 loader: leafletLiveLoader({ repo: "did:plc:qttsv4e7pu2jl3ilanfgc3zn" }),
108});
109
110export const collections = { documents };
111```
112
113```ts
114// src/pages/index.astro
115---
116import { getLiveCollection } from "astro:content";
117
118export const prerender = false;
119
120const documents = await getLiveCollection("documents");
121---
122
123<html lang="en">
124 <head>
125 <meta charset="utf-8" />
126 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
127 <meta name="viewport" content="width=device-width" />
128 <meta name="generator" content={Astro.generator} />
129 <title>Astro</title>
130 </head>
131 <body>
132 <h1>Astro + Leaflet.pub</h1>
133 <ul>
134 {documents.map(document => <li>
135 <a href={`/blogs/${document.id}`}>{document.data.title}</a>
136 </li>)}
137 </ul>
138 </body>
139</html>
140```
141
142```ts
143// src/pages/blog/[blog].astro
144---
145import { getLiveEntry } from "astro:content";
146import { render } from "astro:content";
147
148export const prerender = false;
149
150const document = await getLiveEntry("documents", Astro.params.blog);
151
152if (!document) {
153 throw new Error(`Document with id "${Astro.params.blog}" not found`);
154}
155
156const { Content } = await render(document?.entry);
157---
158
159<Content />
160```
161
162## License
163
164MIT
165
166For questions, contributions, and support, please open an issue on GitHub.