events updated

gatsby-config.js

@@ -31,6 +31,13 @@ module.exports = {
         path: `${__dirname}/src/blog-posts`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `event-posts`,
+        path: `${__dirname}/src/event-posts`,
+      },
+    },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {

gatsby-node.js

@@ -3,6 +3,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const blogPostTemplate = require.resolve(`./src/templates/BlogTemplate.tsx`);
 
+  const eventPostTemplate = require.resolve(
+    `./src/templates/EventTemplate.tsx`
+  );
+
   const blogsResult = await graphql(`
     {
       allMdx(
@@ -21,12 +25,35 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     }
   `);
 
+  const eventsResult = await graphql(`
+    {
+      allMdx(
+        filter: { fileAbsolutePath: { regex: "/src/event-posts/" } }
+        sort: { order: DESC, fields: [frontmatter___date] }
+        limit: 1000
+      ) {
+        edges {
+          node {
+            frontmatter {
+              path
+            }
+          }
+        }
+      }
+    }
+  `);
+
   // Handle errors
   if (blogsResult.errors) {
     reporter.panicOnBuild(`Error while running GraphQL query.`);
     return;
   }
 
+  if (eventsResult.errors) {
+    reporter.panicOnBuild(`Error while running GraphQL query.`);
+    return;
+  }
+
   blogsResult.data.allMdx.edges.forEach(
     ({
       node: {
@@ -40,4 +67,18 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       });
     }
   );
+
+  eventsResult.data.allMdx.edges.forEach(
+    ({
+      node: {
+        frontmatter: { path },
+      },
+    }) => {
+      createPage({
+        path,
+        component: eventPostTemplate,
+        context: {},
+      });
+    }
+  );
 };

src/components/about/about.tsx

@@ -2,23 +2,36 @@ import React, { FunctionComponent } from "react";
 import { Box, Flex, Text, Button, Heading } from "@chakra-ui/core";
 import { Link } from "gatsby";
 
-const aboutDescription =
-  "We are a non-profit student organization at The University of Hong Kong and welcome all ability levels, from veteran to “Hello World!”. We teach how to tackle a hackathon which is nothing related to “Hacking Computers”. Our aim is to create an environment of innovation, fostering entrepreneurial minds, by providing you with the relevant skills and experience to participate in hackathons and use your capabilities towards building extraordinary things. To achieve these goals, we plan to organize tech talks, done by a student/staff member or inviting a guest speaker to campus. We also aim to share experiences and interest, for example one member may be particularly interested in or skilled with a certain scripting language and could provide an ad hoc crash courses for curious members, preparing them for events.";
-const aboutDescription2 =
-  "HackSoc has taken on the responsibility of organizing an annual hackathon, sponsored by the most prestigious university in Hong Kong, to bring together a community of tech-loving individuals and solve real-world problems. It will also be accompanied by mini-challenges and competitions to promote helpful competition and interaction between the participants. We aspire to have a friendly, collaborative environment of people creating great things with the skills instilled in them throughout the course of membership which are massively sought after in any industry.";
-const visionDescription =
-  "The Hackathon Society is working towards building a community for all students from various disciplines. The main goal is to remove the myths about Hackathon and make it accessible to each and everyone. We plan to achieve this goal by creating activities across campus and opportunities for cross-disciplinary, as well as multinational, collaborative projects. By promoting an attitude favouring curiosity, creativity and collaboration, we hope to inspire students to grow their networks and take initiative to bring their ideas to life. With this in mind, we welcome members from all degree programs who have an interest, or simply wish to learn how to stay safe in the information age.";
+const visionDescription = `The Hackathon Society is working towards building a community for all students from various disciplines. 
+  The  goal is to remove the myths about Hackathon and make it accessible to each and everyone. 
+  We plan to achieve this goal by creating activities across campus and opportunities for cross-disciplinary, 
+  as well as multinational, collaborative projects. 
+  By promoting an attitude favouring curiosity, creativity and collaboration, 
+  we hope to inspire students to grow their networks and take initiative to bring their ideas to life. 
+  With this in mind, we welcome members from all degree programs who have an interest, 
+  or simply wish to learn how to stay safe in the information age.`;
 
 const AboutContent: FunctionComponent = () => (
   <Box>
     <Heading textAlign="center" as="h1" size="2xl">
       About <span style={{ fontWeight: "normal" }}>Us</span>
     </Heading>
     <Text fontSize={["md", "md", "lg", "lg"]} my={5}>
-      {aboutDescription}
+      We are a non-profit student organization at The University of Hong Kong
+      and our society aims to bring together a group of people who loving
+      bringing ideas to reality. We welcome everyone who is enthusiastic to
+      learn and build.
     </Text>
+    <Heading textAlign="center" as="h3" size="xl">
+      Why "Hackathon Society"?
+    </Heading>
     <Text fontSize={["md", "md", "lg", "lg"]} my={5}>
-      {aboutDescription2}
+      We believe that creative prospers when nurtured. Our motto is "fail often,
+      fail fast". We encourage our members to do new things and learn from their
+      mistakes. We do this by organizing small hackathon internally and
+      externally all year round. The Hackathon Society has also taken on the
+      responsibility of organizing a Hackathon which will cater students from
+      all over the globe to increase cross-cultural collaboration.
     </Text>
   </Box>
 );

src/components/advisors/listOfAdvisors.js

@@ -1,7 +1,7 @@
 import freddy from "../../assets/images/advisors/freddy.png";
 import cesar from "../../assets/images/advisors/cesar.png";
-import henry_lau from "../../assets/images/advisors/henry_lau.png";
-import kaimin_shih from "../../assets/images/advisors/kaimin_shih.png";
+// import henry_lau from "../../assets/images/advisors/henry_lau.png";
+// import kaimin_shih from "../../assets/images/advisors/kaimin_shih.png";
 
 export const listOfAdvisors = [
   {
@@ -20,18 +20,18 @@ export const listOfAdvisors = [
     description:
       "Cesar Jung-Harada is a Senior Lecturer for the Design+ Bachelor of Arts and Sciences Programme. He teaches both technical and theoretical aspects of design with an emphasis on invention with social and environmental impact.",
   },
-  {
-    name: "Dr. Henry Y.K. Lau",
-    picture: henry_lau,
-    role: "Advisor",
-    description:
-      "Dr. Lau is the Associate Dean of Engineering (Innovation) at the University of Hong Kong. His research interest includes virtual and augmented reality, and artificial intelligence. He is also interested in the design and evaluation of automated material handling systems using computer simulation. He leads the development of the IMSE CAVE VR system with researchers at the Department of Industrial and Manufacturing Systems Engineering.",
-  },
-  {
-    name: "Dr. Kaimin Shih",
-    picture: kaimin_shih,
-    role: "Advisor",
-    description:
-      "Dr Kaimin Shih is an Associate Professor in the Department of Civil Engineering at the University of Hong Kong (HKU). He received his M.S. and Ph.D. degrees in Environmental Engineering and Science from Stanford University at US. Dr. Shih is a sustainability advocate and his research work is mainly to engineer and employ material properties for innovative waste and water treatment applications. He is particularly interested in exploring pollutant behavior on material surfaces and extensively conducts research projects related to hazardous metals, emerging pollutants, membrane materials, soil remediation, and sludge/ash management.",
-  },
+  // {
+  //   name: "Dr. Henry Y.K. Lau",
+  //   picture: henry_lau,
+  //   role: "Advisor",
+  //   description:
+  //     "Dr. Lau is the Associate Dean of Engineering (Innovation) at the University of Hong Kong. His research interest includes virtual and augmented reality, and artificial intelligence. He is also interested in the design and evaluation of automated material handling systems using computer simulation. He leads the development of the IMSE CAVE VR system with researchers at the Department of Industrial and Manufacturing Systems Engineering.",
+  // },
+  // {
+  //   name: "Dr. Kaimin Shih",
+  //   picture: kaimin_shih,
+  //   role: "Advisor",
+  //   description:
+  //     "Dr Kaimin Shih is an Associate Professor in the Department of Civil Engineering at the University of Hong Kong (HKU). He received his M.S. and Ph.D. degrees in Environmental Engineering and Science from Stanford University at US. Dr. Shih is a sustainability advocate and his research work is mainly to engineer and employ material properties for innovative waste and water treatment applications. He is particularly interested in exploring pollutant behavior on material surfaces and extensively conducts research projects related to hazardous metals, emerging pollutants, membrane materials, soil remediation, and sludge/ash management.",
+  // },
 ];

src/components/event/event.css

@@ -0,0 +1,13 @@
+.event-card {
+  border-radius: 5px;
+  width: 350px;
+  margin: 30px;
+  transition: all 0.4s ease;
+}
+
+.event-description {
+  border-radius: 50;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}

src/components/event/event.tsx

@@ -0,0 +1,41 @@
+import React, { FunctionComponent } from "react";
+import { Heading, Box, Flex, Text, Image, Grid, Link } from "@chakra-ui/core";
+import { EventDetails } from "../../types";
+import { Link as GatsbyLink } from "gatsby";
+import GatsbyImage from "gatsby-image";
+import "./event.css";
+
+const Event: FunctionComponent<EventDetails> = ({
+  path,
+  title,
+  excerpt,
+  date,
+  imageUrl,
+  link,
+}) => {
+  return (
+    <Grid className="event-card" templateRows="60% 40%">
+      <GatsbyLink to={path}>
+        <Image src={imageUrl} />
+        <Flex
+          zIndex={2}
+          className="event-details"
+          align="center"
+          justify="center"
+          textAlign="center"
+          direction="column"
+          p={5}
+        >
+          <Text fontSize={18}>{title}</Text>
+          <Text fontSize={18}>{date}</Text>
+          {/* <Text fontSize={18}>{excerpt}</Text> */}
+          <Link href={link} isExternal fontWeight="bold" fontSize={"20px"}>
+            Register
+          </Link>
+        </Flex>
+      </GatsbyLink>
+    </Grid>
+  );
+};
+
+export default Event;

src/components/event/index.ts

@@ -0,0 +1,2 @@
+import Event from "./event";
+export { Event };

src/components/events/events.tsx

@@ -1,36 +1,35 @@
 import React from "react";
 import { Box, Heading, Text, Button, Flex, Link } from "@chakra-ui/core";
+import { graphql } from "gatsby";
+import { EventDetails } from "../../types";
+import { Event } from "../event";
 
-const eventsDescription =
-  "Hackathon Society brings to you a fast paced challenge for everyone who loves to brainstorm. This event requires no coding or technical expertise. We're looking for fresh, innovative ideas. Hackathon Society introduces IDEATHON, a fast-paced challenge for everyone who loves to LEARN and BUILD something cool. We are fortunate to have Mr Cesar Jung Harada to share his experiences and give expert advice on Design Thinking.";
-
-const EventContent: FunctionComponent = () => (
-  <Box>
-    <Heading textAlign="center" as="h1" size="lg" p={5}>
-      Events
-    </Heading>
-    <Text fontSize={["md", "md", "lg", "lg"]}>{eventsDescription}</Text>
-    <Flex direction="center" justify="center" py={3}>
-      <Button backgroundColor="primary" color="text" _hover={{ bg: "primary" }}>
-        <Link href="https://forms.gle/UQTkp59ZK6jZNNzb8" isExternal>
-          Register
-        </Link>
-      </Button>
+export const Events: FunctionComponent = data => {
+  console.log(data);
+  const events: EventDetails[] = data.allMdx.edges.map(
+    ({ node: { frontmatter: eventDetails } }) => eventDetails as EventDetails
+  );
+  return (
+    <Flex
+      id="events"
+      px={[10, 20, 30, 40]}
+      py={[10, 10, 20, 20]}
+      // color="primary"
+      align="center"
+      textAlign="left"
+      direction="column"
+      backgroundColor="text"
+    >
+      <Box>
+        <Heading width={"100%"} mb={[5]} color="primary" textAlign="center">
+          Upcoming Events
+        </Heading>
+        <Flex maxW="100vw" wrap="wrap" justify="center" align="center">
+          {events.map((eventDetails, index) => (
+            <Event key={index} {...eventDetails} />
+          ))}
+        </Flex>
+      </Box>
     </Flex>
-  </Box>
-);
-
-export const Events: FunctionComponent = () => (
-  <Flex
-    id="events"
-    px={[10, 20, 30, 40]}
-    py={[10, 10, 20, 20]}
-    color="primary"
-    align="center"
-    textAlign="left"
-    direction="column"
-    backgroundColor="text"
-  >
-    <EventContent />
-  </Flex>
-);
+  );
+};

src/components/index.ts

@@ -10,3 +10,4 @@ export { Advisors } from "./advisors";
 export { Events } from "./events";
 export { SEO } from "./seo";
 export { Post } from "./post";
+export { Event } from "./event";

src/components/navbar/routes.ts

@@ -7,14 +7,15 @@ export const routes = [
     id: "about",
     text: "About",
   },
-  {
-    id: "sponsors",
-    text: "Sponsors",
-  },
   {
     id: "team",
     text: "Team",
   },
+  {
+    id: "events",
+    text: "Events",
+    isPage: true,
+  },
   {
     id: "blog",
     text: "Blog",

src/components/team/listOfMembers.js

@@ -7,7 +7,6 @@ import aarushi from "../../assets/images/members/aarushi.jpg";
 import reynard from "../../assets/images/members/reynard.jpg";
 import anuj from "../../assets/images/members/anuj.jpg";
 import pranay from "../../assets/images/members/pranay.jpg";
-import sakina from "../../assets/images/members/sakina.jpg";
 
 export const listOfMembers = [
   {
@@ -90,11 +89,4 @@ export const listOfMembers = [
     description:
       "Pranay is a software developer with a passion for making video games. He loves combining creativity with coding to build out-of-the-box solutions and user-facing products. He is majoring in Computer Science at The University of Hong Kong",
   },
-  {
-    name: "Sakina Bibi",
-    picture: sakina,
-    role: "Head of Creative Design",
-    description:
-      "Sakina is majoring in Global Creative Industries and minoring in Arabic at the University of Hong Kong. She is a polyglot and quirky art enthusiast who's obsessed with felines.",
-  },
 ];

src/components/team/member.tsx

@@ -17,7 +17,7 @@ interface MemberDetails {
 }
 
 interface MemberComponentProps {
-  memberDetails: MembersDetails;
+  memberDetails: MemberDetails;
 }
 
 const MemberInfo: FunctionComponent<MemberComponentProps> = ({

src/event-posts/Hacklympics/hacklympics.md

@@ -0,0 +1,19 @@
+---
+path: "/events/hacklympics"
+date: "2021-26-02"
+title: "Hacklympics"
+excerpt: "If you have been programming in JavaScript for sometimes, chances are you might have used higher order functions somewhere in your code without even realizing it."
+imageUrl: "https://www.founderpassion.org/wp-content/uploads/2017/09/hackathon-founderpassion-foundation.png"
+link: "https://forms.gle/Ej8yrk8G56r9fb1t8"
+status: "Upcoming"
+---
+
+Description:( Who can attend)
+
+How long
+
+Sponsors
+
+Prizes
+
+---

src/event-posts/Ideathon/ideathon.md

@@ -0,0 +1,13 @@
+---
+path: "/events/ideathon"
+date: "2021-26-02"
+title: "Ideathon"
+excerpt: "If you have been programming in JavaScript for sometimes, chances are you might have used higher order functions somewhere in your code without even realizing it."
+imageUrl: "https://www.founderpassion.org/wp-content/uploads/2017/09/hackathon-founderpassion-foundation.png"
+link: "https://forms.gle/Ej8yrk8G56r9fb1t8"
+status: "Past"
+---
+
+If you have been programming in JavaScript for sometimes, chances are you might have used _Higher-Order Functions_ somewhere in your code without even realizing it. Though it sounds like a complex JavaScript lingo, it really isn't that difficult to understand.
+
+---