About

Originally built for the Summer of Making, use Scrapbook to share updates of your learning every day! Every day, 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 with ease.

How do I join?

Join the Hack Club Slack to participate, then join the #scrapbook channel.

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 a PostgreSQL database, fetched using Prisma. 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.

Sadly, we have ran out of space and can't register any more domains.

(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>

RSS feed

Want to get an RSS feed of your Scrapbook posts? Just append .rss to the end of your Scrapbook profile's URL, like so: https://scrapbook.hackclub.com/(username).rss

macOS app

Hack Clubbers using a Mac can post directly from their menu bar using Scrapple, an app built by @linus! From the menu bar, type in the update, select the attachments for the post and send it off into the interweb…

You can download the app here, and it’s open source here.

To install using Homebrew Cask:

brew tap LinusS1/homebrew-tap
brew cask install scrapple

Public API

This site exposes a public JSON API powered by Next.js API routes that formats data in a useful way. The live site runs entirely on this API.