Hack Club Theme Starter

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

Usage

Import this repo to your coding environment of choice. Download it, git clone, or use the GitHub import on Glitch/Repl.it.
yarn to install dependencies.
yarn dev to start your server.
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:

import base from '@hackclub/theme'

const theme = base

// theme.fontSizes = […]
// theme.fonts.heading = ''

export default theme

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'

<Head>
  <Meta
    name="Hack Club" // site name
    title="Hackathons" // page title
    description="List of upcoming high school hackathons" // page description
    image="https://hackathons.hackclub.com/card.png" // large summary card image URL
    color="#ec3750" // theme color
    manifest="/site.webmanifest" // link to site manifest
  />
</Head>

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

import Head from 'next/head'
import theme from '@hackclub/theme' // or '../lib/theme'

export default ({
  name = 'Your Company',
  title = 'Your Project',
  description = '',
  image = 'https://yourproject.now.sh/card.png',
  url = 'https://yourproject.now.sh/'
}) => (
  <Head>
    <title>{title}</title>
    <meta property="og:title" content={title} />
    <meta name="twitter:title" content={title} />
    <meta name="og:url" content={url} />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content={name} />
    <meta name="description" content={description} />
    <meta property="og:description" content={description} />
    <meta name="twitter:description" content={description} />
    <meta property="og:image" content={image} />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content={image} />
    <meta name="msapplication-TileColor" content={theme.colors.primary} />
    <meta name="theme-color" content={theme.colors.primary} />
  </Head>
)

Deployment

We recommend using ZEIT Now 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.

If you’re only making a static site (e.g. no getServerSideProps or API Routes), you can also deploy on Netlify, which is also free. Refer to their documentation on the necessary configuration.

4.2 KiB Executable file Raw Blame History Unescape Escape