Improve the docs for how to use ampersands (styled-components#743)

* Improve the docs for how to use ampersands * small visual improvement * remove redundant dependency * minor dep updates * clean up styles * bump m2jsx to fix build issue * layout tweaks * more legible release dates * pull all releases for page
MeLlamoPablo · Nov 28, 2021 · 4ca8572 · 4ca8572
1 parent 4ba05c9
commit 4ca8572
Show file tree

Hide file tree

Showing 15 changed files with 221 additions and 306 deletions.
diff --git a/components/CodeBlock.js b/components/CodeBlock.js
@@ -1,12 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
-import rem from '../utils/rem';
-
-import '../utils/prismTemplateString';
 import { Editor } from 'react-live';
+import styled from 'styled-components';
 import { darkGrey } from '../utils/colors';
 import { monospace } from '../utils/fonts';
-
+import rem from '../utils/rem';
 import { Note } from './Note';
 
 const CodeBlock = styled((props) => {
@@ -15,16 +12,14 @@ const CodeBlock = styled((props) => {
   return <Editor {...props} disabled language={language} />;
 })`
   background: ${darkGrey};
-  font-size: 0.8rem;
-  font-family: ${monospace};
-  font-weight: 300;
-  white-space: pre-wrap;
-
   border-radius: ${rem(3)};
   box-shadow: 1px 1px 20px rgba(20, 20, 20, 0.27);
+  font-family: ${monospace};
+  font-size: 0.8rem;
+  font-weight: 300;
   margin: ${rem(35)} 0;
-
   overflow-x: hidden;
+  white-space: pre-wrap;
 
   ${Note} & {
     margin: ${rem(20)} 0;

diff --git a/components/Layout.js b/components/Layout.js
@@ -14,14 +14,17 @@ export const Container = styled.div`
 `;
 
 export const Content = styled.div`
-  width: ${rem(1024)};
-  max-width: 100%;
-  margin: 0 auto;
-  padding: ${rem(90)} ${rem(40)} 0 ${rem(40)};
+  margin: 0;
+  padding: ${rem(90)} ${rem(60)} 0 ${rem(60)};
   box-sizing: border-box;
   font-family: ${bodyFont};
   transition: transform 150ms ease-out;
 
+  p,
+  li {
+    max-width: 80ch;
+  }
+
   ${mobile(css`
     padding: ${rem(100)} ${rem(20)} ${rem(30)} ${rem(20)};
     transform: translateX(${(p) => (p.moveRight ? rem(sidebarWidth) : 0)});
@@ -36,7 +39,6 @@ export const Content = styled.div`
 `;
 
 export const Title = styled.h1`
-  display: block;
   text-align: left;
   width: 100%;
   color: ${blmMetal};
@@ -49,20 +51,18 @@ export const Header = styled.h2`
   font-size: ${rem(32)};
   font-weight: 600;
   font-family: ${headerFont};
-  margin: 2em 0 0.75em;
+  margin: 1.5em 0 0.5em;
 `;
 
 export const SubHeader = styled.h3`
-  display: block;
-  margin: 2em 0 0.75em;
+  margin: 1.5em 0 0.5em;
   font-size: ${rem(24)};
   font-weight: 600;
   font-family: ${headerFont};
 `;
 
 export const TertiaryHeader = styled.h4`
-  display: block;
-  margin: 2em 0 0.75em;
+  margin: 1.5em 0 0.5em;
   font-size: ${rem(18)};
   font-weight: 600;
   font-family: ${headerFont};

diff --git a/components/LiveEdit.js b/components/LiveEdit.js
@@ -1,21 +1,18 @@
 import React, { useEffect, useState } from 'react';
+import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live';
 import styled, {
   createGlobalStyle,
   css,
   keyframes,
-  withTheme,
   StyleSheetManager,
   ThemeProvider,
+  withTheme,
 } from 'styled-components';
 import stylisRTLPlugin from 'stylis-plugin-rtl';
-import rem from '../utils/rem';
 import { darkGrey, red } from '../utils/colors';
-import { phone } from '../utils/media';
 import { headerFont, monospace } from '../utils/fonts';
-
-import '../utils/prismTemplateString';
-
-import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import { phone } from '../utils/media';
+import rem from '../utils/rem';
 
 const StyledProvider = styled(LiveProvider)`
   box-shadow: ${rem(1)} ${rem(1)} ${rem(20)} rgba(20, 20, 20, 0.27);

diff --git a/next.config.js b/next.config.js
@@ -9,7 +9,7 @@ module.exports = withMDX({
   withSourceMaps({
     pageExtensions: ['js', 'jsx', 'md'],
     poweredByHeader: false,
-    webpack: function(config, { dev, isServer }) {
+    webpack: function (config, { dev, isServer }) {
       if (dev) {
         return config;
       }
@@ -26,16 +26,6 @@ module.exports = withMDX({
         );
       }
 
-      if (!isServer) {
-        const oldEntry = config.entry;
-
-        config.entry = () =>
-          oldEntry().then(entry => {
-            entry.commons = ['./utils/prismTemplateString.js'];
-            return entry;
-          });
-      }
-
       return config;
     },
   })

diff --git a/package.json b/package.json
@@ -3,9 +3,6 @@
   "version": "1.0.0",
   "license": "MIT",
   "private": true,
-  "sideEffects": [
-    "./utils/prismTemplateString.js"
-  ],
   "scripts": {
     "analyze": "ANALYZE=true yarn build",
     "dev": "next dev",
@@ -26,7 +23,7 @@
     "@styled-icons/boxicons-regular": "^10.38.0",
     "@styled-icons/fa-brands": "^10.38.0",
     "@styled-icons/material": "^10.34.0",
-    "@types/react": "^17.0.36",
+    "@types/react": "^17.0.37",
     "@zeit/next-mdx": "^1.2.0",
     "@zeit/next-source-maps": "^0.0.3",
     "axios": "^0.24.0",
@@ -35,10 +32,9 @@
     "docsearch.js": "2.6.3",
     "invariant": "^2.2.4",
     "isomorphic-fetch": "^3.0.0",
-    "markdown-to-jsx": "^7.1.3",
+    "markdown-to-jsx": "^7.1.5",
     "next": "^12.0.4",
     "polished": "^4.1.3",
-    "prismjs": "^1.25.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
@@ -58,7 +54,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^27.3.1",
     "babel-plugin-dynamic-import-node": "^2.1.0",
-    "babel-plugin-styled-components": "^2.0.1",
+    "babel-plugin-styled-components": "^2.0.2",
     "bundlesize": "^0.18.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
@@ -67,8 +63,8 @@
     "husky-v4": "^4.3.8",
     "jest": "^27.3.1",
     "jest-styled-components": "^7.0.8",
-    "lint-staged": "^12.1.1",
-    "prettier": "^2.4.1",
+    "lint-staged": "^12.1.2",
+    "prettier": "^2.5.0",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.0"
   },

diff --git a/pages/_document.js b/pages/_document.js
@@ -4,91 +4,7 @@ import { ServerStyleSheet } from 'styled-components';
 import { bodyFont } from '../utils/fonts';
 
 const resetStyles = `
-  *,::after,::before{background-repeat:no-repeat;box-sizing:inherit}::after,::before{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}body{margin:0}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}nav ol,nav ul{list-style:none}pre{font-family:monospace,monospace;font-size:1em}a{text-decoration:none;color:inherit;background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,optgroup,select,textarea{margin:0}button,input,select,textarea{background-color:transparent;color:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}[aria-disabled]{cursor:default}
-
-  .prism-code {
-    display: block;
-    white-space: pre;
-    background-color: #1D1F21;
-    color: #C5C8C6;
-    padding: 0.5rem;
-    margin: 0;
-    box-sizing: border-box;
-    vertical-align: baseline;
-    outline: none;
-    text-shadow: none;
-    -webkit-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-    word-wrap: normal;
-    word-break: normal;
-    text-align: left;
-    word-spacing: normal;
-    -moz-tab-size: 2;
-    -o-tab-size: 2;
-    tab-size: 2;
-  }
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: hsl(30, 20%, 50%);
-  }
-  .token.comment {
-    font-style: italic;
-  }
-  .token.punctuation {
-    opacity: .7;
-  }
-  .namespace {
-    opacity: .7;
-  }
-  .token.property,
-  .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.constant,
-  .token.symbol {
-    color: hsl(350, 40%, 70%);
-  }
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: hsl(75, 70%, 60%);
-  }
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .language-css .token.string,
-  .style .token.string,
-  .token.variable {
-    color: hsl(40, 90%, 60%);
-  }
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword {
-    color: hsl(350, 40%, 70%);
-  }
-  .token.regex,
-  .token.important {
-    color: #e90;
-  }
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-  .token.entity {
-    cursor: help;
-  }
-  .token.deleted {
-    color: red;
-  }
+  *,::after,::before{background-repeat:no-repeat;box-sizing:inherit}::after,::before{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}body{margin:0}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}nav ol,nav ul{list-style:none}pre{font-family:monospace,monospace;font-size:1em}a{text-decoration:none;color:inherit;background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,optgroup,select,textarea{margin:0}button,input,select,textarea{background-color:transparent;color:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}[aria-disabled]{cursor:default}
 
   html, body {
     font-size: 18px;
@@ -134,6 +50,10 @@ const resetStyles = `
     line-height: 1.6;
   }
 
+  ::selection {
+    background: rgba(245, 184, 61, 0.25);
+  }
+
   @media all and (max-width: 1000px) {
     html, body {
       font-size: 16px;

diff --git a/pages/releases.js b/pages/releases.js
@@ -1,18 +1,16 @@
 import Markdown from 'markdown-to-jsx';
 import React from 'react';
 import styled from 'styled-components';
-import DocsLayout from '../components/DocsLayout';
-import components from '../utils/mdx-components';
-import { getReleases } from '../utils/githubApi';
 import Anchor from '../components/Anchor';
+import DocsLayout from '../components/DocsLayout';
 import Loading from '../components/Loading';
+import { getReleases } from '../utils/githubApi';
+import components from '../utils/mdx-components';
 import rem from '../utils/rem';
-import { getFormattedDate } from '../utils/dates';
-import { blmMetal } from '../utils/colors';
 
 const ReleaseAnchor = styled(Anchor)`
   &::after {
-    color: ${blmMetal};
+    color: rosybrown;
     content: attr(data-created-at);
     display: block;
     font-size: 16px;
@@ -22,16 +20,17 @@ const ReleaseAnchor = styled(Anchor)`
 
 const Releases = ({ releases, sidebarPages }) => (
   <DocsLayout useDocsSidebarMenu={false} pages={sidebarPages} title="Releases" description="Styled Components Releases">
-    <Markdown>
+    <Markdown options={{ wrapper: 'p' }}>
       Updating styled components is usually as simple as `npm install`. Only major versions have the potential to
       introduce breaking changes (noted in the following release notes).
     </Markdown>
     {releases ? (
       releases.map((release) => (
         <section key={release.id}>
-          <ReleaseAnchor id={release.name} data-created-at={getFormattedDate(release.created_at)}>
+          <ReleaseAnchor id={release.name} data-created-at={release.created_at.replace(/T.*?$/, '')}>
             {release.name}
           </ReleaseAnchor>
+
           <Markdown overrides={components}>{release.body}</Markdown>
         </section>
       ))