mirror of
https://github.com/System-End/site.git
synced 2026-04-19 18:35:12 +00:00
Begin v3
This commit is contained in:
Lachlan Campbell
commit
3ea9a9befd
9 changed files with 6523 additions and 0 deletions
4
.gitignore
vendored
Executable file
4
.gitignore
vendored
Executable file
|
|
@ -0,0 +1,4 @@
|
|||
.now
|
||||
.next
|
||||
node_modules
|
||||
.DS_Store
|
||||
126
README.md
Executable file
126
README.md
Executable file
|
|
@ -0,0 +1,126 @@
|
|||
# Hack Club Theme Starter
|
||||
|
||||
A sample [Next.js] project for getting started with [MDX], [Theme UI], & [Hack Club Theme].
|
||||
|
||||
[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/master/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'
|
||||
|
||||
<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`.
|
||||
|
||||
<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.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>
|
||||
)
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## Deployment
|
||||
|
||||
[](https://zeit.co/import/project?template=https://github.com/hackclub/theme-starter)
|
||||
|
||||
We recommend using [ZEIT Now](https://zeit.co) 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://zeit.co/docs#deploy-an-existing-project)
|
||||
for more details.
|
||||
|
||||
If you’re only making a static site (e.g. no [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering)
|
||||
or [API Routes](https://nextjs.org/docs/api-routes/introduction)), you can also
|
||||
deploy on [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.
|
||||
39
components/color-switcher.js
Executable file
39
components/color-switcher.js
Executable file
|
|
@ -0,0 +1,39 @@
|
|||
import { IconButton, useColorMode } from 'theme-ui'
|
||||
|
||||
const ColorSwitcher = (props) => {
|
||||
const [mode, setMode] = useColorMode()
|
||||
return (
|
||||
<IconButton
|
||||
onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
|
||||
title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: [2, 3],
|
||||
right: [2, 3],
|
||||
color: 'primary',
|
||||
cursor: 'pointer',
|
||||
borderRadius: 'circle',
|
||||
transition: 'box-shadow .125s ease-in-out',
|
||||
':hover,:focus': {
|
||||
boxShadow: '0 0 0 3px',
|
||||
outline: 'none'
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<svg viewBox="0 0 32 32" width={24} height={24} fill="currentcolor">
|
||||
<circle
|
||||
cx={16}
|
||||
cy={16}
|
||||
r={14}
|
||||
fill="none"
|
||||
stroke="currentcolor"
|
||||
strokeWidth={4}
|
||||
/>
|
||||
<path d="M 16 0 A 16 16 0 0 0 16 32 z" />
|
||||
</svg>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
||||
export default ColorSwitcher
|
||||
2
next.config.js
Executable file
2
next.config.js
Executable file
|
|
@ -0,0 +1,2 @@
|
|||
const withMDX = require('@next/mdx')({ extension: /\.mdx?$/ })
|
||||
module.exports = withMDX({ pageExtensions: ['js', 'jsx', 'mdx'] })
|
||||
22
package.json
Executable file
22
package.json
Executable file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@hackclub/theme-starter",
|
||||
"version": "0.0.1",
|
||||
"author": "Lachlan Campbell <lachlan@hackclub.com>",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hackclub/meta": "^0.1.0-alpha.0",
|
||||
"@hackclub/theme": "^0.1.0-alpha.0",
|
||||
"@mdx-js/loader": "^1.5.8",
|
||||
"@next/mdx": "^9.3.5",
|
||||
"next": "^9.3.5",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"theme-ui": "^0.3.1"
|
||||
}
|
||||
}
|
||||
25
pages/_app.js
Executable file
25
pages/_app.js
Executable file
|
|
@ -0,0 +1,25 @@
|
|||
import * as React from 'react'
|
||||
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 '@hackclub/theme'
|
||||
import { ThemeProvider } from 'theme-ui'
|
||||
import ColorSwitcher from '../components/color-switcher'
|
||||
|
||||
export default class App extends NextApp {
|
||||
render() {
|
||||
const { Component, pageProps } = this.props
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Head>
|
||||
<title>Hack Club</title>
|
||||
<Meta />
|
||||
</Head>
|
||||
<ColorSwitcher />
|
||||
<Component {...pageProps} />
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
22
pages/_document.js
Executable file
22
pages/_document.js
Executable file
|
|
@ -0,0 +1,22 @@
|
|||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
import { InitializeColorMode } from 'theme-ui'
|
||||
|
||||
export default class extends Document {
|
||||
static async getInitialProps(ctx) {
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
return { ...initialProps }
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head />
|
||||
<body>
|
||||
<InitializeColorMode />
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
6
prettier.config.js
Executable file
6
prettier.config.js
Executable file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
singleQuote: true,
|
||||
trailingComma: 'none',
|
||||
printWidth: 80,
|
||||
semi: false
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue