diff --git a/gatsby-config.js b/gatsby-config.js index 9d95e5e..279dd96 100644 --- a/gatsby-config.js +++ b/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: { diff --git a/gatsby-node.js b/gatsby-node.js index 2ffd6cf..5f630a5 100644 --- a/gatsby-node.js +++ b/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: {}, + }); + } + ); }; diff --git a/src/components/about/about.tsx b/src/components/about/about.tsx index 5aee79d..75635c4 100644 --- a/src/components/about/about.tsx +++ b/src/components/about/about.tsx @@ -2,12 +2,14 @@ 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 = () => ( @@ -15,10 +17,21 @@ const AboutContent: FunctionComponent = () => ( About Us - {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. + + Why "Hackathon Society"? + - {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. ); diff --git a/src/components/advisors/listOfAdvisors.js b/src/components/advisors/listOfAdvisors.js index c08291f..3e0f37d 100644 --- a/src/components/advisors/listOfAdvisors.js +++ b/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.", + // }, ]; diff --git a/src/components/event/event.css b/src/components/event/event.css new file mode 100644 index 0000000..e02a17d --- /dev/null +++ b/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; +} diff --git a/src/components/event/event.tsx b/src/components/event/event.tsx new file mode 100644 index 0000000..b02c50a --- /dev/null +++ b/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 = ({ + path, + title, + excerpt, + date, + imageUrl, + link, +}) => { + return ( + + + + + {title} + {date} + {/* {excerpt} */} + + Register + + + + + ); +}; + +export default Event; diff --git a/src/components/event/index.ts b/src/components/event/index.ts new file mode 100644 index 0000000..0a69bd7 --- /dev/null +++ b/src/components/event/index.ts @@ -0,0 +1,2 @@ +import Event from "./event"; +export { Event }; diff --git a/src/components/events/events.tsx b/src/components/events/events.tsx index cfe64a3..9c5119c 100644 --- a/src/components/events/events.tsx +++ b/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 = () => ( - - - Events - - {eventsDescription} - - +export const Events: FunctionComponent = data => { + console.log(data); + const events: EventDetails[] = data.allMdx.edges.map( + ({ node: { frontmatter: eventDetails } }) => eventDetails as EventDetails + ); + return ( + + + + Upcoming Events + + + {events.map((eventDetails, index) => ( + + ))} + + - -); - -export const Events: FunctionComponent = () => ( - - - -); + ); +}; diff --git a/src/components/index.ts b/src/components/index.ts index 867c996..62ec4c1 100644 --- a/src/components/index.ts +++ b/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"; diff --git a/src/components/navbar/routes.ts b/src/components/navbar/routes.ts index 30e7274..33d7ecd 100644 --- a/src/components/navbar/routes.ts +++ b/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", diff --git a/src/components/team/listOfMembers.js b/src/components/team/listOfMembers.js index 8f4471d..0ce67ad 100644 --- a/src/components/team/listOfMembers.js +++ b/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.", - }, ]; diff --git a/src/components/team/member.tsx b/src/components/team/member.tsx index f000921..a097c53 100644 --- a/src/components/team/member.tsx +++ b/src/components/team/member.tsx @@ -17,7 +17,7 @@ interface MemberDetails { } interface MemberComponentProps { - memberDetails: MembersDetails; + memberDetails: MemberDetails; } const MemberInfo: FunctionComponent = ({ diff --git a/src/event-posts/Hacklympics/hacklympics.md b/src/event-posts/Hacklympics/hacklympics.md new file mode 100644 index 0000000..50f54c3 --- /dev/null +++ b/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 + +--- diff --git a/src/event-posts/Ideathon/ideathon.md b/src/event-posts/Ideathon/ideathon.md new file mode 100644 index 0000000..4afd29c --- /dev/null +++ b/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. + +--- diff --git a/src/pages/events.tsx b/src/pages/events.tsx new file mode 100644 index 0000000..1c022ef --- /dev/null +++ b/src/pages/events.tsx @@ -0,0 +1,78 @@ +import React, { FunctionComponent } from "react"; +import { graphql, Link as GatsbyLink } from "gatsby"; +import { Heading, Box, Flex } from "@chakra-ui/core"; +import { MdArrowBack } from "react-icons/md"; + +import { Layout, SEO, Event, NavBar } from "../components"; +import { EventDetails } from "../types"; +// import { Navbar } from '../components'; + +const Events: FunctionComponent = ({ data }) => { + const events: EventDetails[] = data.allMdx.edges.map( + ({ node: { frontmatter: eventDetails } }) => eventDetails as EventDetails + ); + return ( + + {/* */} + + + + + + + Upcoming Events + + + {events.map((eventDetails, index) => { + if (eventDetails.status == "Upcoming") { + return ; + } + })} + + + Past Events + + + {events.map((eventDetails, index) => { + if (eventDetails.status == "Past") { + return ; + } + })} + + + + ); +}; + +export const eventQuery = graphql` + query { + allMdx( + filter: { fileAbsolutePath: { regex: "/src/event-posts/" } } + sort: { order: DESC, fields: [frontmatter___date] } + limit: 1000 + ) { + edges { + node { + frontmatter { + path + title + excerpt + date + imageUrl + link + status + } + } + } + } + } +`; + +export default Events; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3feeeb5..b1a3108 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,7 @@ import React, { FunctionComponent, useState } from "react"; - +import { graphql } from "gatsby"; import { SEO } from "../components"; +import { EventDetails } from "../types"; import { NavBar, @@ -14,7 +15,10 @@ import { Contact, } from "../components"; -const IndexPage: FunctionComponent<> = () => { +const IndexPage: FunctionComponent = ({ data }) => { + // const events: EventDetails[] = data.allMdx.edges.map( + // ({ node: { frontmatter: eventDetails } }) => eventDetails as EventDetails + // ); const [activeHash, setActiveHash] = useState("#home"); return ( @@ -23,7 +27,7 @@ const IndexPage: FunctionComponent<> = () => { - + @@ -32,4 +36,30 @@ const IndexPage: FunctionComponent<> = () => { ); }; +export const eventQuery = graphql` + query { + allMdx( + filter: { + fileAbsolutePath: { regex: "/src/event-posts/" } + frontmatter: { status: { eq: "Upcoming" } } + } + sort: { order: DESC, fields: [frontmatter___date] } + limit: 1000 + ) { + edges { + node { + frontmatter { + path + title + excerpt + date + imageUrl + link + } + } + } + } + } +`; + export default IndexPage; diff --git a/src/templates/EventTemplate.tsx b/src/templates/EventTemplate.tsx new file mode 100644 index 0000000..fd412f7 --- /dev/null +++ b/src/templates/EventTemplate.tsx @@ -0,0 +1,87 @@ +import React, { FunctionComponent } from "react"; +import { graphql, Link as GatsbyLink } from "gatsby"; +import { Flex, Heading, Text, Link, Box, Image, Button } from "@chakra-ui/core"; +import { MDXProvider } from "@mdx-js/react"; +import { MDXRenderer } from "gatsby-plugin-mdx"; +import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader"; +import { MdArrowBack, MdTimer } from "react-icons/md"; + +import { Layout, SEO } from "../components"; +import { MDXProviderComponents } from "./MDXProviderComponents"; + +deckDeckGoHighlightElement(); +require(`katex/dist/katex.min.css`); + +const EventTemplate: FunctionComponent = ({ data }) => { + const { + mdx: { + frontmatter: { path, title, excerpt, date, imageUrl, link }, + body: content, + }, + } = data; + + const EventHeader: FunctionComponent = () => { + return ( + <> + + + + + + + + + {title} + + + + + {date} + + + + + + + + ); + }; + + return ( + + + + + + + {content} + + + + + ); +}; + +export const eventQuery = graphql` + query($path: String!) { + mdx(frontmatter: { path: { eq: $path } }) { + body + frontmatter { + title + date + path + excerpt + date + imageUrl + link + } + } + } +`; + +export default EventTemplate; diff --git a/src/types/event.ts b/src/types/event.ts new file mode 100644 index 0000000..61325c3 --- /dev/null +++ b/src/types/event.ts @@ -0,0 +1,10 @@ +interface EventDetails { + title: string; + date: string; + path: string; + excerpt: string; + imageUrl: string; + status: string; +} + +export { EventDetails }; diff --git a/src/types/index.ts b/src/types/index.ts index 0d2aafb..9e951be 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1 +1,2 @@ export * from "./post"; +export * from "./event";