Skip to content

Commit

Permalink
Update blog
Browse files Browse the repository at this point in the history
  • Loading branch information
@pomber
pomber committed Nov 21, 2024
1 parent ded084d commit ccc281c
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 78 deletions.
2 changes: 1 addition & 1 deletion apps/web/app/blog/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
page.data.className,
)}
>
<div className="mb-4">
<div className="mb-4 text-sm md:text-base">
{page.data.date.toLocaleDateString("en-US", {
year: "numeric",
month: "long",
Expand Down
28 changes: 24 additions & 4 deletions apps/web/app/blog/og/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import Image from "next/image"
import { CodeHikeLogo } from "../../../ui/nav"

const title = "Fine-grained Markdown"
const description = "Flexible content, richer presentation"
const title = "The Curse of Markdown"
const description = "And the content website wasteland"
const date = "November 21, 2024"

import pomber from "../[slug]/pomber.jpg"

export default function Page() {
return (
Expand All @@ -10,16 +14,32 @@ export default function Page() {
className="flex justify-between flex-col p-16"
style={{ width: 1200, height: 628 }}
>
<div className="flex-1 flex items-start">
<div className="flex-1 flex items-start justify-between ">
<span className="flex items-center text-4xl font-bold text-accent-foreground/90">
<CodeHikeLogo className="h-12 w-12" /> Code Hike's blog
</span>
<div></div>
<span className="text-xl font-bold text-accent-foreground/90 ml-auto">
{date}
</span>
</div>
<h1 className="text-6xl text-pretty m-0 pr-24">{title}</h1>
<h2 className="text-accent-foreground/90 text-pretty text-4xl m-0 flex-1 pr-24">
<div className="pt-10">{description}</div>
</h2>
<div className="flex items-center gap-4 ml-auto">
<Image
src={pomber}
alt="pomber"
width={56}
height={56}
priority={true}
className="rounded-full m-0"
/>
<div>
<div className="font-semibold text-xl">Rodrigo Pombo</div>
<div className="text-primary/60 text-lg">@pomber</div>
</div>
</div>
</div>
</div>
)
Expand Down
35 changes: 9 additions & 26 deletions apps/web/content/blog/the-curse-of-markdown.steps.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const lean = {
richAxis: "text-yellow-500",
richAxis: "opacity-90",
costAxis: "opacity-0",
richScreenshot: "",
leanScreenshot: "opacity-100",
Expand All @@ -18,13 +18,13 @@ const lean = {
rich: 65,
cost: 33.6,
pop: circle(65, 40.1, 60, 2.5),
className: "bg-teal-600 !opacity-0",
className: "bg-purple-500 !opacity-0",
},
{
rich: 75,
cost: 47.6,
pop: circle(75, 56.3, 60, 2.5),
className: "bg-teal-600 !opacity-0",
className: "bg-purple-500 !opacity-0",
},
],
}
Expand Down Expand Up @@ -57,7 +57,8 @@ const richness = {
const effort = {
leanScreenshot: "opacity-0",
richScreenshot: "opacity-0",
costAxis: "text-yellow-500",
richAxis: "opacity-30",
costAxis: "opacity-90",
points: [
{ rich: 10, cost: 10 },
{ rich: 20, cost: 20 },
Expand All @@ -72,7 +73,6 @@ const effort = {
}

const markdown = {
costAxis: "",
points: [
{ rich: 10, cost: 10, pop: line(10, 9.9, 10.3, 24) },
{ rich: 20, cost: 10.8, pop: line(20, 10.3, 11.6, 24) },
Expand All @@ -87,12 +87,12 @@ const markdown = {
}

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

const distribution = {
extra: "opacity-100",
costAxis: "",
points: [
{ rich: 10, pop: line(10, 9.9, 10.3, 16) },
{ rich: 20, pop: line(20, 10.3, 11.6, 24) },
Expand Down Expand Up @@ -173,9 +173,9 @@ const why = {
{ rich: 30, className: "bg-sky-500" },
{ rich: 40, className: "bg-blue-500" },
{ rich: 50, className: "bg-indigo-500" },
{ rich: 60, className: "bg-violet-500" },
{ rich: 70, className: "bg-purple-500" },
{ rich: 80, className: "bg-fuchsia-500" },
{ rich: 60 },
{ rich: 70 },
{ rich: 80 },
{ rich: 90, className: "bg-pink-500" },
],
}
Expand Down Expand Up @@ -211,23 +211,6 @@ function merge(rawSteps: any) {
})
}

function extra(
rich: number,
cost: number,
n: number,
noise: number,
angle: number = 0,
) {
return Array.from({ length: n * 2 }, (_, i) => {
const dx = (Math.random() * 2 - 1) * noise
const dy = (Math.random() * 2 - 1) * 0
return {
rich: rich + dx,
cost: cost + Math.sin(angle) * dx + Math.cos(angle) * dy,
}
})
}

function line(richc: number, costl: number, costr: number, n: number, rd = 5) {
return Array.from({ length: n * 2 }, (_, i) => {
const costc = (costr + costl) / 2
Expand Down
139 changes: 92 additions & 47 deletions apps/web/content/blog/the-curse-of-markdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,31 +106,33 @@ function Screenshots({ lean, rich }: { lean?: string; rich?: string }) {
function Axis({ cost, rich }: { cost?: string; rich?: string }) {
return (
<>
<div
className="absolute bottom-2 left-2 right-3 h-0.5 bg-zinc-700"
style={{ translate: "0 50%" }}
/>
<div
className="border-zinc-700 absolute right-2 bottom-2"
style={{
width: 0,
height: 0,
borderTop: "5px solid transparent",
borderBottom: "5px solid transparent",
borderLeftWidth: "6px",
translate: "0 50%",
}}
/>
<div className="absolute bottom-3 right-2 text-xs text-zinc-500">
Richness
<div className={cn("transition-all", rich)}>
<div
className="absolute bottom-2 left-2 right-3 h-0.5 bg-zinc-100"
style={{ translate: "0 50%" }}
/>
<div
className="border-zinc-100 absolute right-2 bottom-2"
style={{
width: 0,
height: 0,
borderTop: "5px solid transparent",
borderBottom: "5px solid transparent",
borderLeftWidth: "6px",
translate: "0 50%",
}}
/>
<div className="absolute bottom-3 right-2 text-sm text-zinc-100">
Richness
</div>
</div>
<div className={cn("transition-all", cost)}>
<div
className="absolute top-3 left-2 bottom-2 w-0.5 bg-zinc-700"
className="absolute top-3 left-2 bottom-2 w-0.5 bg-zinc-100"
style={{ translate: "-50% 0" }}
/>
<div
className="border-zinc-700 absolute top-2 left-2"
className="border-zinc-100 absolute top-2 left-2"
style={{
width: 0,
height: 0,
Expand All @@ -141,7 +143,7 @@ function Axis({ cost, rich }: { cost?: string; rich?: string }) {
translate: "-50% 0",
}}
/>
<div className="absolute top-1 left-5 text-xs text-zinc-500">Cost</div>
<div className="absolute top-1 left-5 text-sm text-zinc-100">Cost</div>
</div>
</>
)
Expand Down Expand Up @@ -216,42 +218,85 @@ export function Layout(props: unknown) {
const { steps } = parseProps(props, Block.extend({ steps: z.array(Block) }))
return (
<>
<div className="md:hidden">TODO: small screen</div>
<SelectionProvider
className="hidden md:flex gap-6 relative mb-[max(calc(100vh-788px),64px)]"
rootMargin={{ top: 256 + 48, height: 384 - 48 * 2 }}
>
<div className="flex-1">
<div className="md:hidden">
<SmallLayout steps={steps} />
</div>
<div className="hidden md:block">
<ScrollyLayout steps={steps} />
</div>
</>
)
}

function SmallLayout({
steps,
}: {
steps: {
children?: React.ReactNode
}[]
}) {
return (
<div className="flex flex-col gap-6">
{steps.map((step, i) => (
<div key={i}>
<div
className="top-64 sticky h-96 flex-1 rounded bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black flex items-center justify-center"
className="h-96 w-[324px] max-w-full relative mx-auto bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black rounded"
style={{
backgroundPosition: "center",
backgroundSize: "26px",
}}
>
<Selection
from={steps.map((step, i) => (
<Chart data={data[i]} />
))}
/>
<Chart data={data[i]} />
</div>
{step.children}
</div>
<div className="flex-1 min-w-0 flex flex-col">
{steps.map((step, i) => (
<Selectable
key={i}
index={i}
className="h-96 data-[selected=true]:opacity-100 opacity-20 transition-opacity snap-start scroll-mt-64 [&>:first-child]:mt-0 flex items-center"
selectOn={["scroll"]}
>
<div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
{step.children}
</div>
</Selectable>
))}
))}
</div>
)
}

function ScrollyLayout({
steps,
}: {
steps: {
children?: React.ReactNode
}[]
}) {
return (
<SelectionProvider
className="hidden md:flex gap-6 relative mb-[max(calc(100vh-788px),64px)]"
rootMargin={{ top: 256 + 48 * 3, height: 48 }}
>
<div className="flex-1">
<div
className="top-64 sticky h-96 flex-1 rounded bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black flex items-center justify-center"
style={{
backgroundPosition: "center",
backgroundSize: "26px",
}}
>
<Selection
from={steps.map((step, i) => (
<Chart data={data[i]} />
))}
/>
</div>
</SelectionProvider>
</>
</div>
<div className="flex-1 min-w-0 flex flex-col">
{steps.map((step, i) => (
<Selectable
key={i}
index={i}
className="h-96 data-[selected=true]:opacity-100 opacity-20 transition-opacity scroll-mt-64 [&>:first-child]:mt-0 flex items-center " // snap-start
selectOn={["scroll"]}
>
<div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0 prose-h3:scroll-m-64">
{step.children}
</div>
</Selectable>
))}
</div>
</SelectionProvider>
)
}

Expand Down
Binary file added apps/web/public/blog/the-curse-of-markdown.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ccc281c

Please sign in to comment.