tynanpurdy.com
A personal website powered by Astro and ATProto
1---
2import Layout from '../layouts/Layout.astro';
3import { getCollection } from "astro:content";
4import { loadConfig } from '../lib/config/site';
5
6const config = loadConfig();
7const documents = await getCollection("documents");
8
9// Sort documents by published date (newest first)
10const sortedDocuments = documents.sort((a, b) => {
11 const dateA = a.data.publishedAt ? new Date(a.data.publishedAt).getTime() : 0;
12 const dateB = b.data.publishedAt ? new Date(b.data.publishedAt).getTime() : 0;
13 return dateB - dateA;
14});
15---
16
17<Layout title="Leaflet Documents">
18 <div class="container mx-auto px-4 py-8">
19 <header class="text-center mb-12">
20 <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
21 Leaflet Documents
22 </h1>
23 <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
24 A collection of my leaflet.pub documents
25 </p>
26 </header>
27
28 <main class="max-w-4xl mx-auto">
29 {config.atproto.handle && config.atproto.handle !== 'your-handle-here' ? (
30 sortedDocuments.length > 0 ? (
31 <div class="space-y-6">
32 {sortedDocuments.map((document) => (
33 <article class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
34 <header class="mb-4">
35 <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
36 <a href={`/leaflets/${document.id}`} class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
37 {document.data.title}
38 </a>
39 </h2>
40
41 {document.data.description && (
42 <p class="text-gray-600 dark:text-gray-400 mb-3">
43 {document.data.description}
44 </p>
45 )}
46
47 <div class="text-sm text-gray-500 dark:text-gray-400">
48 {document.data.publishedAt && (
49 <span>
50 Published: {new Date(document.data.publishedAt).toLocaleDateString('en-US', {
51 year: 'numeric',
52 month: 'long',
53 day: 'numeric',
54 })}
55 </span>
56 )}
57 </div>
58 </header>
59 </article>
60 ))}
61 </div>
62 ) : (
63 <div class="text-center py-12">
64 <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-8">
65 <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
66 No Leaflet Documents Found
67 </h3>
68 <p class="text-gray-600 dark:text-gray-400 mb-4">
69 No leaflet.pub documents were found for your account.
70 </p>
71 <p class="text-sm text-gray-500 dark:text-gray-500">
72 Make sure you have created documents using leaflet.pub and they are properly indexed.
73 </p>
74 </div>
75 </div>
76 )
77 ) : (
78 <div class="text-center py-12">
79 <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
80 <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
81 Configuration Required
82 </h3>
83 <p class="text-yellow-700 dark:text-yellow-300 mb-4">
84 To display your Leaflet documents, please configure your Bluesky handle in the environment variables.
85 </p>
86 <div class="text-sm text-yellow-600 dark:text-yellow-400">
87 <p class="mb-2">Create a <code class="bg-yellow-100 dark:bg-yellow-800 px-1 rounded">.env</code> file with:</p>
88 <pre class="bg-yellow-100 dark:bg-yellow-800 p-3 rounded text-xs overflow-x-auto">
89ATPROTO_HANDLE=your-handle.bsky.social
90SITE_TITLE=Your Site Title
91SITE_AUTHOR=Your Name</pre>
92 </div>
93 </div>
94 </div>
95 )}
96 </main>
97 </div>
98</Layout>