my blog https://overreacted.io
twk
+93
-91
+92
-91
app/[slug]/page.tsx
+92
-91
app/[slug]/page.tsx
···
78
78
79
79
<Wrapper>
80
80
<div className="flex flex-col gap-8">
81
-
<MDXRemote
82
-
source={content}
83
-
components={{
84
-
p: markdown.P,
85
-
h2: markdown.H2,
86
-
h3: markdown.H3,
87
-
h4: markdown.H4,
88
-
blockquote: markdown.Blockquote,
89
-
ul: markdown.UL,
90
-
ol: markdown.OL,
91
-
li: markdown.LI,
92
-
pre: markdown.Pre,
93
-
code: markdown.Code,
94
-
table: markdown.Table,
95
-
th: markdown.Th,
96
-
td: markdown.Td,
97
-
hr: markdown.Hr,
98
-
a: (props: React.ComponentProps<"a">) => (
99
-
<TextLink {...props} href={props.href ?? ""} />
100
-
),
101
-
img: async ({ src, ...rest }) => {
102
-
if (
103
-
src &&
104
-
!/^https?:\/\//.test(src) &&
105
-
src.endsWith(".svg")
106
-
) {
107
-
const svgPath = `./public/${slug}/${src}`;
108
-
const svgContent = await readFile(svgPath, "utf8");
109
-
const maxWidth = src.endsWith("-full.svg")
110
-
? "100%"
111
-
: "450px";
112
-
const colorReplacedSvg = svgContent
113
-
.replace(/#ffffff/gi, "var(--bg-rotated)")
114
-
.replace(/<metadata>.*?<\/metadata>/s, "")
115
-
.replace(
116
-
"<svg",
117
-
`<svg style="max-width: ${maxWidth}; width: 100%; height: auto;"`,
81
+
<MDXRemote
82
+
source={content}
83
+
components={{
84
+
p: markdown.P,
85
+
h2: markdown.H2,
86
+
h3: markdown.H3,
87
+
h4: markdown.H4,
88
+
blockquote: markdown.Blockquote,
89
+
ul: markdown.UL,
90
+
ol: markdown.OL,
91
+
li: markdown.LI,
92
+
pre: markdown.Pre,
93
+
code: markdown.Code,
94
+
table: markdown.Table,
95
+
th: markdown.Th,
96
+
td: markdown.Td,
97
+
hr: markdown.Hr,
98
+
a: (props: React.ComponentProps<"a">) => (
99
+
<TextLink {...props} href={props.href ?? ""} />
100
+
),
101
+
img: async ({ src, ...rest }) => {
102
+
if (
103
+
src &&
104
+
!/^https?:\/\//.test(src) &&
105
+
src.endsWith(".svg")
106
+
) {
107
+
const svgPath = `./public/${slug}/${src}`;
108
+
const svgContent = await readFile(svgPath, "utf8");
109
+
const maxWidth = src.endsWith("-full.svg")
110
+
? "100%"
111
+
: "450px";
112
+
const colorReplacedSvg = svgContent
113
+
.replace(/#ffffff/gi, "var(--bg-rotated)")
114
+
.replace(/<metadata>.*?<\/metadata>/s, "")
115
+
.replace(
116
+
"<svg",
117
+
`<svg style="max-width: ${maxWidth}; width: 100%; height: auto;"`,
118
+
);
119
+
120
+
return (
121
+
<span
122
+
dangerouslySetInnerHTML={{ __html: colorReplacedSvg }}
123
+
style={{
124
+
filter: "var(--svg-filter)",
125
+
display: "inline-block",
126
+
...rest.style,
127
+
}}
128
+
{...rest}
129
+
/>
118
130
);
131
+
}
119
132
133
+
let finalSrc = src;
134
+
if (src && !/^https?:\/\//.test(src)) {
135
+
// https://github.com/gaearon/overreacted.io/issues/827
136
+
finalSrc = `/${slug}/${src}`;
137
+
}
138
+
139
+
return <markdown.Img src={finalSrc} {...rest} />;
140
+
},
141
+
Video: ({ src, poster, ...rest }) => {
142
+
let finalSrc = src;
143
+
if (src && !/^https?:\/\//.test(src)) {
144
+
finalSrc = `/${slug}/${src}`;
145
+
}
146
+
let finalPoster = poster;
147
+
if (poster && !/^https?:\/\//.test(poster)) {
148
+
finalPoster = `/${slug}/${poster}`;
149
+
}
120
150
return (
121
-
<span
122
-
dangerouslySetInnerHTML={{ __html: colorReplacedSvg }}
123
-
style={{
124
-
filter: "var(--svg-filter)",
125
-
display: "inline-block",
126
-
...rest.style,
127
-
}}
128
-
{...rest}
129
-
/>
151
+
<video src={finalSrc} poster={finalPoster} {...rest} />
130
152
);
131
-
}
132
-
133
-
let finalSrc = src;
134
-
if (src && !/^https?:\/\//.test(src)) {
135
-
// https://github.com/gaearon/overreacted.io/issues/827
136
-
finalSrc = `/${slug}/${src}`;
137
-
}
138
-
139
-
return <markdown.Img src={finalSrc} {...rest} />;
140
-
},
141
-
Video: ({ src, poster, ...rest }) => {
142
-
let finalSrc = src;
143
-
if (src && !/^https?:\/\//.test(src)) {
144
-
finalSrc = `/${slug}/${src}`;
145
-
}
146
-
let finalPoster = poster;
147
-
if (poster && !/^https?:\/\//.test(poster)) {
148
-
finalPoster = `/${slug}/${poster}`;
149
-
}
150
-
return <video src={finalSrc} poster={finalPoster} {...rest} />;
151
-
},
152
-
...postComponents,
153
-
}}
154
-
options={{
155
-
mdxOptions: {
156
-
useDynamicImport: true,
157
-
remarkPlugins: [
158
-
remarkSmartpants,
159
-
remarkGfm,
160
-
[remarkMdxEvalCodeBlock, filename],
161
-
] as any,
162
-
rehypePlugins: [
163
-
[
164
-
rehypePrettyCode,
165
-
{
166
-
theme: overnight,
167
-
defaultLang: { block: "text" },
168
-
},
169
-
],
170
-
[rehypeSlug],
171
-
] as any,
172
-
} as any,
173
-
}}
174
-
/>
153
+
},
154
+
...postComponents,
155
+
}}
156
+
options={{
157
+
mdxOptions: {
158
+
useDynamicImport: true,
159
+
remarkPlugins: [
160
+
remarkSmartpants,
161
+
remarkGfm,
162
+
[remarkMdxEvalCodeBlock, filename],
163
+
] as any,
164
+
rehypePlugins: [
165
+
[
166
+
rehypePrettyCode,
167
+
{
168
+
theme: overnight,
169
+
defaultLang: { block: "text" },
170
+
},
171
+
],
172
+
[rehypeSlug],
173
+
] as any,
174
+
} as any,
175
+
}}
176
+
/>
175
177
</div>
176
178
</Wrapper>
177
179
{!data.nocta && (
···
184
186
<span className="tip-bg" />
185
187
Pay what you like
186
188
</a>
187
-
<TextLink href="/hire-me-in-japan/">Hire me</TextLink>
188
189
</div>
189
190
)}
190
191
<hr className="opacity-60 dark:opacity-10" />