my blog https://overreacted.io
youtube
+32
-13
+2
-2
app/[slug]/markdown.css
+2
-2
app/[slug]/markdown.css
···
141
141
}
142
142
143
143
.tip {
144
-
@apply relative md:-left-8 inline-block px-8 py-4 mb-8 font-sans font-semibold text-xl rounded-full shadow-xl transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-opacity-50 border-b-[1px] text-white overflow-clip;
144
+
@apply inline-block px-8 py-4 font-sans font-semibold text-xl rounded-full shadow-xl transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-opacity-50 border-b-[1px] text-white overflow-clip transition-transform;
145
145
border-color: var(--link);
146
146
}
147
147
148
148
.tip.tip-sm {
149
-
@apply relative md:-left-6 inline-block px-6 py-2 mb-8 text-lg shadow-md;
149
+
@apply inline-block px-6 py-2 text-lg shadow-md;
150
150
}
151
151
152
152
.tip-bg {
+29
-11
app/[slug]/page.js
+29
-11
app/[slug]/page.js
···
30
30
let Wrapper = postComponents.Wrapper ?? Fragment;
31
31
const { content, data } = matter(file);
32
32
const discussUrl = `https://bsky.app/search?q=${encodeURIComponent(
33
-
`https://overreacted.io/${slug}/`
33
+
`https://overreacted.io/${slug}/`,
34
34
)}`;
35
35
const editUrl = `https://github.com/gaearon/overreacted.io/edit/main/public/${encodeURIComponent(
36
-
slug
36
+
slug,
37
37
)}/index.md`;
38
38
return (
39
39
<>
···
54
54
})}
55
55
</p>
56
56
<div className="markdown mt-10">
57
-
<a
58
-
href="https://ko-fi.com/gaearon"
59
-
target="_blank"
60
-
className="tip tip-sm"
61
-
>
62
-
<span className="tip-bg" />
63
-
Pay what you like
64
-
</a>
57
+
<div className="mb-8 relative md:-left-6">
58
+
<a
59
+
href="https://ko-fi.com/gaearon"
60
+
target="_blank"
61
+
className="tip tip-sm mr-4"
62
+
>
63
+
<span className="tip-bg" />
64
+
Pay what you like
65
+
</a>
66
+
{data.youtube && (
67
+
<a className="inline-block" href={data.youtube} target="_blank">
68
+
<span className="hidden min-[400px]:inline">Watch on </span>
69
+
YouTube
70
+
</a>
71
+
)}
72
+
</div>
65
73
<Wrapper>
66
74
<MDXRemote
67
75
source={content}
···
107
115
}}
108
116
/>
109
117
</Wrapper>
110
-
<a href="https://ko-fi.com/gaearon" target="_blank" className="tip">
118
+
<a
119
+
href="https://ko-fi.com/gaearon"
120
+
target="_blank"
121
+
className="tip mb-8 relative md:-left-8"
122
+
>
111
123
<span className="tip-bg" />
112
124
Pay what you like
113
125
</a>
114
126
<hr />
115
127
<p>
116
128
<Link href={discussUrl}>Discuss on Bluesky</Link>
129
+
{data.youtube && (
130
+
<>
131
+
·
132
+
<Link href={data.youtube}>Watch on YouTube</Link>
133
+
</>
134
+
)}
117
135
·
118
136
<Link href={editUrl}>Edit on GitHub</Link>
119
137
</p>
+1
public/what-does-use-client-do/index.md
+1
public/what-does-use-client-do/index.md
···
2
2
title: What Does "use client" Do?
3
3
date: '2025-04-25'
4
4
spoiler: Two worlds, two doors.
5
+
youtube: https://www.youtube.com/watch?v=31e5c67znF4
5
6
---
6
7
7
8
React Server Components (in?)famously has no API surface. It's an entire programming paradigm largely stemming from two directives: