hackclub / workshops

💽 Website for Hack Club workshops.

Hack Club Workshops

A set of high-quality coding tutorials for Hack Club meetings.

Introduction

At Hack Club meetings, we believe in everyone learning what they’re interested in, at their own pace. Hack Club Workshops is our repository of high-quality coding tutorials, intended for use at Hack Club meetings.

The content lives in hackclub/hackclub—this is just the website.

Development environment setup

The stack: Next.js & Theme UI, with Hack Club Theme packages & Hack Club Markdown.

Stuff you need installed ahead of time:

• Git
• Yarn
• An operating system (we hope)
• A GitHub personal access token

Clone it!

$ git clone https://github.com/hackclub/workshops

Go into the directory!

$ cd workshops

Install dependencies!

$ yarn

Create a .env file!

$ touch .env

Create a GitHub personal access token and add the token to .env!

$ GITHUB=ghp_token

Run it!

$ yarn run dev

Open it!

$ open http://localhost:3000

License

This project is licensed under the MIT license. Please see LICENSE.md for the full text.

MIT License

workshops's Issues

"Edit this page on GitHub" button broken in workshops

Clicking the "Edit this page on GitHub" button at the bottom of a workshop (I did not test all of them, but I tested a few) gives a 404 page not found error.

Current link for the button on the Personal Website workshop (404):
https://github.com//hackclub/hackclub/edit/master/workshops/personal_website/README.md
Actual link from GitHub's edit button:
https://github.com/hackclub/hackclub/edit/main/workshops/personal_website/README.md

It looks like the issue is due to the button's link targeting a branch named master rather than main.
There is also an extra / in the current link, which does not cause an issue but probably should be removed.

let's add the draw-dino guide that teaches people how to submit PRs

https://draw-dino.hackclub.com is a very valuable resource for beginners.
Right now there's no way to know about it unless someone shares it with you directly.
I recommend adding it to "START HERE"

call it a DRAW-DINO
Submit your first Pull Request to GitHub

bug: Thunderstorm image doesn't render

Nav bar TAB accessibility

For accessibility - Nav search and color switcher in the header are not TAB accessible because they are DIVs. If you change to and add some css style overrides for background:none and border: none, that should fix it!

Add gamelab banner

We should have a sick banner saying gamelab just launched. Maybe this is a workshop card, or maybe a banner like the "announcement" component on hackclub/site. Not sure

Use fallback/regeneration for workshop pages

It’d be great to use fallback: true & revalidate so workshop pages would automatically refresh themselves off GitHub (hackclub/hackclub) instead of rebuilding the entire site on every commit of that repo. (That’s currently happening via a GitHub webhook hitting Vercel, which any HQ member can disable if it’s no longer needed.)

(Bonus: add regeneration to the Conduct page & fallback to VIP Newsletters as well!)

I’m not planning to take this on, but please go for it if you’re feeling inspired! Happy to help.

Certain VIP newsletters aren't loading

Some are working sporadically, and some aren't working at all.

Looks like this rewrite ⬇️ is causing the issue. @sampoder, do you know if it could be removed?

workshops/next.config.js

Lines 17 to 21 in f48a73d

	{
	source: '/vip-newsletters/:slug*',
	destination: 'https://raw.githubusercontent.com/hackclub/vip-newsletters/main/:slug*',
	},

Workshops: Social media thumbnails for more than one author bug out

TL;DR:

• Alignment is weird.
• The profile picture of the second author straight up doesn't show up.

Workshop locales

Doesn't it make more sense for this to be at the beginning of a workshop than at the end?

In a possible scenario where we have a workshop translated to multiple languages, wouldn't it look messy? - I think it would be better if we had a dropdown with the available languages or something like that. I came up with this:

and this

I am opening this issue because I'd like to know what you guys think, and also because i don't know how to implement/add this feature.

Leaders Newsletter showing holly's name, but code for that is nowhere to be found in repo

Add analytics

Use Segment with the same setup as Summer, etc. (Copy the pages/_document.js stuff)

Segment destinations:

• api_db
• Google Analytics

Images in /external-preview mode point to hackclub/hackclub instead of ${user}/hackclub

I think that's here:

workshops/lib/data.js

Line 296 in 3788f40

? `https://raw.githubusercontent.com/hackclub/hackclub/${branch}`

Can I create a workshop?

Can I? :D

Dark Mode Toggle shown on pages with <ForceTheme theme="dark" />

Example https://hackclub.com/covid19

Vercel Deploy needs update

Add a Sprig section

As we are developing more workshops for Sprig, it'd be great to have a section. The text could read "guides to make games using our online editor. Submitted games can win a gaming device." (or something like this). with a link to the sprig homepage!

Design: images and text side-by-side?

Only 38% of the horizontal space in the page is filled by content on Desktop (1080p 16:9). It would be nice for image-heavy workshops to have one column for text and an adjacent column for images. They could be grouped by paragraph, so some text can go together with another image. Sort of like this:

vs currently:

On mobile or narrow windows it could fall back to the current one-column layout.

let's create an easy way for people to leave feedback on workshops

let's make it easy for people to let us know what they think of our workshops, so we can continue to improve them!

suggest at the bottom of the workshop to add something like
"Congrats on making it through this workshop! We'd love feedback-- did you make it through all the way? Was there any point that you got stuck, or was anything confusing? Any ideas you have for improvement? Found a bug? Just want to send the devs some love? "
with a submission field.
it could create a GH issue in the workshops' repo with "for review" as a label