Address website feedback (#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
emotion-js · Jul 19, 2022 · b8d45d4 · b8d45d4
1 parent 679ca35
commit b8d45d4
Show file tree

Hide file tree

Showing 13 changed files with 212 additions and 89 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+16
diff --git a/docs/babel.mdx b/docs/babel.mdx
@@ -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
 

diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx
@@ -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
 

diff --git a/packages/babel-preset-css-prop/README.md b/packages/babel-preset-css-prop/README.md
@@ -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.
 

diff --git a/site/components/markdown-css.tsx b/site/components/markdown-css.tsx
@@ -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'

diff --git a/site/components/search.tsx b/site/components/search.tsx
@@ -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

diff --git a/site/components/site-header.tsx b/site/components/site-header.tsx
@@ -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',

diff --git a/site/package.json b/site/package.json
@@ -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",

diff --git a/site/pages/docs/@emotion/[packageName].tsx b/site/pages/docs/@emotion/[packageName].tsx
@@ -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 () => {
@@ -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]

diff --git a/site/pages/docs/[slug].tsx b/site/pages/docs/[slug].tsx
@@ -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,
@@ -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
@@ -131,7 +128,7 @@ export default function DocsPage({
         <MDXRemote
           {...mdx}
           components={{
-            ResponsiveTable,
+            table: ResponsiveTable,
             EmotionLiveEditor
           }}
         />

diff --git a/site/util/remark-plugins.ts → site/util/remark-fix-links.ts b/site/util/remark-plugins.ts → site/util/remark-fix-links.ts
@@ -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 || ''
@@ -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'
-      }
-    })
-  }
-}
diff --git a/site/util/style-constants.ts b/site/util/style-constants.ts
@@ -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'
 }