distributeaid.org

TypeScriptJavaScriptGatsbyHTML / CSSSocial ActivismFirst Timer Friendly

Distribute Aid's landing site, where people can learn about our organization, mission, and wonderful volunteers.

Open issues

Last 30 days

1
Hack-🎃-fest
7
PRs opened
7
Contributors

Overview

DA Landing Site 2.0

Distribute Aid's landing site, where we get to tell the world who the heck we are and what the hell we're doing!

The main goals of this project are to:

  1. Create a landing site that introduces Distribute Aid, highlights our projects & services, publicly documents our impact, communicates upcoming plans to our network, highlights how to join / support us, and of course credits the many people who have contributed over the years.

  2. Make it easy for any Distribute Aid volunteer to manage content and publish changes to the site directly. This includes all text & images, but also data that powers components, pages & site structure, and some site metadata.

  3. Provide engaging pathways for design & dev volunteers to directly collaborate with the rest of the team, without holding them back. Our whole team will be contributing well structured content, which helps clarify what's needed without a ton of meetings. Use your favorite tools to make it shine.

Quick Links

Key Documents

Development Process

Code of Conduct

First, please read our code of conduct.

Issue Tracking

Development tasks are managed in the github issues for this repository. The issues themselves are fairly light on detail in favor of a simple description of scope (i.e. the conditions for the task being considered "done"). Most tasks will be driven by content requirements, so please coordinate with the requesting content creator for context, sample content, and additional details.

Issues tagged front end will also be tagged with:

  • needs sample content - A content creator needs to create sample content to show what information will be presented.
  • needs UI mock - A designer needs to create a UI mock of the component.
  • has content & UI mock - The task is ready for development!

When you begin working on an issue, please self-assign or comment on it indicating you're beginning work to avoid duplicate effort.

Pull Requests

When you're ready to submit your code, open a pull request with "Closes #X" to link the relavant issue. When your PR is approved by at least one maintainer it is ready to submit.

It's easy for the intention of code review comments to be unclear or get misinterpreted. To help with communication, reviewers are encouraged to use conventional comments and explicitly indicate that comments are (blocking), where the discussion must be resolved for PR to be merged, or (non-blocking) where resolving the discussion is optional for the implementer.

Approval and merging

Reviewers should grant approval if they do not feel additional review is necessary before merging. This does not necessarily mean no more changes are required before merging, but that any further changes are expected to be minor enough to not require review.

If the pull request does not require additional changes, the reviewer should merge it immediately after approving. Otherwise, the pull request author should merge (if able) once they have addressed all comments marked (blocking) or nit. Contributors are encouraged to at least reply to (non-blocking) and (if-minor) comments if they do not address them with code changes.

Technologies Used

Our Content "Supply Chain"

The Distribute Aid Landing Site is a static TypeScript website generated by GatsbyJS with content from the Contentful headless CMS.

Content Management

General Tools

Build Tools

Front End

Production

Previous Work & Credits

Initial commit bootstrapped off of Contentful Gatsby Starter Blog which is MIT licensed.

The original DA Landing Site project can be found at https://gitlab.com/distribute-aid/landing. <3

Contributing

Follow the steps in our README and peruse the list of issues.

Dev Setup

Install system dependencies:

  • Node v14
  • Yarn v1.22.5

Install project dependencies:

  • yarn

Setup your dev environment:

  • yarn setup - Will ask for Contentful API tokens and create .env.development and .env.production. Ask the project leads to get the API tokens or your own Contentful account.

Run the dev server:

  • yarn dev

Finally, checkout the local site & GraphQL sandbox at:

Dev Notes

Crucial Commands

yarn dev

Run the project locally with live reload in development mode.

yarn build

Run a production build into ./public. The result is ready to be put on any static hosting you prefer.

yarn serve

Spin up a production-ready server with the site. Don't forget to build your page beforehand.

Where To Put Things

React src/ folder layout inspired by this blog post but can be changed up as desired.

Learn

Resources to learn more about our technology and community.

Built with tea and love by