Create Next.js Live Site

.eslintrc.json

@@ -0,0 +1,43 @@
+{
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "env": {
+        "browser": true,
+        "node": true,
+        "es2020": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 11,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            2
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ],
+        "sort-imports": 2,
+        "react/no-unescaped-entities": 0
+    }
+}

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.next

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true
+}

components/Banner.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Banner = () => {
+  return (
+    <div className="banner">
+      <a href="https://docs.google.com/document/d/1T8qeo0QuNbcXyyEgffzQ4uETbc5dHc-Ix60YbMAylWI/edit#heading=h.56hnonyorqys">
+        <p>HackerEarth Submission Guide</p>
+      </a>
+    </div>
+  );
+};
+
+export default Banner;

components/Footer.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const Footer = (props) => (
+  <footer {...props}>
+    <div id="footer-links">
+      <a
+        href="https://www.facebook.com/CalHacks/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          className="connect-icon"
+          src="https://calhacks-sierra.s3-us-west-2.amazonaws.com/assets/branding/facebook.svg"
+          alt="facebook"
+        />
+      </a>
+      <a
+        href="https://twitter.com/CalHacks"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          className="connect-icon"
+          src="https://calhacks-sierra.s3-us-west-2.amazonaws.com/assets/branding/twitter.svg"
+          alt="twitter"
+        />
+      </a>
+      <a
+        href="https://www.instagram.com/calhacks/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          className="connect-icon"
+          src="https://calhacks-sierra.s3-us-west-2.amazonaws.com/assets/branding/instagram.svg"
+          alt="instagram"
+        />
+      </a>
+    </div>
+    <h4 id="footer-tagline">Made with &lt;3 by Cal Hacks.</h4>
+  </footer>
+);
+
+export default Footer;

components/Header.js

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import cn from 'classnames';
+import Head from 'next/head';
+
+const nav = [
+  {
+    title: 'Home',
+    href: '/',
+  },
+  {
+    title: 'Map',
+    href: '/map',
+  },
+  {
+    title: 'Resources',
+    href: '/resources',
+  },
+  {
+    title: 'Prizes',
+    href: '/prizes',
+  },
+  {
+    title: 'FAQ',
+    href: '/faq',
+  },
+  // {
+  //   title: 'Apply',
+  //   href: 'https://apply.calhacks.io',
+  //   action: true,
+  // },
+  // {
+  //   title: 'Hacker Guide',
+  //   href: 'https://docs.google.com/document/d/1jrxv9NAS7HvXwPl0PpgxeYqEfPxwQlCfpWD2cf36LDE/edit?usp=sharing',
+  //   action: true,
+  // },
+];
+
+export default class Header extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: false,
+    };
+  }
+
+  toggleMenu = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    return (
+      <header>
+        <i className="material-icons icon" onClick={this.toggleMenu}>
+          menu
+        </i>
+        <img
+          id="logo"
+          src="https://calhacks-sierra.s3.us-west-2.amazonaws.com/assets/live/logo.svg"
+          alt="logo"
+          onClick={() => (window.location.href = '/')}
+        />
+        <div id="topnav" className={this.state.open ? 'responsive-open' : ''}>
+          {nav.map(({ title, href, action }) => (
+            <NavBarItem
+              key={title}
+              title={title}
+              href={href}
+              onClick={this.toggleMenu}
+              action={action}
+              active={typeof window != 'undefined' ? window.location.pathname === href : false}
+            />
+          ))}
+        </div>
+        <Head>
+          <title>Cal Hacks: Live</title>
+        </Head>
+      </header>
+    );
+  }
+}
+
+class NavBarItem extends React.Component {
+  render() {
+    const { action, active, href, onClick, title } = this.props;
+
+    return (
+      <a className={cn({ action, active })} href={href} target={action ? '_blank' : '_top'} onClick={onClick}>
+        {title}
+      </a>
+    );
+  }
+}
+
+NavBarItem.propTypes = {
+  href: PropTypes.string,
+  title: PropTypes.string,
+  action: PropTypes.bool,
+  onClick: PropTypes.func,
+  active: PropTypes.bool,
+};

components/Loader.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const Loader = () => (
+  <div className="loader"></div>
+);
+
+export default Loader;

components/Question.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const Question = (props) => {
+  const { question, answer } = props;
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  return (
+    <>
+      <div className="question" onClick={() => setIsCollapsed(!isCollapsed)}>
+        <i className="material-icons">{isCollapsed ? 'arrow_right' : 'arrow_drop_down'}</i>
+        <p>{question}</p>
+      </div>
+      <div className="answer" style={{ display: isCollapsed ? 'none' : 'block' }}>
+        <p>{answer}</p>
+      </div>
+    </>
+  );
+};
+
+Question.propTypes = {
+  question: PropTypes.string,
+  answer: PropTypes.string,
+};
+
+export default Question;

components/SponsorPack.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const SponsorPack = ({ name, url, imageUrl }) => (
+  <a className="sponsor-pack" href={url} target="_blank" rel="noopener noreferrer">
+    <img style={{ paddingBottom: '20px' }} className="pack-image" src={imageUrl} alt="sponsor pack"></img>
+    <h2>{name}</h2>
+  </a>
+);
+
+SponsorPack.propTypes = {
+  name: PropTypes.string,
+  url: PropTypes.string,
+  imageUrl: PropTypes.string,
+};
+
+export default SponsorPack;

css/colors.scss

@@ -0,0 +1,7 @@
+$darkblue: #307c9c;
+$darkerblue: #1f4d61;
+$lightblue: #c7e9f4;
+$lighterblue: #dbf4fc;
+$superlightblue: #edfaff;
+
+$white: #ffffff;

css/constants.scss

@@ -0,0 +1,7 @@
+$responsive-threshold: 900px;
+
+$header-height: 20vh;
+$responsive-header-height: $header-height / 2;
+
+$loader-size: 20px;
+$loader-border: 4px;

css/faq.scss

@@ -0,0 +1,62 @@
+@import './colors';
+
+#faq {
+  background: $lighterblue;
+  padding: 20px;
+  border-radius: 10px;
+
+  margin-top: 3rem;
+
+  & > div {
+    margin-top: 2rem;
+    &:first-child {
+      margin-top: 0;
+    }
+
+    h2 {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+    }
+
+    p {
+      word-break: break-word;
+    }
+
+    .question {
+      cursor: pointer;
+      user-select: none;
+
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+
+      margin-top: 0.5rem;
+
+      i {
+        flex-shrink: 0;
+        font-size: 30px;
+
+        margin-left: -8px;
+      }
+
+      p {
+        font-weight: bold;
+        font-size: 20px;
+
+        flex: 1;
+        margin: 0;
+        margin-left: 2px;
+      }
+    }
+
+    .answer > p {
+      margin-top: 0.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    &:last-child > .answer > p {
+      margin-bottom: 0;
+    }
+  }
+}