Summer Scrapbook

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.

This repo is the website for Hack Club’s Summer Scrapbook, which is part of the 2020 Summer of Making.

How do I join?

Join the Hack Club Slack to participate.

How does it work?

Behind the scenes, the site 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.

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:

: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.)

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.

/api/posts – Get all posts (used on the homepage)
/api/users – Get all users
/api/users/:username – Get a specific user’s profile + posts

By @lachlanjc for Hack Club, 2020. MIT License.

cjdenio / summer-scrapbook