Leaflet Blog in Deno Fresh
knotbin.com
1import ProjectList from "../islands/project-list.tsx";
2import { Title } from "../components/typography.tsx";
3import { Layout } from "../islands/layout.tsx";
4
5export const dynamic = "force-static";
6export const revalidate = 3600; // 1 hour
7
8interface Project {
9 id: string;
10 title: string;
11 description: string;
12 technologies: string[];
13 url: string;
14 demo?: string;
15 year: string;
16 status: "active" | "completed" | "maintained" | "archived";
17}
18
19// Mock project data - replace with your actual projects
20const projects: Project[] = [
21 {
22 id: "1",
23 title: "ATP Airport",
24 description: `The first ever graphical PDS migration tool for AT Protocol.
25 Allows users to migrate their data from one PDS to another without any
26 experience or technical knowledge.`,
27 technologies: ["AT Protocol", "Fresh", "Deno", "TypeScript"],
28 url: "https://github.com/knotbin/airport",
29 demo: "https://atpairport.com",
30 year: "2025",
31 status: "active",
32 },
33];
34
35export default function Work() {
36 return (
37 <Layout>
38 <div class="p-8 pb-20 gap-16 sm:p-20">
39 <div class="max-w-[600px] mx-auto">
40 <Title class="font-serif-italic text-4xl sm:text-5xl lowercase mb-12">
41 Work
42 </Title>
43
44 <div class="space-y-4 w-full">
45 <ProjectList projects={projects} />
46 </div>
47 </div>
48 </div>
49 </Layout>
50 );
51}