From da86c2a17c607e600479378099da3d66fce5b84c Mon Sep 17 00:00:00 2001 From: Andre Wiggins <459878+andrewiggins@users.noreply.github.com> Date: Thu, 3 Dec 2020 06:49:50 -0800 Subject: [PATCH] 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 (https://github.com/PrismJS/prism/pull/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 --- research/package.json | 6 ++++-- research/src/components/layout.js | 25 ++++++++++++++++++++++--- research/src/pages/contribute.mdx | 8 ++++---- research/yarn.lock | 16 ++++++++-------- 4 files changed, 38 insertions(+), 17 deletions(-) diff --git a/research/package.json b/research/package.json index 4a12e5007..55a85559c 100644 --- a/research/package.json +++ b/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", diff --git a/research/src/components/layout.js b/research/src/components/layout.js index 815eb975a..201974f7a 100644 --- a/research/src/components/layout.js +++ b/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 ( {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
+          
             {tokens.map((line, i) => (
               

                 {line.map((token, key) => (
@@ -74,7 +93,7 @@ const Layout = ({ children, pageContext }) => {
             >
               
 
-              

+              

                 {children}
               

             

diff --git a/research/src/pages/contribute.mdx b/research/src/pages/contribute.mdx
index f0fab175c..91c99d680 100644
--- a/research/src/pages/contribute.mdx
+++ b/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
diff --git a/research/yarn.lock b/research/yarn.lock
index 5bc5b9cf8..127186aeb 100644
--- a/research/yarn.lock
+++ b/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"