From 92cbf0cc6b14d9b6adc80a47913e7d920236113b Mon Sep 17 00:00:00 2001 From: belle Date: Mon, 21 Aug 2023 15:10:17 +0800 Subject: [PATCH] weee --- components/index/cards/hackers-wanted.js | 77 + lib/carousel.json | 9 + pages/api/address.js | 51 +- pages/hackers-wanted.js | 2316 +++++++++++----------- pages/index.js | 8 +- 5 files changed, 1261 insertions(+), 1200 deletions(-) create mode 100644 components/index/cards/hackers-wanted.js diff --git a/components/index/cards/hackers-wanted.js b/components/index/cards/hackers-wanted.js new file mode 100644 index 00000000..0ea1c136 --- /dev/null +++ b/components/index/cards/hackers-wanted.js @@ -0,0 +1,77 @@ +import CardModel from './card-model' +import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui' +import Buttons from './button' + +/** @jsxImportSource theme-ui */ + +const styled = ` +h3 { + font-family: Terminal_Grotesk; +} +` + +export default function HackersWanted() { + return ( + + + Hackers Wanted + + + + + An 8 minute expression of what it means to be a "hacker". + + + Some people are allergic to unthinking rules and outdated systems. + They want the world to be better, more magical, more free. Some also + have the creative energy to do something about it—without the need + for instructions, and without needing to be asked. These people are + hackers. This is our love letter to them, on behalf of a society + that’s long failed them. + + + + + + Read more... + + + + + + + ) +} diff --git a/lib/carousel.json b/lib/carousel.json index 8d1c2de4..c32c4030 100644 --- a/lib/carousel.json +++ b/lib/carousel.json @@ -97,5 +97,14 @@ "description": "An open source drawing machine and online editor for generative art", "img": "https://emoji.slack-edge.com/T0266FRGM/tw_pencil2/c6afadc2280e571d.png", "link": "https://haxidraw.hackclub.com" + }, + { + "background": "dark", + "titleColor": "white", + "descriptionColor": "white", + "title": "Hackers Wanted", + "description": "Our open love letter to hackers", + "img": "https://cloud-gbwqdsj6z-hack-club-bot.vercel.app/0new_piskel-4.png.png", + "link": "/hackers-wanted" } ] diff --git a/pages/api/address.js b/pages/api/address.js index f9e0d7d9..ae7de42c 100644 --- a/pages/api/address.js +++ b/pages/api/address.js @@ -1,4 +1,3 @@ - import AirtablePlus from 'airtable-plus' const airtable = new AirtablePlus({ @@ -8,43 +7,15 @@ const airtable = new AirtablePlus({ }) export default async function handler(req, res) { - await airtable.create({ - Name: req.body, - Address1:req.body.Address1, - Address2:req.body.Address2, - City:req.body.City, - State:req.body.State, - Postal:req.body.Postal, - Country:req.body.Country - }) + if (req.method === 'POST') { + await airtable.create({ + Name: req.body.Name, + Address1: req.body.Address1, + Address2: req.body.Address2, + City: req.body.City, + State: req.body.State, + Postal: req.body.Postal, + Country: req.body.Country + }) + } } - -// var Airtable = require('airtable') -// var base = new Airtable({ apiKey: 'keyQSNkQEsd4VBPHt' }).base( -// 'appdPydXlWO2ZAhhV' -// ) - -// base('address').create( -// [ -// { -// fields: { -// Name: req.body.Name, -// Address1: req.body.Address1, -// Address2: req.body.Address2, -// City: req.body.City, -// State: req.body.State, -// Postal: req.body.Postal, -// Country: req.body.Country -// } -// }, -// ], -// function (err, records) { -// if (err) { -// console.error(err) -// return -// } -// records.forEach(function (record) { -// console.log(record.getId()) -// }) -// } -// ) \ No newline at end of file diff --git a/pages/hackers-wanted.js b/pages/hackers-wanted.js index de31f9bd..aa7aa8cc 100644 --- a/pages/hackers-wanted.js +++ b/pages/hackers-wanted.js @@ -1,43 +1,42 @@ - - import { - Box, - Button, - Card, - Container, - Grid, - Flex, - Heading, - Image, - Link, - Text - } from 'theme-ui' - import Meta from '@hackclub/meta' - import Head from 'next/head' - import NextLink from 'next/link' - import Nav from '../components/nav' - import SlideDown from '../components/slide-down' - import FadeIn from '../components/fade-in' - import Icon from '../components/icon' - import Footer from '../components/footer' - import { keyframes } from '@emotion/react' - import ForceTheme from '../components/force-theme' - import { useEffect, useState, useRef } from 'react' - import anime from 'animejs/lib/anime.es.js' - import Fade from 'react-reveal/Fade' - import useSWR from 'swr' - import fetcher from '../lib/fetcher' - import { useSession, getSession, signIn, signOut } from 'next-auth/react' - import Draggable from 'react-draggable' - - /** @jsxImportSource theme-ui */ - - // cursor credits to https://linear.app/change - - const styled = ` + Box, + Button, + Card, + Container, + Grid, + Flex, + Heading, + Image, + Link, + Text +} from 'theme-ui' +import Meta from '@hackclub/meta' +import Head from 'next/head' +import NextLink from 'next/link' +import Nav from '../components/nav' +import SlideDown from '../components/slide-down' +import FadeIn from '../components/fade-in' +import Icon from '../components/icon' +import Footer from '../components/footer' +import { keyframes } from '@emotion/react' +import ForceTheme from '../components/force-theme' +import { useEffect, useState, useRef } from 'react' +import anime from 'animejs/lib/anime.es.js' +import Fade from 'react-reveal/Fade' +import useSWR from 'swr' +import fetcher from '../lib/fetcher' +import { useSession, getSession, signIn, signOut } from 'next-auth/react' +import Draggable from 'react-draggable' + +/** @jsxImportSource theme-ui */ + +// cursor credits to https://linear.app/change + +const styled = ` body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23000' d='M8 5h1v1H8z'/%3E%3Cpath fill='%23fff' d='M8 4h1v1H8z'/%3E%3Cpath fill='%23000' d='M8 6h1v1H8zM8 7h1v1H8zM8 8h1v1H8zM8 9h1v1H8zM8 10h1v1H8zM8 11h1v1H8zM8 12h1v1H8zM8 13h1v1H8zM8 14h1v1H8z'/%3E%3Cpath fill='%23000' d='M8 15h1v1H8z' opacity='.8'/%3E%3Cpath fill='%23fff' d='M8 16h1v1H8zM7 5h1v1H7zM7 4h1v1H7zM7 6h1v1H7zM7 7h1v1H7zM7 8h1v1H7zM7 9h1v1H7zM7 10h1v1H7zM7 11h1v1H7zM7 12h1v1H7zM7 13h1v1H7zM7 14h1v1H7zM7 15h1v1H7zM9 5h1v1H9z'/%3E%3Cpath fill='%23000' d='M9 6h1v1H9zM9 7h1v1H9zM9 8h1v1H9zM9 9h1v1H9zM9 10h1v1H9zM9 11h1v1H9zM9 12h1v1H9zM9 13h1v1H9zM9 14h1v1H9z'/%3E%3Cpath fill='%23fff' d='M9 15h1v1H9zM10 6h1v1h-1z'/%3E%3Cpath fill='%23000' d='M10 7h1v1h-1zM10 8h1v1h-1zM10 9h1v1h-1zM10 10h1v1h-1zM10 11h1v1h-1zM10 12h1v1h-1zM10 13h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M10 14h1v1h-1zM11 7h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 8h1v1h-1zM11 9h1v1h-1zM11 10h1v1h-1zM11 11h1v1h-1zM11 12h1v1h-1zM11 13h1v1h-1zM11 14h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M11 15h1v1h-1zM11 16h1v1h-1zM12 8h1v1h-1z'/%3E%3Cpath fill='%23000' d='M12 9h1v1h-1zM12 10h1v1h-1zM12 11h1v1h-1zM12 12h1v1h-1zM12 13h1v1h-1zM12 14h1v1h-1zM12 15h1v1h-1zM12 16h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 17h1v1h-1zM12 18h1v1h-1zM13 9h1v1h-1z'/%3E%3Cpath fill='%23000' d='M13 10h1v1h-1zM13 11h1v1h-1zM13 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 13h1v1h-1zM13 14h1v1h-1z'/%3E%3Cpath fill='%23000' d='M13 15h1v1h-1zM13 16h1v1h-1zM13 17h1v1h-1zM13 18h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 19h1v1h-1zM14 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M14 11h1v1h-1zM14 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M14 13h1v1h-1zM14 15h1v1h-1zM14 16h1v1h-1z'/%3E%3Cpath fill='%23000' d='M14 17h1v1h-1zM14 18h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M14 19h1v1h-1zM15 11h1v1h-1z'/%3E%3Cpath fill='%23000' d='M15 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M15 13h1v1h-1zM15 17h1v1h-1zM15 18h1v1h-1zM16 12h1v1h-1zM16 13h1v1h-1z'/%3E%3C/svg%3E") 7 4, default; background: #17171d; + color: #ffffff; } h1 { font-family: Terminal_Grotesk; @@ -84,276 +83,209 @@ import { } ` - - const CTA = ({ image, text, link, click, ...props }) => { - return ( + +const CTA = ({ image, text, link, click, ...props }) => { + return ( + + + + {text} + + + ) +} + +const Hack = ({ children, delay, ...props }) => { + return ( + - - - {text} - + @{children} - ) - } - - const Hack = ({ children, delay, ...props }) => { - return ( - - - @{children} - - - ) - } - - const Page = () => { - const [scrolled, setScrolled] = useState(false) - const [scrolled2, setScrolled2] = useState(false) - // const [sessionState, setSessionState] = useState(false) - - const { data: hackers } = useSWR( - 'https://airbridge.hackclub.com/v0.1/Hackers%20Wanted/hackers', - fetcher, - { refreshInterval: 1000 } - ) - - const { data: session, status } = useSession() - - async function sign() { - if (status == 'authenticated') { - await fetch('/api/hackers-wanted', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - Username: session.user.name, - Email: session.user.email - }) - }) - } - } - - const [submitting, setSubmitting] = useState(false) - const [submitted, setSubmitted] = useState(false) - const formRef = useRef(null) - - const handleSubmit = async e => { - e.preventDefault() - - await fetch('/api/address', { + + ) +} + +const Page = () => { + const [scrolled, setScrolled] = useState(false) + const [scrolled2, setScrolled2] = useState(false) + // const [sessionState, setSessionState] = useState(false) + + const { data: hackers } = useSWR( + 'https://airbridge.hackclub.com/v0.1/Hackers%20Wanted/hackers', + fetcher, + { refreshInterval: 1000 } + ) + + const { data: session, status } = useSession() + + async function sign() { + if (status == 'authenticated') { + await fetch('/api/hackers-wanted/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ - Username: e.target.Name.value, - Email: e.target.Address1.value - // Name: e.target.Name.value, - // Address1: e.target.Address1.value, - // Address2: e.target.Address2.value, - // City: e.target.City.value, - // State: e.target.State.value, - // Postal: e.target.Postal.value, - // Country: e.target.Country.value + Username: session.user.name, + Email: session.user.email }) }) - - formRef.current.reset() - setSubmitted(true) } - useEffect(() => { - const onScroll = () => { - const newState = window.scrollY >= 16 - setScrolled(newState) - } - - const onScroll2 = () => { - const newState = - window.innerHeight + Math.ceil(window.pageYOffset) + 400 >= - document.body.offsetHeight - setScrolled2(newState) - console.log('yay' + Math.ceil(window.pageYOffset)) - } - - if (typeof window !== 'undefined') { - window.addEventListener('scroll', onScroll) - window.addEventListener('scroll', onScroll2) - } - }, []) - - useEffect(() => { - if (scrolled) { - anime.timeline().add({ - targets: '#nav', - duration: 8000, - opacity: 0 + } + + const [submitting, setSubmitting] = useState(false) + const [submitted, setSubmitted] = useState(false) + const formRef = useRef(null) + + const handleSubmit = async e => { + e.preventDefault() + + await fetch('/api/address/', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + Name: e.target.Name.value, + Address1: e.target.Address1.value, + Address2: e.target.Address2.value, + City: e.target.City.value, + State: e.target.State.value, + Postal: e.target.Postal.value, + Country: e.target.Country.value + }) + }) + + formRef.current.reset() + setSubmitted(true) + } + useEffect(() => { + const onScroll = () => { + const newState = window.scrollY >= 16 + setScrolled(newState) + } + + const onScroll2 = () => { + const newState = + window.innerHeight + Math.ceil(window.pageYOffset) + 400 >= + document.body.offsetHeight + setScrolled2(newState) + console.log('yay' + Math.ceil(window.pageYOffset)) + } + + if (typeof window !== 'undefined') { + window.addEventListener('scroll', onScroll) + window.addEventListener('scroll', onScroll2) + } + }, []) + + useEffect(() => { + if (scrolled) { + anime.timeline().add({ + targets: '#nav', + duration: 8000, + opacity: 0 + }) + anime + .timeline() + .add({ + targets: '#cta1', + duration: 500, + opacity: 1 }) + .add({ + targets: '#cta2', + duration: 500, + opacity: 1 + }) + .add({ + targets: '#cta3', + duration: 500, + opacity: 1 + }) + .add({ + targets: '#cta4', + duration: 500, + opacity: 1 + }) + } else { + anime.timeline().add({ + targets: '#nav', + duration: 8000, + opacity: 1 + }) + } + }, [scrolled]) + + useEffect(() => { + if (window.innerWidth > '400') { + if (scrolled2) { anime .timeline() .add({ targets: '#cta1', - duration: 500, - opacity: 1 + duration: 230, + opacity: 0 }) .add({ targets: '#cta2', - duration: 500, - opacity: 1 + duration: 230, + opacity: 0 }) .add({ targets: '#cta3', - duration: 500, - opacity: 1 + duration: 230, + opacity: 0 }) - .add({ - targets: '#cta4', - duration: 500, - opacity: 1 - }) - } else { - anime.timeline().add({ - targets: '#nav', - duration: 8000, - opacity: 1 - }) - } - }, [scrolled]) - - useEffect(() => { - if (window.innerWidth > '400') { - if (scrolled2) { - anime - .timeline() - .add({ - targets: '#cta1', - duration: 230, - opacity: 0 - }) - .add({ - targets: '#cta2', - duration: 230, - opacity: 0 - }) - .add({ - targets: '#cta3', - duration: 230, - opacity: 0 - }) - .add( - { - targets: '#b-cta1', - duration: 210, - opacity: 1 - }, - '-=400' - ) - .add({ - targets: '#b-cta2', - duration: 210, - opacity: 1 - }) - .add({ - targets: '#b-cta3', - duration: 210, - opacity: 1 - }) - .add({ - targets: '#b-cta4', - duration: 210, - opacity: 1 - }) - } else { - anime - .timeline() - .add({ + .add( + { targets: '#b-cta1', duration: 210, - opacity: 0 - }) - .add({ - targets: '#b-cta2', - duration: 210, - opacity: 0 - }) - .add({ - targets: '#b-cta3', - duration: 210, - opacity: 0 - }) - .add({ - targets: '#b-cta4', - duration: 210, - opacity: 0 - }) - .add( - { - targets: '#cta1', - duration: 230, - opacity: 1 - }, - '-400' - ) - .add({ - targets: '#cta2', - duration: 230, opacity: 1 - }) - .add({ - targets: '#cta3', - duration: 230, - opacity: 1 - }) - } - } else { - anime - .timeline() - .add({ - targets: '#b-cta1', - duration: 210, - opacity: 1 - }) + }, + '-=400' + ) .add({ targets: '#b-cta2', duration: 210, @@ -369,267 +301,336 @@ import { duration: 210, opacity: 1 }) + } else { + anime + .timeline() + .add({ + targets: '#b-cta1', + duration: 210, + opacity: 0 + }) + .add({ + targets: '#b-cta2', + duration: 210, + opacity: 0 + }) + .add({ + targets: '#b-cta3', + duration: 210, + opacity: 0 + }) + .add({ + targets: '#b-cta4', + duration: 210, + opacity: 0 + }) + .add( + { + targets: '#cta1', + duration: 230, + opacity: 1 + }, + '-400' + ) + .add({ + targets: '#cta2', + duration: 230, + opacity: 1 + }) + .add({ + targets: '#cta3', + duration: 230, + opacity: 1 + }) } - }, [scrolled2]) - - function displayModal(id) { - if (typeof window !== 'undefined') { - document.getElementById(id).style.display = 'flex' - } + } else { + anime + .timeline() + .add({ + targets: '#b-cta1', + duration: 210, + opacity: 1 + }) + .add({ + targets: '#b-cta2', + duration: 210, + opacity: 1 + }) + .add({ + targets: '#b-cta3', + duration: 210, + opacity: 1 + }) + .add({ + targets: '#b-cta4', + duration: 210, + opacity: 1 + }) } - - function closeModal(id) { - if (typeof window !== 'undefined') { - document.getElementById(id).style.display = 'none' - } + }, [scrolled2]) + + function displayModal(id) { + if (typeof window !== 'undefined') { + document.getElementById(id).style.display = 'flex' } - - return ( - <> - -