Update to add multiple features (#237)

    Bumps npm versions
    Adds Sentry endpoint for future testing
    Fixes some css issues.
    Optimizes images using the next/image package.
    Bumps react v16 -> v17.
    Updated testing snapshots.
    Changed Husky config.
    Added Coveralls

.env.local.example

@@ -0,0 +1,25 @@
+NEXT_PUBLIC_SENTRY_DSN=
+
+# Only required to upload sourcemaps
+# SENTRY_ORG=
+# SENTRY_PROJECT=
+# SENTRY_AUTH_TOKEN=
+#
+# Only required if sentry for organization
+# Ex: https://sentry.ORG.com/
+# SENTRY_URL=
+#
+# For sourcemaps to work with server-side exceptions, the file path of the
+# uploaded .map file needs to match the file paths in Error.stack. In Node.js,
+# Error.stack file paths are absolute. Since the .map files we upload to Sentry
+# have relative paths (~/_next), Error.stack needs to be rewritten to also use
+# relative paths, which is handled in Sentry.init via Sentry's RewriteFrames
+# integration.
+# 
+# Normally, the root directory could be detected with __dirname, but __dirname
+# isn't yet supported in Vercel serverless functions:
+# https://github.com/vercel/next.js/issues/8251
+# 
+# To work around this issue, provide the root directory containing Next.js's
+# build output here. In the Vercel environment, this is /var/task/.
+# NEXT_PUBLIC_SENTRY_SERVER_ROOT_DIR=

.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
         'eslint:recommended',
         'plugin:@typescript-eslint/eslint-recommended',
         'plugin:@typescript-eslint/recommended',
-        'prettier/@typescript-eslint',
+        'prettier',
         'plugin:jest/recommended',
         'plugin:eslint-comments/recommended',
         'plugin:import/errors',

.github/workflows/coveralls.yml

@@ -0,0 +1,30 @@
+on: ["push", "pull_request"]
+
+name: Test Coveralls
+
+jobs:
+
+  build:
+    name: Build
+
+    env: 
+      FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} 
+    runs-on: ubuntu-latest
+    steps:
+
+    - uses: actions/checkout@v1
+
+    - name: Use Node.js 10.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: 10.x
+
+    - name: run coverage
+      run: |
+        npm ci
+        npm run test-coverage
+
+    - name: Coveralls
+      uses: coverallsapp/github-action@master
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -3,4 +3,5 @@ dist/
 .cache/
 .next/
 .now
-out/
+out/
+coverage/

.husky/pre-commit

@@ -0,0 +1,2 @@
+npm run lint
+npm run prettier

.husky/pre-push

@@ -0,0 +1 @@
+npm test

jest/jest.setup.js

@@ -1,5 +1,6 @@
 const Enzyme = require('enzyme')
-const Adapter = require('enzyme-adapter-react-16')
+// const Adapter = require('enzyme-adapter-react-16')
+const Adapter = require('@wojtekmaj/enzyme-adapter-react-17')
 
 Enzyme.configure({ adapter: new Adapter() })
 

next.config.js

@@ -3,13 +3,38 @@ const withMDX = require('@next/mdx')({
   extension: /\.mdx?$/
 })
 const withOffline = require('next-offline')
-const optimizedImages = require('next-optimized-images');
+// const optimizedImages = require('next-optimized-images');
+const SentryWebpackPlugin = require('@sentry/webpack-plugin')
+const {
+  NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
+  SENTRY_ORG,
+  SENTRY_PROJECT,
+  SENTRY_AUTH_TOKEN,
+  NODE_ENV,
+  VERCEL_GIT_COMMIT_SHA,
+} = process.env
+
+process.env.SENTRY_DSN = SENTRY_DSN
+const basePath = ''
 
 const config = {
+  productionBrowserSourceMaps: true,
+  env: {
+    // Make the COMMIT_SHA available to the client so that Sentry events can be
+    // marked for the release they belong to. It may be undefined if running
+    // outside of Vercel
+    NEXT_PUBLIC_COMMIT_SHA: VERCEL_GIT_COMMIT_SHA,
+  },
   target: "serverless",
   env: {
     buildTime: new Date().toDateString(),
   },
+  images: {
+    domains: ['cdn-images-1.medium.com']
+  },
+  future: {
+    webpack5: true,
+  },
   workboxOpts: {
     swDest: 'static/service-worker.js',
     runtimeCaching: [
@@ -29,13 +54,68 @@ const config = {
         },
       },
     ],
-  }
+  },
+  webpack: (config, options) => {
+    // In `pages/_app.js`, Sentry is imported from @sentry/browser. While
+    // @sentry/node will run in a Node.js environment. @sentry/node will use
+    // Node.js-only APIs to catch even more unhandled exceptions.
+    //
+    // This works well when Next.js is SSRing your page on a server with
+    // Node.js, but it is not what we want when your client-side bundle is being
+    // executed by a browser.
+    //
+    // Luckily, Next.js will call this webpack function twice, once for the
+    // server and once for the client. Read more:
+    // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
+    //
+    // So ask Webpack to replace @sentry/node imports with @sentry/browser when
+    // building the browser's bundle
+    if (!options.isServer) {
+      config.resolve.alias['@sentry/node'] = '@sentry/browser'
+    }
+
+    // Define an environment variable so source code can check whether or not
+    // it's running on the server so we can correctly initialize Sentry
+    config.plugins.push(
+      new options.webpack.DefinePlugin({
+        'process.env.NEXT_IS_SERVER': JSON.stringify(
+          options.isServer.toString()
+        ),
+      })
+    )
+
+    // When all the Sentry configuration env variables are available/configured
+    // The Sentry webpack plugin gets pushed to the webpack plugins to build
+    // and upload the source maps to sentry.
+    // This is an alternative to manually uploading the source maps
+    // Note: This is disabled in development mode.
+    if (
+      SENTRY_DSN &&
+      SENTRY_ORG &&
+      SENTRY_PROJECT &&
+      SENTRY_AUTH_TOKEN &&
+      VERCEL_GIT_COMMIT_SHA &&
+      NODE_ENV === 'production'
+    ) {
+      config.plugins.push(
+        new SentryWebpackPlugin({
+          include: '.next',
+          ignore: ['node_modules'],
+          stripPrefix: ['webpack://_N_E/'],
+          urlPrefix: `~${basePath}/_next`,
+          release: VERCEL_GIT_COMMIT_SHA,
+        })
+      )
+    }
+    return config
+  },
+  basePath
 }
 
 const plugins = [
   withOffline,
   withMDX,
-  optimizedImages
+  // optimizedImages
 ]
 
 module.exports = withPlugins(plugins, config);