Skip to content

Commit 1234b4f

Browse files
bradlcbradlc
committed
fix prose component rendering
1 parent 4b719a5 commit 1234b4f

File tree

7 files changed

+108
-90
lines changed

7 files changed

+108
-90
lines changed

‎remark/withProse.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const proseComponents = ['Heading', 'Variants', 'Disabling', 'DefaultVariantsConfig']
1+
const proseComponents = ['Heading']
22

33
const isJsNode = (node) => {
44
return (

‎src/components/CorePluginReference.js

+36-29
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,42 @@ const descriptions = {
1616

1717
export function CorePluginReference() {
1818
return (
19-
<table>
20-
<thead>
21-
<tr>
22-
<th>Core Plugin</th>
23-
<th>Description</th>
24-
</tr>
25-
</thead>
26-
<tbody>
27-
{corePluginsWithExamples.map(({ plugin, example }) => (
28-
<tr key={plugin}>
29-
<td>
30-
<code>{plugin}</code>
31-
</td>
32-
<td>
33-
{descriptions[plugin]
34-
?.split(/`([^`]+)`/)
35-
.map((segment, i) => (i % 2 === 0 ? segment : <code key={i}>{segment}</code>)) || (
36-
<>
37-
The{' '}
38-
<code>
39-
{plugin.replace(/([a-z])([A-Z])/g, (_m, p1, p2) => `${p1}-${p2.toLowerCase()}`)}
40-
</code>{' '}
41-
utilities like <code>{example}</code>
42-
</>
43-
)}
44-
</td>
19+
<div className="prose">
20+
<table>
21+
<thead>
22+
<tr>
23+
<th>Core Plugin</th>
24+
<th>Description</th>
4525
</tr>
46-
))}
47-
</tbody>
48-
</table>
26+
</thead>
27+
<tbody>
28+
{corePluginsWithExamples.map(({ plugin, example }) => (
29+
<tr key={plugin}>
30+
<td>
31+
<code>{plugin}</code>
32+
</td>
33+
<td>
34+
{descriptions[plugin]
35+
?.split(/`([^`]+)`/)
36+
.map((segment, i) =>
37+
i % 2 === 0 ? segment : <code key={i}>{segment}</code>
38+
) || (
39+
<>
40+
The{' '}
41+
<code>
42+
{plugin.replace(
43+
/([a-z])([A-Z])/g,
44+
(_m, p1, p2) => `${p1}-${p2.toLowerCase()}`
45+
)}
46+
</code>{' '}
47+
utilities like <code>{example}</code>
48+
</>
49+
)}
50+
</td>
51+
</tr>
52+
))}
53+
</tbody>
54+
</table>
55+
</div>
4956
)
5057
}

‎src/components/DefaultVariantsConfig.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,15 @@ import { defaultVariantsConfig } from '@/utils/defaultVariantsConfig'
22

33
export function DefaultVariantsConfig() {
44
return (
5-
<div className="bg-gray-800 my-6 overflow-hidden rounded-xl">
6-
<pre className="language-js">
7-
<code className="language-js" dangerouslySetInnerHTML={{ __html: defaultVariantsConfig }} />
8-
</pre>
5+
<div className="prose">
6+
<div className="bg-gray-800 my-6 overflow-hidden rounded-xl">
7+
<pre className="language-js">
8+
<code
9+
className="language-js"
10+
dangerouslySetInnerHTML={{ __html: defaultVariantsConfig }}
11+
/>
12+
</pre>
13+
</div>
914
</div>
1015
)
1116
}

‎src/components/Disabling.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export function Disabling({ plugin, name }) {
77
name = name || plugin.replace(/([a-z])([A-Z])/g, (m, p1, p2) => `${p1} ${p2.toLowerCase()}`)
88

99
return (
10-
<>
10+
<div className="prose">
1111
<p>
1212
If you don't plan to use the {name} utilities in your project, you can disable them entirely
1313
by setting the{' '}
@@ -25,6 +25,6 @@ export function Disabling({ plugin, name }) {
2525
before="// ..."
2626
add={plugins.reduce((acc, cur) => ({ ...acc, [cur]: false }), {})}
2727
/>
28-
</>
28+
</div>
2929
)
3030
}

‎src/components/SpacingScale.js

+25-23
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,31 @@ const scale = Object.keys(defaultConfig.theme.spacing)
1212

1313
export function SpacingScale() {
1414
return (
15-
<table>
16-
<thead>
17-
<tr>
18-
<th>Name</th>
19-
<th>Size</th>
20-
<th>Pixels</th>
21-
<th className="hidden sm:table-cell">
22-
<span className="sr-only">Preview</span>
23-
</th>
24-
</tr>
25-
</thead>
26-
<tbody>
27-
{scale.map(({ name, size, pixels }) => (
28-
<tr key={name}>
29-
<td>{name}</td>
30-
<td>{size}</td>
31-
<td>{pixels}px</td>
32-
<td className="hidden sm:table-cell">
33-
<div className="h-4 bg-gray-400" style={{ width: size }} />
34-
</td>
15+
<div className="prose">
16+
<table>
17+
<thead>
18+
<tr>
19+
<th>Name</th>
20+
<th>Size</th>
21+
<th>Pixels</th>
22+
<th className="hidden sm:table-cell">
23+
<span className="sr-only">Preview</span>
24+
</th>
3525
</tr>
36-
))}
37-
</tbody>
38-
</table>
26+
</thead>
27+
<tbody>
28+
{scale.map(({ name, size, pixels }) => (
29+
<tr key={name}>
30+
<td>{name}</td>
31+
<td>{size}</td>
32+
<td>{pixels}px</td>
33+
<td className="hidden sm:table-cell">
34+
<div className="h-4 bg-gray-400" style={{ width: size }} />
35+
</td>
36+
</tr>
37+
))}
38+
</tbody>
39+
</table>
40+
</div>
3941
)
4042
}

‎src/components/ThemeReference.js

+33-29
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,39 @@ const descriptions = {
1818

1919
export function ThemeReference() {
2020
return (
21-
<table>
22-
<thead>
23-
<tr>
24-
<th>Key</th>
25-
<th>Description</th>
26-
</tr>
27-
</thead>
28-
<tbody>
29-
{Object.keys(defaultConfig.theme).map((key) => (
30-
<tr key={key}>
31-
<td>
32-
<code>{key}</code>
33-
</td>
34-
<td>
35-
{descriptions[key]
36-
?.split(/`([^`]+)`/)
37-
.map((segment, i) => (i % 2 === 0 ? segment : <code key={i}>{segment}</code>)) || (
38-
<>
39-
Values for the{' '}
40-
<code>
41-
{key.replace(/([a-z])([A-Z])/g, (_m, p1, p2) => `${p1}-${p2.toLowerCase()}`)}
42-
</code>{' '}
43-
property
44-
</>
45-
)}
46-
</td>
21+
<div className="prose">
22+
<table>
23+
<thead>
24+
<tr>
25+
<th>Key</th>
26+
<th>Description</th>
4727
</tr>
48-
))}
49-
</tbody>
50-
</table>
28+
</thead>
29+
<tbody>
30+
{Object.keys(defaultConfig.theme).map((key) => (
31+
<tr key={key}>
32+
<td>
33+
<code>{key}</code>
34+
</td>
35+
<td>
36+
{descriptions[key]
37+
?.split(/`([^`]+)`/)
38+
.map((segment, i) =>
39+
i % 2 === 0 ? segment : <code key={i}>{segment}</code>
40+
) || (
41+
<>
42+
Values for the{' '}
43+
<code>
44+
{key.replace(/([a-z])([A-Z])/g, (_m, p1, p2) => `${p1}-${p2.toLowerCase()}`)}
45+
</code>{' '}
46+
property
47+
</>
48+
)}
49+
</td>
50+
</tr>
51+
))}
52+
</tbody>
53+
</table>
54+
</div>
5155
)
5256
}

‎src/components/Variants.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function Variants({ plugin, name }) {
1010
.slice(0, 2)
1111

1212
return (
13-
<>
13+
<div className="prose">
1414
<p>
1515
By default, {variants.length ? `only ${joinWithAnd(variants)}` : 'no'} variants are
1616
generated for {name} utilities.
@@ -30,6 +30,6 @@ export function Variants({ plugin, name }) {
3030
remove={{ [plugin]: variants }}
3131
add={{ [plugin]: [...variants, ...extraVariants] }}
3232
/>
33-
</>
33+
</div>
3434
)
3535
}

0 commit comments

Comments
 (0)