Git Product home page Git Product logo

site's Introduction

Hack Club logo

The source code for hackclub.com

Hack Club's new website. This codebase is what runs on hackclub.com. For new developers getting started, run the following in your terminal:

Download the code to your computer:

$ git clone https://github.com/hackclub/site && cd site

Install dependencies:

$ yarn

Start running the website on your computer:

$ yarn dev

And then open up your web browser and go to localhost:3000.

Please note: There are a number of redirects and rewrites essential to the website's functionality, which you can see in next.config.mjs.

Powered by Next.js with MDX, Theme UI, & Hack Club Theme.

Code under MIT License, assets may not be re-used or re-distributed.


Building hackclub.com

Join us in building Hack Club's homepage and show new hackers what Hack Club could be for them πŸ’–.

See something that could be better? Make a PR! Have an easter egg idea? Make a PR! Is the site missing something? Make a PR! (Do you see a trend? :))

If you need to add content to the site, here's how you can:

Create a new card Screenshot 2023-08-16 at 9 09 55 PM

Most things on the homepage are cards, modular components that can easily be added and removed according to relevancy to Hack Clubbers. There are 3 main sections: connection, open-source, and IRL community. Most new cards will likely fall within the first two sections!

First, you can create a new file under components/index/cards with the name of your new event/project. Next add import CardModel from './card-model' and add whatever you want :) Finally, use a component (import Buttons from './button') to highlight call-to-action buttons. If it's the main button, use the primary prop to add a background color!

Your challenge: try and make the card as unique as possible, like a mini poster! Not sure where to start? Look at other cards on the page :)

Add to the carousel Screenshot 2023-08-16 at 9 09 11 PM

If there's a Hack Club or Hack Club community-led project (past or present) that Hack Clubbers can get involved in, please add it to lib/carousel.json and add your card to the end of the json file. An example looks like this:

{
    "background": "dark",
    "titleColor": "white",
    "descriptionColor": "white",
    "title": "Hackers Wanted",
    "description": "Our open love letter to hackers",
    "img": "https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/[email protected]",
    "link": "/hackers-wanted"
  }

Every week, thousands of people visit hackclub.com. What story to you want to tell?

Have questions? Join us in #hackclub-site-dev and to learn more about the style guide at Hack Club check this out


Hack Club, 2023. MIT License.

site's People

Contributors

aaronw-dev avatar abbyfischler avatar bellesea avatar christinaasquith avatar cjdenio avatar dependabot[bot] avatar exu3 avatar faisalsayed10 avatar garyhtou avatar grymmy avatar ivoinestrachan avatar josiasaurel avatar kognise avatar lachlanjc avatar leomcelroy avatar lucasht22 avatar malted avatar matthewstanciu avatar maxwofford avatar mutammim avatar nilaram avatar recursiveforte avatar sampoder avatar sarthaktexas avatar serenityux avatar snoglobe avatar tobyab avatar tregsthedev avatar yodalightsabr avatar zachlatta avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

site's Issues

AMAs page could use an update

Let's have a screenshot from each AMA we've had scroll across the top instead of the static one of Elon's AMA - or some other way to make that page look fresh

Navbar not rendering in development

In development, the navbar doesn't show up for some reason.
Was able to reproduce this issue locally, in a Codespaces environment and seems like #305 had a similar issue.

Screen Shot 2022-01-19 at 4 10 16 PM

Slack signup disable feature

We've had to occasionally lock down our slack signup form and API when someone tweets about us (most recently Vitalik).

In the past these have been kinda last-second and could be so much better (see #338).
Screen Shot 2022-02-07 at 09 58 39

It'd be cool to have a nice looking waitlist form that can be enabled that explains our signups are temporarily locked down but a user can fill out the form to join the waitlist, and we'll review applications in a couple days.

Update Slack Channels on Website

It would be nice to update the Slack channels portion of the website so that it's more up-to-date and gives smaller channels more exposure!

typescript

πŸ‘‰πŸ‘ˆ
may help that i've typed @hackclub/theme already

Weird Underline Bug (?)

captured

Page: https://hackclub.com

Was trying to think off how we could design the new summer site, found this weird bug where whatever of "Online Clubs" or "Hackathons" is always highlighted no matter which of the two is being hovered over. (does that make sense?) the way to check it would be to go to the site and just play around hovering each of the links. I'm on MacOS with Chrome

Add Prettier to devDependencies

I would like to add it since npx'ing it all the time is icky. This way we can add it to package.json's scripts and integrate it with eslint too.

Application Email address validation

Looks like from the first time you input a wrong email address even when corrected there is still this pop up saying the address does not exist
I had to refresh the page and included"WWW." before my email address

Autofill continent from IP

It'd be awesome to autofill this from where the user connects from. Let's keep the dropdown b/c ip geocoding is inaccurate, but a nice touch while filling out a form.

Screen Shot 2022-04-07 at 16 33 02

Hack Club Bank Climate Directory

Tasks

  1. 0 of 4
    Bank Directory
    YodaLightsabr
  2. 0 of 3
    Bank Directory
    YodaLightsabr
  3. 0 of 4
    Bank Directory
    YodaLightsabr
  4. Bank Directory
    garyhtou

Chrome autofill on /bank breaks styling of form

@summerplaybook was going through the application flow on /bank and ran into the below issue. Steps below to reproduce:

  1. Go to https://hackclub.com/bank/ in Chrome

  2. Scroll to bottom and allow Chrome to autofill your name and address

  3. Notice that the text is pure black (see screenshot below)

image

(what it should look like)

image


We should fix the styling so text that is autofilled by Chrome looks the same as text that you type yourself.

Bank Climate Directory: Region pages

Tasks

Add More Stickers!

  • Assemble Logo Sticker
  • Hackers, assemble!
  • Bank Card
  • Bank Long Sticker (Light Mode)
  • Bank Long Sticker (Dark Mode)
  • Bank Logo (Dark Mode)
  • Hack Club Design Awards Sticker
  • Sprig Orpheus
  • Sprig Sticker Sheet
  • Zephyr Sticker
  • Orpheus sledding

These are just the ones that I remember, there are probably a bunch more. The Sprig ones might not be final.

Add better social image for homepage

Currently, the main page social image is this:

Screen Shot 2019-09-17 at 00 02 31

I think we can pick a better one to match all the other pages that have specifically crafted social images with a headline + better graphic.

Slack invites are slow

It took me a full 10 seconds to get a Slack invite. This may be caused on the hackclub/toriel side of the invite process, or on the hackclub/site side

delay.mov

"Sign in" button on /bank

I've accidentally gone to hackclub.com/bank multiple times when I meant to go to bank.hackclub.com– let's add a link!

icon-square.png is not opening!

When I tried downloading the icon-square.png it shows an error saying access denied!
Link to the png: https://assets.hackclub.com/icon-square.png
This is the error: This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error> <Code>AccessDenied</Code> <Message>Access Denied</Message> <RequestId>6CAD7BB19A1EDCB6</RequestId> <HostId> yHUiu3N5+hS8LNmrHKB7j+yfTnppNE4wFva934BOf2WnFteKtRcXRZ+qqwUWkjheLKyrADKA1mI= </HostId> </Error>

Bank Climate Directory: Home page

Tasks

Invalid next.config.js options

warn  - Invalid next.config.js options detected: 
  - The root value has an unexpected property, webpackDevMiddleware, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, configOrigin, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, target, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, webpack5, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The value at .amp.canonicalBase must be 1 character or more but it was 0 characters.
  - The value at .assetPrefix must be 1 character or more but it was 0 characters.
  - The value at .experimental.outputFileTracingRoot must be 1 character or more but it was 0 characters.
  - The value at .i18n must be an object but it was null.

See more info here: https://nextjs.org/docs/messages/invalid-next-config

Seems to be a next-compose-plugins issue? I tried removing it following this advice but it didn't seem to work.

Upcoming Hackathons Text Bug

image
It displays the current month (i presume) or just December instead of the actual month of the upcoming hackathons in the list. It is still correct on the hackathons site.

Adults in the Slack

Screenshot 2023-02-15 at 16 50 06

Currently, we don't check to see if someone is an adult. That said, if they select "Tertiary education", we flag them as an adult in the Slack. We're just a community for high schoolers, so let's actually alert the user here that adults & college-aged students aren't allowed in the Slack.

APIs aren't working

Hello!
It looks like hackclub.com/api/channels/dogs and hackclub.com/api/channels/counttoamillion are 404ing right now. Might have had to do with the recent transition of a bunch of pages from v2 to v3. I don't know much about server-side stuff, but I think v3 isn't recognizing the paths, so it's forwarding them to v2.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.