Skip to content

Commit

Permalink
Address website feedback (#2825)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
srmagura authored Jul 19, 2022
1 parent 679ca35 commit b8d45d4
Show file tree
Hide file tree
Showing 13 changed files with 212 additions and 89 deletions.
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
16
2 changes: 1 addition & 1 deletion docs/babel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: 'Babel Plugin'
---

`@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).
`@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).

## Install

Expand Down
33 changes: 4 additions & 29 deletions docs/css-prop.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,10 @@ There are 2 ways to get started with the `css` prop.
Both methods result in the same compiled code.
After adding the preset or setting the pragma as a comment, compiled jsx code will use emotion's `jsx` function instead of `React.createElement`.

<table>
<thead>
<tr>
<th></th>
<th>Input</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>Before</td>
<td>
<code>&lt;img src="avatar.png" /&gt;</code>
</td>
<td>
<code>React.createElement('img', &#123; src: 'avatar.png' &#125;)</code>
</td>
</tr>
<tr>
<td>After</td>
<td>
<code>&lt;img src="avatar.png" /&gt;</code>
</td>
<td>
<code>jsx('img', &#123; src: 'avatar.png' &#125;)</code>
</td>
</tr>
</tbody>
</table>
| | Input | Output |
| ------ | -------------------------- | --------------------------------------------------- |
| Before | `<img src="avatar.png" />` | `React.createElement('img', { src: 'avatar.png' })` |
| After | `<img src="avatar.png" />` | `jsx('img', { src: 'avatar.png' })` |

#### Babel Preset

Expand Down
25 changes: 4 additions & 21 deletions packages/babel-preset-css-prop/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,27 +77,10 @@ require('@babel/core').transform(code, {

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`.

<table>
<thead>
<tr>
<th></th>
<th>Input</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>Before</td>
<td><code>&lt;img src="avatar.png" /&gt;</code></td>
<td><code>React.createElement('img', &#123; src: 'avatar.png' &#125;)</code></td>
</tr>
<tr>
<td>After</td>
<td><code>&lt;img src="avatar.png" /&gt;</code></td>
<td><code>jsx('img', &#123; src: 'avatar.png' &#125;)</code></td>
</tr>
</tbody>
</table>
| | Input | Output |
| ------ | -------------------------- | --------------------------------------------------- |
| Before | `<img src="avatar.png" />` | `React.createElement('img', { src: 'avatar.png' })` |
| After | `<img src="avatar.png" />` | `jsx('img', { src: 'avatar.png' })` |

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

Expand Down
5 changes: 0 additions & 5 deletions site/components/markdown-css.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,6 @@ export const markdownCss = css({
padding: '0.25rem'
},

// This targets code blocks only
'.remark-highlight pre code': {
fontSize: '1rem !important'
},

// This targets code blocks and live editors
'.remark-highlight, .emotion-live-editor': {
margin: '1.5rem 0'
Expand Down
14 changes: 13 additions & 1 deletion site/components/search.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
import { DocSearch } from '@docsearch/react'
import { css, Global } from '@emotion/react'
import { ReactElement } from 'react'
import { colors } from '../util'

const docSearchCustomizationCss = css({
':root': {
'--docsearch-primary-color': colors.pink,
'--docsearch-searchbox-background': colors.gray100,
'--docsearch-searchbox-focus-background': colors.gray100
},

'.DocSearch-Button': {
margin: '0 auto 2rem 0',
width: '100%'
width: '100%',
border: `1px solid ${colors.grayBorder}`,

'&:hover': {
borderColor: 'transparent'
}
},

// Display the "Search" placeholder regardless of screen width
Expand Down
2 changes: 1 addition & 1 deletion site/components/site-header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export function SiteHeader() {
<UkraineBanner />
<header
css={{
backgroundColor: '#f6f6f6',
backgroundColor: colors.gray100,
borderBottom: `1px solid ${colors.grayBorder}`,
boxShadow: '0 .125rem .25rem rgba(0, 0, 0, .075)',
paddingTop: '0.25rem',
Expand Down
1 change: 1 addition & 0 deletions site/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"react-simple-code-editor": "^0.11.2",
"rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.0.1",
"remark-gfm": "^3.0.1",
"remark-prism": "^1.3.6",
"sharp": "^0.30.7",
"typescript": "^4.5.5",
Expand Down
8 changes: 3 additions & 5 deletions site/pages/docs/@emotion/[packageName].tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import { GetStaticPaths, GetStaticPropsContext } from 'next'
import { serialize } from 'next-mdx-remote/serialize'
import remarkPrism from 'remark-prism'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import { docQueries } from '../../../queries'
import {
remarkFixLinks,
remarkResponsiveTables
} from '../../../util/remark-plugins'
import { remarkFixLinks } from '../../../util/remark-fix-links'
import DocsPage from '../[slug]'

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

// rehypeSlug must come first
rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings]
Expand Down
13 changes: 5 additions & 8 deletions site/pages/docs/[slug].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@ import { ReactElement } from 'react'
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'
import remarkPrism from 'remark-prism'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import { DocWrapper, ResponsiveTable, Title } from '../../components'
import { docQueries } from '../../queries'
import {
remarkFixLinks,
remarkResponsiveTables
} from '../../util/remark-plugins'
import { remarkFixLinks } from '../../util/remark-fix-links'
import { mediaQueries, styleConstants } from '../../util'
import {
remarkLiveEditor,
Expand Down Expand Up @@ -43,12 +41,11 @@ export async function getStaticProps({ params }: GetStaticPropsContext) {
// next-mdx-remote README.
const mdx = await serialize(content, {
mdxOptions: {
// remarkLiveEditor must come before remarkPrism
remarkPlugins: [
remarkLiveEditor,
remarkLiveEditor, // Must come before remarkPrism
remarkPrism,
remarkFixLinks,
remarkResponsiveTables
remarkGfm
],

// rehypeSlug must come first
Expand Down Expand Up @@ -131,7 +128,7 @@ export default function DocsPage({
<MDXRemote
{...mdx}
components={{
ResponsiveTable,
table: ResponsiveTable,
EmotionLiveEditor
}}
/>
Expand Down
18 changes: 6 additions & 12 deletions site/util/remark-plugins.ts → site/util/remark-fix-links.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@ import { visit } from 'unist-util-visit'
export function remarkFixLinks() {
return (markdownAST: any) => {
visit(markdownAST, 'link', (node: { url: string }) => {
node.url = node.url.replace(/^https?:\/\/emotion.sh/, '')
node.url = node.url.replace(/^https?:\/\/emotion.sh/i, '')
node.url = node.url.replace(
/^https?:\/\/github.com\/emotion-js\/emotion\/tree\/main/i,
''
)

if (!node.url.startsWith('//') && !node.url.startsWith('http')) {
if (!node.url.startsWith('http')) {
node.url = node.url
.replace(/\.mdx?(#.*)?$/, (_, hash) => {
return hash || ''
Expand All @@ -15,13 +19,3 @@ export function remarkFixLinks() {
})
}
}

export function remarkResponsiveTables() {
return (markdownAST: any) => {
visit(markdownAST, 'mdxJsxFlowElement', (node: any) => {
if (node.name === 'table') {
node.name = 'ResponsiveTable'
}
})
}
}
1 change: 1 addition & 0 deletions site/util/style-constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const colors = {

// See https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss if
// other grays are needed
gray100: '#f8f9fa',
gray500: '#adb5bd'
}

Expand Down
Loading

0 comments on commit b8d45d4

Please sign in to comment.