work on web page

Author: robb-j

website/_assets/app.js

@@ -20,14 +20,21 @@ class BuildsInfo extends HTMLElement {
 	get fake() {
 		return this.hasAttribute("fake");
 	}
+	get url() {
+		return this.getAttribute("url") ?? location.origin;
+	}
 
 	async getMetadata() {
 		if (this.fake) return BuildsInfo.fakeInfo;
 
-		const res = await fetch(this.endpoint);
+		const res = await fetch(this.getUrl(this.endpoint));
 		return res.ok ? res.json() : null;
 	}
 
+	getUrl(input) {
+		return new URL(input, this.url).toString();
+	}
+
 	async render() {
 		const data = await this.getMetadata();
 		if (!data) {
@@ -36,12 +43,12 @@ class BuildsInfo extends HTMLElement {
 		}
 
 		const tileAnchor = (name) => {
-			return `<a href="/tiles/${name}" download="${name}.json">${name}</a>`;
+			return `<a href="${this.getUrl(name)}" download="${name}">${name}</a>`;
 		};
 
 		const metaAnchor = (pmtiles) => {
 			const name = pmtiles.replace(/\.pmtiles$/, "");
-			return `<a href="/tiles/${name}.json" download="${name}.json">metadata</a>`;
+			return `<a href="${this.getUrl(name)}.json" download="${name}.json">metadata</a>`;
 		};
 
 		const builds = data.targets.map(
@@ -55,20 +62,38 @@ class BuildsInfo extends HTMLElement {
 				</li>`,
 		);
 
-		const debug = [
-			`endpoint: ${this.endpoint}`,
-			`version: ${data.meta.name}/${data.meta.version}`,
-		];
+		// const debug = [
+		// 	`endpoint: ${this.endpoint}`,
+		// 	`version: ${data.meta.name}/${data.meta.version}`,
+		// ];
+
+		const debug = {
+			element: {
+				endpoint: this.endpoint,
+				url: this.url,
+				fake: this.fake,
+			},
+			data,
+		};
+
+		const format = new Intl.DateTimeFormat(undefined, {
+			dateStyle: "medium",
+			timeStyle: "medium",
+		});
+		const updated = format.format(new Date(data.date));
 
 		this.classList.add("flow");
 
 		this.innerHTML = `
 			<ul>
 				${builds.join("\n")}
 			</ul>
+			<p>
+				Last updated: ${updated}
+			</p>
 			<details>
 				<summary>debug</summary>
-				<pre>${debug.join("\n")}</pre>
+				<pre>${JSON.stringify(debug, null, 2)}</pre>
 			</details>
 		`;
 	}

website/index.md

@@ -9,16 +9,37 @@ There is a brief description of the format and a guide for using them.
 
 ## about
 
-> TODO: ...
+This site contains information about using Open Lab's [PMTiles](https://github.com/protomaps/PMTiles) in your app's maps.
+PMTiles is a binary format that contains vector-based tiles for client-side maps, generated from [OpenStreetMap](https://www.openstreetmap.org/about).
+That means you can style your maps however you like and do not have to rely on a third party like Google Maps or MapBox.
+
+Internally, the PMTiles format works on [HTTP range requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Range_requests)
+so the client only requests the specific tiles in needs and the correct resolutions.
+
+This website documents the tilesets that are available and when they were last updated.
 
 ## install
 
 > TODO: ...
 
+- [docs.protomaps.com/pmtiles/maplibre](https://docs.protomaps.com/pmtiles/maplibre)
+
 ## cli
 
-> TODO: ...
+The other part of this website is a CLI that is used to fetch the generated tiles from [ProtoMaps](https://docs.protomaps.com/basemaps/downloads).
+It's `run` command does the following:
+
+1. Connects to the S3 bucket, where the tiles will be uploaded too
+2. Reads in the configuration that tells it what tilesets to create with bounding boxes
+3. It loads the protomaps build.json file to see what downloads are available.
+4. For each target:
+5. It uses the `pmtiles` binary to download & extract the boundary box into a new binary
+6. It uploads that file to the S3 bucket as `{target}.pmtiles`
+7. It also uploads a JSON metadata file containing information about the download as `{target}.json`
+8. Finally, it uploads a `_metadata.json` file with information about all the downloads.
 
 ## tiles
 
-<builds-info></builds-info>
+Copy the URLs below to link them into your app.
+
+<builds-info url="https://maps.openlab.dev/tiles/"></builds-info>