Merge pull request #596 from gregberge/upgrade-deps

chore: upgrade website

.eslintignore

@@ -5,5 +5,4 @@ __fixtures_build__/
 coverage/
 examples/
 svgr.now.sh/
-/website/.cache/
-/website/public/
+/website/

website/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  globals: {
+    __PATH_PREFIX__: true,
+  },
+  extends: `react-app`,
+}

website/.nvmrc

@@ -0,0 +1 @@
+14

website/gatsby-config.js

@@ -1,27 +1,34 @@
+const path = require('path')
+
 module.exports = {
   plugins: [
     {
       resolve: 'smooth-doc',
       options: {
         name: 'SVGR',
-        slug: 'svgr',
         author: 'Greg Bergé',
         description: 'Transforms SVG into React Components.',
         siteUrl: 'https://react-svgr.com',
-        github: 'https://github.com/gregberge/svgr',
-        menu: ['About', 'Usage', 'Configuring SVGR', 'Advanced'],
-        nav: [
+        githubRepositoryURL: 'https://github.com/gregberge/svgr',
+        baseDirectory: path.resolve(__dirname, '..'),
+        navItems: [
           { title: 'Playground', url: '/playground/' },
-          { title: 'Usage', url: '/docs/getting-started/' },
+          { title: 'Docs', url: '/docs/' },
         ],
-        carbonAdUrl:
+        sections: ['About', 'Usage', 'Configuring SVGR', 'Advanced'],
+        carbonAdsURL:
           '//cdn.carbonads.com/carbon.js?serve=CE7I5K3N&placement=react-svgrcom',
-        googleAnalytics: 'UA-154496255-2',
-        algoliaDocSearch: {
+        docSearch: {
           apiKey: '0c7343afd83c189413499c62c1df6853',
           indexName: 'smooth-code-svgr',
         },
       },
     },
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: 'UA-154496255-2',
+      },
+    },
   ],
 }

website/package.json

@@ -1,29 +1,26 @@
 {
   "private": true,
   "dependencies": {
-    "@smooth-ui/core-sc": "^11.1.5",
-    "@xstyled/styled-components": "^1.17.1",
+    "@xstyled/styled-components": "^3.0.3",
     "brace": "^0.11.1",
-    "final-form": "^4.20.1",
-    "gatsby": "^2.24.2",
-    "history": "^5.0.0",
-    "isomorphic-fetch": "^2.2.1",
-    "polished": "^3.6.5",
-    "prismjs": "^1.20.0",
-    "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-ace": "^9.1.1",
-    "react-dom": "^16.13.1",
-    "react-final-form": "^6.5.0",
-    "react-helmet": "^6.1.0",
-    "react-icons": "^3.10.0",
-    "reakit": "^1.0.0-beta.14",
-    "smooth-doc": "^4.0.3",
-    "styled-components": "^5.1.1"
+    "final-form": "^4.20.2",
+    "gatsby": "^3.13.0",
+    "gatsby-plugin-google-analytics": "^3.13.0",
+    "history": "^5.0.1",
+    "isomorphic-fetch": "^3.0.0",
+    "react": "^17.0.2",
+    "react-ace": "^9.4.3",
+    "react-dom": "^17.0.2",
+    "react-final-form": "^6.5.3",
+    "react-icons": "^4.2.0",
+    "smooth-doc": "^8.0.0"
   },
   "scripts": {
     "build": "gatsby build && cp _redirects public/",
     "dev": "gatsby develop",
     "serve": "gatsby serve"
+  },
+  "devDependencies": {
+    "eslint-config-react-app": "^6.0.0"
   }
 }

website/src/pages/docs/cli.mdx → website/pages/docs/cli.mdx

@@ -1,5 +1,5 @@
 ---
-menu: Usage
+section: Usage
 title: CLI
 order: 10
 ---
@@ -8,6 +8,8 @@ order: 10
 
 SVGR can be run from the CLI. Run it without argument to see the [options](/docs/options).
 
+<carbon-ad />
+
 ## Install
 
 ```bash

website/src/pages/docs/configuration-files.mdx → website/pages/docs/configuration-files.mdx

@@ -1,5 +1,5 @@
 ---
-menu: Configuring SVGR
+section: Configuring SVGR
 title: Configuration Files
 order: 20
 ---
@@ -8,6 +8,8 @@ order: 20
 
 SVGR supports project configuration files for SVGR, SVGO and Prettier.
 
+<carbon-ad />
+
 ## SVGR
 
 SVGR uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) for configuration file support. This means you can configure SVGR via:

website/src/pages/docs/custom-templates.mdx → website/pages/docs/custom-templates.mdx

@@ -1,5 +1,5 @@
 ---
-menu: Advanced
+section: Advanced
 title: Custom Templates
 order: 6
 ---
@@ -8,6 +8,8 @@ order: 6
 
 Custom templates give you the opportunity to personalize the final generated component by SVGR. In most of case you don't need it, only advanced use-cases require templates.
 
+<carbon-ad />
+
 ## Custom Component template
 
 A custom template takes place in a file that exports a "template function".
@@ -116,7 +118,7 @@ The customization is the same, a file that exports a function:
 const path = require('path')
 
 function defaultIndexTemplate(filePaths) {
-  const exportEntries = filePaths.map(filePath => {
+  const exportEntries = filePaths.map((filePath) => {
     const basename = path.basename(filePath, path.extname(filePath))
     const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
     return `export { default as ${exportName} } from './${basename}'`

website/src/pages/docs/custom-transformations.mdx → website/pages/docs/custom-transformations.mdx

@@ -1,5 +1,5 @@
 ---
-menu: Advanced
+section: Advanced
 title: Custom transformations
 order: 10
 ---
@@ -8,6 +8,8 @@ order: 10
 
 SVGR exposes a simple API but it is extendable, you can extend it to create complex SVG transformations.
 
+<carbon-ad />
+
 ## Install
 
 ```bash

website/src/pages/docs/ecosystem.mdx → website/pages/docs/ecosystem.mdx

@@ -1,5 +1,5 @@
 ---
-menu: About
+section: About
 title: Ecosystem
 order: 30
 ---
@@ -8,6 +8,8 @@ order: 30
 
 This is an incomplete list of awesome things built with svgr. If you have something to share, please submit a PR on [GitHub project](https://github.com/gregberge/svgr).
 
+<carbon-ad />
+
 ## SVGR inside ✨
 
 - [Create React App](https://facebook.github.io/create-react-app/)

website/src/pages/docs/getting-started.mdx → website/pages/docs/getting-started.mdx

@@ -1,5 +1,5 @@
 ---
-menu: Usage
+section: Usage
 title: Getting Started
 order: 5
 ---
@@ -8,6 +8,8 @@ order: 5
 
 Follow these steps to start with SVGR.
 
+<carbon-ad />
+
 **Take an icon.svg**:
 
 ```html
@@ -55,7 +57,7 @@ npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" icon.svg
 ```js
 import * as React from 'react'
 
-const SvgComponent = props => (
+const SvgComponent = (props) => (
   <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
     <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
   </svg>

website/pages/docs/index.mdx

@@ -0,0 +1,4 @@
+---
+slug: /docs/
+redirect: /docs/getting-started/
+---

website/src/pages/docs/jest.mdx → website/pages/docs/jest.mdx

@@ -1,5 +1,5 @@
 ---
-menu: Advanced
+section: Advanced
 title: Testing with Jest
 order: 4
 ---
@@ -8,6 +8,8 @@ order: 4
 
 Create a simple mock for the svgr loader and map this in the jest config:
 
+<carbon-ad />
+
 ## 1. Create a mock file
 
 Create a mock file `__mocks__/svgrMock.js`:
@@ -20,13 +22,13 @@ export const ReactComponent = 'div'
 ```
 
 The above mock would support the following import syntaxes:
+
 ```js
 import logoURL from '../assets/logo.svg'
 // and
 import { ReactComponent as Logo } from '../assets/logo.svg'
 ```
 
-
 ## 2. Configure Jest
 
 In your `package.json`
@@ -46,7 +48,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.svg$': '<rootDir>/__mocks__/svgrMock.js',
   },
-};
+}
 ```
 
 Your snapshots will include all properties on the icon components, so they will be tested.

website/src/pages/docs/motivation.mdx → website/pages/docs/motivation.mdx

@@ -1,5 +1,5 @@
 ---
-menu: About
+section: About
 title: Motivation
 order: 10
 ---
@@ -10,6 +10,8 @@ React supports SVG out of the box, it's simpler, easier and much more powerful
 to have components instead of SVG files. Wrapped in a React component, your SVG
 is inlined in the page and you can style it using CSS.
 
+<carbon-ad />
+
 SVGR differs from other library by its solid architecture. It uses [svg-parser](https://github.com/Rich-Harris/svg-parser) + [Babel](https://babeljs.io) to transform SVG code into JavaScript code.
 
 SVGR is included in [create-react-app v2](https://github.com/facebook/create-react-app) and gives you the power to [import SVG directly as a React component](https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs).

website/src/pages/docs/node-api.mdx → website/pages/docs/node-api.mdx

@@ -1,5 +1,5 @@
 ---
-menu: Usage
+section: Usage
 title: Node API
 order: 20
 ---
@@ -8,6 +8,8 @@ order: 20
 
 SVGR exposes a Node API, you can create a custom script or build another tool based on SVGR.
 
+<carbon-ad />
+
 ## Install
 
 ```bash
@@ -29,9 +31,11 @@ const svgCode = `
 </svg>
 `
 
-svgr(svgCode, { icon: true }, { componentName: 'MyComponent' }).then(jsCode => {
-  console.log(jsCode)
-})
+svgr(svgCode, { icon: true }, { componentName: 'MyComponent' }).then(
+  (jsCode) => {
+    console.log(jsCode)
+  },
+)
 ```
 
 Use `svgr.sync(code, config, state)` if you would like to use sync version.
@@ -43,7 +47,7 @@ By default `@svgr/core` doesn't include `svgo` and `prettier` plugins, if you wa
 ```js
 svgr(svgCode, {
   plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
-}).then(jsCode => {
+}).then((jsCode) => {
   console.log(jsCode)
 })
 ```

website/src/pages/docs/options.mdx → website/pages/docs/options.mdx

@@ -1,5 +1,5 @@
 ---
-menu: Configuring SVGR
+section: Configuring SVGR
 title: Options
 order: 10
 ---
@@ -9,6 +9,8 @@ order: 10
 SVGR ships with a handful of customizable options, usable in both the CLI and
 API.
 
+<carbon-ad />
+
 ## Config file
 
 Specify a custom config file.

website/src/pages/docs/parcel.mdx → website/pages/docs/parcel.mdx

@@ -1,5 +1,5 @@
 ---
-menu: Usage
+section: Usage
 title: Parcel
 order: 45
 ---
@@ -8,6 +8,8 @@ order: 45
 
 SVGR can be used as a [parcel](https://parceljs.org/) plugin, this way you can import your SVG directly as a React Component.
 
+<carbon-ad />
+
 ## Install
 
 ```bash

website/src/pages/docs/rollup.mdx → website/pages/docs/rollup.mdx

@@ -1,5 +1,5 @@
 ---
-menu: Usage
+section: Usage
 title: Rollup
 order: 40
 ---
@@ -8,6 +8,8 @@ order: 40
 
 SVGR can be used as a [rollup](https://rollupjs.org) plugin, this way you can import your SVG directly as a React Component.
 
+<carbon-ad />
+
 ## Install
 
 ```bash