- Fork the repo
- Clone your fork
- Make a branch for your feature/bugfix/new episode/etc.
yarn install(make sure you have node and npm installed first)
yarn start validateto get everything built for the first bit. (If this doesn't work, please file an issue with your node/npm versions and the error message).
yarn start serverand open
localhost:8080in a browser
- If you experience any issues up to this point, please file an issue!
- Run the dev script(s) (in separate terminal tabs/windows) relevant for the changes you're making (see below), make your changes, and refresh your browser to see them
yarn start buildagain to make sure you wont break the build
- Commit your changes and reference the issue you're addressing (for example:
git commit -am 'Your descriptive message. Closes #34')
- Push your branch to your fork
- Create a pull request from your branch on your fork to master on this repo
- Get merged!
Add yourself to the contributors page
Please download your photo and use
yarn start compress-image /path/to/the/image to compress your photo (more info
below). Put the resulting image in the
data/contributors directory. Then add an entry for yourself to
data/contributors/index.js. That's it! Thanks!
Most of everything you do with the website you can do with the npm scripts you find in the
I recommend you look at the scripts that start with
dev which will watch the filesystem for changes and re-run the build for that page while you're developing.
If you want, you can just run
yarn start dev. That effectively rebuilds everything anytime you change a file. This takes a second, but it works :-)
CSS is currently being migrated to
aphrodite. This means you don't need to do anything
special from a build perspective for most stuff. For some of the older stuff, here's what you've gotta do:
CSS is processed using postcss and you need to build it (it's
.gitignored). To do this, run
yarn start build.css.
If you're going to work on the css, you can run
yarn start dev.css and it will watch the file for changes and rebuild.
I've hacked together a pretty crazy way to build these files. I'm sure there's a much better way to do this. But what we've got works pretty well. If you're working on a specific episode (for example, the first episode), simply run:
yarn start dev:episode episodes/2015-12-09
This will start nodemon watching your file system for changes and recompiling your page on changes. No hot reloading or anything. Yes, I have no idea what I'm doing. (protip, you may also want to look into npm-quick-run)
I've added a plop generator for adding new episodes. In the root directory, simply enter
Follow the prompts and it will generate the episode file for you.
You can generate the description for the podbean podcast like so:
yarn start description episodes/2015-12-09
pbcopy is available on OSX if you want to pipe the output to your
Pretty much all images should be
180x180 and compressed. We've automated this pretty well to make it simple to do.
To do this we're using imagina. Check out the
imagina docs to see how to set it up to work on your machine.
yarn start compress-image /path/to/the/image
And you'll get a compressed, resized, and converted (if needed) image to use for the site. This image will have the original filename, but will end with "resized.png". Before committing, make sure to replace your original image with the compressed one by deleting the original and renaming the compressed one to the original's filename.