generated from hackclub/theme-starter
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(global): 🚧 technically rewrite the codebase in TypeScript, along…
…side a lot of copiloting chaos Still figuring out the alignment chaos hell then
- Loading branch information
1 parent
594f1ca
commit 72dc63b
Showing
29 changed files
with
4,818 additions
and
1,993 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "conventionalCommits.scopes": [ | ||
| "global" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @recaptime-dev/website |
Binary file not shown.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| nodeLinker: node-modules | ||
| yarnPath: .yarn/releases/yarn-4.5.3.cjs |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,178 +1,10 @@ | ||
| # Hack Club Theme Starter | ||
| # Recap Time Squad v3 website | ||
|
|
||
| A sample [Next.js] project for getting started with [MDX], [Theme UI], & [Hack Club Theme]. | ||
| Round 3 of @ajhalili2006 building a sane website for RecapTime.dev | ||
| without abusing [Material for Mkdocs] to hell and back, | ||
| built with [MDX], [Theme UI], & [Hack Club Theme]. | ||
|
|
||
| [](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fhackclub%2Ftheme-starter&repo-name=theme-project) | ||
|
|
||
| [next.js]: https://nextjs.org | ||
| [mdx]: https://mdxjs.com | ||
| [theme ui]: https://theme-ui.com | ||
| [hack club theme]: https://github.com/hackclub/theme | ||
|
|
||
| ## Usage | ||
|
|
||
| 1. Import this repo to your coding environment of choice. Download it, `git clone`, or use the GitHub import on Glitch/Repl.it. | ||
| 2. `yarn` to install dependencies. | ||
| 3. `yarn dev` to start your server. | ||
| 4. 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](https://www.futurefonts.xyz/phantom-foundry/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](https://theme.hackclub.com) 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: | ||
|
|
||
| ```js | ||
| 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](https://github.com/hackclub/theme/tree/main/packages/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`: | ||
|
|
||
| ```js | ||
| // import Head from 'next/head' | ||
| // import Meta from '@hackclub/meta' | ||
|
|
||
| <Meta | ||
| as={Head} | ||
| 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 | ||
| /> | ||
| ``` | ||
|
|
||
| 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`. | ||
|
|
||
| <details> | ||
|
|
||
| <summary>Example code</summary> | ||
|
|
||
| ```js | ||
| 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.vercel.app/card.png', | ||
| url = 'https://yourproject.vercel.app/' | ||
| }) => ( | ||
| <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> | ||
| ) | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| ### Adding analytics | ||
|
|
||
| Hack Club HQ uses (& loves) [Fathom Analytics](https://usefathom.com/ref/NXBJA2) | ||
| for simple, privacy-focused analytics. ([Check out our site’s analytics here.](https://app.usefathom.com/share/ogimjefa/hackclub.com)) | ||
|
|
||
| To add Fathom to your project, `yarn add fathom-client`, then you’ll need to | ||
| load it appropriately in `pages/_app.js`. The script is located at | ||
| <https://aardvark.hackclub.com/script.js>. | ||
|
|
||
| <details> | ||
|
|
||
| <summary>Example file with Fathom</summary> | ||
|
|
||
| ```js | ||
| import React, { useEffect } from 'react' | ||
| import { useRouter } from 'next/router' | ||
| import NextApp from 'next/app' | ||
| import Head from 'next/head' | ||
|
|
||
| import Meta from '@hackclub/meta' | ||
| import '@hackclub/theme/fonts/reg-bold.css' | ||
| import theme from '../lib/theme' | ||
| import { ThemeProvider } from 'theme-ui' | ||
| import * as Fathom from 'fathom-client' | ||
|
|
||
| const App = ({ Component, pageProps }) => { | ||
| const router = useRouter() | ||
|
|
||
| useEffect(() => { | ||
| Fathom.load('YOURCODE', { | ||
| includedDomains: ['hackclub.com'], | ||
| url: 'https://aardvark.hackclub.com/script.js' | ||
| }) | ||
| const onRouteChangeComplete = () => Fathom.trackPageview() | ||
| router.events.on('routeChangeComplete', onRouteChangeComplete) | ||
| return () => { | ||
| router.events.off('routeChangeComplete', onRouteChangeComplete) | ||
| } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <ThemeProvider theme={theme}> | ||
| <Meta as={Head} /> | ||
| <Component {...pageProps} /> | ||
| </ThemeProvider> | ||
| ) | ||
| } | ||
|
|
||
| export default App | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| ## Deployment | ||
|
|
||
| [](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fhackclub%2Ftheme-starter&repo-name=theme-project) | ||
|
|
||
| We recommend using [Vercel](https://vercel.com) 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](https://vercel.com/docs#deploy-an-existing-project) | ||
| for more details. | ||
|
|
||
| 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. | ||
| [Material for Mkdocs]: https://squidfunk.github.io/mkdocs-material | ||
| [MDX]: | ||
| [Theme UI]: https://theme-ui.com/ | ||
| [Hack Club Theme]: https://github.com/hackclub/theme |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| // SPDX-License-Identifier: MIT AND MPL-2.0 | ||
| import * as React from 'react' | ||
| import { Box, Heading, Text } from 'theme-ui' | ||
| import Link from './Link' | ||
| import ColorSwitcher from './color-switcher' | ||
|
|
||
| const Footer: React.FC = () => ( | ||
| <Box as="footer" sx={{ | ||
| bg: 'muted', color: 'text', p: 3, mt: 4 | ||
| }}> | ||
| <Link href="#top">Scroll to top ↑</Link> | ||
| <br/><br/> | ||
| <Text> | ||
| © {new Date().getFullYear()} Recap Time Squad and contributors. Unless otherwise specified website content is licensed under <Link href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</Link>.<br/> | ||
| <br/> | ||
| Recap Time Squad is fiscally-sponsored by <Link href="https://the.hackfoundation.org">The Hack Foundation</Link> (dba Hack Club). | ||
| </Text> | ||
| </Box> | ||
| ) | ||
|
|
||
| export default Footer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| // SPDX-License-Identifier: MIT AND MPL-2.0 | ||
| import { useState } from 'react' | ||
| import { Box, Container, Heading, IconButton, useColorMode } from 'theme-ui' | ||
| import Link from './Link' | ||
| import ColorSwitcher from './color-switcher' | ||
|
|
||
| export default function Header() { | ||
| const [colorMode, setColorMode] = useColorMode() | ||
| const [isMenuOpen, setIsMenuOpen] = useState(false) | ||
|
|
||
| const toggleMenu = () => { | ||
| setIsMenuOpen(!isMenuOpen) | ||
| } | ||
|
|
||
| return ( | ||
| <Box | ||
| as="header" | ||
| sx={{ | ||
| bg: colorMode === 'light' ? 'white' : 'black', | ||
| color: colorMode === 'light' ? 'black' : 'white', | ||
| borderBottom: '1px solid', | ||
| borderColor: 'muted', | ||
| height: '64px', | ||
| position: 'sticky', | ||
| top: 0, | ||
| left: 0, | ||
| zIndex: 1000, | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| px: 3 | ||
| }} | ||
| > | ||
| <Container | ||
| sx={{ | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| height: '100%' | ||
| }} | ||
| > | ||
| <Heading | ||
| as="h1" | ||
| sx={{ | ||
| color: 'inherit', | ||
| fontSize: 3, | ||
| m: 0 | ||
| }} | ||
| > | ||
| <Link | ||
| href="/" | ||
| sx={{ | ||
| textDecoration: 'none', | ||
| color: 'inherit' | ||
| }} | ||
| > | ||
| Recap Time Squad | ||
| </Link> | ||
| </Heading> | ||
| <Box sx={{ display: ['none', 'flex'], alignItems: 'center' }}> | ||
| <Link href="/about" sx={{ color: 'inherit', mx: 2 }}> | ||
| About | ||
| </Link> | ||
| <Link href="/team" sx={{ color: 'inherit', mx: 2 }}> | ||
| The team | ||
| </Link> | ||
| <Link href="/Projects" sx={{ color: 'inherit', mx: 2 }}> | ||
| Projects | ||
| </Link> | ||
| <Link href="/donate" sx={{ color: 'inherit', mx: 2 }}> | ||
| Donate | ||
| </Link> | ||
| </Box> | ||
| <IconButton | ||
| sx={{ display: ['block', 'none'], color: 'inherit' }} | ||
| onClick={toggleMenu} | ||
| > | ||
| <svg | ||
| viewBox="0 0 24 24" | ||
| width="24" | ||
| height="24" | ||
| fill="currentcolor" | ||
| > | ||
| <path d="M3 6h18M3 12h18M3 18h18" /> | ||
| </svg> | ||
| </IconButton> | ||
| <ColorSwitcher /> | ||
| </Container> | ||
| {isMenuOpen && ( | ||
| <Box | ||
| sx={{ | ||
| display: ['block', 'none'], | ||
| position: 'absolute', | ||
| top: '64px', | ||
| left: 0, | ||
| right: 0, | ||
| bg: colorMode === 'light' ? 'white' : 'black', | ||
| color: colorMode === 'light' ? 'black' : 'white', | ||
| zIndex: 999, | ||
| px: 3, | ||
| py: 2 | ||
| }} | ||
| > | ||
| <Link href="/about" sx={{ color: 'inherit', display: 'block', py: 1 }}> | ||
| About | ||
| </Link> | ||
| <Link href="/team" sx={{ color: 'inherit', display: 'block', py: 1 }}> | ||
| The team | ||
| </Link> | ||
| <Link href="/projects" sx={{ color: 'inherit', display: 'block', py: 1 }}> | ||
| Projects | ||
| </Link> | ||
| <Link href="/donate" sx={{ color: 'inherit', display: 'block', py: 1 }}> | ||
| Donate | ||
| </Link> | ||
| <Link href="/contact" sx={{ color: 'inherit', display: 'block', py: 1 }}> | ||
| Contact | ||
| </Link> | ||
| </Box> | ||
| )} | ||
| </Box> | ||
| ) | ||
| } |
Oops, something went wrong.