Skip to content
BranchesTags

Repository files navigation

Hack Club logo

Hack Club's Site (v3)

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 cardScreenshot 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 carouselScreenshot 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/1f4bb@2x.png",
"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.

About

🌈 The new, new Hack Club website (uses Next.js & Theme UI).

hackclub.com

Resources

Readme
License
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - RhysMP/site: 🌈 The new, new Hack Club website (uses Next.js & Theme UI). · GitHub
Skip to content
BranchesTags
Repository files navigation
Hack Club logo
Hack Club's Site (v3)
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 cardScreenshot 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 carouselScreenshot 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/1f4bb@2x.png",
"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.
About
🌈 The new, new Hack Club website (uses Next.js & Theme UI).
hackclub.com
Resources
Readme
License
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - RhysMP/site: 🌈 The new, new Hack Club website (uses Next.js & Theme UI). · GitHub
Skip to content
BranchesTags
Repository files navigation
Hack Club logo
Hack Club's Site (v3)
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 cardScreenshot 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 carouselScreenshot 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/1f4bb@2x.png",
"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.
About
🌈 The new, new Hack Club website (uses Next.js & Theme UI).
hackclub.com
Resources
Readme
License
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - RhysMP/site: 🌈 The new, new Hack Club website (uses Next.js & Theme UI). · GitHub
Skip to content
BranchesTags
Repository files navigation
Hack Club logo
Hack Club's Site (v3)
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 cardScreenshot 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 carouselScreenshot 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/1f4bb@2x.png",
"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.
About
🌈 The new, new Hack Club website (uses Next.js & Theme UI).
hackclub.com
Resources
Readme
License
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - RhysMP/site: 🌈 The new, new Hack Club website (uses Next.js & Theme UI). · GitHub
Skip to content
BranchesTags
Repository files navigation
Hack Club logo
Hack Club's Site (v3)
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 cardScreenshot 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 carouselScreenshot 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/1f4bb@2x.png",
"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.
About
🌈 The new, new Hack Club website (uses Next.js & Theme UI).
hackclub.com
Resources
Readme
License
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - RhysMP/site: 🌈 The new, new Hack Club website (uses Next.js & Theme UI). · GitHub
Skip to content
BranchesTags
Repository files navigation
Hack Club logo
Hack Club's Site (v3)
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 cardScreenshot 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 carouselScreenshot 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/1f4bb@2x.png",
"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.
About
🌈 The new, new Hack Club website (uses Next.js & Theme UI).
hackclub.com
Resources
Readme
License
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - RhysMP/site: 🌈 The new, new Hack Club website (uses Next.js & Theme UI). · GitHub
Skip to content
BranchesTags
Repository files navigation
Hack Club logo
Hack Club's Site (v3)
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 cardScreenshot 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 carouselScreenshot 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/1f4bb@2x.png",
"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.
About
🌈 The new, new Hack Club website (uses Next.js & Theme UI).
hackclub.com
Resources
Readme
License
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - RhysMP/site: 🌈 The new, new Hack Club website (uses Next.js & Theme UI). · GitHub
Skip to content
BranchesTags
Repository files navigation
Hack Club logo
Hack Club's Site (v3)
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 cardScreenshot 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 carouselScreenshot 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/1f4bb@2x.png",
"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.
About
🌈 The new, new Hack Club website (uses Next.js & Theme UI).
hackclub.com
Resources
Readme
License
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages