Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Update website ✨ #481

Merged
merged 1 commit into from
Nov 21, 2024
Merged

✨ Update website ✨ #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/app/blog/[slug]/page.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.