Leaflet Blog in Deno Fresh
knotbin.com
1import { Footer } from "../components/footer.tsx";
2import PostList from "../islands/post-list.tsx";
3import { Title } from "../components/typography.tsx";
4import { getPosts } from "../lib/api.ts";
5
6export const dynamic = "force-static";
7export const revalidate = 3600; // 1 hour
8
9const stupidSelfDeprecatingTaglinesToTryToPretendImSelfAware = [
10 "is looking into it",
11 "i think therefore imdb",
12 "isn't a real word",
13 "enjoys each protocol equally",
14 "is having a very semantic argument",
15 "wrote these derivitive taglines",
16 "is way too into css animations",
17 "uses dark mode at noon",
18 "overthinks variable names",
19 "git pushes with -f",
20 "formats on save",
21 "is praising kier",
22 "pretends to understand monads",
23 "brags about their vim config",
24 "documents their code (lies)",
25 "isn't mysterious or important",
26 "wants to be included in discourse",
27 "is deeply offended by semicolons",
28 "is morraly opposed to touching grass",
29];
30
31function getRandomTagline() {
32 return stupidSelfDeprecatingTaglinesToTryToPretendImSelfAware[Math.floor(Math.random() * stupidSelfDeprecatingTaglinesToTryToPretendImSelfAware.length)];
33}
34
35export default async function Home() {
36 const posts = await getPosts();
37 const tagline = getRandomTagline();
38
39 return (
40 <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-dvh p-8 pb-20 gap-16 sm:p-20">
41 <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start w-full max-w-[600px]">
42 <div className="self-center flex flex-col">
43 <div className="relative">
44 <Title className="m-0 mb-6 font-serif-italic text-4xl sm:text-5xl lowercase">
45 knotbin
46 </Title>
47 <span className="absolute bottom-3 -right-2 font-bold text-xs opacity-50 text-right whitespace-nowrap">
48 {tagline}
49 </span>
50 </div>
51 </div>
52
53 <div className="flex flex-col gap-4 w-full">
54 <PostList posts={posts} />
55 </div>
56 </main>
57 <Footer />
58 </div>
59 );
60}