|
1 | | -# The Innovation Circuit Theme Starter |
| 1 | +# Hack Club Theme Starter |
2 | 2 |
|
3 | | -A sample Next.js project for getting started with MDX, Theme UI, & The Innovation Circuit Theme. Forked from [Hack Club](https://hackclub.com)'s [theme-starter](https://github.com/hackclub/theme-starter). Shoutout to [@lachlanjc](https://github.com/lachlanjc) for creating the original starter. |
| 3 | +A sample [Next.js] project for getting started with [MDX], [Theme UI], & [Hack Club Theme]. |
| 4 | + |
| 5 | +[](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fhackclub%2Ftheme-starter&repo-name=theme-project) |
| 6 | + |
| 7 | +[next.js]: https://nextjs.org |
| 8 | +[mdx]: https://mdxjs.com |
| 9 | +[theme ui]: https://theme-ui.com |
| 10 | +[hack club theme]: https://github.com/hackclub/theme |
| 11 | + |
| 12 | +## Usage |
| 13 | + |
| 14 | +1. Import this repo to your coding environment of choice. Download it, `git clone`, or use the GitHub import on Glitch/Repl.it. |
| 15 | +2. `yarn` to install dependencies. |
| 16 | +3. `yarn dev` to start your server. |
| 17 | +4. Start adding your own pages & components in their respective directories. |
| 18 | + |
| 19 | +## Configuration |
| 20 | + |
| 21 | +### Theme switcher |
| 22 | + |
| 23 | +We’ve included an example theme switcher component at `components/color-switcher.js`, |
| 24 | +which is included on every page through its inclusion in `pages/_app.js`. |
| 25 | +Feel free to change it. |
| 26 | + |
| 27 | +### Hack Club fonts |
| 28 | + |
| 29 | +If you’re making a Hack Club HQ project, you’re allowed to use Hack Club’s font, |
| 30 | +[Phantom Sans](https://www.futurefonts.xyz/phantom-foundry/phantom-sans). |
| 31 | +To load it, simply uncomment the `import '@hackclub/theme/fonts/reg-bold.css'` |
| 32 | +line in `_app.js`. |
| 33 | + |
| 34 | +### Custom theme |
| 35 | + |
| 36 | +By default, the raw [Hack Club Theme](https://theme.hackclub.com) will be used. |
| 37 | +If you’d like to edit the theme, we recommend making a theme file (perhaps at |
| 38 | +`lib/theme.js`) along these lines: |
| 39 | + |
| 40 | +```js |
| 41 | +import base from '@hackclub/theme' |
| 42 | + |
| 43 | +const theme = base |
| 44 | + |
| 45 | +// theme.fontSizes = […] |
| 46 | +// theme.fonts.heading = '' |
| 47 | + |
| 48 | +export default theme |
| 49 | +``` |
| 50 | + |
| 51 | +### Running at another port |
| 52 | + |
| 53 | +Super easy: `yarn dev -p 5000` |
| 54 | + |
| 55 | +### Adding meta tags |
| 56 | + |
| 57 | +These template includes [@hackclub/meta](https://github.com/hackclub/theme/tree/main/packages/meta) |
| 58 | +for adding meta tags to Hack Club HQ sites. To set default meta tags across all pages, |
| 59 | +add the following to `pages/_app.js`: |
| 60 | + |
| 61 | +```js |
| 62 | +// import Head from 'next/head' |
| 63 | +// import Meta from '@hackclub/meta' |
| 64 | + |
| 65 | +<Meta |
| 66 | + as={Head} |
| 67 | + name="Hack Club" // site name |
| 68 | + title="Hackathons" // page title |
| 69 | + description="List of upcoming high school hackathons" // page description |
| 70 | + image="https://hackathons.hackclub.com/card.png" // large summary card image URL |
| 71 | + color="#ec3750" // theme color |
| 72 | + manifest="/site.webmanifest" // link to site manifest |
| 73 | +/> |
| 74 | +``` |
| 75 | + |
| 76 | +If you’re not making a site for HQ, don’t use `@hackclub/meta`, since it adds |
| 77 | +Hack Club’s favicons & info. Instead, we recommend making your own component, |
| 78 | +perhaps at `components/meta.js`. |
| 79 | + |
| 80 | +<details> |
| 81 | + |
| 82 | +<summary>Example code</summary> |
| 83 | + |
| 84 | +```js |
| 85 | +import Head from 'next/head' |
| 86 | +import theme from '@hackclub/theme' // or '../lib/theme' |
| 87 | + |
| 88 | +export default ({ |
| 89 | + name = 'Your Company', |
| 90 | + title = 'Your Project', |
| 91 | + description = '', |
| 92 | + image = 'https://yourproject.vercel.app/card.png', |
| 93 | + url = 'https://yourproject.vercel.app/' |
| 94 | +}) => ( |
| 95 | + <Head> |
| 96 | + <title>{title}</title> |
| 97 | + <meta property="og:title" content={title} /> |
| 98 | + <meta name="twitter:title" content={title} /> |
| 99 | + <meta name="og:url" content={url} /> |
| 100 | + <meta property="og:type" content="website" /> |
| 101 | + <meta property="og:site_name" content={name} /> |
| 102 | + <meta name="description" content={description} /> |
| 103 | + <meta property="og:description" content={description} /> |
| 104 | + <meta name="twitter:description" content={description} /> |
| 105 | + <meta property="og:image" content={image} /> |
| 106 | + <meta name="twitter:card" content="summary_large_image" /> |
| 107 | + <meta name="twitter:image" content={image} /> |
| 108 | + <meta name="msapplication-TileColor" content={theme.colors.primary} /> |
| 109 | + <meta name="theme-color" content={theme.colors.primary} /> |
| 110 | + </Head> |
| 111 | +) |
| 112 | +``` |
| 113 | + |
| 114 | +</details> |
| 115 | + |
| 116 | +### Adding analytics |
| 117 | + |
| 118 | +Hack Club HQ uses (& loves) [Fathom Analytics](https://usefathom.com/ref/NXBJA2) |
| 119 | +for simple, privacy-focused analytics. ([Check out our site’s analytics here.](https://app.usefathom.com/share/ogimjefa/hackclub.com)) |
| 120 | + |
| 121 | +To add Fathom to your project, `yarn add fathom-client`, then you’ll need to |
| 122 | +load it appropriately in `pages/_app.js`. The script is located at |
| 123 | +<https://aardvark.hackclub.com/script.js>. |
| 124 | + |
| 125 | +<details> |
| 126 | + |
| 127 | +<summary>Example file with Fathom</summary> |
| 128 | + |
| 129 | +```js |
| 130 | +import React, { useEffect } from 'react' |
| 131 | +import { useRouter } from 'next/router' |
| 132 | +import NextApp from 'next/app' |
| 133 | +import Head from 'next/head' |
| 134 | + |
| 135 | +import Meta from '@hackclub/meta' |
| 136 | +import '@hackclub/theme/fonts/reg-bold.css' |
| 137 | +import theme from '../lib/theme' |
| 138 | +import { ThemeProvider } from 'theme-ui' |
| 139 | +import * as Fathom from 'fathom-client' |
| 140 | + |
| 141 | +const App = ({ Component, pageProps }) => { |
| 142 | + const router = useRouter() |
| 143 | + |
| 144 | + useEffect(() => { |
| 145 | + Fathom.load('YOURCODE', { |
| 146 | + includedDomains: ['hackclub.com'], |
| 147 | + url: 'https://aardvark.hackclub.com/script.js' |
| 148 | + }) |
| 149 | + const onRouteChangeComplete = () => Fathom.trackPageview() |
| 150 | + router.events.on('routeChangeComplete', onRouteChangeComplete) |
| 151 | + return () => { |
| 152 | + router.events.off('routeChangeComplete', onRouteChangeComplete) |
| 153 | + } |
| 154 | + }, []) |
| 155 | + |
| 156 | + return ( |
| 157 | + <ThemeProvider theme={theme}> |
| 158 | + <Meta as={Head} /> |
| 159 | + <Component {...pageProps} /> |
| 160 | + </ThemeProvider> |
| 161 | + ) |
| 162 | +} |
| 163 | + |
| 164 | +export default App |
| 165 | +``` |
| 166 | + |
| 167 | +</details> |
| 168 | + |
| 169 | +## Deployment |
| 170 | + |
| 171 | +[](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fhackclub%2Ftheme-starter&repo-name=theme-project) |
| 172 | + |
| 173 | +We recommend using [Vercel](https://vercel.com) for deployment. It requires no |
| 174 | +configuration, is totally free for personal projects, and supports all the features |
| 175 | +of Next.js with the best performance. Refer to [their documentation](https://vercel.com/docs#deploy-an-existing-project) |
| 176 | +for more details. |
| 177 | + |
| 178 | +You can also deploy your site to [Netlify](https://netlify.com), which is also free. Refer to [their documentation](https://docs.netlify.com/configure-builds/common-configurations/#next-js) on the necessary configuration. |
0 commit comments