Anonymous functions (#1111)

* Theme.js file anonymous functoins warning disabled.

* Settings.js file anonymous functoins warning disabled.

* About.js file anonymous functoins warning disabled.

* Snippets.js file anonymous functoins warning disabled.

* Logo.js file anonymous functoins warning disabled.

* Reset.js file anonymous functoins warning disabled.

* Language.js file anonymous functoins warning disabled.

* Typography.js file anonymous functoins warning disabled.

* Font.js file anonymous functoins warning disabled.

* Billing.js file anonymous functoins warning disabled.

* all anonymous functoins warning disabled with the prefered style.

* Update components/Billing.js

Co-authored-by: Michael Fix <mrfix84@gmail.com>

Co-authored-by: Michael Fix <mrfix84@gmail.com>

components/Billing.js

@@ -144,125 +144,127 @@ function Billing(props) {
           </form>
         </div>
       )}
-      <style jsx>{`
-        .checkout {
-          position: relative;
-
-          font-size: 16px;
-          font-weight: 500;
-          border-radius: 4px;
-          padding: 1rem 1.5rem;
-
-          color: white;
-          background-color: black;
-        }
-
-        a {
-          text-decoration: underline;
-        }
-
-        p {
-          margin: 0 0 8px;
-          font-size: 12px;
-          font-weight: normal;
-        }
-
-        small {
-          font-size: 10px;
-        }
-
-        h4 {
-          font-size: 32px;
-          margin: 0 0 2rem;
-        }
-
-        .tag {
-          display: block;
-          font-weight: lighter;
-          color: rgba(255, 255, 255, 0.8);
-          font-size: 16px;
-          margin-top: 0.25rem;
-        }
-
-        hr {
-          border: 0;
-          height: 1px;
-          margin: 0.5rem 0 1rem;
-          background: ${COLORS.SECONDARY};
-        }
-
-        fieldset {
-          width: 100%;
-          margin: 0 0 2.5rem;
-          padding: 0.5rem 0.5rem 0.75rem;
-          border: 1px solid ${COLORS.SECONDARY};
-          border-radius: 4px;
-        }
-
-        fieldset :global(input) {
-          text-align: left;
-          font-size: 16px;
-          color: ${COLORS.BLUE};
-        }
-
-        fieldset :global(input::placeholder) {
-          opacity: 1;
-          color: rgba(255, 255, 255, 0.7);
-        }
-
-        fieldset :global(.StripeElement) {
-          width: 100%;
-          padding: 12px 16px 12px 0;
-        }
-
-        form:valid :global(button) {
-          color: ${COLORS.BLUE};
-          box-shadow: inset 0px 0px 0px 1px ${COLORS.BLUE};
-        }
-
-        .error {
-          display: inline-flex;
-          justify-content: flex-start;
-          align-items: center;
-          position: relative;
-          top: +3px;
-          opacity: 0;
-          margin-left: 1rem;
-          font-size: 12px;
-          transform: translateY(20px);
-          transition-property: opacity, transform;
-          transition-duration: 0.35s;
-          transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-        }
-
-        .error.visible {
-          opacity: 1;
-          transform: none;
-        }
-
-        .error svg {
-          margin-top: -1px;
-        }
-
-        .error .message {
-          margin-left: 8px;
-          font-size: inherit;
-          color: ${COLORS.RED};
-        }
-
-        .success {
-          font-size: 16px;
-          line-height: 1.5;
-          margin: 0 0 2rem;
-        }
-      `}</style>
+      <style jsx>
+        {`
+          .checkout {
+            position: relative;
+
+            font-size: 16px;
+            font-weight: 500;
+            border-radius: 4px;
+            padding: 1rem 1.5rem;
+
+            color: white;
+            background-color: black;
+          }
+
+          a {
+            text-decoration: underline;
+          }
+
+          p {
+            margin: 0 0 8px;
+            font-size: 12px;
+            font-weight: normal;
+          }
+
+          small {
+            font-size: 10px;
+          }
+
+          h4 {
+            font-size: 32px;
+            margin: 0 0 2rem;
+          }
+
+          .tag {
+            display: block;
+            font-weight: lighter;
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 16px;
+            margin-top: 0.25rem;
+          }
+
+          hr {
+            border: 0;
+            height: 1px;
+            margin: 0.5rem 0 1rem;
+            background: ${COLORS.SECONDARY};
+          }
+
+          fieldset {
+            width: 100%;
+            margin: 0 0 2.5rem;
+            padding: 0.5rem 0.5rem 0.75rem;
+            border: 1px solid ${COLORS.SECONDARY};
+            border-radius: 4px;
+          }
+
+          fieldset :global(input) {
+            text-align: left;
+            font-size: 16px;
+            color: ${COLORS.BLUE};
+          }
+
+          fieldset :global(input::placeholder) {
+            opacity: 1;
+            color: rgba(255, 255, 255, 0.7);
+          }
+
+          fieldset :global(.StripeElement) {
+            width: 100%;
+            padding: 12px 16px 12px 0;
+          }
+
+          form:valid :global(button) {
+            color: ${COLORS.BLUE};
+            box-shadow: inset 0px 0px 0px 1px ${COLORS.BLUE};
+          }
+
+          .error {
+            display: inline-flex;
+            justify-content: flex-start;
+            align-items: center;
+            position: relative;
+            top: +3px;
+            opacity: 0;
+            margin-left: 1rem;
+            font-size: 12px;
+            transform: translateY(20px);
+            transition-property: opacity, transform;
+            transition-duration: 0.35s;
+            transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+          }
+
+          .error.visible {
+            opacity: 1;
+            transform: none;
+          }
+
+          .error svg {
+            margin-top: -1px;
+          }
+
+          .error .message {
+            margin-left: 8px;
+            font-size: inherit;
+            color: ${COLORS.RED};
+          }
+
+          .success {
+            font-size: 16px;
+            line-height: 1.5;
+            margin: 0 0 2rem;
+          }
+        `}
+      </style>
     </div>
   )
 }
 
 const BillingWithStripe = injectStripe(Billing)
 
-export default () => {
+export default function BillingPage() {
   const [stripe, setStripe] = React.useState(null)
   React.useEffect(() => {
     setStripe(window.Stripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY))

components/style/Font.js

@@ -5,124 +5,126 @@
  */
 import React from 'react'
 
-export default () => (
-  <style jsx global>
-    {`
-      @font-face {
-        font-family: 'Iosevka';
-        font-display: swap;
-        src: url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.woff')
-          format('woff');
-      }
-
-      @font-face {
-        font-family: 'Monoid';
-        font-display: swap;
-        src: url('//cdn.jsdelivr.net/npm/@typopro/web-monoid@3.7.5/TypoPRO-Monoid-Regular.woff')
-            format('woff2'),
-          url('//cdn.jsdelivr.net/npm/@typopro/web-monoid@3.7.5/TypoPRO-Monoid-Regular.woff')
+export default function Font() {
+  return (
+    <style jsx global>
+      {`
+        @font-face {
+          font-family: 'Iosevka';
+          font-display: swap;
+          src: url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.woff')
             format('woff');
-      }
+        }
 
-      @font-face {
-        font-family: 'Fantasque Sans Mono';
-        font-display: swap;
-        src: url('//cdn.jsdelivr.net/npm/@typopro/web-fantasque-sans-mono@3.7.5/TypoPRO-FantasqueSansMono-Regular.woff')
-            format('woff2'),
-          url('//cdn.jsdelivr.net/npm/@typopro/web-fantasque-sans-mono@3.7.5/TypoPRO-FantasqueSansMono-Regular.woff')
-            format('woff');
-      }
+        @font-face {
+          font-family: 'Monoid';
+          font-display: swap;
+          src: url('//cdn.jsdelivr.net/npm/@typopro/web-monoid@3.7.5/TypoPRO-Monoid-Regular.woff')
+              format('woff2'),
+            url('//cdn.jsdelivr.net/npm/@typopro/web-monoid@3.7.5/TypoPRO-Monoid-Regular.woff')
+              format('woff');
+        }
 
-      @font-face {
-        font-family: 'Hack';
-        font-display: swap;
-        src: url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff2/hack-regular-webfont.woff2?v=2.020')
-            format('woff2'),
-          url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff/hack-regular-webfont.woff?v=2.020')
-            format('woff');
-      }
+        @font-face {
+          font-family: 'Fantasque Sans Mono';
+          font-display: swap;
+          src: url('//cdn.jsdelivr.net/npm/@typopro/web-fantasque-sans-mono@3.7.5/TypoPRO-FantasqueSansMono-Regular.woff')
+              format('woff2'),
+            url('//cdn.jsdelivr.net/npm/@typopro/web-fantasque-sans-mono@3.7.5/TypoPRO-FantasqueSansMono-Regular.woff')
+              format('woff');
+        }
 
-      @font-face {
-        font-family: 'Fira Code';
-        font-display: swap;
-        src: url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff2/FiraCode-Regular.woff2')
-            format('woff2'),
-          url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff/FiraCode-Regular.woff')
-            format('woff');
-      }
+        @font-face {
+          font-family: 'Hack';
+          font-display: swap;
+          src: url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff2/hack-regular-webfont.woff2?v=2.020')
+              format('woff2'),
+            url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff/hack-regular-webfont.woff?v=2.020')
+              format('woff');
+        }
+
+        @font-face {
+          font-family: 'Fira Code';
+          font-display: swap;
+          src: url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff2/FiraCode-Regular.woff2')
+              format('woff2'),
+            url('//cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff/FiraCode-Regular.woff')
+              format('woff');
+        }
 
-      @font-face {
-        font-family: 'JetBrains Mono';
-        font-display: swap;
-        src: url('//cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2')
-            format('woff2'),
-          url('//cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff')
-            format('woff2');
-      }
+        @font-face {
+          font-family: 'JetBrains Mono';
+          font-display: swap;
+          src: url('//cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2')
+              format('woff2'),
+            url('//cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff')
+              format('woff2');
+        }
 
-      /* latin */
-      @font-face {
-        font-family: 'IBM Plex Mono';
-        font-display: swap;
-        font-weight: 500;
-        src: local('IBM Plex Mono Medium Italic'), local('IBMPlexMono-MediumItalic'),
-          url(https://fonts.gstatic.com/s/ibmplexmono/v2/-F6sfjptAgt5VM-kVkqdyU8n1ioSJlR1gMoQPttozw.woff2)
-            format('woff2');
-      }
+        /* latin */
+        @font-face {
+          font-family: 'IBM Plex Mono';
+          font-display: swap;
+          font-weight: 500;
+          src: local('IBM Plex Mono Medium Italic'), local('IBMPlexMono-MediumItalic'),
+            url(https://fonts.gstatic.com/s/ibmplexmono/v2/-F6sfjptAgt5VM-kVkqdyU8n1ioSJlR1gMoQPttozw.woff2)
+              format('woff2');
+        }
 
-      /* latin */
-      @font-face {
-        font-family: 'Anonymous Pro';
-        font-display: swap;
-        src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
-          url(//fonts.gstatic.com/s/anonymouspro/v11/Zhfjj_gat3waL4JSju74E3n3cbdKJftHIk87C9ihfO8.woff2)
-            format('woff2');
-      }
+        /* latin */
+        @font-face {
+          font-family: 'Anonymous Pro';
+          font-display: swap;
+          src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
+            url(//fonts.gstatic.com/s/anonymouspro/v11/Zhfjj_gat3waL4JSju74E3n3cbdKJftHIk87C9ihfO8.woff2)
+              format('woff2');
+        }
 
-      /* latin */
-      @font-face {
-        font-family: 'Droid Sans Mono';
-        font-display: swap;
-        src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'),
-          url(//fonts.gstatic.com/s/droidsansmono/v9/ns-m2xQYezAtqh7ai59hJVlgUn8GogvcKKzoM9Dh-4E.woff2)
-            format('woff2');
-      }
+        /* latin */
+        @font-face {
+          font-family: 'Droid Sans Mono';
+          font-display: swap;
+          src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'),
+            url(//fonts.gstatic.com/s/droidsansmono/v9/ns-m2xQYezAtqh7ai59hJVlgUn8GogvcKKzoM9Dh-4E.woff2)
+              format('woff2');
+        }
 
-      /* latin */
-      @font-face {
-        font-family: 'Inconsolata';
-        font-display: swap;
-        src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
-          url(//fonts.gstatic.com/s/inconsolata/v16/BjAYBlHtW3CJxDcjzrnZCIgp9Q8gbYrhqGlRav_IXfk.woff2)
-            format('woff2');
-      }
+        /* latin */
+        @font-face {
+          font-family: 'Inconsolata';
+          font-display: swap;
+          src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
+            url(//fonts.gstatic.com/s/inconsolata/v16/BjAYBlHtW3CJxDcjzrnZCIgp9Q8gbYrhqGlRav_IXfk.woff2)
+              format('woff2');
+        }
 
-      /* latin */
-      @font-face {
-        font-family: 'Source Code Pro';
-        font-display: swap;
-        src: local('Source Code Pro'), local('SourceCodePro-Regular'),
-          url(//fonts.gstatic.com/s/sourcecodepro/v7/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2)
-            format('woff2');
-      }
+        /* latin */
+        @font-face {
+          font-family: 'Source Code Pro';
+          font-display: swap;
+          src: local('Source Code Pro'), local('SourceCodePro-Regular'),
+            url(//fonts.gstatic.com/s/sourcecodepro/v7/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2)
+              format('woff2');
+        }
 
-      /* latin */
-      @font-face {
-        font-family: 'Ubuntu Mono';
-        font-display: swap;
-        src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
-          url(//fonts.gstatic.com/s/ubuntumono/v7/ViZhet7Ak-LRXZMXzuAfkYgp9Q8gbYrhqGlRav_IXfk.woff2)
-            format('woff2');
-      }
+        /* latin */
+        @font-face {
+          font-family: 'Ubuntu Mono';
+          font-display: swap;
+          src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
+            url(//fonts.gstatic.com/s/ubuntumono/v7/ViZhet7Ak-LRXZMXzuAfkYgp9Q8gbYrhqGlRav_IXfk.woff2)
+              format('woff2');
+        }
 
-      /* latin */
-      @font-face {
-        font-family: 'Space Mono';
-        font-display: swap;
-        src: local('Space Mono'), local('SpaceMono-Regular'),
-          url(https://fonts.gstatic.com/s/spacemono/v2/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2)
-            format('woff2');
-      }
-    `}
-  </style>
-)
+        /* latin */
+        @font-face {
+          font-family: 'Space Mono';
+          font-display: swap;
+          src: local('Space Mono'), local('SpaceMono-Regular'),
+            url(https://fonts.gstatic.com/s/spacemono/v2/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2)
+              format('woff2');
+        }
+      `}
+    </style>
+  )
+}

components/style/Reset.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import { COLORS } from '../../lib/constants'
 
-export default () => (
-  <style jsx global>
-    {`
+export default function Reset() {
+  return (
+    <style jsx global>
+      {`
       /* http://meyerweb.com/eric/tools/css/reset/
     v2.0 | 20110126
     License: none (public domain)
@@ -226,5 +227,6 @@ export default () => (
         outline: none;
       }
     `}
-  </style>
-)
+    </style>
+  )
+}

components/style/Typography.js

@@ -1,115 +1,117 @@
 import React from 'react'
 
-export default () => (
-  <style jsx global>
-    {`
-      /* https://github.com/jxnblk/type-system
+export default function Typography() {
+  return (
+    <style jsx global>
+      {`
+        /* https://github.com/jxnblk/type-system
     Brent Jackson
     License: MIT
     */
-      :root {
-        --h0: 4.5rem;
-        --h1: 3rem;
-        --h2: 2.25rem;
-        --h3: 1.5rem;
-        --h4: 1.125rem;
-        --h5: 0.75rem;
+        :root {
+          --h0: 4.5rem;
+          --h1: 3rem;
+          --h2: 2.25rem;
+          --h3: 1.5rem;
+          --h4: 1.125rem;
+          --h5: 0.75rem;
 
-        --lh: calc(4 / 3);
+          --lh: calc(4 / 3);
 
-        --m1: calc(2 / 3 * 1em);
-        --m2: calc(4 / 3 * 1em);
-        --m3: calc(8 / 3 * 1em);
-        --m4: calc(16 / 3 * 1em);
-        --x1: 0.5rem;
-        --x2: 1rem;
-        --x3: 2rem;
-        --x4: 4rem;
-        --x5: 8rem;
-        --x6: 16rem;
-      }
+          --m1: calc(2 / 3 * 1em);
+          --m2: calc(4 / 3 * 1em);
+          --m3: calc(8 / 3 * 1em);
+          --m4: calc(16 / 3 * 1em);
+          --x1: 0.5rem;
+          --x2: 1rem;
+          --x3: 2rem;
+          --x4: 4rem;
+          --x5: 8rem;
+          --x6: 16rem;
+        }
 
-      body {
-        font-size: var(--h4);
-        line-height: var(--lh);
-      }
+        body {
+          font-size: var(--h4);
+          line-height: var(--lh);
+        }
 
-      h1,
-      h2,
-      h3 {
-        margin-top: var(--m1);
-        margin-bottom: 0;
-      }
+        h1,
+        h2,
+        h3 {
+          margin-top: var(--m1);
+          margin-bottom: 0;
+        }
 
-      h4,
-      h5,
-      h6,
-      p,
-      dl,
-      ol,
-      ul,
-      blockquote {
-        margin-top: var(--m2);
-        margin-bottom: var(--m2);
-      }
+        h4,
+        h5,
+        h6,
+        p,
+        dl,
+        ol,
+        ul,
+        blockquote {
+          margin-top: var(--m2);
+          margin-bottom: var(--m2);
+        }
 
-      h1 {
-        font-size: var(--h2);
-      }
-      h2,
-      h3 {
-        font-size: var(--h3);
-      }
-      h4 {
-        font-size: var(--h4);
-      }
-      h5,
-      h6 {
-        font-size: var(--h5);
-      }
+        h1 {
+          font-size: var(--h2);
+        }
+        h2,
+        h3 {
+          font-size: var(--h3);
+        }
+        h4 {
+          font-size: var(--h4);
+        }
+        h5,
+        h6 {
+          font-size: var(--h5);
+        }
 
-      .mt0 {
-        margin-top: 0;
-      }
-      .mb0 {
-        margin-bottom: 0;
-      }
-      .mt1 {
-        margin-top: var(--x1);
-      }
-      .mb1 {
-        margin-bottom: var(--x1);
-      }
-      .mt2 {
-        margin-top: var(--x2);
-      }
-      .mb2 {
-        margin-bottom: var(--x2);
-      }
-      .mt3 {
-        margin-top: var(--x3);
-      }
-      .mb3 {
-        margin-bottom: var(--x3);
-      }
-      .mt4 {
-        margin-top: var(--x4);
-      }
-      .mb4 {
-        margin-bottom: var(--x4);
-      }
-      .mt5 {
-        margin-top: var(--x5);
-      }
-      .mb5 {
-        margin-bottom: var(--x5);
-      }
-      .mt6 {
-        margin-top: var(--x6);
-      }
-      .mb6 {
-        margin-bottom: var(--x6);
-      }
-    `}
-  </style>
-)
+        .mt0 {
+          margin-top: 0;
+        }
+        .mb0 {
+          margin-bottom: 0;
+        }
+        .mt1 {
+          margin-top: var(--x1);
+        }
+        .mb1 {
+          margin-bottom: var(--x1);
+        }
+        .mt2 {
+          margin-top: var(--x2);
+        }
+        .mb2 {
+          margin-bottom: var(--x2);
+        }
+        .mt3 {
+          margin-top: var(--x3);
+        }
+        .mb3 {
+          margin-bottom: var(--x3);
+        }
+        .mt4 {
+          margin-top: var(--x4);
+        }
+        .mb4 {
+          margin-bottom: var(--x4);
+        }
+        .mt5 {
+          margin-top: var(--x5);
+        }
+        .mb5 {
+          margin-bottom: var(--x5);
+        }
+        .mt6 {
+          margin-top: var(--x6);
+        }
+        .mb6 {
+          margin-bottom: var(--x6);
+        }
+      `}
+    </style>
+  )
+}

components/svg/Language.js

@@ -1,10 +1,12 @@
 import React from 'react'
 
-export default () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-    <path
-      d="M8 0.6875H7.97539C6.02773 0.694531 4.19961 1.45742 2.82148 2.83555C1.44687 4.21719 0.6875 6.04883 0.6875 8C0.6875 9.95117 1.44688 11.7828 2.825 13.1645C4.19961 14.5426 6.03125 15.3055 7.97891 15.3125H8.00352C12.0359 15.3125 15.316 12.0324 15.316 8C15.316 3.96758 12.0324 0.6875 8 0.6875ZM14.3352 7.50781H11.607C11.5754 6.56914 11.4594 5.67266 11.2625 4.82891C11.8637 4.63555 12.4473 4.38945 13.0098 4.09063C13.7832 5.08203 14.2402 6.25625 14.3352 7.50781ZM7.50781 7.50781H5.33516C5.36328 6.64648 5.46875 5.83086 5.64453 5.07852C6.25625 5.21562 6.87852 5.3 7.50781 5.32812V7.50781ZM7.50781 8.49219V10.6684C6.88203 10.6965 6.25625 10.7809 5.64453 10.918C5.46875 10.1656 5.36328 9.35 5.33516 8.49219H7.50781ZM8.49219 8.49219H10.6473C10.6191 9.35 10.5137 10.1656 10.3379 10.9145C9.7332 10.7773 9.11445 10.6965 8.49219 10.6684V8.49219ZM8.49219 7.50781V5.32812C9.11797 5.3 9.73672 5.21562 10.3379 5.08203C10.5137 5.83437 10.6191 6.64648 10.6473 7.50781H8.49219ZM12.3383 3.36289C11.9059 3.57734 11.4594 3.76016 11.0023 3.90781C10.7527 3.15547 10.4363 2.50508 10.0707 1.9918C10.9145 2.28359 11.6844 2.75117 12.3383 3.36289ZM10.0742 4.16094C9.55742 4.27344 9.02656 4.34375 8.49219 4.37188V1.79141C9.08984 2.11484 9.67344 2.9832 10.0742 4.16094ZM7.50781 1.77734V4.36836C6.96641 4.34023 6.43203 4.26992 5.9082 4.15391C6.31602 2.96563 6.90664 2.09727 7.50781 1.77734ZM5.90469 2.00234C5.54258 2.51211 5.22969 3.15898 4.98008 3.9043C4.53008 3.75664 4.08711 3.57383 3.66172 3.36289C4.30859 2.75469 5.07148 2.29063 5.90469 2.00234ZM2.99023 4.09414C3.5457 4.38945 4.12578 4.63555 4.71992 4.82539C4.51953 5.66563 4.40352 6.56562 4.37539 7.5043H1.66836C1.75977 6.25977 2.2168 5.08555 2.99023 4.09414ZM1.66484 8.49219H4.37188C4.40352 9.43086 4.51953 10.3309 4.71641 11.1711C4.12227 11.3645 3.54219 11.6105 2.98672 11.9023C2.2168 10.9145 1.75977 9.74023 1.66484 8.49219ZM3.6582 12.6371C4.08359 12.4262 4.52656 12.2434 4.98008 12.0957C5.22969 12.8445 5.54258 13.4879 5.90469 14.0012C5.07148 13.7059 4.30859 13.2453 3.6582 12.6371ZM5.9082 11.8426C6.43203 11.7266 6.96992 11.6562 7.50781 11.6281V14.2227C6.90312 13.9027 6.31602 13.0309 5.9082 11.8426ZM8.49219 14.2086V11.6246C9.02656 11.6527 9.55742 11.723 10.0742 11.8355C9.67344 13.0168 9.08984 13.8852 8.49219 14.2086ZM10.0742 14.0082C10.4398 13.4949 10.7563 12.8445 11.0059 12.0922C11.4629 12.2398 11.9129 12.4262 12.3418 12.6406C11.6879 13.2488 10.9145 13.7164 10.0742 14.0082ZM13.0098 11.9059C12.4473 11.607 11.8637 11.3609 11.2625 11.1676C11.4594 10.3273 11.5754 9.43086 11.607 8.49219H14.3352C14.2402 9.74023 13.7867 10.9145 13.0098 11.9059Z"
-      fill="white"
-    />
-  </svg>
-)
+export default function Language() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M8 0.6875H7.97539C6.02773 0.694531 4.19961 1.45742 2.82148 2.83555C1.44687 4.21719 0.6875 6.04883 0.6875 8C0.6875 9.95117 1.44688 11.7828 2.825 13.1645C4.19961 14.5426 6.03125 15.3055 7.97891 15.3125H8.00352C12.0359 15.3125 15.316 12.0324 15.316 8C15.316 3.96758 12.0324 0.6875 8 0.6875ZM14.3352 7.50781H11.607C11.5754 6.56914 11.4594 5.67266 11.2625 4.82891C11.8637 4.63555 12.4473 4.38945 13.0098 4.09063C13.7832 5.08203 14.2402 6.25625 14.3352 7.50781ZM7.50781 7.50781H5.33516C5.36328 6.64648 5.46875 5.83086 5.64453 5.07852C6.25625 5.21562 6.87852 5.3 7.50781 5.32812V7.50781ZM7.50781 8.49219V10.6684C6.88203 10.6965 6.25625 10.7809 5.64453 10.918C5.46875 10.1656 5.36328 9.35 5.33516 8.49219H7.50781ZM8.49219 8.49219H10.6473C10.6191 9.35 10.5137 10.1656 10.3379 10.9145C9.7332 10.7773 9.11445 10.6965 8.49219 10.6684V8.49219ZM8.49219 7.50781V5.32812C9.11797 5.3 9.73672 5.21562 10.3379 5.08203C10.5137 5.83437 10.6191 6.64648 10.6473 7.50781H8.49219ZM12.3383 3.36289C11.9059 3.57734 11.4594 3.76016 11.0023 3.90781C10.7527 3.15547 10.4363 2.50508 10.0707 1.9918C10.9145 2.28359 11.6844 2.75117 12.3383 3.36289ZM10.0742 4.16094C9.55742 4.27344 9.02656 4.34375 8.49219 4.37188V1.79141C9.08984 2.11484 9.67344 2.9832 10.0742 4.16094ZM7.50781 1.77734V4.36836C6.96641 4.34023 6.43203 4.26992 5.9082 4.15391C6.31602 2.96563 6.90664 2.09727 7.50781 1.77734ZM5.90469 2.00234C5.54258 2.51211 5.22969 3.15898 4.98008 3.9043C4.53008 3.75664 4.08711 3.57383 3.66172 3.36289C4.30859 2.75469 5.07148 2.29063 5.90469 2.00234ZM2.99023 4.09414C3.5457 4.38945 4.12578 4.63555 4.71992 4.82539C4.51953 5.66563 4.40352 6.56562 4.37539 7.5043H1.66836C1.75977 6.25977 2.2168 5.08555 2.99023 4.09414ZM1.66484 8.49219H4.37188C4.40352 9.43086 4.51953 10.3309 4.71641 11.1711C4.12227 11.3645 3.54219 11.6105 2.98672 11.9023C2.2168 10.9145 1.75977 9.74023 1.66484 8.49219ZM3.6582 12.6371C4.08359 12.4262 4.52656 12.2434 4.98008 12.0957C5.22969 12.8445 5.54258 13.4879 5.90469 14.0012C5.07148 13.7059 4.30859 13.2453 3.6582 12.6371ZM5.9082 11.8426C6.43203 11.7266 6.96992 11.6562 7.50781 11.6281V14.2227C6.90312 13.9027 6.31602 13.0309 5.9082 11.8426ZM8.49219 14.2086V11.6246C9.02656 11.6527 9.55742 11.723 10.0742 11.8355C9.67344 13.0168 9.08984 13.8852 8.49219 14.2086ZM10.0742 14.0082C10.4398 13.4949 10.7563 12.8445 11.0059 12.0922C11.4629 12.2398 11.9129 12.4262 12.3418 12.6406C11.6879 13.2488 10.9145 13.7164 10.0742 14.0082ZM13.0098 11.9059C12.4473 11.607 11.8637 11.3609 11.2625 11.1676C11.4594 10.3273 11.5754 9.43086 11.607 8.49219H14.3352C14.2402 9.74023 13.7867 10.9145 13.0098 11.9059Z"
+        fill="white"
+      />
+    </svg>
+  )
+}

components/svg/Settings.js

@@ -1,12 +1,14 @@
 import React from 'react'
 
-export default () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 18 18">
-    <path
-      fill="#fff"
-      fillRule="evenodd"
-      d="M206.532032,366.702224 L208.523318,368.142728 C208.69279,368.3122 208.721035,368.509915 208.608053,368.735877 L206.786238,371.74399 C206.673257,371.969953 206.503788,372.040565 206.277825,371.955829 L203.989964,371.066106 C203.283831,371.546276 202.775423,371.842848 202.464724,371.955829 L202.125782,374.286058 C202.069291,374.51202 201.913944,374.625 201.659736,374.625 L198.058474,374.625 C197.804266,374.625 197.648919,374.51202 197.592428,374.286058 L197.253486,371.955829 C196.829806,371.786357 196.321398,371.489786 195.728246,371.066106 L193.440385,371.955829 C193.214422,372.068811 193.044953,371.998198 192.931972,371.74399 L191.110157,368.735877 C190.96893,368.481669 190.997175,368.283955 191.194892,368.142728 L193.101443,366.702224 C193.101443,366.617488 193.094382,366.476263 193.080259,366.278546 C193.066136,366.080828 193.059075,365.925481 193.059075,365.8125 C193.059075,365.699519 193.066136,365.544172 193.080259,365.346454 C193.094382,365.148737 193.101443,365.007512 193.101443,364.922776 L191.152525,363.482272 C190.983053,363.3128 190.954808,363.115085 191.067789,362.889123 L192.889604,359.88101 C193.002585,359.655047 193.172055,359.584435 193.398017,359.669171 L195.685878,360.558894 C196.392011,360.078724 196.90042,359.782152 197.211118,359.669171 L197.550061,357.338942 C197.606551,357.11298 197.761898,357 198.016106,357 L201.617368,357 C201.871576,357 202.026923,357.11298 202.083414,357.338942 L202.379988,359.669171 C202.803668,359.838643 203.312077,360.135214 203.905229,360.558894 L206.150722,359.669171 C206.376684,359.556189 206.560276,359.626802 206.701503,359.88101 L208.523318,362.889123 C208.664544,363.143331 208.6363,363.341045 208.438582,363.482272 L206.532032,364.922776 C206.532032,365.007512 206.539093,365.148737 206.553216,365.346454 C206.567338,365.544172 206.5744,365.699519 206.5744,365.8125 C206.5744,366.23618 206.560277,366.532752 206.532032,366.702224 Z M199.795553,368.905349 C200.671159,368.905349 201.419649,368.608777 202.041046,368.015625 C202.662443,367.422473 202.973138,366.688105 202.973138,365.8125 C202.973138,364.936895 202.662443,364.202527 202.041046,363.609375 C201.419649,363.016223 200.671159,362.719651 199.795553,362.719651 C198.919948,362.719651 198.178519,363.016223 197.571244,363.609375 C196.96397,364.202527 196.660337,364.936895 196.660337,365.8125 C196.660337,366.688105 196.96397,367.422473 197.571244,368.015625 C198.178519,368.608777 198.919948,368.905349 199.795553,368.905349 Z"
-      transform="translate(-191 -357)"
-    />
-  </svg>
-)
+export default function Settings() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 18 18">
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M206.532032,366.702224 L208.523318,368.142728 C208.69279,368.3122 208.721035,368.509915 208.608053,368.735877 L206.786238,371.74399 C206.673257,371.969953 206.503788,372.040565 206.277825,371.955829 L203.989964,371.066106 C203.283831,371.546276 202.775423,371.842848 202.464724,371.955829 L202.125782,374.286058 C202.069291,374.51202 201.913944,374.625 201.659736,374.625 L198.058474,374.625 C197.804266,374.625 197.648919,374.51202 197.592428,374.286058 L197.253486,371.955829 C196.829806,371.786357 196.321398,371.489786 195.728246,371.066106 L193.440385,371.955829 C193.214422,372.068811 193.044953,371.998198 192.931972,371.74399 L191.110157,368.735877 C190.96893,368.481669 190.997175,368.283955 191.194892,368.142728 L193.101443,366.702224 C193.101443,366.617488 193.094382,366.476263 193.080259,366.278546 C193.066136,366.080828 193.059075,365.925481 193.059075,365.8125 C193.059075,365.699519 193.066136,365.544172 193.080259,365.346454 C193.094382,365.148737 193.101443,365.007512 193.101443,364.922776 L191.152525,363.482272 C190.983053,363.3128 190.954808,363.115085 191.067789,362.889123 L192.889604,359.88101 C193.002585,359.655047 193.172055,359.584435 193.398017,359.669171 L195.685878,360.558894 C196.392011,360.078724 196.90042,359.782152 197.211118,359.669171 L197.550061,357.338942 C197.606551,357.11298 197.761898,357 198.016106,357 L201.617368,357 C201.871576,357 202.026923,357.11298 202.083414,357.338942 L202.379988,359.669171 C202.803668,359.838643 203.312077,360.135214 203.905229,360.558894 L206.150722,359.669171 C206.376684,359.556189 206.560276,359.626802 206.701503,359.88101 L208.523318,362.889123 C208.664544,363.143331 208.6363,363.341045 208.438582,363.482272 L206.532032,364.922776 C206.532032,365.007512 206.539093,365.148737 206.553216,365.346454 C206.567338,365.544172 206.5744,365.699519 206.5744,365.8125 C206.5744,366.23618 206.560277,366.532752 206.532032,366.702224 Z M199.795553,368.905349 C200.671159,368.905349 201.419649,368.608777 202.041046,368.015625 C202.662443,367.422473 202.973138,366.688105 202.973138,365.8125 C202.973138,364.936895 202.662443,364.202527 202.041046,363.609375 C201.419649,363.016223 200.671159,362.719651 199.795553,362.719651 C198.919948,362.719651 198.178519,363.016223 197.571244,363.609375 C196.96397,364.202527 196.660337,364.936895 196.660337,365.8125 C196.660337,366.688105 196.96397,367.422473 197.571244,368.015625 C198.178519,368.608777 198.919948,368.905349 199.795553,368.905349 Z"
+        transform="translate(-191 -357)"
+      />
+    </svg>
+  )
+}

components/svg/Theme.js

@@ -1,10 +1,12 @@
 import React from 'react'
 
-export default () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-    <path
-      d="M13.1206 10.2309C12.8886 10.0164 12.5476 9.96367 12.2558 9.91445C11.8515 9.84766 11.6968 9.77383 11.4612 9.56289C10.9585 9.11641 10.9585 8.46953 11.4612 8.02305L12.5265 7.07734C14.1577 5.63594 14.1577 3.27344 12.5265 1.83203C11.3241 0.773828 9.71045 0.25 8.0335 0.25C6.07529 0.25 4.0292 0.963672 2.45068 2.36289C-0.484863 4.95742 -0.484863 9.20781 2.45068 11.8023C3.90967 13.0926 5.87842 13.7359 7.82607 13.75H7.88584C9.8335 13.75 11.753 13.1207 13.1171 11.9078C13.6233 11.4613 13.539 10.6211 13.1206 10.2309ZM2.21865 5.59375C2.21865 4.97148 2.72139 4.46875 3.34365 4.46875C3.96592 4.46875 4.46865 4.97148 4.46865 5.59375C4.46865 6.21602 3.96592 6.71875 3.34365 6.71875C2.72139 6.71875 2.21865 6.21602 2.21865 5.59375ZM3.6249 10.0234C3.00264 10.0234 2.4999 9.5207 2.4999 8.89844C2.4999 8.27617 3.00264 7.77344 3.6249 7.77344C4.24717 7.77344 4.7499 8.27617 4.7499 8.89844C4.7499 9.5207 4.24717 10.0234 3.6249 10.0234ZM5.8749 4.36328C5.25264 4.36328 4.7499 3.86055 4.7499 3.23828C4.7499 2.61602 5.25264 2.11328 5.8749 2.11328C6.49717 2.11328 6.9999 2.61602 6.9999 3.23828C6.9999 3.86055 6.49717 4.36328 5.8749 4.36328ZM8.40615 12.0625C7.47451 12.0625 6.71865 11.3066 6.71865 10.375C6.71865 9.44336 7.47451 8.6875 8.40615 8.6875C9.33779 8.6875 10.0937 9.44336 10.0937 10.375C10.0937 11.3066 9.33779 12.0625 8.40615 12.0625ZM9.2499 4.75C8.62764 4.75 8.1249 4.24727 8.1249 3.625C8.1249 3.00273 8.62764 2.5 9.2499 2.5C9.87217 2.5 10.3749 3.00273 10.3749 3.625C10.3749 4.24727 9.87217 4.75 9.2499 4.75Z"
-      fill="white"
-    />
-  </svg>
-)
+export default function Theme() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+      <path
+        d="M13.1206 10.2309C12.8886 10.0164 12.5476 9.96367 12.2558 9.91445C11.8515 9.84766 11.6968 9.77383 11.4612 9.56289C10.9585 9.11641 10.9585 8.46953 11.4612 8.02305L12.5265 7.07734C14.1577 5.63594 14.1577 3.27344 12.5265 1.83203C11.3241 0.773828 9.71045 0.25 8.0335 0.25C6.07529 0.25 4.0292 0.963672 2.45068 2.36289C-0.484863 4.95742 -0.484863 9.20781 2.45068 11.8023C3.90967 13.0926 5.87842 13.7359 7.82607 13.75H7.88584C9.8335 13.75 11.753 13.1207 13.1171 11.9078C13.6233 11.4613 13.539 10.6211 13.1206 10.2309ZM2.21865 5.59375C2.21865 4.97148 2.72139 4.46875 3.34365 4.46875C3.96592 4.46875 4.46865 4.97148 4.46865 5.59375C4.46865 6.21602 3.96592 6.71875 3.34365 6.71875C2.72139 6.71875 2.21865 6.21602 2.21865 5.59375ZM3.6249 10.0234C3.00264 10.0234 2.4999 9.5207 2.4999 8.89844C2.4999 8.27617 3.00264 7.77344 3.6249 7.77344C4.24717 7.77344 4.7499 8.27617 4.7499 8.89844C4.7499 9.5207 4.24717 10.0234 3.6249 10.0234ZM5.8749 4.36328C5.25264 4.36328 4.7499 3.86055 4.7499 3.23828C4.7499 2.61602 5.25264 2.11328 5.8749 2.11328C6.49717 2.11328 6.9999 2.61602 6.9999 3.23828C6.9999 3.86055 6.49717 4.36328 5.8749 4.36328ZM8.40615 12.0625C7.47451 12.0625 6.71865 11.3066 6.71865 10.375C6.71865 9.44336 7.47451 8.6875 8.40615 8.6875C9.33779 8.6875 10.0937 9.44336 10.0937 10.375C10.0937 11.3066 9.33779 12.0625 8.40615 12.0625ZM9.2499 4.75C8.62764 4.75 8.1249 4.24727 8.1249 3.625C8.1249 3.00273 8.62764 2.5 9.2499 2.5C9.87217 2.5 10.3749 3.00273 10.3749 3.625C10.3749 4.24727 9.87217 4.75 9.2499 4.75Z"
+        fill="white"
+      />
+    </svg>
+  )
+}

pages/about.js

@@ -1,167 +1,172 @@
 import React from 'react'
 import Page from '../components/Page'
 
-export default () => (
-  <Page>
-    <div className="about">
-      <div className="mb4">
-        <h2>What does this do?</h2>
-        <p>Carbon lets you create and share beautiful images of your source code</p>
-        <p>
-          You know all of those code screenshots you see on Twitter? Although the code&apos;s
-          usually impressive, we thought there was room for improvement in the aesthetic department.
-          So what are you waiting for? Go try it out and impress all your developer and designer
-          friends.{' '}
-          <span role="img" aria-label="Palette">
-            🎨
-          </span>
-        </p>
-      </div>
-      <div className="mb4">
-        <h2>Who uses it?</h2>
-        <p>
-          Carbon is used by thousands of developers daily, including experts at:
-          <img
-            className="mt2"
-            width="508px"
-            src="/static/svg/open-source-companies-2.svg"
-            alt="Companies that trust Carbon: Google, Airbnb, GitHub, Coinbase, and Microsoft"
-          />
-        </p>
-      </div>
-      <div className="mb4">
-        <h2>How do I use it?</h2>
-        <h4 className="mb0 mt3">Import</h4>
-        <p className="mb1 mt2">There are a few different ways to import code into Carbon:</p>
-        <ul className="mt0 mb3">
-          <li>Drop a file into the editor</li>
-          <li>
-            Append a GitHub gist id to the url (
-            <a className="link" href="/0db00e81d5416c339181e59481c74b59">
-              example
+export default function About() {
+  return (
+    <Page>
+      <div className="about">
+        <div className="mb4">
+          <h2>What does this do?</h2>
+          <p>Carbon lets you create and share beautiful images of your source code</p>
+          <p>
+            You know all of those code screenshots you see on Twitter? Although the code&apos;s
+            usually impressive, we thought there was room for improvement in the aesthetic
+            department. So what are you waiting for? Go try it out and impress all your developer
+            and designer friends.{' '}
+            <span role="img" aria-label="Palette">
+              🎨
+            </span>
+          </p>
+        </div>
+        <div className="mb4">
+          <h2>Who uses it?</h2>
+          <p>
+            Carbon is used by thousands of developers daily, including experts at:
+            <img
+              className="mt2"
+              width="508px"
+              src="/static/svg/open-source-companies-2.svg"
+              alt="Companies that trust Carbon: Google, Airbnb, GitHub, Coinbase, and Microsoft"
+            />
+          </p>
+        </div>
+        <div className="mb4">
+          <h2>How do I use it?</h2>
+          <h4 className="mb0 mt3">Import</h4>
+          <p className="mb1 mt2">There are a few different ways to import code into Carbon:</p>
+          <ul className="mt0 mb3">
+            <li>Drop a file into the editor</li>
+            <li>
+              Append a GitHub gist id to the url (
+              <a className="link" href="/0db00e81d5416c339181e59481c74b59">
+                example
+              </a>
+              )
+            </li>
+            <li>Paste your code directly</li>
+          </ul>
+          <h4 className="mb0 mt4">Customization</h4>
+          <p className="mt2 mb3">
+            Once you&apos;ve got all of your code into Carbon, you can customize your image by
+            changing the syntax theme, background color/image, window theme, or padding.
+          </p>
+          <p className="mt2 mb3">
+            You can even drop an image file onto the editor to set the background to that image.
+            Give it a try!
+          </p>
+          <h4 className="mb0 mt4">Export/Sharing</h4>
+          <p className="mt2 mb3">
+            After you&apos;ve customized your image you can Tweet a link to the image, or save it
+            directly.
+          </p>
+          <p className="mt2 mb3">
+            If you use the &apos;Tweet&apos; button, Carbon will automatically make your image
+            accessible. However, if you want to manually tweet your Carbon image, please check out (
+            <a
+              className="link"
+              href="https://help.twitter.com/en/using-twitter/picture-descriptions"
+            >
+              how to make your Twitter images accessible
             </a>
-            )
-          </li>
-          <li>Paste your code directly</li>
-        </ul>
-        <h4 className="mb0 mt4">Customization</h4>
-        <p className="mt2 mb3">
-          Once you&apos;ve got all of your code into Carbon, you can customize your image by
-          changing the syntax theme, background color/image, window theme, or padding.
-        </p>
-        <p className="mt2 mb3">
-          You can even drop an image file onto the editor to set the background to that image. Give
-          it a try!
-        </p>
-        <h4 className="mb0 mt4">Export/Sharing</h4>
-        <p className="mt2 mb3">
-          After you&apos;ve customized your image you can Tweet a link to the image, or save it
-          directly.
-        </p>
-        <p className="mt2 mb3">
-          If you use the &apos;Tweet&apos; button, Carbon will automatically make your image
-          accessible. However, if you want to manually tweet your Carbon image, please check out (
-          <a className="link" href="https://help.twitter.com/en/using-twitter/picture-descriptions">
-            how to make your Twitter images accessible
-          </a>
-          ).
-        </p>
-        <p className="mt2 mb3">
-          If you include a Carbon image in a post, the source code will be invisible to assistive
-          technology — it will not be possible to enlarge or copy it, etc. Please, think about
-          adding another element with the source code as text, like (
-          <a
-            className="link"
-            href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"
-          >
-            an HTML Details Element
-          </a>
-          ) below the image.
-        </p>
-        <h4 className="mb0 mt4" id="shortcuts">
-          Keyboard Shortcuts
-        </h4>
-        <table className="mt2 mb3">
-          <tbody>
-            <tr>
-              <td>Open settings menu</td>
-              <td>
-                <kbd>⌘ /</kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Export as PNG</td>
-              <td>
-                <kbd>⇧ ⌘ E</kbd>
-              </td>
-            </tr>
-            <tr>
-              <td>Reset settings</td>
-              <td>
-                <kbd>⇧ ⌘ \</kbd>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div>
-        <h2>I want to make this better.</h2>
-        <p>
-          <a className="link" href="https://github.com/carbon-app/carbon#contribute--support">
-            Contributors welcome!
-          </a>
-        </p>
+            ).
+          </p>
+          <p className="mt2 mb3">
+            If you include a Carbon image in a post, the source code will be invisible to assistive
+            technology — it will not be possible to enlarge or copy it, etc. Please, think about
+            adding another element with the source code as text, like (
+            <a
+              className="link"
+              href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"
+            >
+              an HTML Details Element
+            </a>
+            ) below the image.
+          </p>
+          <h4 className="mb0 mt4" id="shortcuts">
+            Keyboard Shortcuts
+          </h4>
+          <table className="mt2 mb3">
+            <tbody>
+              <tr>
+                <td>Open settings menu</td>
+                <td>
+                  <kbd>⌘ /</kbd>
+                </td>
+              </tr>
+              <tr>
+                <td>Export as PNG</td>
+                <td>
+                  <kbd>⇧ ⌘ E</kbd>
+                </td>
+              </tr>
+              <tr>
+                <td>Reset settings</td>
+                <td>
+                  <kbd>⇧ ⌘ \</kbd>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div>
+          <h2>I want to make this better.</h2>
+          <p>
+            <a className="link" href="https://github.com/carbon-app/carbon#contribute--support">
+              Contributors welcome!
+            </a>
+          </p>
+        </div>
       </div>
-    </div>
-    <style jsx>
-      {`
-        .about {
-          font-size: 16px;
-          max-width: 632px;
-          margin: 0 auto var(--x4);
-        }
-
-        @media (max-width: 768px) {
+      <style jsx>
+        {`
           .about {
-            max-width: 90vw;
+            font-size: 16px;
+            max-width: 632px;
+            margin: 0 auto var(--x4);
+          }
+
+          @media (max-width: 768px) {
+            .about {
+              max-width: 90vw;
+            }
           }
-        }
 
-        img {
-          max-width: 100%;
-        }
+          img {
+            max-width: 100%;
+          }
 
-        h2 {
-          font-weight: bold;
-          font-size: 32px;
-        }
-        h4 {
-          font-weight: bold;
-        }
+          h2 {
+            font-weight: bold;
+            font-size: 32px;
+          }
+          h4 {
+            font-weight: bold;
+          }
 
-        p,
-        li {
-          color: #fff;
-        }
+          p,
+          li {
+            color: #fff;
+          }
 
-        ul {
-          list-style-position: inside;
-          list-style-type: circle;
-        }
+          ul {
+            list-style-position: inside;
+            list-style-type: circle;
+          }
 
-        span {
-          color: #fff;
-        }
+          span {
+            color: #fff;
+          }
 
-        td {
-          padding: 0.25rem 0;
-        }
+          td {
+            padding: 0.25rem 0;
+          }
 
-        kbd {
-          margin-left: var(--x3);
-          letter-spacing: 0.1em;
-        }
-      `}
-    </style>
-  </Page>
-)
+          kbd {
+            margin-left: var(--x3);
+            letter-spacing: 0.1em;
+          }
+        `}
+      </style>
+    </Page>
+  )
+}

pages/snippets.js

@@ -25,7 +25,12 @@ function correctTimestamp(n) {
 }
 
 function Snippet(props) {
-  const config = { ...DEFAULT_SETTINGS, ...props, fontSize: '2px', windowControls: false }
+  const config = {
+    ...DEFAULT_SETTINGS,
+    ...props,
+    fontSize: '2px',
+    windowControls: false,
+  }
 
   return (
     <div className="snippet">
@@ -237,9 +242,11 @@ function SnippetsPage() {
   )
 }
 
-export default () => (
-  <Page enableHeroText={true} flex={true}>
-    <MetaLinks />
-    <SnippetsPage />
-  </Page>
-)
+export default function Snippets() {
+  return (
+    <Page enableHeroText={true} flex={true}>
+      <MetaLinks />
+      <SnippetsPage />
+    </Page>
+  )
+}