besaid.zone
+159
-2
README.md
+159
-2
README.md
···
1
+
# Leaflet Astro Loader
2
+
3
+
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.
4
+
5
+
There 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
13
+
npm install leaflet-loader-astro
14
+
```
15
+
16
+
## Usage
17
+
18
+
### Build-time loader: leafletStaticLoader (recommended)
19
+
20
+
```ts
21
+
// src/content.config.ts
22
+
import { defineCollection, z } from "astro:content";
23
+
import { leafletStaticLoader } from "leaflet-loader-astro";
24
+
25
+
const documents = defineCollection({
26
+
loader: leafletStaticLoader({ repo: "did:plc:qttsv4e7pu2jl3ilanfgc3zn" }),
27
+
});
28
+
29
+
export const collections = { documents };
30
+
```
31
+
32
+
```ts
33
+
// src/pages/index.astro
34
+
---
35
+
import { getCollection } from "astro:content";
36
+
37
+
const 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
+
---
62
+
import { getCollection, getEntry } from "astro:content";
63
+
import { render } from "astro:content";
64
+
65
+
export 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
+
73
+
const document = await getEntry("documents", Astro.params.blog);
74
+
75
+
if (!document) {
76
+
throw new Error(`Document with id "${Astro.params.blog}" not found`);
77
+
}
78
+
79
+
const { 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
91
+
import { defineConfig } from "astro/config";
92
+
93
+
// https://astro.build/config
94
+
export default defineConfig({
95
+
experimental: {
96
+
liveContentCollections: true, // make sure to enable this
97
+
},
98
+
});
99
+
```
100
+
101
+
```ts
102
+
// src/live.config.ts
103
+
import { defineLiveCollection, z } from "astro:content";
104
+
import { leafletLiveLoader } from "leaflet-loader-astro";
105
+
106
+
const documents = defineLiveCollection({
107
+
loader: leafletLiveLoader({ repo: "did:plc:qttsv4e7pu2jl3ilanfgc3zn" }),
108
+
});
109
+
110
+
export const collections = { documents };
111
+
```
112
+
113
+
```ts
114
+
// src/pages/index.astro
115
+
---
116
+
import { getLiveCollection } from "astro:content";
117
+
118
+
export const prerender = false;
119
+
120
+
const 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
+
---
145
+
import { getLiveEntry } from "astro:content";
146
+
import { render } from "astro:content";
147
+
148
+
export const prerender = false;
149
+
150
+
const document = await getLiveEntry("documents", Astro.params.blog);
151
+
152
+
if (!document) {
153
+
throw new Error(`Document with id "${Astro.params.blog}" not found`);
154
+
}
155
+
156
+
const { Content } = await render(document?.entry);
157
+
---
158
+
159
+
<Content />
160
+
```