leaflets!

package-lock.json

···
         "@astrojs/check": "^0.9.4",
         "@atproto/api": "^0.16.2",
         "@atproto/xrpc": "^0.7.1",
+        "@nulfrost/leaflet-loader-astro": "^1.1.0",
         "@tailwindcss/typography": "^0.5.16",
         "@tailwindcss/vite": "^4.1.11",
         "@types/node": "^24.2.0",
···
         "yaml": "^2.5.0"
       }
     },
+    "node_modules/@atcute/client": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@atcute/client/-/client-4.0.3.tgz",
+      "integrity": "sha512-RIOZWFVLca/HiPAAUDqQPOdOreCxTbL5cb+WUf5yqQOKIu5yEAP3eksinmlLmgIrlr5qVOE7brazUUzaskFCfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@atcute/identity": "^1.0.2",
+        "@atcute/lexicons": "^1.0.3"
+      }
+    },
+    "node_modules/@atcute/identity": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@atcute/identity/-/identity-1.0.3.tgz",
+      "integrity": "sha512-mNMxbKHFGys03A8JXKk0KfMBzdd0vrYMzZZWjpw1nYTs0+ea6bo5S1hwqVUZxHdo1gFHSe/t63jxQIF4yL9aKw==",
+      "license": "0BSD",
+      "dependencies": {
+        "@atcute/lexicons": "^1.0.4",
+        "@badrap/valita": "^0.4.5"
+      }
+    },
+    "node_modules/@atcute/lexicons": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@atcute/lexicons/-/lexicons-1.1.0.tgz",
+      "integrity": "sha512-LFqwnria78xLYb62Ri/+WwQpUTgZp2DuyolNGIIOV1dpiKhFFFh//nscHMA6IExFLQRqWDs3tTjy7zv0h3sf1Q==",
+      "license": "0BSD",
+      "dependencies": {
+        "esm-env": "^1.2.2"
+      }
+    },
     "node_modules/@atproto/api": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@atproto/api/-/api-0.16.2.tgz",
···
       },
       "engines": {
         "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@badrap/valita": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/@badrap/valita/-/valita-0.4.6.tgz",
+      "integrity": "sha512-4kdqcjyxo/8RQ8ayjms47HCWZIF5981oE5nIenbfThKDxWXtEHKipAOWlflpPJzZx9y/JWYQkp18Awr7VuepFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18"
       }
     },
     "node_modules/@capsizecss/unpack": {
···
       },
       "engines": {
         "node": ">= 8"
+      }
+    },
+    "node_modules/@nulfrost/leaflet-loader-astro": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@nulfrost/leaflet-loader-astro/-/leaflet-loader-astro-1.1.0.tgz",
+      "integrity": "sha512-A6ONOmds3/3pVFfa+YdpC5YMfOF1shvczAOnSWfVtUYz3bl3NRz26KieUrGW+26iVPgUtHPRLQOfygImrLrhYw==",
+      "license": "MIT",
+      "dependencies": {
+        "@atcute/client": "^4.0.3",
+        "@atcute/lexicons": "^1.1.0",
+        "@atproto/api": "^0.16.2",
+        "katex": "^0.16.22",
+        "sanitize-html": "^2.17.0"
       }
     },
     "node_modules/@oslojs/encoding": {
···
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/defu": {
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
···
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "license": "MIT"
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.2.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.1.tgz",
···
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/esm-env": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+      "license": "MIT"
     },
     "node_modules/estree-walker": {
       "version": "3.0.3",
···
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
···
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz",
···
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.3.1.tgz",
       "integrity": "sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==",
       "license": "MIT"
+    },
+    "node_modules/katex": {
+      "version": "0.16.22",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
     },
     "node_modules/kleur": {
       "version": "4.1.5",
···
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+      "license": "MIT"
+    },
     "node_modules/parse5": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
···
       "license": "MIT",
       "dependencies": {
         "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/sanitize-html": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.0.tgz",
+      "integrity": "sha512-dLAADUSS8rBwhaevT12yCezvioCA+bmUTPH/u57xKPT8d++voeYE6HeluA/bPbQ15TwDBG2ii+QZIEmYx8VdxA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/semver": {

package.json

···
     "@astrojs/check": "^0.9.4",
     "@atproto/api": "^0.16.2",
     "@atproto/xrpc": "^0.7.1",
+    "@nulfrost/leaflet-loader-astro": "^1.1.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.11",
     "@types/node": "^24.2.0",

src/content.config.ts

···
+import { defineCollection, z } from "astro:content";
+import { leafletStaticLoader } from "@nulfrost/leaflet-loader-astro";
+import { loadConfig } from "./lib/config/site";
+
+const config = loadConfig();
+
+const documents = defineCollection({
+  loader: leafletStaticLoader({ 
+    repo: config.atproto.did || config.atproto.handle || "did:plc:example" 
+  }),
+});
+
+export const collections = { documents };

src/pages/index.astro

···
         <a href="/" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
         <a href="/blog" class="text-blue-600 dark:text-blue-400 hover:underline">Blog</a>
         <a href="/galleries" class="text-blue-600 dark:text-blue-400 hover:underline">Galleries</a>
+        <a href="/leaflets" class="text-blue-600 dark:text-blue-400 hover:underline">Leaflets</a>
       </nav>
     </header>
 

src/pages/leaflets.astro

···
+---
+import Layout from '../layouts/Layout.astro';
+import { getCollection } from "astro:content";
+import { loadConfig } from '../lib/config/site';
+
+const config = loadConfig();
+const documents = await getCollection("documents");
+
+// Sort documents by published date (newest first)
+const sortedDocuments = documents.sort((a, b) => {
+  const dateA = a.data.publishedAt ? new Date(a.data.publishedAt).getTime() : 0;
+  const dateB = b.data.publishedAt ? new Date(b.data.publishedAt).getTime() : 0;
+  return dateB - dateA;
+});
+---
+
+<Layout title="Leaflet Documents">
+  <div class="container mx-auto px-4 py-8">
+    <header class="text-center mb-12">
+      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+        Leaflet Documents
+      </h1>
+      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+        A collection of my leaflet.pub documents
+      </p>
+    </header>
+
+    <main class="max-w-4xl mx-auto">
+      {config.atproto.handle && config.atproto.handle !== 'your-handle-here' ? (
+        sortedDocuments.length > 0 ? (
+          <div class="space-y-6">
+            {sortedDocuments.map((document) => (
+              <article class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+                <header class="mb-4">
+                  <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                    <a href={`/leaflets/${document.id}`} class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+                      {document.data.title}
+                    </a>
+                  </h2>
+                  
+                  {document.data.description && (
+                    <p class="text-gray-600 dark:text-gray-400 mb-3">
+                      {document.data.description}
+                    </p>
+                  )}
+                  
+                  <div class="text-sm text-gray-500 dark:text-gray-400">
+                    {document.data.publishedAt && (
+                      <span class="mr-4">
+                        Published: {new Date(document.data.publishedAt).toLocaleDateString('en-US', {
+                          year: 'numeric',
+                          month: 'long',
+                          day: 'numeric',
+                        })}
+                      </span>
+                    )}
+                    {document.data.author && (
+                      <span>Author: {document.data.author}</span>
+                    )}
+                  </div>
+                </header>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <div class="text-center py-12">
+            <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-8">
+              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+                No Leaflet Documents Found
+              </h3>
+              <p class="text-gray-600 dark:text-gray-400 mb-4">
+                No leaflet.pub documents were found for your account.
+              </p>
+              <p class="text-sm text-gray-500 dark:text-gray-500">
+                Make sure you have created documents using leaflet.pub and they are properly indexed.
+              </p>
+            </div>
+          </div>
+        )
+      ) : (
+        <div class="text-center py-12">
+          <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
+            <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
+              Configuration Required
+            </h3>
+            <p class="text-yellow-700 dark:text-yellow-300 mb-4">
+              To display your Leaflet documents, please configure your Bluesky handle in the environment variables.
+            </p>
+            <div class="text-sm text-yellow-600 dark:text-yellow-400">
+              <p class="mb-2">Create a <code class="bg-yellow-100 dark:bg-yellow-800 px-1 rounded">.env</code> file with:</p>
+              <pre class="bg-yellow-100 dark:bg-yellow-800 p-3 rounded text-xs overflow-x-auto">
+ATPROTO_HANDLE=your-handle.bsky.social
+SITE_TITLE=Your Site Title
+SITE_AUTHOR=Your Name</pre>
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  </div>
+</Layout>

src/pages/leaflets/[leaflet].astro

···
+---
+import Layout from '../../layouts/Layout.astro';
+import { getCollection, getEntry, render } from "astro:content";
+
+export async function getStaticPaths() {
+  const documents = await getCollection("documents");
+  return documents.map((document) => ({
+    params: { leaflet: document.id },
+    props: document,
+  }));
+}
+
+const document = await getEntry("documents", Astro.params.leaflet);
+
+if (!document) {
+  throw new Error(`Document with id "${Astro.params.leaflet}" not found`);
+}
+
+const { Content } = await render(document);
+---
+
+<Layout title={document.data.title}>
+  <div class="container mx-auto px-4 py-8">
+    <header class="mb-8">
+      <nav class="mb-6">
+        <a href="/leaflets" class="text-blue-600 dark:text-blue-400 hover:underline">
+          ← Back to Leaflets
+        </a>
+      </nav>
+      
+      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+        {document.data.title}
+      </h1>
+      
+      {document.data.description && (
+        <p class="text-xl text-gray-600 dark:text-gray-400 mb-6">
+          {document.data.description}
+        </p>
+      )}
+      
+      <div class="text-sm text-gray-500 dark:text-gray-400 mb-6">
+        {document.data.publishedAt && (
+          <span class="mr-4">
+            Published: {new Date(document.data.publishedAt).toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            })}
+          </span>
+        )}
+        {document.data.author && (
+          <span>Author: {document.data.author}</span>
+        )}
+      </div>
+    </header>
+
+    <main class="max-w-4xl mx-auto">
+      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8">
+        <Content />
+      </article>
+    </main>
+  </div>
+</Layout>