Merge pull request #126 from m2mathew/dev

2.15.0

Author: m2mathew

.eslintrc.js

@@ -3,7 +3,8 @@ module.exports = {
     'eslint:recommended',
     'plugin:react/recommended',
     'airbnb',
-    'plugin:@typescript-eslint/recommended'
+    'plugin:@typescript-eslint/recommended',
+    'react-app',
   ],
   rules: {
     '@typescript-eslint/explicit-function-return-type': 'off',
@@ -31,15 +32,24 @@ module.exports = {
     'no-shadow': 0,
     'no-underscore-dangle': 0,
     'react/forbid-prop-types': 1,
+    'react/function-component-definition': 'off',
     'react/jsx-filename-extension': 'off',
     'react/jsx-one-expression-per-line': 0,
+    'react/jsx-max-props-per-line': [
+      2,
+      {
+        maximum: 1,
+      },
+    ],
     'react/jsx-props-no-spreading': 0,
     'react/jsx-uses-vars': [2],
     'react/no-did-mount-set-state': 0,
     'react/prefer-stateless-function': 1,
     'react/prop-types': 'off', // Disable prop-types as we use TypeScript for type checking
     'react/react-in-jsx-scope': 0,
     'react/require-default-props': 0,
+    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
+    'react-hooks/rules-of-hooks': 'warn', // Checks rules of Hooks
   },
   settings: {
     // 'import/core-modules': ['react', 'prop-types']
@@ -48,7 +58,8 @@ module.exports = {
     }
   },
   globals: {
-    graphql: true
+    __PATH_PREFIX__: true,
+    graphql: true,
   },
   overrides: [
     {

.nvmrc

@@ -1 +1 @@
-16
+18

README.md

@@ -1,18 +1,38 @@
 # TMAC
 
+Texas Music Administrators Conference ([link](https://www.texasmusicadmin.com/))
+
 This website was constructed for Jeff Turner, Mario Luna, and the Texas Music Administrators Conference. Planning began in January 2018 with building starting in mid-February 2018.
 
 ## Tools
 
 - GatsbyJS
 - React
-- Glamor
 - Contentful (as CMS)
 - Cloudinary (as CDN)
 - Firebase for authentication
 - Firestore for data storage
 - Google Scripts to sync with Firebase data
-- Material-UI
+- MUI
+- TypeScript (partially implemented)
+
+### Gatsby Plugins
+
+- `gatsby-theme-material-ui`
+  - This provides up-to-date MUI components and theming. Some components like `Link` have been updated to work with Gatsby.
+- `@sentry/gatsby`
+  - Adds ability for Sentry to catch exceptions that users encounter on the site. Check the attached Sentry account for info on specific errors.
+  - All Sentry packages need to be on the same version.
+- `gatsby-source-contentful`
+  - These parts of the site fetch data from Contentful at build time:
+    - Officers
+    - Area Representatives
+    - Some Events
+  - If the Contentful data is updated, a TMAC dev needs to re-deploy the site on Netliy for the changes to go live.
+- `gatsby-plugin-typography`
+  - Allows adding custom fonts
+- `gatsby-plugin-canonical-urls`
+  - Inserts a `link` tag in the head of each page with `rel="canonical"` added. This helps ensure that all saved pages everywhere will point to the `https` address for this site.
 
 ## Inspiration
 
@@ -21,7 +41,21 @@ Heavily inspired by the Gatsby v1 documentation website.
 ## Running in development
 
 1. Clone this repo
+1. Add `.env` file based on `example.env`. Get secret values from another TMAC dev.
 2. Install dependencies → `yarn`
-3. Start the development server → `yarn develop`
+3. Start the development server → `yarn dev`
+
+## Version History
+
+- v1
+  - An old WordPress site. The person in charge of it somehow deleted it completely.
+  - Mike Mathew sifted through the Internet Archive to find older content to fit into the redesigned site.
+- v2
+  - A Gatsby site represented by this repository.
+  - Gatsby v1 through v3 were built 2018-2022
+  - Gatsby v4 update was November 2022
+- v3 (coming soon)
+  - The organization's name changed to Texas Fine Arts Administrators (TFAA) in Fall 2022.
+  - A modernized Gatsby site with a fresh coat of paint from Luis Velasquez at [LV Branding](https://www.lvbranding.com/)
 
 :musical_note: :trumpet: :saxophone:

example.env

@@ -0,0 +1,42 @@
+# Contentful
+GATSBY_CONTENTFUL_SPACE_ID=secret_value
+GATSBY_CONTENTFUL_ACCESS_TOKEN=secret_value
+
+# Firebase data to use locally
+GATSBY_FIREBASE_API_KEY=secret_value
+GATSBY_FIREBASE_AUTH_DOMAIN=secret_value
+GATSBY_FIREBASE_DATABASE_URL=secret_value
+GATSBY_FIREBASE_PROJECT_ID=secret_value
+GATSBY_FIREBASE_STORAGE_BUCKET=secret_value
+GATSBY_FIREBASE_MESSAGING_SENDER_ID=secret_value
+
+# Firebase staging
+# GATSBY_FIREBASE_API_KEY_STAGING=secret_value
+# GATSBY_FIREBASE_AUTH_DOMAIN_STAGING=secret_value
+# GATSBY_FIREBASE_DATABASE_URL_STAGING=secret_value
+# GATSBY_FIREBASE_PROJECT_ID_STAGING=secret_value
+# GATSBY_FIREBASE_STORAGE_BUCKET_STAGING=secret_value
+# GATSBY_FIREBASE_MESSAGING_SENDER_ID_STAGING=secret_value
+
+# Firebase prod
+# GATSBY_FIREBASE_API_KEY_PROD=secret_value
+# GATSBY_FIREBASE_AUTH_DOMAIN_PROD=secret_value
+# GATSBY_FIREBASE_DATABASE_URL_PROD=secret_value
+# GATSBY_FIREBASE_PROJECT_ID_PROD=secret_value
+# GATSBY_FIREBASE_STORAGE_BUCKET_PROD=secret_value
+# GATSBY_FIREBASE_MESSAGING_SENDER_ID_PROD=secret_value
+
+# Google Sheets
+GATSBY_GOOGLE_API_KEY=secret_value
+GATSBY_CLIENT_ID=secret_value
+GATSBY_SPREADSHEET_ID=secret_value
+
+# Google reCAPTCHA
+GATSBY_GOOGLE_RECAPTCHA_SITE_KEY=secret_value
+
+# Paypal
+GATSBY_PAYPAL_CLIENT_ID_SANDBOX=secret_value
+GATSBY_PAYPAL_CLIENT_ID_PRODUCTION=secret_value
+
+# Sentry
+GATSBY_SENTRY_DSN=secret_value

gatsby-browser.js

@@ -1,7 +1,94 @@
-// import ReactDOM from 'react-dom';
+import { init } from '@sentry/gatsby';
+import { BrowserTracing } from '@sentry/tracing';
+import { Dedupe, ExtraErrorData } from '@sentry/integrations';
 
-// export const replaceHydrateFunction = () => {
-//   return (element, container, callback) => {
-//     ReactDOM.render(element, container, callback);
-//   };
-// };
+/**
+ * Called when the Gatsby browser runtime first starts.
+ */
+export const onClientEntry = async () => {
+  /**
+   * Available Options: https://docs.sentry.io/error-reporting/configuration/?platform=browser
+   */
+  init({
+    dsn: process.env.GATSBY_SENTRY_DSN,
+    // release: __DYNAMIC_RELEASE_STRING__, // eslint-disable-line
+    // environment: process.env.GATSBY_ACTIVE_ENV,
+    // debug: process.env.GATSBY_SENTRY_DEBUG_MODE === 'true',
+    maxBreadcrumbs: 50,
+    autoSessionTracking: true,
+
+    // You can log events to Sentry, even locally in development env, but you need to opt-in for it.
+    // enabled: process.env.GATSBY_ACTIVE_ENV === 'production'
+    // || process.env.GATSBY_SENTRY_DEBUG_MODE === 'true',
+
+    normalizeDepth: 6,
+    integrations: [
+      new Dedupe(),
+      new ExtraErrorData(),
+
+      // This enables automatic instrumentation (highly recommended), but is not
+      // necessary for purely manual usage
+      new BrowserTracing({
+        tracingOrigins: ['localhost', 'domain-a.nl', 'domain-b.be', /^\//],
+      }),
+    ],
+    ignoreErrors: [
+      'ResizeObserver loop limit exceeded',
+      'CookieControl', // CookieBot related errors
+      'webkitPresentationMode',
+      'iFrameResizer',
+      'iframe-resizer-react',
+      'ChunkLoadError',
+      'Pastease',
+    ],
+    denyUrls: [
+      /accutics\.net/,
+      /cookiebot\.com/,
+      /doubeclick\.net/,
+      /facebook\.net/,
+      /google\.com/,
+      /google-analytics\.com/,
+      /googleadservices\.com/,
+      /hotjar\.com/,
+      /mopinion\.com/,
+      /omappapi\.com/,
+      /opmnstr\.com/,
+      /zdassets\.com/,
+      /zendesk\.com/,
+      /zopim\.com/,
+      /cdn\.optimizely\.com/,
+    ],
+    // beforeSend: (event) => {
+    //   if (['production', 'staging'].includes(process.env.GATSBY_ACTIVE_ENV)) {
+    //     // Debug messages will be shown for staging and production only
+    //     // if GATSBY_SENTRY_DEBUG_MODE env var set to 'true'.
+    //     // Fatal, error, warning and info messages will always be shown.
+    //     return event.level !== 'debug' || process.en
+    // v.GATSBY_SENTRY_DEBUG_MODE === 'true' ? event : null;
+    //   }
+
+    //   return null;
+    // },
+    beforeBreadcrumb: (breadcrumb) => {
+      // All related to Hot Module Reloading locally, so no need to have it.
+      if (breadcrumb.category === 'xhr' && breadcrumb.data && /socket.io\/\?EIO/.test(breadcrumb.data.url)) {
+        return null;
+      }
+
+      if (breadcrumb.category === 'console' && /\[HMR\]/.test(breadcrumb.message)) {
+        return null;
+      }
+
+      return breadcrumb;
+    },
+    // Stacktrace is always attached during errors.
+    // If you want to see it also for debug, warning and info messages,
+    //  set the GATSBY_SENTRY_DEBUG_MODE to 'true'
+    // attachStacktrace: process.env.GATSBY_SENTRY_DEBUG_MODE === 'true',
+
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for performance monitoring.
+    // We recommend adjusting this value in production
+    tracesSampleRate: 0.02,
+  });
+};

gatsby-config.js

@@ -1,5 +1,8 @@
 // Give gatsby access to env keys
-require('dotenv').config({
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const dotenv = require('dotenv');
+
+dotenv.config({
   path: '.env',
 });
 
@@ -10,33 +13,15 @@ module.exports = {
     description: 'Website for the Texas Music Administrators Conference',
   },
   plugins: [
-    'gatsby-plugin-top-layout',
-    {
-      resolve: 'gatsby-plugin-material-ui',
-      // If you want to use styled components, in conjunction to Material-UI, you should:
-      // - Change the injection order
-      // - Add the plugin
-      options: {
-        // stylesProvider: {
-        //   injectFirst: true,
-        // },
-      },
-    },
-    {
-      resolve: '@sentry/gatsby',
-      options: {
-        dsn: 'https://[email protected]/5751393',
-        sampleRate: 0.7,
-      },
-    },
+    'gatsby-theme-material-ui',
+    'gatsby-plugin-styled-components',
     {
       resolve: 'gatsby-source-contentful',
       options: {
         spaceId: process.env.GATSBY_CONTENTFUL_SPACE_ID,
         accessToken: process.env.GATSBY_CONTENTFUL_ACCESS_TOKEN,
       },
     },
-    'gatsby-plugin-glamor',
     {
       resolve: 'gatsby-plugin-typography',
       options: {
@@ -51,6 +36,10 @@ module.exports = {
     },
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-typescript',
+    'gatsby-plugin-image',
     'gatsby-plugin-sharp',
+    {
+      resolve: '@sentry/gatsby',
+    },
   ],
 };

gatsby-ssr.js

@@ -1,47 +1,7 @@
-// /* eslint-disable react/no-danger */
+import React from 'react';
 
-// const React = require('react');
-// const { renderToString } = require('react-dom/server');
-// const { JssProvider } = require('react-jss');
-// const getPageContext = require('./src/utils/getPageContext').default;
+import Page from './src/components/layout';
 
-// function replaceRenderer({
-//   bodyComponent,
-//   replaceBodyHTMLString,
-//   setHeadComponents,
-// }) {
-//   // Get the context of the page to collected side effects.
-//   const pageContext = getPageContext();
-
-//   const bodyHTML = renderToString(
-//     <JssProvider
-//       generateClassName={pageContext.generateClassName}
-//       registry={pageContext.sheetsRegistry}
-//     >
-//       {bodyComponent}
-//     </JssProvider>,
-//   );
-
-//   replaceBodyHTMLString(bodyHTML);
-//   setHeadComponents([
-//     <style
-//       type="text/css"
-//       id="jss-server-side"
-//       key="jss-server-side"
-//       dangerouslySetInnerHTML={{
-//         __html: pageContext.sheetsRegistry.toString(),
-//       }}
-//     />,
-//   ]);
-// }
-
-// exports.replaceRenderer = replaceRenderer;
-
-// It's not ready yet: https://github.com/gatsbyjs/gatsby/issues/8237.
-//
-// const withRoot = require('./src/withRoot').default;
-// const WithRoot = withRoot(props => props.children);
-
-// exports.wrapRootElement = ({ element }) => {
-//   return <WithRoot>{element}</WithRoot>;
-// };
+export function wrapPageElement({ element, props }) {
+  return <Page {...props}>{element}</Page>;
+}