Merge pull request #25 from caiogondim/upgrade-nextjs

Update packages
caiogondim · May 16, 2020 · f749d80 · f749d80 · vercel · May 16, 2020
2 parents 88b3652 + c81e32c
commit f749d80
Show file tree

Hide file tree

Showing 87 changed files with 7,354 additions and 3,406 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -4,5 +4,10 @@
   "parser": "babel-eslint",
   "rules": {
     "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "react": {
+      version: "detect"
+    }
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 node_modules/
 .DS_Store
 .next/
+dist/
+.now
diff --git a/TODO.md b/TODO.md
@@ -1,12 +1,10 @@
-- Rename supertylin class `u-readable` to `superstylin-readable`
+- run update-list-of-posts and create symlink after npm install
+
 - create next-import-static (based on next-images)
 - update-list-of-posts script
 - remove asterism component (use hr)
 - rename prettier to format
 - update superstylin
-- dark mode
-- lint code
-  - props
 - fade in images
 - remove back forward cache
   - on pop state on componentDidMount

diff --git a/components/header.js b/components/header.js
@@ -7,6 +7,7 @@ const sectionStyle = css`
   display: flex;
   padding-top: 0;
   max-width: 66rem;
+  margin-bottom: 3.815rem;
 
   a {
     text-decoration: none;
@@ -62,9 +63,9 @@ const logoTextStyle = css`
 
 function Header ({ pageName }) {
   return (
-    <section css={sectionStyle} className="u-readable">
+    <section css={sectionStyle}>
       <header>
-        <Link prefetch href="/">
+        <Link href="/">
           <a>
             <h1>
               <img src="/static/logo-dark.png" css={logoDarkStyle} alt="logo" />

diff --git a/components/link-target-blank.js b/components/link-target-blank.js
@@ -1,7 +1,13 @@
 import PropTypes from 'prop-types'
 
-function LinkTargetBlank({ href, children, css_ }) {
+function LinkTargetBlank ({ href, children, css_ }) {
   return <a href={href} css={css_} target="_blank" rel="noopener noreferrer">{children}</a>
 }
 
+LinkTargetBlank.propTypes = {
+  href: PropTypes.string,
+  children: PropTypes.node,
+  css_: PropTypes.shape()
+}
+
 export default LinkTargetBlank
diff --git a/components/list-item-header.js b/components/list-item-header.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types'
+import Link from 'next/link'
 import { css } from '@emotion/core'
 import { gray50, gray60 } from '../util/colors'
 
@@ -36,7 +37,9 @@ function ListItemHeader ({ title, subtitle, titleLink }) {
       <p css={subtitleStyle}>{subtitle}</p>
       <h3 css={titleStyle}>
         {titleLink
-          ? <a href={titleLink}>{title}</a>
+          ? (<Link href={titleLink}>
+            <a>{title}</a>
+          </Link>)
           : title
         }
       </h3>

diff --git a/components/post-detail.js b/components/post-detail.js
@@ -58,7 +58,7 @@ PostDetail.propTypes = {
   meta: PropTypes.shape({
     title: PropTypes.string,
     link: PropTypes.string,
-    date: PropTypes.string
+    dateString: PropTypes.string
   })
 }
 

diff --git a/components/shell.js b/components/shell.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import Head from 'next/head'
-import superstylin from 'superstylin'
 import { Global, css } from '@emotion/core'
 import isDarkMode from '../util/is-dark-mode'
 
@@ -15,15 +14,14 @@ function Shell ({ children, width }) {
   return (
     <div css={shellStyle({ width })}>
       <Head>
+        <link rel="stylesheet" href="/static/superstylin.css" />
         <title>CAIO GONDIM</title>
         {isDarkMode()
           ? <link rel="icon" type="image/png" href="/static/logo-light.png" />
           : <link rel="icon" type="image/png" href="/static/logo-dark.png" />
         }
         <Global
           styles={css`
-            ${superstylin.toString()}
-
             body {
               margin: calc((100vw / 25) * 1.563);
               max-width: 100%;

diff --git a/components/static.js b/components/static.js
@@ -0,0 +1,18 @@
+import { createElement } from 'react'
+
+export default function StaticContent ({ children, element = 'div', ...props }) {
+  // if we're in the server or a spa navigation, just render it
+  if (typeof window === 'undefined') {
+    return createElement(element, {
+      ...props,
+      children
+    })
+  }
+
+  // avoid re-render on the client
+  return createElement(element, {
+    ...props,
+    suppressHydrationWarning: true,
+    dangerouslySetInnerHTML: { __html: '' }
+  })
+}
diff --git a/next.config.js b/next.config.js
@@ -1,17 +1,5 @@
-const pipe = require('tubo')
 const withMDX = require('@next/mdx')()
 
-module.exports = pipe(
-  {
-    webpack: (config) => {
-      config.module.rules.push({
-        test: /\.css$/,
-        use: ['raw-loader']
-      })
-
-      return config
-    },
-    pageExtensions: ['js', 'jsx', 'mdx']
-  },
-  withMDX
-)
+module.exports = withMDX({
+  pageExtensions: ['js', 'jsx', 'mdx']
+})
diff --git a/now.json b/now.json
@@ -4,7 +4,7 @@
     { "src": "package.json", "use": "@now/static-build" }
   ],
   "routes": [
-    { "src": "/static/.+", "headers": { "cache-control": "s-maxage=31536000, max-age=86400, stale-while-revalidate=86400" } }
+    { "src": "/public/.+", "headers": { "cache-control": "s-maxage=31536000, max-age=86400, stale-while-revalidate=86400" } }
   ],
   "alias": ["caiogondim.com"]
 }