knotbin.com
Leaflet Blog in Deno Fresh
tagline
+41
-7
+37
-6
routes/index.tsx
+37
-6
routes/index.tsx
···
6
6
export const dynamic = "force-static";
7
7
export const revalidate = 3600; // 1 hour
8
8
9
+
const 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
+
"fellas is it gay to write unit tests?",
16
+
"wrote these derivitive taglines",
17
+
"is way too into css animations",
18
+
"uses dark mode at noon",
19
+
"overthinks variable names",
20
+
"git pushes with -f",
21
+
"formats on save",
22
+
"is praising kier",
23
+
"pretends to understand monads",
24
+
"brags about their vim config",
25
+
"documents their code (lies)",
26
+
"isn't mysterious or important",
27
+
"wants to be included in discourse",
28
+
"is deeply offended by semicolons",
29
+
"is morraly opposed to touching grass",
30
+
"uses inline css (sue me)",
31
+
];
32
+
33
+
function getRandomTagline() {
34
+
return stupidSelfDeprecatingTaglinesToTryToPretendImSelfAware[Math.floor(Math.random() * stupidSelfDeprecatingTaglinesToTryToPretendImSelfAware.length)];
35
+
}
36
+
9
37
export default async function Home() {
10
38
const posts = await getPosts();
39
+
const tagline = getRandomTagline();
11
40
12
41
return (
13
42
<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">
14
43
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start w-full max-w-[600px]">
15
44
<div className="self-center flex flex-col">
16
-
<Title level="h1" className="m-0">
17
-
knotbin
18
-
</Title>
19
-
<span className="font-bold text-xs opacity-50 text-right flex-1 mr-6">
20
-
looking into it
21
-
</span>
45
+
<div className="relative">
46
+
<Title className="m-0 mb-6 font-serif-italic text-4xl sm:text-5xl lowercase">
47
+
knotbin
48
+
</Title>
49
+
<span className="absolute bottom-3 -right-2 font-bold text-xs opacity-50 text-right whitespace-nowrap">
50
+
{tagline}
51
+
</span>
52
+
</div>
22
53
</div>
23
54
24
55
<div className="flex flex-col gap-4 w-full">
+2
routes/post/[slug].tsx
+2
routes/post/[slug].tsx
···
7
7
import { Title } from "../../components/typography.tsx";
8
8
import { getPost } from "../../lib/api.ts";
9
9
import { Head } from "$fresh/runtime.ts";
10
+
import { BlueskyComments } from "npm:bluesky-comments";
10
11
11
12
interface Post {
12
13
uri: string;
···
145
146
/>
146
147
</div>
147
148
</article>
149
+
148
150
</main>
149
151
<Footer />
150
152
</div>
+2
-1
static/styles.css
+2
-1
static/styles.css
···
1
1
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
2
-
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;700&display=swap');
2
+
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400;0,700;1,400&display=swap');
3
3
@font-face {
4
4
font-family: 'Berkeley Mono';
5
5
src: url('/path/to/local/fonts/BerkeleyMono-Regular.woff2') format('woff2'),
···
26
26
.font-sans { font-family: var(--font-sans); }
27
27
.font-serif { font-family: var(--font-serif); }
28
28
.font-mono { font-family: var(--font-mono); }
29
+
.font-serif-italic { font-family: var(--font-serif); font-style: italic;}
29
30
30
31
/*
31
32
The default border color has changed to `currentColor` in Tailwind CSS v4,