feat: loadable-components.com

New website

netlify.toml

@@ -1,7 +1,4 @@
 [build]
   base    = "website"
   command = "yarn build"
-  publish = "website/public"
-
-[context.production]
-  command = "yarn build:pp"
+  publish = "website/public"

website/_redirects

@@ -1 +1 @@
-https://loadable-components.netlify.com/* https://loadable-components.smooth-code.com/:splat 301!
+https://loadable-components.netlify.com/* https://loadable-components.com/:splat 301!

website/gatsby-config.js

@@ -7,7 +7,7 @@ module.exports = {
         slug: 'loadable-components',
         author: 'Greg Bergé',
         description: 'The recommended Code Splitting library for React.',
-        siteUrl: 'https://www.smooth-code.com/open-source/loadable-components',
+        siteUrl: 'https://loadable-components.com',
         github: 'https://github.com/smooth-code/loadable-components',
         menu: ['Introduction', 'Guides', 'API'],
         nav: [{ title: 'Docs', url: '/docs/' }],

website/package.json

@@ -2,16 +2,16 @@
   "private": true,
   "scripts": {
     "build": "gatsby build && cp _redirects public/",
-    "build:pp": "gatsby build --prefix-paths && cp _redirects public/",
     "dev": "gatsby develop",
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "@bundle-analyzer/gatsby-plugin": "^0.5.0",
-    "gatsby": "^2.15.28",
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1",
-    "smooth-code-landers": "^1.3.2",
-    "smooth-doc": "^2.14.2"
+    "@bundle-analyzer/gatsby-plugin": "^0.5.1",
+    "@xstyled/styled-components": "^1.15.0",
+    "gatsby": "^2.18.7",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-helmet": "^5.2.1",
+    "smooth-doc": "^3.0.1"
   }
 }

website/src/pages/index.js

@@ -0,0 +1,51 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable jsx-a11y/accessible-emoji */
+import React from 'react'
+import { Box } from '@xstyled/styled-components'
+import Helmet from 'react-helmet'
+import { HomeHero, ShowCase, BaseLayout } from 'smooth-doc/components'
+
+export default function Index() {
+  return (
+    <BaseLayout>
+      <Helmet>
+        <title>Loadable Components - React code splitting</title>
+      </Helmet>
+
+      <HomeHero title="React code splitting made easy." />
+
+      <ShowCase>
+        <Box maxWidth={660} px={20}>
+          <Box row>
+            <Box col={{ xs: 1, md: true }}>
+              <h2>What is it?</h2>
+              <ul>
+                <li>A React code splitting library</li>
+                <li>Not an alternative to React.lazy</li>
+                <li>
+                  A solution{' '}
+                  <a
+                    href="https://reactjs.org/docs/code-splitting.html#reactlazy"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    recommended by React Team
+                  </a>
+                </li>
+              </ul>
+            </Box>
+            <Box col={{ xs: 1, md: 'auto' }}>
+              <h2>Features</h2>
+              <ul>
+                <li>📚 Library splitting</li>
+                <li>⚡️ Prefetching</li>
+                <li>💫 Server Side Rendering</li>
+                <li>🎛 Full dynamic import</li>
+              </ul>
+            </Box>
+          </Box>
+        </Box>
+      </ShowCase>
+    </BaseLayout>
+  )
+}