There are many ways you can contribute, here are just some of the broader items we love to have help from the community on:
Before we get started, here are a few things we expect from you (and that you should expect from others):
The best place to start is the open issues. Any ones we feel are a great first step into the code base we have labeled as good first issue
. But don't feel limited to just those issues. Any open issue is up for grabs to be worked on.
Find one you would be interested working on, assign yourself and get started! Once complete open a pull request and label as ready for review
. Want to pull more community in? Yeah you do! Mention in THAT Slack or on the socials that you have a PR that needs to be reviewed. We love having community involvement across the entire flow.
Once your PR is reviewed and the specs pass, THAT Crew will give me one last run through and merge.
Coming soon
THAT website is server-side rendered React via Nextjs. To get started, clone the repo and run npm install
to get all the dependencies in place. Also run npm i -g now@16.7.3
to install Zeit Now globally on your machine.
Note: The 17.*+ version of Zeit Now introduced project linking and is currently problematic. A possible work-around has been added in section 5b if you would like to try that with the latest version of Zeit now/Vercel.
If you are experiencing http 404 errors on dynamic pages, e.g. blog posts, user profiles, etc. this is probably do to an issue with Zeit Now cli. the command now dev
isn't redering dynamic pages correctly on version 16.7 any longer. As a work-around use npm run dev
, which uses next to run your the site locally on the same port, 3000
. Be aware that while running the site using npm run dev
local api function calls do not work at this time (e.g. /api/me).
If you are on a mac, it is helpful to make sure Xcode and Xcode command line tools are up to date.
Run cp .env.sample .env && cp .env.build.sample .env.build
to get basic configuration in place.
If you have previously setup your environment, make sure that all keys from .env.sample
and .env.build.sample
are present in your .env
and .env.build
files. New entries may have been added and need to be present for this to run for you.
Edit the .env.build file:
DEBUG=that:*
SESSION_COOKIE_SECRET
requires at least a 32 character value.API_GATEWAY
should be https://api.that.tech
Edit the .env file, adding
DEBUG=that:*
SESSION_COOKIE_SECRET
requires at least a 32 character value.API_GATEWAY=https://api.that.tech
After you edit those files, run now dev
to startup localhost
.
As mentioned in section 5 the Zeit/Vercel cli from version 17 and above requires project linking to work correctly. The instructions in this section walk through one way you can configure this locally so you may use newer versions. These instructions were tested with Vercel/Now cli version 19.0.1. In April 2020 Zeit changed it's name to Vercel, so the term vercel
will be used going forward. Read here for more information about this change.
Assumptions: These instructions assume that you currently don't have a Vercel account or project to point to for that-website. You will not need to deploy any code to Vercel, the account is only needed for project linking, a confusing feature/requirement of the Vercel cli.
At this point ensure you're in the cloned that-website directory
$ vercel login
$ vercel
$ vercel
Yes this is ugly, but we are now ready to develop locally. Vercel cli has the project link it needs to run the code locally. To develop locally run:
$ vercel dev
or
$ vc dev
So what was created? The cli added a new folder, .vercel
to the that-website project directory. The name .vercel
is in .gitignore
and should NOT be committed to the repository. It is unique to your local environment. This should be all that is needed to get working locally again. If you run into any troubles, please open an issue.
THAT is all about community. It was bringing the community together that inspired the creation of THAT Conference. Participating in the development of our website is a way for us to extend our community.
Assume good intentions. Keep discussions within issues and pull requests so all can participate.
The pages
directory contains a file for each page of the site.
components
directory is where you will find all components used across all pages. shared
contains components used across multiple pages.
Any components specific to a page are grouped together in the same folder.
If a component has sub-components it concludes (i.e. footer) all of those components will be within the same folder.
THAT Website utilizes styled-components
. 1rem
= 10px
We utilize Jest + Enzyme to unit test each component. Each component should be covered with a spec to ensure it renders without error as well any additional functions that component relies on to render correctly.
In order to iterate collectively when developing a new page we have a higher order component you can wrap your page component around so that it is only rendered for a matching query param.
Here is how it works, in your .env
file give FEATURE_KEYWORD
some value. Then wrap your page component (NOTE: currently only works for pages) in togglePage
. This adds the logic that will allow this page to render only when a query param is present and matches the value set in FEATURE_KEYWORD
.
Example - Check out samples/toggle-page.js
. Here is a sample page wrapped in togglePage
. Now, set FEATURE_KEYWORD in your .env
to a value, let's go with baconisgreat
, then fire up the local environment.
Go to: http://localhost:3000/samples/toggle-page?feature=baconisgreat and page will load.
Go to: http://localhost:3000/samples/toggle-page?feature=baconisgood, page not found
Go to: http://localhost:3000/samples/toggle-page, page not found
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!