This project is built with [Contentful](https://www.contentful.com), [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) & [Typescript](https://www.typescriptlang.org/).
Using `--frozen-lockfile` makes sure that the environment is consistent on any machine by installing the exact package versions listed in the [yarn.lock](yarn.lock).
5. Signup for a free [Contentful](https://www.contentful.com/) account and create an organisation and within that create a space.
We called our organization **Oxen** and the space **Website**.
- For the site to build correctly you need to import our Content models and assets into your Contentful space. We have created some example content so you can get comfortable with our Contentful setup.
**NOTE: Not all pages will load correctly because our Content is stored on Contentful.**
- Add your `space ID` and `content management token` inside of [contentful/config.json](contentful/config.json)
- Run this command inside the root of this project
```
npx contentful space import --config contentful/config.json
```
- For more information about importing/exporting in Contentful see [here](https://www.contentful.com/developers/docs/tutorials/cli/import-and-export/).
6. Setup your environment file. See our [.env.example](.env.example) as a guide. Make sure to call the file `.env.local`.
- You can leave the [Campaign Monitor](https://www.campaignmonitor.com/) keys empty unless you are interested in how we handle mailing list subscriptions.
## Developing
- For accessbility testing we use the [axe-react](https://github.com/dequelabs/axe-core-npm/blob/develop/packages/react/README.md) plugin.
- We use the [Headwind](https://github.com/heybourn/headwind) VSCode extension for sorting TailwindCSS classes.
- We use [classnames](https://www.npmjs.com/package/classnames) to organise our classes into groups that combine at build time.
If you are new to Next.js, this is a helpful introduction: https://nextjs.org/docs
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
- Use the `Link Preview` and `Media` content models for embedding content into blog posts.
- If linking content that is on the site itself try to omit omit https://getsession.org.
e.g. `https://getsession.org/blog/onion-requests-session-new-message-routing-solution/` => `/blog/onion-requests-session-new-message-routing-solution/`.
- To use <sup>superscript</sup>, <sub>subscript</sub>, ~~strikethroughs~~ or <spanstyle="background-color: #3a3a3a; color: white;">style</span><spanstyle="color: #00f782;">text</span> use the `Markup` content model.
- Try to use the [next/image](https://nextjs.org/docs/api-reference/next/image) component in place of `img` tags where possible.
- If you want to make a link to a location on the website use the [next/link](https://nextjs.org/docs/api-reference/next/link) component with a relative path. i.e. `https://getsession.org/blog -> /blog`