convert most components to typescript

.gitignore

@@ -9,7 +9,6 @@ yarn-error.log
 
 # IDE specific
 .idea/
-.vscode/
 *.sw*
 
 # Environment variables

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

gatsby-config.js

@@ -25,5 +25,6 @@ module.exports = {
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-glamor',
     'gatsby-plugin-remove-serviceworker',
+    'gatsby-plugin-sass',
   ],
 };

package.json

@@ -3,10 +3,6 @@
   "description": "Internet website for the ReactJS Dallas User Group",
   "version": "1.0.0",
   "author": "Mike Mathew <[email protected]>",
-  "engines": {
-    "node": "^10.16.0",
-    "npm": "6.x"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/reactjs-dallas/reactjs-dallas-site"
@@ -16,6 +12,7 @@
     "@material-ui/core": "^4.9.0",
     "@material-ui/icons": "^4.5.1",
     "@material-ui/styles": "^4.9.0",
+    "@mui/material": "^5.1.0",
     "core-js": "^3.6.4",
     "dotenv": "^8.2.0",
     "firebase": "^7.7.0",
@@ -26,13 +23,16 @@
     "gatsby-plugin-material-ui": "^2.1.6",
     "gatsby-plugin-react-helmet": "^3.1.21",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
+    "gatsby-plugin-sass": "^5.1.1",
+    "gatsby-plugin-typescript": "^4.1.3",
     "gatsby-source-filesystem": "^2.1.46",
     "gatsby-transformer-remark": "^2.6.48",
     "glamor": "^2.20.40",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-helmet": "^5.2.1"
+    "react-helmet": "^5.2.1",
+    "sass": "^1.43.4"
   },
   "keywords": [
     "gatsby"
@@ -45,6 +45,9 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
+    "@types/node": "^16.11.7",
+    "@types/react": "^17.0.35",
+    "@types/react-dom": "^17.0.11",
     "prettier": "^1.17.0"
   }
 }

src/components/Footer/Footer.module.css

@@ -0,0 +1,31 @@
+.copyright {
+  color: #e0e0e0;
+  font-size: 15px;
+}
+.footer {
+  background: '#20232A';
+  display: 'flex';
+  flex-direction: 'column';
+  justify-content: 'center';
+  align-items: 'center';
+  padding: '1rem';
+}
+.footerContent {
+  display: 'flex';
+  font-family: 'Roboto';
+  justify-content: 'center';
+  margin: '0 auto';
+  max-width: 960;
+  padding: '0.5rem';
+}
+.icon {
+  height: 32;
+  width: 32;
+}
+.iconContainer {
+  margin: '0 16px';
+}
+.link {
+  color: 'white';
+  text-decoration: 'none';
+}

src/components/Footer/Footer.tsx

@@ -0,0 +1,61 @@
+// Internal Dependencies
+import LinkedInSvg from '../shared/icons/linkedin.svg';
+import FacebookSvg from '../shared/icons/facebook.svg';
+import SlackSvg from '../shared/icons/slack.svg';
+import TwitterSvg from '../shared/icons/twitter.svg';
+import styles from './Footer.module.css';
+
+const date = new Date();
+const year = date.getFullYear();
+
+const Footer = () => (
+  <footer className={styles.footer}>
+    <div className={styles.footerContent}>
+      <div className={styles.iconContainer}>
+        <a
+          className={styles.link}
+          href="https://www.linkedin.com/groups/13964590"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <LinkedInSvg className={styles.icon} />
+        </a>
+      </div>
+      <div className={styles.iconContainer}>
+        <a
+          className={styles.link}
+          href="https://join.slack.com/t/reactjs-dallas/shared_invite/enQtMzQ0NDY2NDQ3MzQ3LWI3NmM1ZWRhZTJiOWE4OTFiMTA0MWJlYWVhZWIxZjdkZTRiZGI0OWViZGFiMjhjYjdlMGI2NTBhMWYzNDJkODA"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <SlackSvg className={styles.icon} />
+        </a>
+      </div>
+      <div className={styles.iconContainer}>
+        <a
+          className={styles.link}
+          href="https://twitter.com/reactjsdallas"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <TwitterSvg className={styles.icon} />
+        </a>
+      </div>
+      <div className={styles.iconContainer}>
+        <a
+          className={styles.link}
+          href="https://www.facebook.com/reactjsdallas"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FacebookSvg className={styles.icon} />
+        </a>
+      </div>
+    </div>
+    <div className={styles.copyright}>
+      &copy; {year} ReactJS Dallas User Group. All Rights Reserved.
+    </div>
+  </footer>
+);
+
+export default Footer;

src/components/Header/Header.module.css

@@ -0,0 +1,22 @@
+.link {
+  color: 'white';
+  text-decoration: 'none';
+}
+.logo {
+  height: 24px;
+  margin-right: 8px;
+  transform: 'translateY(6px)';
+  width: 24px;
+}
+.nav {
+  align-items: 'baseline';
+  display: 'flex';
+  font-family: 'Roboto';
+  justify-content: 'space-around';
+  margin: '0 auto';
+  max-width: 960px;
+  padding: '1rem';
+}
+.root {
+  background: '#20232A';
+}

src/components/Header/Header.tsx

@@ -0,0 +1,36 @@
+// External Dependencies
+import * as React from 'react';
+import { Link } from 'gatsby';
+
+// Internal Dependencies
+import ReactLogoSvg from '../../images/react-logo.svg';
+import styles from './Header.module.css';
+
+interface HeaderProps {
+  siteTitle: string;
+}
+
+// Component Definition
+const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
+  <div className={styles.root}>
+    <div className={styles.nav}>
+      <div>
+        <Link className={styles.link} to="/">
+          <ReactLogoSvg className={styles.logo} /> {siteTitle}
+        </Link>
+      </div>
+      <div>
+        <Link className={styles.link} to="/events">
+          Events
+        </Link>
+      </div>
+      <div>
+        <Link className={styles.link} to="/backers">
+          Backers
+        </Link>
+      </div>
+    </div>
+  </div>
+);
+
+export default Header;