Skip to content

Commit ccc281c

Browse files
pomberpomber
committed
Update blog
1 parent ded084d commit ccc281c

File tree

5 files changed

+126
-78
lines changed

5 files changed

+126
-78
lines changed

‎apps/web/app/blog/[slug]/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
2020
page.data.className,
2121
)}
2222
>
23-
<div className="mb-4">
23+
<div className="mb-4 text-sm md:text-base">
2424
{page.data.date.toLocaleDateString("en-US", {
2525
year: "numeric",
2626
month: "long",

‎apps/web/app/blog/og/page.tsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
import Image from "next/image"
12
import { CodeHikeLogo } from "../../../ui/nav"
23

3-
const title = "Fine-grained Markdown"
4-
const description = "Flexible content, richer presentation"
4+
const title = "The Curse of Markdown"
5+
const description = "And the content website wasteland"
6+
const date = "November 21, 2024"
7+
8+
import pomber from "../[slug]/pomber.jpg"
59

610
export default function Page() {
711
return (
@@ -10,16 +14,32 @@ export default function Page() {
1014
className="flex justify-between flex-col p-16"
1115
style={{ width: 1200, height: 628 }}
1216
>
13-
<div className="flex-1 flex items-start">
17+
<div className="flex-1 flex items-start justify-between ">
1418
<span className="flex items-center text-4xl font-bold text-accent-foreground/90">
1519
<CodeHikeLogo className="h-12 w-12" /> Code Hike's blog
1620
</span>
17-
<div></div>
21+
<span className="text-xl font-bold text-accent-foreground/90 ml-auto">
22+
{date}
23+
</span>
1824
</div>
1925
<h1 className="text-6xl text-pretty m-0 pr-24">{title}</h1>
2026
<h2 className="text-accent-foreground/90 text-pretty text-4xl m-0 flex-1 pr-24">
2127
<div className="pt-10">{description}</div>
2228
</h2>
29+
<div className="flex items-center gap-4 ml-auto">
30+
<Image
31+
src={pomber}
32+
alt="pomber"
33+
width={56}
34+
height={56}
35+
priority={true}
36+
className="rounded-full m-0"
37+
/>
38+
<div>
39+
<div className="font-semibold text-xl">Rodrigo Pombo</div>
40+
<div className="text-primary/60 text-lg">@pomber</div>
41+
</div>
42+
</div>
2343
</div>
2444
</div>
2545
)

‎apps/web/content/blog/the-curse-of-markdown.steps.tsx

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const lean = {
2-
richAxis: "text-yellow-500",
2+
richAxis: "opacity-90",
33
costAxis: "opacity-0",
44
richScreenshot: "",
55
leanScreenshot: "opacity-100",
@@ -18,13 +18,13 @@ const lean = {
1818
rich: 65,
1919
cost: 33.6,
2020
pop: circle(65, 40.1, 60, 2.5),
21-
className: "bg-teal-600 !opacity-0",
21+
className: "bg-purple-500 !opacity-0",
2222
},
2323
{
2424
rich: 75,
2525
cost: 47.6,
2626
pop: circle(75, 56.3, 60, 2.5),
27-
className: "bg-teal-600 !opacity-0",
27+
className: "bg-purple-500 !opacity-0",
2828
},
2929
],
3030
}
@@ -57,7 +57,8 @@ const richness = {
5757
const effort = {
5858
leanScreenshot: "opacity-0",
5959
richScreenshot: "opacity-0",
60-
costAxis: "text-yellow-500",
60+
richAxis: "opacity-30",
61+
costAxis: "opacity-90",
6162
points: [
6263
{ rich: 10, cost: 10 },
6364
{ rich: 20, cost: 20 },
@@ -72,7 +73,6 @@ const effort = {
7273
}
7374

7475
const markdown = {
75-
costAxis: "",
7676
points: [
7777
{ rich: 10, cost: 10, pop: line(10, 9.9, 10.3, 24) },
7878
{ rich: 20, cost: 10.8, pop: line(20, 10.3, 11.6, 24) },
@@ -87,12 +87,12 @@ const markdown = {
8787
}
8888

8989
const wall = {
90+
costAxis: "opacity-30",
9091
wall: "opacity-50 top-0 bottom-0 bg-pink-500/10 border-x-2 border-pink-500/80",
9192
}
9293

9394
const distribution = {
9495
extra: "opacity-100",
95-
costAxis: "",
9696
points: [
9797
{ rich: 10, pop: line(10, 9.9, 10.3, 16) },
9898
{ rich: 20, pop: line(20, 10.3, 11.6, 24) },
@@ -173,9 +173,9 @@ const why = {
173173
{ rich: 30, className: "bg-sky-500" },
174174
{ rich: 40, className: "bg-blue-500" },
175175
{ rich: 50, className: "bg-indigo-500" },
176-
{ rich: 60, className: "bg-violet-500" },
177-
{ rich: 70, className: "bg-purple-500" },
178-
{ rich: 80, className: "bg-fuchsia-500" },
176+
{ rich: 60 },
177+
{ rich: 70 },
178+
{ rich: 80 },
179179
{ rich: 90, className: "bg-pink-500" },
180180
],
181181
}
@@ -211,23 +211,6 @@ function merge(rawSteps: any) {
211211
})
212212
}
213213

214-
function extra(
215-
rich: number,
216-
cost: number,
217-
n: number,
218-
noise: number,
219-
angle: number = 0,
220-
) {
221-
return Array.from({ length: n * 2 }, (_, i) => {
222-
const dx = (Math.random() * 2 - 1) * noise
223-
const dy = (Math.random() * 2 - 1) * 0
224-
return {
225-
rich: rich + dx,
226-
cost: cost + Math.sin(angle) * dx + Math.cos(angle) * dy,
227-
}
228-
})
229-
}
230-
231214
function line(richc: number, costl: number, costr: number, n: number, rd = 5) {
232215
return Array.from({ length: n * 2 }, (_, i) => {
233216
const costc = (costr + costl) / 2

‎apps/web/content/blog/the-curse-of-markdown.tsx

Lines changed: 92 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -106,31 +106,33 @@ function Screenshots({ lean, rich }: { lean?: string; rich?: string }) {
106106
function Axis({ cost, rich }: { cost?: string; rich?: string }) {
107107
return (
108108
<>
109-
<div
110-
className="absolute bottom-2 left-2 right-3 h-0.5 bg-zinc-700"
111-
style={{ translate: "0 50%" }}
112-
/>
113-
<div
114-
className="border-zinc-700 absolute right-2 bottom-2"
115-
style={{
116-
width: 0,
117-
height: 0,
118-
borderTop: "5px solid transparent",
119-
borderBottom: "5px solid transparent",
120-
borderLeftWidth: "6px",
121-
translate: "0 50%",
122-
}}
123-
/>
124-
<div className="absolute bottom-3 right-2 text-xs text-zinc-500">
125-
Richness
109+
<div className={cn("transition-all", rich)}>
110+
<div
111+
className="absolute bottom-2 left-2 right-3 h-0.5 bg-zinc-100"
112+
style={{ translate: "0 50%" }}
113+
/>
114+
<div
115+
className="border-zinc-100 absolute right-2 bottom-2"
116+
style={{
117+
width: 0,
118+
height: 0,
119+
borderTop: "5px solid transparent",
120+
borderBottom: "5px solid transparent",
121+
borderLeftWidth: "6px",
122+
translate: "0 50%",
123+
}}
124+
/>
125+
<div className="absolute bottom-3 right-2 text-sm text-zinc-100">
126+
Richness
127+
</div>
126128
</div>
127129
<div className={cn("transition-all", cost)}>
128130
<div
129-
className="absolute top-3 left-2 bottom-2 w-0.5 bg-zinc-700"
131+
className="absolute top-3 left-2 bottom-2 w-0.5 bg-zinc-100"
130132
style={{ translate: "-50% 0" }}
131133
/>
132134
<div
133-
className="border-zinc-700 absolute top-2 left-2"
135+
className="border-zinc-100 absolute top-2 left-2"
134136
style={{
135137
width: 0,
136138
height: 0,
@@ -141,7 +143,7 @@ function Axis({ cost, rich }: { cost?: string; rich?: string }) {
141143
translate: "-50% 0",
142144
}}
143145
/>
144-
<div className="absolute top-1 left-5 text-xs text-zinc-500">Cost</div>
146+
<div className="absolute top-1 left-5 text-sm text-zinc-100">Cost</div>
145147
</div>
146148
</>
147149
)
@@ -216,42 +218,85 @@ export function Layout(props: unknown) {
216218
const { steps } = parseProps(props, Block.extend({ steps: z.array(Block) }))
217219
return (
218220
<>
219-
<div className="md:hidden">TODO: small screen</div>
220-
<SelectionProvider
221-
className="hidden md:flex gap-6 relative mb-[max(calc(100vh-788px),64px)]"
222-
rootMargin={{ top: 256 + 48, height: 384 - 48 * 2 }}
223-
>
224-
<div className="flex-1">
221+
<div className="md:hidden">
222+
<SmallLayout steps={steps} />
223+
</div>
224+
<div className="hidden md:block">
225+
<ScrollyLayout steps={steps} />
226+
</div>
227+
</>
228+
)
229+
}
230+
231+
function SmallLayout({
232+
steps,
233+
}: {
234+
steps: {
235+
children?: React.ReactNode
236+
}[]
237+
}) {
238+
return (
239+
<div className="flex flex-col gap-6">
240+
{steps.map((step, i) => (
241+
<div key={i}>
225242
<div
226-
className="top-64 sticky h-96 flex-1 rounded bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black flex items-center justify-center"
243+
className="h-96 w-[324px] max-w-full relative mx-auto bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black rounded"
227244
style={{
228245
backgroundPosition: "center",
229246
backgroundSize: "26px",
230247
}}
231248
>
232-
<Selection
233-
from={steps.map((step, i) => (
234-
<Chart data={data[i]} />
235-
))}
236-
/>
249+
<Chart data={data[i]} />
237250
</div>
251+
{step.children}
238252
</div>
239-
<div className="flex-1 min-w-0 flex flex-col">
240-
{steps.map((step, i) => (
241-
<Selectable
242-
key={i}
243-
index={i}
244-
className="h-96 data-[selected=true]:opacity-100 opacity-20 transition-opacity snap-start scroll-mt-64 [&>:first-child]:mt-0 flex items-center"
245-
selectOn={["scroll"]}
246-
>
247-
<div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
248-
{step.children}
249-
</div>
250-
</Selectable>
251-
))}
253+
))}
254+
</div>
255+
)
256+
}
257+
258+
function ScrollyLayout({
259+
steps,
260+
}: {
261+
steps: {
262+
children?: React.ReactNode
263+
}[]
264+
}) {
265+
return (
266+
<SelectionProvider
267+
className="hidden md:flex gap-6 relative mb-[max(calc(100vh-788px),64px)]"
268+
rootMargin={{ top: 256 + 48 * 3, height: 48 }}
269+
>
270+
<div className="flex-1">
271+
<div
272+
className="top-64 sticky h-96 flex-1 rounded bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black flex items-center justify-center"
273+
style={{
274+
backgroundPosition: "center",
275+
backgroundSize: "26px",
276+
}}
277+
>
278+
<Selection
279+
from={steps.map((step, i) => (
280+
<Chart data={data[i]} />
281+
))}
282+
/>
252283
</div>
253-
</SelectionProvider>
254-
</>
284+
</div>
285+
<div className="flex-1 min-w-0 flex flex-col">
286+
{steps.map((step, i) => (
287+
<Selectable
288+
key={i}
289+
index={i}
290+
className="h-96 data-[selected=true]:opacity-100 opacity-20 transition-opacity scroll-mt-64 [&>:first-child]:mt-0 flex items-center " // snap-start
291+
selectOn={["scroll"]}
292+
>
293+
<div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0 prose-h3:scroll-m-64">
294+
{step.children}
295+
</div>
296+
</Selectable>
297+
))}
298+
</div>
299+
</SelectionProvider>
255300
)
256301
}
257302

‎apps/web/public/blog/the-curse-of-markdown.png

57 KB
Loading

0 commit comments

Comments
 (0)