Enable Contribute page to respond to screen size changes (#232)

* Add clean and serve scripts

* Improve code highlighting on contribute

* Ensure we have the latest prismjs and prism-react-renderer
* Shorten example description to make it easier to read and reduce screen sizes where overflow is required
* Fix JSON5 syntax highlighting
* Specify markdown sytnax highlighting for front matter samples. Markdown front matter highlighting will come to PrismJS in the next version (PrismJS/prism#2634)
* Trim whitespace and newlines from the end of code samples

* Add scrollbars to code examples

Enables the Contribute page to shrink according to screen size

* Allow code examples to be scrollable by keyboard users

* Disable eslint warning for tabIndex on pre element

Author: andrewiggins

research/package.json

@@ -13,6 +13,8 @@
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",
+    "clean": "gatsby clean",
+    "serve": "gatsby serve",
     "start": "gatsby develop"
   },
   "husky": {
@@ -62,8 +64,8 @@
     "lint-staged": "^10.1.2",
     "lodash": "^4.17.15",
     "prettier": "^2.0.4",
-    "prism-react-renderer": "^1.0.2",
-    "prismjs": "^1.20.0",
+    "prism-react-renderer": "^1.1.1",
+    "prismjs": "^1.22.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

research/src/components/layout.js

@@ -11,17 +11,36 @@ import Header from './header'
 import Navigation from './navigation'
 import ComponentLayout from './component-layout'
 
+// Add JSON5 language support to Prism
+import Prism from 'prism-react-renderer/prism'
+
+// Need to create the Prism global before importing new languages
+;(typeof global !== 'undefined' ? global : window).Prism = Prism
+require('prismjs/components/prism-json5')
+
 const components = {
   pre: (props) => {
     // get the code content from the compiled `pre > code`
     const code = props.children
-    const exampleCode = code.props.children
+    const exampleCode = code.props.children.trimEnd()
     const language = (code.props.className || '').replace('language-', '')
 
     return (
       <Highlight {...defaultProps} theme={vsDark} code={exampleCode} language={language}>
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <pre className={className} style={{ ...style, padding: '0.25rem 0.5rem' }}>
+          <pre
+            className={className}
+            style={{
+              ...style,
+              padding: '0.25rem 0.5rem',
+              overflow: 'auto',
+            }}
+            // Adding tabIndex to this non-interactive pre element to allow
+            // keyboard users to scroll this pre element using only the keyboard
+            tabIndex={0} // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+            role="region"
+            aria-label="Code example"
+          >
             {tokens.map((line, i) => (
               <div {...getLineProps({ line, key: i })}>
                 {line.map((token, key) => (
@@ -74,7 +93,7 @@ const Layout = ({ children, pageContext }) => {
             >
               <Navigation style={{ marginRight: '2em' }} />
 
-              <div style={{ flex: '1' }}>
+              <div style={{ flex: '1 1 auto', minWidth: 0 }}>
                 <ContentWrapper frontmatter={frontmatter}>{children}</ContentWrapper>
               </div>
             </div>

research/src/pages/contribute.mdx

@@ -81,7 +81,7 @@ Add the `$schema` key pointing to our `design-system.schema.json5` schema and co
 {
   $schema: '../schemas/design-system.schema.json5',
   name: 'Ant Design',
-  description: 'A design system with values of Nature and Determinacy for better user experience of enterprise applications.',
+  description: 'An enterprise-class UI design language and React UI library.',
   url: 'http://ant.design',
   by: 'AFX',
 }
@@ -99,7 +99,7 @@ experienced either visually, by keyboard, or narration.
 {
   $schema: '../schemas/design-system.schema.json5',
   name: 'Ant Design',
-  description: 'A design system with values of Nature and Determinacy for better user experience of enterprise applications.',
+  description: 'An enterprise-class UI design language and React UI library.',
   url: 'http://ant.design',
   by: 'AFX',
   components: [{ name: 'Button' }],
@@ -198,7 +198,7 @@ The `pathToProposal` key tells your research page where its proposal page is hos
 
 Example:
 
-```
+```markdown
 ---
 name: Test
 path: /components/test.research
@@ -241,7 +241,7 @@ The proposal page will summarize your findings, conclusions, and unresolved poin
 Define your proposal page front matter.
 The `pathToResearch` key tells your proposal page where its research page is hosted.
 
-```
+```markdown
 ---
 menu: Proposals
 name: Your Component

research/yarn.lock

@@ -11943,15 +11943,15 @@ pretty-format@^25.5.0:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
-prism-react-renderer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.0.2.tgz#3bb9a6a42f76fc049b03266298c7068fdd4b7ea9"
-  integrity sha512-0++pJyRfu4v2OxI/Us/5RLui9ESDkTiLkVCtKuPZYdpB8UQWJpnJQhPrWab053XtsKW3oM0sD69uJ6N9exm1Ag==
+prism-react-renderer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44"
+  integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug==
 
-prismjs@^1.20.0:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03"
-  integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==
+prismjs@^1.22.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.22.0.tgz#73c3400afc58a823dd7eed023f8e1ce9fd8977fa"
+  integrity sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w==
   optionalDependencies:
     clipboard "^2.0.0"