About

53 years ago, 100,000 people gathered in San Francisco for what was later called the Summer of Love.

Now, we’ve entered the Hack Club Summer of Making. It’s not an event, or a program with a start and end date. It’s a theme for this summer and a challenge to everyone reading this: what will you make? What will you learn? What will you build?

What do I do here?

Share updates of your learning every day: Every day this summer, Hack Clubbers are learning & building projects, sharing short video & photo updates each day.

We at Hack Club HQ made this because the times of our lives when we’ve really improved our skills came from showing up every day. Even if we didn’t make something amazing every day, the consistency was key. Scrapbook is a tool to help us all do that while stuck at home this summer.

How do I join?

Join the Hack Club Slack to participate.

How does it work?

Behind the scenes, the site (all open source!) runs on Next.js, React.js, & SWR for data fetching. All pages are static-rendered, hosted on Vercel. Videos are hosted by Mux. The custom domains use a Vercel serverless function. The Slack integration runs on Express.js, hosted on Heroku. All the data is stored in Airtable, fetched using our service airbridge. We built it in a week.

CSS customization

To customize the CSS on your profile page, run /scrappy setcss <link> in Slack, giving a link to a CSS file or a GitHub Gist. Here’s the default CSS, for your overwriting pleasure.

Want to preview your CSS before adding it to your profile? Check out @jasonaa’s Scrapbook Customizer.

Colors & fonts

If you’d like to change the page-wide fonts or colors, you can change yours with CSS Custom Properties. Here’s the values the site uses by default:

Default values
:root {
  --colors-pink: #ff62dc;
  --colors-orange: #ff5b00;
  --colors-yellow: #f7ff00;
  --colors-green: #28ff00;
  --colors-cyan: #00ffff;
  --colors-blue: #00a4ff;
  --colors-purple: #c210ff;

  --colors-darker: #151613;
  --colors-dark: #20201d;
  --colors-darkless: #2b2b27;
  --colors-black: #1d201d;
  --colors-slate: #3b413a;
  --colors-muted: #777f76;
  --colors-smoke: #d5d8d5;
  --colors-snow: #f5f5f4;
  --colors-white: #ffffff;

  --fonts-body: 'Baloo 2', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  --fonts-display: 'Shrikhand', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  --fonts-mono: 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
}

Some “relative” colors use these colors for various components:

  • --colors-background – page background color
  • --colors-text – page text color
  • --colors-elevated – “elevated” content, like the posts
  • --colors-sunken – “sunken” content

Our dark mode is powered by prefers-color-scheme: dark.

Custom domains

To put your profile on your own domain, run /scrappy setdomain <domain> in Slack, giving your website’s hostname (e.g. zachlatta.com). Then, add a CNAME record on your DNS provider, pointed to cname.vercel-dns.com. If you’re curious how this works, it’s open source right here.

(Unfortunately, if your DNS is managed by Vercel, you’re not able to use this feature.)

Website widget

Want to showcase your streak on your personal website? We’ve created a small widget that you can put on your website with 2 lines of code. It shows up in the bottom right corner. Just replace username with your Scrappy username. Here’s the code snippet:

<script src="https://summer.hackclub.com/scrapbookwidget.js"></script>
<script>displayScrapbookUsername('username')</script>

If you have a custom domain, you can optionally link the scrapbook widget to it! Do it like this:

<script src="https://summer.hackclub.com/scrapbookwidget.js"></script>
<script>displayScrapbookUsername('username', 'https://scrapbook.example.com')</script>

Public API

The backend is powered by Airtable served over Airbridge, but the site exposes a public JSON API powered by Next.js API routes that reformats data in a more useful way. The live site runs entirely on this API.