Skip to content
This repository was archived by the owner on Mar 24, 2026. It is now read-only.
BranchesTags

Repository files navigation

Hack Club Theme Starter

A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.

Deploy with Vercel

Usage

  1. Import this repo to your coding environment of choice. Download it, git clone, or use the GitHub import on Glitch/Repl.it.
  2. yarn to install dependencies.
  3. yarn dev to start your server.
  4. Start adding your own pages & components in their respective directories.

Configuration

Theme switcher

We’ve included an example theme switcher component at components/color-switcher.js, which is included on every page through its inclusion in pages/_app.js. Feel free to change it.

Hack Club fonts

If you’re making a Hack Club HQ project, you’re allowed to use Hack Club’s font, Phantom Sans. To load it, simply uncomment the import '@hackclub/theme/fonts/reg-bold.css' line in _app.js.

Custom theme

By default, the raw Hack Club Theme will be used. If you’d like to edit the theme, we recommend making a theme file (perhaps at lib/theme.js) along these lines:

importbasefrom'@hackclub/theme'consttheme=base// theme.fontSizes = […]// theme.fonts.heading = ''exportdefaulttheme

Running at another port

Super easy: yarn dev -p 5000

Adding meta tags

These template includes @hackclub/meta for adding meta tags to Hack Club HQ sites. To set default meta tags across all pages, add the following to pages/_app.js:

// import Head from 'next/head'// import Meta from '@hackclub/meta'<Metaas={Head}name="Hack Club"// site nametitle="Hackathons"// page titledescription="List of upcoming high school hackathons"// page descriptionimage="https://hackathons.hackclub.com/card.png"// large summary card image URLcolor="#ec3750"// theme colormanifest="/site.webmanifest"// link to site manifest/>

If you’re not making a site for HQ, don’t use @hackclub/meta, since it adds Hack Club’s favicons & info. Instead, we recommend making your own component, perhaps at components/meta.js.

Example code
importHeadfrom'next/head'importthemefrom'@hackclub/theme'// or '../lib/theme'exportdefault({
name ='Your Company',
title ='Your Project',
description ='',
image ='https://yourproject.vercel.app/card.png',
url ='https://yourproject.vercel.app/'})=>(<Head><title>{title}</title><metaproperty="og:title"content={title}/><metaname="twitter:title"content={title}/><metaname="og:url"content={url}/><metaproperty="og:type"content="website"/><metaproperty="og:site_name"content={name}/><metaname="description"content={description}/><metaproperty="og:description"content={description}/><metaname="twitter:description"content={description}/><metaproperty="og:image"content={image}/><metaname="twitter:card"content="summary_large_image"/><metaname="twitter:image"content={image}/><metaname="msapplication-TileColor"content={theme.colors.primary}/><metaname="theme-color"content={theme.colors.primary}/></Head>)

Adding analytics

Hack Club HQ uses (& loves) Fathom Analytics for simple, privacy-focused analytics. (Check out our site’s analytics here.)

To add Fathom to your project, yarn add fathom-client, then you’ll need to load it appropriately in pages/_app.js. The script is located at https://aardvark.hackclub.com/script.js.

Example file with Fathom
importReact,{useEffect}from'react'import{useRouter}from'next/router'importNextAppfrom'next/app'importHeadfrom'next/head'importMetafrom'@hackclub/meta'import'@hackclub/theme/fonts/reg-bold.css'importthemefrom'../lib/theme'import{ThemeProvider}from'theme-ui'import*asFathomfrom'fathom-client'constApp=({ Component, pageProps })=>{constrouter=useRouter()useEffect(()=>{Fathom.load('YOURCODE',{includedDomains: ['hackclub.com'],url: 'https://aardvark.hackclub.com/script.js'})constonRouteChangeComplete=()=>Fathom.trackPageview()router.events.on('routeChangeComplete',onRouteChangeComplete)return()=>{router.events.off('routeChangeComplete',onRouteChangeComplete)}},[])return(<ThemeProvidertheme={theme}><Metaas={Head}/><Component{...pageProps}/></ThemeProvider>)}exportdefaultApp

Deployment

Deploy with Vercel

We recommend using Vercel for deployment. It requires no configuration, is totally free for personal projects, and supports all the features of Next.js with the best performance. Refer to their documentation for more details.

You can also deploy your site to Netlify, which is also free. Refer to their documentation on the necessary configuration.

About

🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.

theme-starter.hackclub.dev

Topics

mdxnextjsnextjs-startertheme-ui

Resources

Readme

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity
Custom properties

Stars

89 stars

Watchers

0 watching

Forks

21 forks
Report repository

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 - hackclub/theme-starter: 🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme. · GitHub
Skip to content

This repository was archived by the owner on Mar 24, 2026. It is now read-only.

BranchesTags
Repository files navigation
Hack Club Theme Starter
A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
Deploy with Vercel
Usage
  1. Import this repo to your coding environment of choice. Download it, git clone, or use the GitHub import on Glitch/Repl.it.
  2. yarn to install dependencies.
  3. yarn dev to start your server.
  4. Start adding your own pages & components in their respective directories.
Configuration
Theme switcher
We’ve included an example theme switcher component at components/color-switcher.js,
which is included on every page through its inclusion in pages/_app.js.
Feel free to change it.
Hack Club fonts
If you’re making a Hack Club HQ project, you’re allowed to use Hack Club’s font,
Phantom Sans.
To load it, simply uncomment the import '@hackclub/theme/fonts/reg-bold.css'
line in _app.js.
Custom theme
By default, the raw Hack Club Theme will be used.
If you’d like to edit the theme, we recommend making a theme file (perhaps at
lib/theme.js) along these lines:
importbasefrom'@hackclub/theme'consttheme=base// theme.fontSizes = […]// theme.fonts.heading = ''exportdefaulttheme
Running at another port
Super easy: yarn dev -p 5000
Adding meta tags
These template includes @hackclub/meta
for adding meta tags to Hack Club HQ sites. To set default meta tags across all pages,
add the following to pages/_app.js:
// import Head from 'next/head'// import Meta from '@hackclub/meta'<Metaas={Head}name="Hack Club"// site nametitle="Hackathons"// page titledescription="List of upcoming high school hackathons"// page descriptionimage="https://hackathons.hackclub.com/card.png"// large summary card image URLcolor="#ec3750"// theme colormanifest="/site.webmanifest"// link to site manifest/>
If you’re not making a site for HQ, don’t use @hackclub/meta, since it adds
Hack Club’s favicons & info. Instead, we recommend making your own component,
perhaps at components/meta.js.
Example code
importHeadfrom'next/head'importthemefrom'@hackclub/theme'// or '../lib/theme'exportdefault({
name ='Your Company',
title ='Your Project',
description ='',
image ='https://yourproject.vercel.app/card.png',
url ='https://yourproject.vercel.app/'})=>(<Head><title>{title}</title><metaproperty="og:title"content={title}/><metaname="twitter:title"content={title}/><metaname="og:url"content={url}/><metaproperty="og:type"content="website"/><metaproperty="og:site_name"content={name}/><metaname="description"content={description}/><metaproperty="og:description"content={description}/><metaname="twitter:description"content={description}/><metaproperty="og:image"content={image}/><metaname="twitter:card"content="summary_large_image"/><metaname="twitter:image"content={image}/><metaname="msapplication-TileColor"content={theme.colors.primary}/><metaname="theme-color"content={theme.colors.primary}/></Head>)
Adding analytics
Hack Club HQ uses (& loves) Fathom Analytics
for simple, privacy-focused analytics. (Check out our site’s analytics here.)
To add Fathom to your project, yarn add fathom-client, then you’ll need to
load it appropriately in pages/_app.js. The script is located at
https://aardvark.hackclub.com/script.js.
Example file with Fathom
importReact,{useEffect}from'react'import{useRouter}from'next/router'importNextAppfrom'next/app'importHeadfrom'next/head'importMetafrom'@hackclub/meta'import'@hackclub/theme/fonts/reg-bold.css'importthemefrom'../lib/theme'import{ThemeProvider}from'theme-ui'import*asFathomfrom'fathom-client'constApp=({ Component, pageProps })=>{constrouter=useRouter()useEffect(()=>{Fathom.load('YOURCODE',{includedDomains: ['hackclub.com'],url: 'https://aardvark.hackclub.com/script.js'})constonRouteChangeComplete=()=>Fathom.trackPageview()router.events.on('routeChangeComplete',onRouteChangeComplete)return()=>{router.events.off('routeChangeComplete',onRouteChangeComplete)}},[])return(<ThemeProvidertheme={theme}><Metaas={Head}/><Component{...pageProps}/></ThemeProvider>)}exportdefaultApp
Deployment
Deploy with Vercel
We recommend using Vercel for deployment. It requires no
configuration, is totally free for personal projects, and supports all the features
of Next.js with the best performance. Refer to their documentation
for more details.
You can also deploy your site to Netlify, which is also free. Refer to their documentation on the necessary configuration.
About
🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
theme-starter.hackclub.dev
Topics
mdxnextjsnextjs-startertheme-ui
Resources
Readme
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
89 stars
Watchers
0 watching
Forks
21 forks
Report repository
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 - hackclub/theme-starter: 🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme. · GitHub
Skip to content

This repository was archived by the owner on Mar 24, 2026. It is now read-only.

BranchesTags
Repository files navigation
Hack Club Theme Starter
A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
Deploy with Vercel
Usage
  1. Import this repo to your coding environment of choice. Download it, git clone, or use the GitHub import on Glitch/Repl.it.
  2. yarn to install dependencies.
  3. yarn dev to start your server.
  4. Start adding your own pages & components in their respective directories.
Configuration
Theme switcher
We’ve included an example theme switcher component at components/color-switcher.js,
which is included on every page through its inclusion in pages/_app.js.
Feel free to change it.
Hack Club fonts
If you’re making a Hack Club HQ project, you’re allowed to use Hack Club’s font,
Phantom Sans.
To load it, simply uncomment the import '@hackclub/theme/fonts/reg-bold.css'
line in _app.js.
Custom theme
By default, the raw Hack Club Theme will be used.
If you’d like to edit the theme, we recommend making a theme file (perhaps at
lib/theme.js) along these lines:
importbasefrom'@hackclub/theme'consttheme=base// theme.fontSizes = […]// theme.fonts.heading = ''exportdefaulttheme
Running at another port
Super easy: yarn dev -p 5000
Adding meta tags
These template includes @hackclub/meta
for adding meta tags to Hack Club HQ sites. To set default meta tags across all pages,
add the following to pages/_app.js:
// import Head from 'next/head'// import Meta from '@hackclub/meta'<Metaas={Head}name="Hack Club"// site nametitle="Hackathons"// page titledescription="List of upcoming high school hackathons"// page descriptionimage="https://hackathons.hackclub.com/card.png"// large summary card image URLcolor="#ec3750"// theme colormanifest="/site.webmanifest"// link to site manifest/>
If you’re not making a site for HQ, don’t use @hackclub/meta, since it adds
Hack Club’s favicons & info. Instead, we recommend making your own component,
perhaps at components/meta.js.
Example code
importHeadfrom'next/head'importthemefrom'@hackclub/theme'// or '../lib/theme'exportdefault({
name ='Your Company',
title ='Your Project',
description ='',
image ='https://yourproject.vercel.app/card.png',
url ='https://yourproject.vercel.app/'})=>(<Head><title>{title}</title><metaproperty="og:title"content={title}/><metaname="twitter:title"content={title}/><metaname="og:url"content={url}/><metaproperty="og:type"content="website"/><metaproperty="og:site_name"content={name}/><metaname="description"content={description}/><metaproperty="og:description"content={description}/><metaname="twitter:description"content={description}/><metaproperty="og:image"content={image}/><metaname="twitter:card"content="summary_large_image"/><metaname="twitter:image"content={image}/><metaname="msapplication-TileColor"content={theme.colors.primary}/><metaname="theme-color"content={theme.colors.primary}/></Head>)
Adding analytics
Hack Club HQ uses (& loves) Fathom Analytics
for simple, privacy-focused analytics. (Check out our site’s analytics here.)
To add Fathom to your project, yarn add fathom-client, then you’ll need to
load it appropriately in pages/_app.js. The script is located at
https://aardvark.hackclub.com/script.js.
Example file with Fathom
importReact,{useEffect}from'react'import{useRouter}from'next/router'importNextAppfrom'next/app'importHeadfrom'next/head'importMetafrom'@hackclub/meta'import'@hackclub/theme/fonts/reg-bold.css'importthemefrom'../lib/theme'import{ThemeProvider}from'theme-ui'import*asFathomfrom'fathom-client'constApp=({ Component, pageProps })=>{constrouter=useRouter()useEffect(()=>{Fathom.load('YOURCODE',{includedDomains: ['hackclub.com'],url: 'https://aardvark.hackclub.com/script.js'})constonRouteChangeComplete=()=>Fathom.trackPageview()router.events.on('routeChangeComplete',onRouteChangeComplete)return()=>{router.events.off('routeChangeComplete',onRouteChangeComplete)}},[])return(<ThemeProvidertheme={theme}><Metaas={Head}/><Component{...pageProps}/></ThemeProvider>)}exportdefaultApp
Deployment
Deploy with Vercel
We recommend using Vercel for deployment. It requires no
configuration, is totally free for personal projects, and supports all the features
of Next.js with the best performance. Refer to their documentation
for more details.
You can also deploy your site to Netlify, which is also free. Refer to their documentation on the necessary configuration.
About
🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
theme-starter.hackclub.dev
Topics
mdxnextjsnextjs-startertheme-ui
Resources
Readme
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
89 stars
Watchers
0 watching
Forks
21 forks
Report repository
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 - hackclub/theme-starter: 🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme. · GitHub
Skip to content

This repository was archived by the owner on Mar 24, 2026. It is now read-only.

BranchesTags
Repository files navigation
Hack Club Theme Starter
A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
Deploy with Vercel
Usage
  1. Import this repo to your coding environment of choice. Download it, git clone, or use the GitHub import on Glitch/Repl.it.
  2. yarn to install dependencies.
  3. yarn dev to start your server.
  4. Start adding your own pages & components in their respective directories.
Configuration
Theme switcher
We’ve included an example theme switcher component at components/color-switcher.js,
which is included on every page through its inclusion in pages/_app.js.
Feel free to change it.
Hack Club fonts
If you’re making a Hack Club HQ project, you’re allowed to use Hack Club’s font,
Phantom Sans.
To load it, simply uncomment the import '@hackclub/theme/fonts/reg-bold.css'
line in _app.js.
Custom theme
By default, the raw Hack Club Theme will be used.
If you’d like to edit the theme, we recommend making a theme file (perhaps at
lib/theme.js) along these lines:
importbasefrom'@hackclub/theme'consttheme=base// theme.fontSizes = […]// theme.fonts.heading = ''exportdefaulttheme
Running at another port
Super easy: yarn dev -p 5000
Adding meta tags
These template includes @hackclub/meta
for adding meta tags to Hack Club HQ sites. To set default meta tags across all pages,
add the following to pages/_app.js:
// import Head from 'next/head'// import Meta from '@hackclub/meta'<Metaas={Head}name="Hack Club"// site nametitle="Hackathons"// page titledescription="List of upcoming high school hackathons"// page descriptionimage="https://hackathons.hackclub.com/card.png"// large summary card image URLcolor="#ec3750"// theme colormanifest="/site.webmanifest"// link to site manifest/>
If you’re not making a site for HQ, don’t use @hackclub/meta, since it adds
Hack Club’s favicons & info. Instead, we recommend making your own component,
perhaps at components/meta.js.
Example code
importHeadfrom'next/head'importthemefrom'@hackclub/theme'// or '../lib/theme'exportdefault({
name ='Your Company',
title ='Your Project',
description ='',
image ='https://yourproject.vercel.app/card.png',
url ='https://yourproject.vercel.app/'})=>(<Head><title>{title}</title><metaproperty="og:title"content={title}/><metaname="twitter:title"content={title}/><metaname="og:url"content={url}/><metaproperty="og:type"content="website"/><metaproperty="og:site_name"content={name}/><metaname="description"content={description}/><metaproperty="og:description"content={description}/><metaname="twitter:description"content={description}/><metaproperty="og:image"content={image}/><metaname="twitter:card"content="summary_large_image"/><metaname="twitter:image"content={image}/><metaname="msapplication-TileColor"content={theme.colors.primary}/><metaname="theme-color"content={theme.colors.primary}/></Head>)
Adding analytics
Hack Club HQ uses (& loves) Fathom Analytics
for simple, privacy-focused analytics. (Check out our site’s analytics here.)
To add Fathom to your project, yarn add fathom-client, then you’ll need to
load it appropriately in pages/_app.js. The script is located at
https://aardvark.hackclub.com/script.js.
Example file with Fathom
importReact,{useEffect}from'react'import{useRouter}from'next/router'importNextAppfrom'next/app'importHeadfrom'next/head'importMetafrom'@hackclub/meta'import'@hackclub/theme/fonts/reg-bold.css'importthemefrom'../lib/theme'import{ThemeProvider}from'theme-ui'import*asFathomfrom'fathom-client'constApp=({ Component, pageProps })=>{constrouter=useRouter()useEffect(()=>{Fathom.load('YOURCODE',{includedDomains: ['hackclub.com'],url: 'https://aardvark.hackclub.com/script.js'})constonRouteChangeComplete=()=>Fathom.trackPageview()router.events.on('routeChangeComplete',onRouteChangeComplete)return()=>{router.events.off('routeChangeComplete',onRouteChangeComplete)}},[])return(<ThemeProvidertheme={theme}><Metaas={Head}/><Component{...pageProps}/></ThemeProvider>)}exportdefaultApp
Deployment
Deploy with Vercel
We recommend using Vercel for deployment. It requires no
configuration, is totally free for personal projects, and supports all the features
of Next.js with the best performance. Refer to their documentation
for more details.
You can also deploy your site to Netlify, which is also free. Refer to their documentation on the necessary configuration.
About
🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
theme-starter.hackclub.dev
Topics
mdxnextjsnextjs-startertheme-ui
Resources
Readme
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
89 stars
Watchers
0 watching
Forks
21 forks
Report repository
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 - hackclub/theme-starter: 🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme. · GitHub
Skip to content

This repository was archived by the owner on Mar 24, 2026. It is now read-only.

BranchesTags
Repository files navigation
Hack Club Theme Starter
A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
Deploy with Vercel
Usage
  1. Import this repo to your coding environment of choice. Download it, git clone, or use the GitHub import on Glitch/Repl.it.
  2. yarn to install dependencies.
  3. yarn dev to start your server.
  4. Start adding your own pages & components in their respective directories.
Configuration
Theme switcher
We’ve included an example theme switcher component at components/color-switcher.js,
which is included on every page through its inclusion in pages/_app.js.
Feel free to change it.
Hack Club fonts
If you’re making a Hack Club HQ project, you’re allowed to use Hack Club’s font,
Phantom Sans.
To load it, simply uncomment the import '@hackclub/theme/fonts/reg-bold.css'
line in _app.js.
Custom theme
By default, the raw Hack Club Theme will be used.
If you’d like to edit the theme, we recommend making a theme file (perhaps at
lib/theme.js) along these lines:
importbasefrom'@hackclub/theme'consttheme=base// theme.fontSizes = […]// theme.fonts.heading = ''exportdefaulttheme
Running at another port
Super easy: yarn dev -p 5000
Adding meta tags
These template includes @hackclub/meta
for adding meta tags to Hack Club HQ sites. To set default meta tags across all pages,
add the following to pages/_app.js:
// import Head from 'next/head'// import Meta from '@hackclub/meta'<Metaas={Head}name="Hack Club"// site nametitle="Hackathons"// page titledescription="List of upcoming high school hackathons"// page descriptionimage="https://hackathons.hackclub.com/card.png"// large summary card image URLcolor="#ec3750"// theme colormanifest="/site.webmanifest"// link to site manifest/>
If you’re not making a site for HQ, don’t use @hackclub/meta, since it adds
Hack Club’s favicons & info. Instead, we recommend making your own component,
perhaps at components/meta.js.
Example code
importHeadfrom'next/head'importthemefrom'@hackclub/theme'// or '../lib/theme'exportdefault({
name ='Your Company',
title ='Your Project',
description ='',
image ='https://yourproject.vercel.app/card.png',
url ='https://yourproject.vercel.app/'})=>(<Head><title>{title}</title><metaproperty="og:title"content={title}/><metaname="twitter:title"content={title}/><metaname="og:url"content={url}/><metaproperty="og:type"content="website"/><metaproperty="og:site_name"content={name}/><metaname="description"content={description}/><metaproperty="og:description"content={description}/><metaname="twitter:description"content={description}/><metaproperty="og:image"content={image}/><metaname="twitter:card"content="summary_large_image"/><metaname="twitter:image"content={image}/><metaname="msapplication-TileColor"content={theme.colors.primary}/><metaname="theme-color"content={theme.colors.primary}/></Head>)
Adding analytics
Hack Club HQ uses (& loves) Fathom Analytics
for simple, privacy-focused analytics. (Check out our site’s analytics here.)
To add Fathom to your project, yarn add fathom-client, then you’ll need to
load it appropriately in pages/_app.js. The script is located at
https://aardvark.hackclub.com/script.js.
Example file with Fathom
importReact,{useEffect}from'react'import{useRouter}from'next/router'importNextAppfrom'next/app'importHeadfrom'next/head'importMetafrom'@hackclub/meta'import'@hackclub/theme/fonts/reg-bold.css'importthemefrom'../lib/theme'import{ThemeProvider}from'theme-ui'import*asFathomfrom'fathom-client'constApp=({ Component, pageProps })=>{constrouter=useRouter()useEffect(()=>{Fathom.load('YOURCODE',{includedDomains: ['hackclub.com'],url: 'https://aardvark.hackclub.com/script.js'})constonRouteChangeComplete=()=>Fathom.trackPageview()router.events.on('routeChangeComplete',onRouteChangeComplete)return()=>{router.events.off('routeChangeComplete',onRouteChangeComplete)}},[])return(<ThemeProvidertheme={theme}><Metaas={Head}/><Component{...pageProps}/></ThemeProvider>)}exportdefaultApp
Deployment
Deploy with Vercel
We recommend using Vercel for deployment. It requires no
configuration, is totally free for personal projects, and supports all the features
of Next.js with the best performance. Refer to their documentation
for more details.
You can also deploy your site to Netlify, which is also free. Refer to their documentation on the necessary configuration.
About
🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
theme-starter.hackclub.dev
Topics
mdxnextjsnextjs-startertheme-ui
Resources
Readme
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
89 stars
Watchers
0 watching
Forks
21 forks
Report repository
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 - hackclub/theme-starter: 🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme. · GitHub
Skip to content

This repository was archived by the owner on Mar 24, 2026. It is now read-only.

BranchesTags
Repository files navigation
Hack Club Theme Starter
A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
Deploy with Vercel
Usage
  1. Import this repo to your coding environment of choice. Download it, git clone, or use the GitHub import on Glitch/Repl.it.
  2. yarn to install dependencies.
  3. yarn dev to start your server.
  4. Start adding your own pages & components in their respective directories.
Configuration
Theme switcher
We’ve included an example theme switcher component at components/color-switcher.js,
which is included on every page through its inclusion in pages/_app.js.
Feel free to change it.
Hack Club fonts
If you’re making a Hack Club HQ project, you’re allowed to use Hack Club’s font,
Phantom Sans.
To load it, simply uncomment the import '@hackclub/theme/fonts/reg-bold.css'
line in _app.js.
Custom theme
By default, the raw Hack Club Theme will be used.
If you’d like to edit the theme, we recommend making a theme file (perhaps at
lib/theme.js) along these lines:
importbasefrom'@hackclub/theme'consttheme=base// theme.fontSizes = […]// theme.fonts.heading = ''exportdefaulttheme
Running at another port
Super easy: yarn dev -p 5000
Adding meta tags
These template includes @hackclub/meta
for adding meta tags to Hack Club HQ sites. To set default meta tags across all pages,
add the following to pages/_app.js:
// import Head from 'next/head'// import Meta from '@hackclub/meta'<Metaas={Head}name="Hack Club"// site nametitle="Hackathons"// page titledescription="List of upcoming high school hackathons"// page descriptionimage="https://hackathons.hackclub.com/card.png"// large summary card image URLcolor="#ec3750"// theme colormanifest="/site.webmanifest"// link to site manifest/>
If you’re not making a site for HQ, don’t use @hackclub/meta, since it adds
Hack Club’s favicons & info. Instead, we recommend making your own component,
perhaps at components/meta.js.
Example code
importHeadfrom'next/head'importthemefrom'@hackclub/theme'// or '../lib/theme'exportdefault({
name ='Your Company',
title ='Your Project',
description ='',
image ='https://yourproject.vercel.app/card.png',
url ='https://yourproject.vercel.app/'})=>(<Head><title>{title}</title><metaproperty="og:title"content={title}/><metaname="twitter:title"content={title}/><metaname="og:url"content={url}/><metaproperty="og:type"content="website"/><metaproperty="og:site_name"content={name}/><metaname="description"content={description}/><metaproperty="og:description"content={description}/><metaname="twitter:description"content={description}/><metaproperty="og:image"content={image}/><metaname="twitter:card"content="summary_large_image"/><metaname="twitter:image"content={image}/><metaname="msapplication-TileColor"content={theme.colors.primary}/><metaname="theme-color"content={theme.colors.primary}/></Head>)
Adding analytics
Hack Club HQ uses (& loves) Fathom Analytics
for simple, privacy-focused analytics. (Check out our site’s analytics here.)
To add Fathom to your project, yarn add fathom-client, then you’ll need to
load it appropriately in pages/_app.js. The script is located at
https://aardvark.hackclub.com/script.js.
Example file with Fathom
importReact,{useEffect}from'react'import{useRouter}from'next/router'importNextAppfrom'next/app'importHeadfrom'next/head'importMetafrom'@hackclub/meta'import'@hackclub/theme/fonts/reg-bold.css'importthemefrom'../lib/theme'import{ThemeProvider}from'theme-ui'import*asFathomfrom'fathom-client'constApp=({ Component, pageProps })=>{constrouter=useRouter()useEffect(()=>{Fathom.load('YOURCODE',{includedDomains: ['hackclub.com'],url: 'https://aardvark.hackclub.com/script.js'})constonRouteChangeComplete=()=>Fathom.trackPageview()router.events.on('routeChangeComplete',onRouteChangeComplete)return()=>{router.events.off('routeChangeComplete',onRouteChangeComplete)}},[])return(<ThemeProvidertheme={theme}><Metaas={Head}/><Component{...pageProps}/></ThemeProvider>)}exportdefaultApp
Deployment
Deploy with Vercel
We recommend using Vercel for deployment. It requires no
configuration, is totally free for personal projects, and supports all the features
of Next.js with the best performance. Refer to their documentation
for more details.
You can also deploy your site to Netlify, which is also free. Refer to their documentation on the necessary configuration.
About
🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
theme-starter.hackclub.dev
Topics
mdxnextjsnextjs-startertheme-ui
Resources
Readme
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
89 stars
Watchers
0 watching
Forks
21 forks
Report repository
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 - hackclub/theme-starter: 🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme. · GitHub
Skip to content

This repository was archived by the owner on Mar 24, 2026. It is now read-only.

BranchesTags
Repository files navigation
Hack Club Theme Starter
A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
Deploy with Vercel
Usage
  1. Import this repo to your coding environment of choice. Download it, git clone, or use the GitHub import on Glitch/Repl.it.
  2. yarn to install dependencies.
  3. yarn dev to start your server.
  4. Start adding your own pages & components in their respective directories.
Configuration
Theme switcher
We’ve included an example theme switcher component at components/color-switcher.js,
which is included on every page through its inclusion in pages/_app.js.
Feel free to change it.
Hack Club fonts
If you’re making a Hack Club HQ project, you’re allowed to use Hack Club’s font,
Phantom Sans.
To load it, simply uncomment the import '@hackclub/theme/fonts/reg-bold.css'
line in _app.js.
Custom theme
By default, the raw Hack Club Theme will be used.
If you’d like to edit the theme, we recommend making a theme file (perhaps at
lib/theme.js) along these lines:
importbasefrom'@hackclub/theme'consttheme=base// theme.fontSizes = […]// theme.fonts.heading = ''exportdefaulttheme
Running at another port
Super easy: yarn dev -p 5000
Adding meta tags
These template includes @hackclub/meta
for adding meta tags to Hack Club HQ sites. To set default meta tags across all pages,
add the following to pages/_app.js:
// import Head from 'next/head'// import Meta from '@hackclub/meta'<Metaas={Head}name="Hack Club"// site nametitle="Hackathons"// page titledescription="List of upcoming high school hackathons"// page descriptionimage="https://hackathons.hackclub.com/card.png"// large summary card image URLcolor="#ec3750"// theme colormanifest="/site.webmanifest"// link to site manifest/>
If you’re not making a site for HQ, don’t use @hackclub/meta, since it adds
Hack Club’s favicons & info. Instead, we recommend making your own component,
perhaps at components/meta.js.
Example code
importHeadfrom'next/head'importthemefrom'@hackclub/theme'// or '../lib/theme'exportdefault({
name ='Your Company',
title ='Your Project',
description ='',
image ='https://yourproject.vercel.app/card.png',
url ='https://yourproject.vercel.app/'})=>(<Head><title>{title}</title><metaproperty="og:title"content={title}/><metaname="twitter:title"content={title}/><metaname="og:url"content={url}/><metaproperty="og:type"content="website"/><metaproperty="og:site_name"content={name}/><metaname="description"content={description}/><metaproperty="og:description"content={description}/><metaname="twitter:description"content={description}/><metaproperty="og:image"content={image}/><metaname="twitter:card"content="summary_large_image"/><metaname="twitter:image"content={image}/><metaname="msapplication-TileColor"content={theme.colors.primary}/><metaname="theme-color"content={theme.colors.primary}/></Head>)
Adding analytics
Hack Club HQ uses (& loves) Fathom Analytics
for simple, privacy-focused analytics. (Check out our site’s analytics here.)
To add Fathom to your project, yarn add fathom-client, then you’ll need to
load it appropriately in pages/_app.js. The script is located at
https://aardvark.hackclub.com/script.js.
Example file with Fathom
importReact,{useEffect}from'react'import{useRouter}from'next/router'importNextAppfrom'next/app'importHeadfrom'next/head'importMetafrom'@hackclub/meta'import'@hackclub/theme/fonts/reg-bold.css'importthemefrom'../lib/theme'import{ThemeProvider}from'theme-ui'import*asFathomfrom'fathom-client'constApp=({ Component, pageProps })=>{constrouter=useRouter()useEffect(()=>{Fathom.load('YOURCODE',{includedDomains: ['hackclub.com'],url: 'https://aardvark.hackclub.com/script.js'})constonRouteChangeComplete=()=>Fathom.trackPageview()router.events.on('routeChangeComplete',onRouteChangeComplete)return()=>{router.events.off('routeChangeComplete',onRouteChangeComplete)}},[])return(<ThemeProvidertheme={theme}><Metaas={Head}/><Component{...pageProps}/></ThemeProvider>)}exportdefaultApp
Deployment
Deploy with Vercel
We recommend using Vercel for deployment. It requires no
configuration, is totally free for personal projects, and supports all the features
of Next.js with the best performance. Refer to their documentation
for more details.
You can also deploy your site to Netlify, which is also free. Refer to their documentation on the necessary configuration.
About
🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
theme-starter.hackclub.dev
Topics
mdxnextjsnextjs-startertheme-ui
Resources
Readme
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
89 stars
Watchers
0 watching
Forks
21 forks
Report repository
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 - hackclub/theme-starter: 🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme. · GitHub
Skip to content

This repository was archived by the owner on Mar 24, 2026. It is now read-only.

BranchesTags
Repository files navigation
Hack Club Theme Starter
A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
Deploy with Vercel
Usage
  1. Import this repo to your coding environment of choice. Download it, git clone, or use the GitHub import on Glitch/Repl.it.
  2. yarn to install dependencies.
  3. yarn dev to start your server.
  4. Start adding your own pages & components in their respective directories.
Configuration
Theme switcher
We’ve included an example theme switcher component at components/color-switcher.js,
which is included on every page through its inclusion in pages/_app.js.
Feel free to change it.
Hack Club fonts
If you’re making a Hack Club HQ project, you’re allowed to use Hack Club’s font,
Phantom Sans.
To load it, simply uncomment the import '@hackclub/theme/fonts/reg-bold.css'
line in _app.js.
Custom theme
By default, the raw Hack Club Theme will be used.
If you’d like to edit the theme, we recommend making a theme file (perhaps at
lib/theme.js) along these lines:
importbasefrom'@hackclub/theme'consttheme=base// theme.fontSizes = […]// theme.fonts.heading = ''exportdefaulttheme
Running at another port
Super easy: yarn dev -p 5000
Adding meta tags
These template includes @hackclub/meta
for adding meta tags to Hack Club HQ sites. To set default meta tags across all pages,
add the following to pages/_app.js:
// import Head from 'next/head'// import Meta from '@hackclub/meta'<Metaas={Head}name="Hack Club"// site nametitle="Hackathons"// page titledescription="List of upcoming high school hackathons"// page descriptionimage="https://hackathons.hackclub.com/card.png"// large summary card image URLcolor="#ec3750"// theme colormanifest="/site.webmanifest"// link to site manifest/>
If you’re not making a site for HQ, don’t use @hackclub/meta, since it adds
Hack Club’s favicons & info. Instead, we recommend making your own component,
perhaps at components/meta.js.
Example code
importHeadfrom'next/head'importthemefrom'@hackclub/theme'// or '../lib/theme'exportdefault({
name ='Your Company',
title ='Your Project',
description ='',
image ='https://yourproject.vercel.app/card.png',
url ='https://yourproject.vercel.app/'})=>(<Head><title>{title}</title><metaproperty="og:title"content={title}/><metaname="twitter:title"content={title}/><metaname="og:url"content={url}/><metaproperty="og:type"content="website"/><metaproperty="og:site_name"content={name}/><metaname="description"content={description}/><metaproperty="og:description"content={description}/><metaname="twitter:description"content={description}/><metaproperty="og:image"content={image}/><metaname="twitter:card"content="summary_large_image"/><metaname="twitter:image"content={image}/><metaname="msapplication-TileColor"content={theme.colors.primary}/><metaname="theme-color"content={theme.colors.primary}/></Head>)
Adding analytics
Hack Club HQ uses (& loves) Fathom Analytics
for simple, privacy-focused analytics. (Check out our site’s analytics here.)
To add Fathom to your project, yarn add fathom-client, then you’ll need to
load it appropriately in pages/_app.js. The script is located at
https://aardvark.hackclub.com/script.js.
Example file with Fathom
importReact,{useEffect}from'react'import{useRouter}from'next/router'importNextAppfrom'next/app'importHeadfrom'next/head'importMetafrom'@hackclub/meta'import'@hackclub/theme/fonts/reg-bold.css'importthemefrom'../lib/theme'import{ThemeProvider}from'theme-ui'import*asFathomfrom'fathom-client'constApp=({ Component, pageProps })=>{constrouter=useRouter()useEffect(()=>{Fathom.load('YOURCODE',{includedDomains: ['hackclub.com'],url: 'https://aardvark.hackclub.com/script.js'})constonRouteChangeComplete=()=>Fathom.trackPageview()router.events.on('routeChangeComplete',onRouteChangeComplete)return()=>{router.events.off('routeChangeComplete',onRouteChangeComplete)}},[])return(<ThemeProvidertheme={theme}><Metaas={Head}/><Component{...pageProps}/></ThemeProvider>)}exportdefaultApp
Deployment
Deploy with Vercel
We recommend using Vercel for deployment. It requires no
configuration, is totally free for personal projects, and supports all the features
of Next.js with the best performance. Refer to their documentation
for more details.
You can also deploy your site to Netlify, which is also free. Refer to their documentation on the necessary configuration.
About
🐤 A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
theme-starter.hackclub.dev
Topics
mdxnextjsnextjs-startertheme-ui
Resources
Readme
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Custom properties
Stars
89 stars
Watchers
0 watching
Forks
21 forks
Report repository
Contributors
Languages