Skip to content

Commit b8d45d4

Browse files
srmagurasrmagura
authored
Address website feedback (emotion-js#2825)
* Add back .nvmrc * Use GFM tables * Update remark-fix-links to handle github/emotion-js/emotion links * Tweak DocSearch custom CSS * Remove comment * Reduce code block font size
1 parent 679ca35 commit b8d45d4

File tree

13 files changed

+212
-89
lines changed

13 files changed

+212
-89
lines changed

‎.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
16

‎docs/babel.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: 'Babel Plugin'
33
---
44

5-
`@emotion/babel-plugin` is highly recommended. All of the options that can be provided to `@emotion/babel-plugin` are documented in [`@emotion/babel-plugin`'s README](/docs/@emotion/babel-plugin).
5+
`@emotion/babel-plugin` is highly recommended. All of the options that can be provided to `@emotion/babel-plugin` are documented in [`@emotion/babel-plugin`'s README](https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin).
66

77
## Install
88

‎docs/css-prop.mdx

+4-29
Original file line numberDiff line numberDiff line change
@@ -14,35 +14,10 @@ There are 2 ways to get started with the `css` prop.
1414
Both methods result in the same compiled code.
1515
After adding the preset or setting the pragma as a comment, compiled jsx code will use emotion's `jsx` function instead of `React.createElement`.
1616

17-
<table>
18-
<thead>
19-
<tr>
20-
<th></th>
21-
<th>Input</th>
22-
<th>Output</th>
23-
</tr>
24-
</thead>
25-
<tbody>
26-
<tr>
27-
<td>Before</td>
28-
<td>
29-
<code>&lt;img src="avatar.png" /&gt;</code>
30-
</td>
31-
<td>
32-
<code>React.createElement('img', &#123; src: 'avatar.png' &#125;)</code>
33-
</td>
34-
</tr>
35-
<tr>
36-
<td>After</td>
37-
<td>
38-
<code>&lt;img src="avatar.png" /&gt;</code>
39-
</td>
40-
<td>
41-
<code>jsx('img', &#123; src: 'avatar.png' &#125;)</code>
42-
</td>
43-
</tr>
44-
</tbody>
45-
</table>
17+
| | Input | Output |
18+
| ------ | -------------------------- | --------------------------------------------------- |
19+
| Before | `<img src="avatar.png" />` | `React.createElement('img', { src: 'avatar.png' })` |
20+
| After | `<img src="avatar.png" />` | `jsx('img', { src: 'avatar.png' })` |
4621

4722
#### Babel Preset
4823

‎packages/babel-preset-css-prop/README.md

+4-21
Original file line numberDiff line numberDiff line change
@@ -77,27 +77,10 @@ require('@babel/core').transform(code, {
7777

7878
This preset enables the `css` prop for an entire project via a single entry to the babel configuration. After adding the preset, compiled JSX code will use Emotion's `jsx` function instead of `React.createElement`.
7979

80-
<table>
81-
<thead>
82-
<tr>
83-
<th></th>
84-
<th>Input</th>
85-
<th>Output</th>
86-
</tr>
87-
</thead>
88-
<tbody>
89-
<tr>
90-
<td>Before</td>
91-
<td><code>&lt;img src="avatar.png" /&gt;</code></td>
92-
<td><code>React.createElement('img', &#123; src: 'avatar.png' &#125;)</code></td>
93-
</tr>
94-
<tr>
95-
<td>After</td>
96-
<td><code>&lt;img src="avatar.png" /&gt;</code></td>
97-
<td><code>jsx('img', &#123; src: 'avatar.png' &#125;)</code></td>
98-
</tr>
99-
</tbody>
100-
</table>
80+
| | Input | Output |
81+
| ------ | -------------------------- | --------------------------------------------------- |
82+
| Before | `<img src="avatar.png" />` | `React.createElement('img', { src: 'avatar.png' })` |
83+
| After | `<img src="avatar.png" />` | `jsx('img', { src: 'avatar.png' })` |
10184

10285
`import { jsx } from '@emotion/react'` is automatically added to the top of files where required.
10386

‎site/components/markdown-css.tsx

-5
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,6 @@ export const markdownCss = css({
5858
padding: '0.25rem'
5959
},
6060

61-
// This targets code blocks only
62-
'.remark-highlight pre code': {
63-
fontSize: '1rem !important'
64-
},
65-
6661
// This targets code blocks and live editors
6762
'.remark-highlight, .emotion-live-editor': {
6863
margin: '1.5rem 0'

‎site/components/search.tsx

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
import { DocSearch } from '@docsearch/react'
22
import { css, Global } from '@emotion/react'
33
import { ReactElement } from 'react'
4+
import { colors } from '../util'
45

56
const docSearchCustomizationCss = css({
7+
':root': {
8+
'--docsearch-primary-color': colors.pink,
9+
'--docsearch-searchbox-background': colors.gray100,
10+
'--docsearch-searchbox-focus-background': colors.gray100
11+
},
12+
613
'.DocSearch-Button': {
714
margin: '0 auto 2rem 0',
8-
width: '100%'
15+
width: '100%',
16+
border: `1px solid ${colors.grayBorder}`,
17+
18+
'&:hover': {
19+
borderColor: 'transparent'
20+
}
921
},
1022

1123
// Display the "Search" placeholder regardless of screen width

‎site/components/site-header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export function SiteHeader() {
9595
<UkraineBanner />
9696
<header
9797
css={{
98-
backgroundColor: '#f6f6f6',
98+
backgroundColor: colors.gray100,
9999
borderBottom: `1px solid ${colors.grayBorder}`,
100100
boxShadow: '0 .125rem .25rem rgba(0, 0, 0, .075)',
101101
paddingTop: '0.25rem',

‎site/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"react-simple-code-editor": "^0.11.2",
3434
"rehype-autolink-headings": "^6.1.1",
3535
"rehype-slug": "^5.0.1",
36+
"remark-gfm": "^3.0.1",
3637
"remark-prism": "^1.3.6",
3738
"sharp": "^0.30.7",
3839
"typescript": "^4.5.5",

‎site/pages/docs/@emotion/[packageName].tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { GetStaticPaths, GetStaticPropsContext } from 'next'
22
import { serialize } from 'next-mdx-remote/serialize'
33
import remarkPrism from 'remark-prism'
4+
import remarkGfm from 'remark-gfm'
45
import rehypeSlug from 'rehype-slug'
56
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
67
import { docQueries } from '../../../queries'
7-
import {
8-
remarkFixLinks,
9-
remarkResponsiveTables
10-
} from '../../../util/remark-plugins'
8+
import { remarkFixLinks } from '../../../util/remark-fix-links'
119
import DocsPage from '../[slug]'
1210

1311
export const getStaticPaths: GetStaticPaths = async () => {
@@ -32,7 +30,7 @@ export async function getStaticProps({ params }: GetStaticPropsContext) {
3230
// READMEs should not contain live code blocks
3331
const mdx = await serialize(content, {
3432
mdxOptions: {
35-
remarkPlugins: [remarkPrism, remarkFixLinks, remarkResponsiveTables],
33+
remarkPlugins: [remarkPrism, remarkFixLinks, remarkGfm],
3634

3735
// rehypeSlug must come first
3836
rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings]

‎site/pages/docs/[slug].tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,12 @@ import { ReactElement } from 'react'
88
import { serialize } from 'next-mdx-remote/serialize'
99
import { MDXRemote } from 'next-mdx-remote'
1010
import remarkPrism from 'remark-prism'
11+
import remarkGfm from 'remark-gfm'
1112
import rehypeSlug from 'rehype-slug'
1213
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
1314
import { DocWrapper, ResponsiveTable, Title } from '../../components'
1415
import { docQueries } from '../../queries'
15-
import {
16-
remarkFixLinks,
17-
remarkResponsiveTables
18-
} from '../../util/remark-plugins'
16+
import { remarkFixLinks } from '../../util/remark-fix-links'
1917
import { mediaQueries, styleConstants } from '../../util'
2018
import {
2119
remarkLiveEditor,
@@ -43,12 +41,11 @@ export async function getStaticProps({ params }: GetStaticPropsContext) {
4341
// next-mdx-remote README.
4442
const mdx = await serialize(content, {
4543
mdxOptions: {
46-
// remarkLiveEditor must come before remarkPrism
4744
remarkPlugins: [
48-
remarkLiveEditor,
45+
remarkLiveEditor, // Must come before remarkPrism
4946
remarkPrism,
5047
remarkFixLinks,
51-
remarkResponsiveTables
48+
remarkGfm
5249
],
5350

5451
// rehypeSlug must come first
@@ -131,7 +128,7 @@ export default function DocsPage({
131128
<MDXRemote
132129
{...mdx}
133130
components={{
134-
ResponsiveTable,
131+
table: ResponsiveTable,
135132
EmotionLiveEditor
136133
}}
137134
/>

‎site/util/remark-plugins.ts ‎site/util/remark-fix-links.ts

+6-12
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@ import { visit } from 'unist-util-visit'
33
export function remarkFixLinks() {
44
return (markdownAST: any) => {
55
visit(markdownAST, 'link', (node: { url: string }) => {
6-
node.url = node.url.replace(/^https?:\/\/emotion.sh/, '')
6+
node.url = node.url.replace(/^https?:\/\/emotion.sh/i, '')
7+
node.url = node.url.replace(
8+
/^https?:\/\/github.com\/emotion-js\/emotion\/tree\/main/i,
9+
''
10+
)
711

8-
if (!node.url.startsWith('//') && !node.url.startsWith('http')) {
12+
if (!node.url.startsWith('http')) {
913
node.url = node.url
1014
.replace(/\.mdx?(#.*)?$/, (_, hash) => {
1115
return hash || ''
@@ -15,13 +19,3 @@ export function remarkFixLinks() {
1519
})
1620
}
1721
}
18-
19-
export function remarkResponsiveTables() {
20-
return (markdownAST: any) => {
21-
visit(markdownAST, 'mdxJsxFlowElement', (node: any) => {
22-
if (node.name === 'table') {
23-
node.name = 'ResponsiveTable'
24-
}
25-
})
26-
}
27-
}

‎site/util/style-constants.ts

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const colors = {
1111

1212
// See https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss if
1313
// other grays are needed
14+
gray100: '#f8f9fa',
1415
gray500: '#adb5bd'
1516
}
1617

0 commit comments

Comments
 (0)