From 46bce3d34335ce289ea271ba309ea54e21f691ad Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 22 Feb 2023 08:54:58 -0500 Subject: [PATCH] New toolbox! (#32) * Delete all the files * Rebuild * Force push * Media queries * Update manifest.js (#31) updated categories and content. please review Co-authored-by: Jianmin Chen <59099858+jianmin-chen@users.noreply.github.com> * Fix cards on tablets * Update README.md * Update README.md * Make some changes --------- Co-authored-by: jianmin-chen Co-authored-by: Holly Delisle Co-authored-by: Jianmin Chen <59099858+jianmin-chen@users.noreply.github.com> --- .gitignore | 39 +- .prettierignore | 42 +- LICENSE | 0 README.md | 99 +- components/Card.js | 291 ++ components/CurrentCard.js | 144 + components/Map.js | 136 + components/Plausible.js | 11 + components/color-switcher.js | 39 - components/mdx/Alert.js | 19 + components/{code.js => mdx/Code.js} | 17 +- components/mdx/MDXContent.js | 114 + components/plausible.js | 11 - content/codeday.mdx | 13 +- content/figma.mdx | 14 +- content/orpheus.mdx | 0 content/postman.mdx | 0 content/stickers.mdx | 7 +- content/zoom.mdx | 3 - lib/content.js | 43 + lib/github.js | 35 + lib/utils.js | 16 + manifest.js | 224 +- next.config.js | 10 +- package.json | 42 +- pages/404.js | 10 + pages/[slug].js | 921 ++-- pages/_app.js | 46 +- pages/_document.js | 22 - pages/api/[key].js | 11 +- pages/api/auth/[...nextauth].js | 4 +- prettier.config.js | 0 public/adafruit-banner.jpg | Bin public/club-stats.png | Bin public/codeday.png | Bin public/dino_handing_docs-2.png | Bin public/leaflet.css | 649 +++ public/robots.txt | 0 public/scrollbar.css | 0 public/sparkle.svg | 3 + public/style.css | 0 styles/globals.css | 112 + yarn.lock | 6272 ++++++++++----------------- 43 files changed, 4663 insertions(+), 4756 deletions(-) mode change 100644 => 100755 .gitignore mode change 100644 => 100755 .prettierignore mode change 100644 => 100755 LICENSE mode change 100755 => 100644 README.md create mode 100644 components/Card.js create mode 100755 components/CurrentCard.js create mode 100755 components/Map.js create mode 100755 components/Plausible.js delete mode 100644 components/color-switcher.js create mode 100755 components/mdx/Alert.js rename components/{code.js => mdx/Code.js} (64%) mode change 100644 => 100755 create mode 100644 components/mdx/MDXContent.js delete mode 100644 components/plausible.js mode change 100644 => 100755 content/codeday.mdx mode change 100644 => 100755 content/figma.mdx mode change 100644 => 100755 content/orpheus.mdx mode change 100644 => 100755 content/postman.mdx mode change 100644 => 100755 content/stickers.mdx mode change 100644 => 100755 content/zoom.mdx create mode 100644 lib/content.js create mode 100755 lib/github.js create mode 100755 lib/utils.js mode change 100644 => 100755 manifest.js mode change 100644 => 100755 next.config.js create mode 100644 pages/404.js delete mode 100644 pages/_document.js mode change 100644 => 100755 pages/api/[key].js mode change 100644 => 100755 pages/api/auth/[...nextauth].js mode change 100644 => 100755 prettier.config.js mode change 100644 => 100755 public/adafruit-banner.jpg mode change 100644 => 100755 public/club-stats.png mode change 100644 => 100755 public/codeday.png mode change 100644 => 100755 public/dino_handing_docs-2.png create mode 100755 public/leaflet.css mode change 100644 => 100755 public/robots.txt mode change 100644 => 100755 public/scrollbar.css create mode 100755 public/sparkle.svg mode change 100644 => 100755 public/style.css create mode 100755 styles/globals.css diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 index 4c3be91..1e7bb00 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,36 @@ -.now -.next -node_modules +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.yarn +/.pnp +.pnp.js +.pnp.cjs +.pnp.loader.mjs +package-lock.json + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc .DS_Store -.env -package-lock.json +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel .vercel diff --git a/.prettierignore b/.prettierignore old mode 100644 new mode 100755 index 5479015..a264ca3 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,36 @@ -/.git -/.next -/node_modules -package.json -package-lock.json -yarn.lock \ No newline at end of file +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.yarn +/.pnp +.pnp.js +.pnp.cjs +.pnp.loader.mjs +package-lock.json + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel diff --git a/LICENSE b/LICENSE old mode 100644 new mode 100755 diff --git a/README.md b/README.md old mode 100755 new mode 100644 index d136917..a27143c --- a/README.md +++ b/README.md @@ -1,5 +1,9 @@ -

Hack Club logo

-

Hack Club Toolbox

+

+ Hack Club logo +

+

+ The new Hack Club Toolbox! +

Deals for Hack Clubbers—powered by [Next.js], [Theme UI] & [MDX]. @@ -7,6 +11,93 @@ Deals for Hack Clubbers—powered by [Next.js], [Theme UI] & [MDX]. [mdx]: https://mdxjs.com [theme ui]: http://theme-ui.com ---- +## How do I add a card? -By [@sampoder](https://github.com/sampoder) for Hack Club, 2021. MIT License. +All the cards except for the current ones are stored in `manifest.js`. If you take a look at it, you'll notice it's in JSON: + +```js +export default [ + { + category: 'Perks', + color: 'primary', + icon: 'bag', + items: [ + { + name: 'Zoom Pro Meetings', + description: 'Run Zoom Pro meetings for free in your Hack Club', + icon: 'welcome', + external: false, + url: '/zoom.mdx', + forUseBy: 'clubbers' + }, + ... + ] + }, + ... +] +``` + +To add a card to an existing category, you simply add to the cards in the category, like so: + +```diff +export default [ + { + category: 'Perks', + color: 'primary', + icon: 'bag', + items: [ + { + name: 'Zoom Pro Meetings', + description: 'Run Zoom Pro meetings for free in your Hack Club', + icon: 'welcome', + external: false, + url: '/zoom.mdx', + forUseBy: 'clubbers' + }, ++ { ++ name: 'Theme', ++ description: "Hack Club's theme, using Theme UI", ++ icon: 'grid', ++ external: true, ++ url: 'https://theme.hackclub.com', ++ forUseBy: 'everyone' ++ } + ] + }, +``` + +To add a new category, you'll follow a similar pattern at the bottom of the file: + +```diff +export default [ + { + category: 'Perks', + color: 'primary', + icon: 'bag', + items: [ + { + name: 'Zoom Pro Meetings', + description: 'Run Zoom Pro meetings for free in your Hack Club', + icon: 'welcome', + external: false, + url: '/zoom.mdx', + forUseBy: 'clubbers' + }, + ] + }, ++ { ++ category: '', ++ color: '', ++ icon: '' ++ items: [ ++ ... ++ ] ++ } +] +``` + +_For `color` and `icon`, you can use [Hack Club's theme](https://theme.hackclub.com)._ + +When you edit the file to make these changes, you'll be asked to make a pull request. + +Let us know if you have any questions in [Slack](https://hackclub.slack.com)! diff --git a/components/Card.js b/components/Card.js new file mode 100644 index 0000000..61b8ae6 --- /dev/null +++ b/components/Card.js @@ -0,0 +1,291 @@ +import { Box, Card, Flex, Heading, Text, Link, Badge } from 'theme-ui' +import Icon from '@hackclub/icons' +import { useRouter } from 'next/router' +import { buildRoute } from '../lib/utils' + +export function InternalCard({ + item, + onMobile, + onHover, + onHoverLeave, + categories, + query, + sx = {} +}) { + const router = useRouter() + return ( + + router.push( + buildRoute({ + route: item.url, + categories, + query + }), + undefined, + { + scroll: false + } + ) + } + target={!item.external ? '' : '_blank'} + sx={{ + textDecoration: 'none', + alignSelf: 'flex-start', + zIndex: 999, + cursor: 'pointer', + transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out', + ':hover,:focus': { + transform: 'scale(1.0225)' + }, + p: '0 !important', + ...(!onMobile && { + '@media screen and (min-width: 992px)': { + maxHeight: '175px', + position: 'relative', + '::after': { + content: '""', + position: 'absolute', + zIndex: 1, + bottom: 0, + left: 0, + pointerEvents: 'none', + backgroundImage: + 'linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%)', + width: '100%', + height: '75px' + }, + ':hover': { + overflow: 'visible', + zIndex: 1000, + '::after': { + display: 'none' + }, + '.more': { + display: 'none' + } + } + } + }), + ...sx + }} + onMouseEnter={onHover} + onMouseLeave={onHoverLeave} + > + + + + + + {item.icon && } + + + {item.name} + + + {item.description} + + + {item.current && ( + + #current + + )} + {item.category && ( + + #{item.category.toLowerCase()} + + )} + + + + ) +} + +export function ExternalCard({ + item, + onMobile, + onHover, + onHoverLeave, + sx = {} +}) { + return ( + + + + + + + {item.icon && } + + + {item.name} + + + {item.description} + + + {item.current && ( + + #current + + )} + {item.category && ( + + #{item.category.toLowerCase()} + + )} + + + + ) +} + +export default function InfoCard(props) { + if (props.item.external) return + else return +} diff --git a/components/CurrentCard.js b/components/CurrentCard.js new file mode 100755 index 0000000..6980fb0 --- /dev/null +++ b/components/CurrentCard.js @@ -0,0 +1,144 @@ +import { Box, Card, Image, Link, Text } from 'theme-ui' +import Icon from '@hackclub/icons' +import { useState } from 'react' + +export default function CurrentCard({ + item, + sx = {}, + onMobile, + onHover, + onHoverLeave +}) { + const { + background, + titleColor, + descriptionColor, + title, + description, + img, + url + } = item + return ( + + + onHover()} + onMouseLeave={() => onHoverLeave()} + sx={{ + mr: 3, + backgroundColor: background, + position: 'relative', + p: '0 !important', + width: '100%', + '@media screen and (max-width: 992px)': { + height: '100%' + }, + height: onMobile ? '100%' : 'initial', + ...(!onMobile && { + '@media screen and (min-width: 992px)': { + maxHeight: '175px', + position: 'relative', + '::after': { + content: '""', + position: 'absolute', + zIndex: 1, + bottom: 0, + left: 0, + pointerEvents: 'none', + backgroundColor: background, + width: '100%', + height: '25px' + }, + ':hover': { + overflow: 'visible', + zIndex: 1000, + '::after': { + display: 'none' + }, + '.more': { + display: 'none' + } + } + } + }) + }} + > + + + + + + + {title} + + + {description} + + + + + + ) +} diff --git a/components/Map.js b/components/Map.js new file mode 100755 index 0000000..f6648c9 --- /dev/null +++ b/components/Map.js @@ -0,0 +1,136 @@ +import styled from '@emotion/styled' +import { useState, useEffect } from 'react' +import { Box, Card, Embed } from 'theme-ui' +import { + MapContainer, + TileLayer, + Marker, + Popup, + Tooltip, + useMapEvents +} from 'react-leaflet' +import 'leaflet/dist/leaflet.css' +import L from 'leaflet' + +const mapIcon = new L.Icon({ + iconUrl: 'https://assets.hackclub.com/icon-rounded.png', + iconRetinaUrl: 'https://assets.hackclub.com/icon-rounded.png', + iconAnchor: null, + popupAnchor: null, + shadowUrl: null, + shadowSize: null, + shadowAnchor: null, + iconSize: new L.Point(20, 20), + popupAnchor: [0, 0] +}) + +const StyledMapContainer = styled(MapContainer)` + position: absolute; + top: 0; + left: 0; +` + +function MapEvents({ showFrame }) { + const map = useMapEvents({ + dblclick() { + window.open('https://hackclub.github.io/map/', '_blank') + } + }) +} + +export default function Map() { + const [clubs, setClubs] = useState([]) + const [center, setCenter] = useState( + window.innerWidth > 767.98 ? [35.683, -25.099] : [55, -100] + ) + const [frame, setFrame] = useState(false) // Originally used to overlay a map over entire page. Not in use right now + + useEffect(() => { + fetch( + 'https://api2.hackclub.com/v0.1/Club%20Applications/Clubs%20Dashboard' + ) + .then(res => res.json()) + .then(json => { + setClubs( + json + .filter( + club => + club.fields.Status && + club.fields.Status != 'inactive' && + club.fields.Status != 'unknown' && + club.fields.Latitude && + club.fields.Longitude + ) + .map(club => ({ + latitude: club.fields.Latitude, + longitude: club.fields.Longitude, + venue: club.fields.Venue + })) + ) + }) + .catch(err => console.log(err)) + }, []) + + return ( + <> + + + {clubs.map((club, idx) => ( + + {club.venue} + + ))} + setFrame(true)} /> + + {frame === true && ( + setFrame(false)} + sx={{ + background: 'rgba(0, 0, 0, 0.1)', + width: '100%', + height: '100vh', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + position: 'fixed', + zIndex: 9999, + top: 0, + left: 0 + }} + > + + event.stopPropagation()} + > + + + + )} + + ) +} diff --git a/components/Plausible.js b/components/Plausible.js new file mode 100755 index 0000000..99b76f0 --- /dev/null +++ b/components/Plausible.js @@ -0,0 +1,11 @@ +import Script from 'next/script' + +export default function Plausible() { + return ( +