Abafazi

A project focusing on shelters and services for women who are victims of abuse.

Site is live at abafazi.netlify.com.

---

Setup

What to set up first running this project. You can follow the Gatsby docs for environment setup

TL;DR, ensure you have:

• Homebrew for Node.js
• XCode Command Line Tools
  • xcode-select --install
• Node.js and npm
  • brew update
  • brew install node
• Gatsby CLI
  • npm install -g gatsby-cli

Then setup the project:

git clone [email protected]:diff-community/abafazi.git abafazi
cd abafazi
npm install

Usage

# To develop
npm run develop

# To build
npm run build

# To deploy to GitHub Pages
npm run deploy:gh

# To test SSR (for Lighthouse etc.)
npm run ssr

# To format JS (precommit)
npm run format

# To generate favicons (included in `build`)
npm run build:favicons

Hosting

The site is currently set up to allow hosting on:

• Netlify - automagically deployed
  • https://abafazi.netlify.com
• GitHub Pages - via the cli
  • https://diff-community.github.io/abafazi

Folder structure

├── gatsby-browser.js # Specify how Gatsby renders pages in the browser
├── gatsby-config.js # Gatsby config, mostly taken from `site-config.js`
├── gatsby-node.js # Modify webpack config
├── gatsby-ssr.js # Specify how Gatsby builds pages
├── site-config.js # Global settings for the whole site, used by multiple scripts
├── content # Content & data, in both json and markdown
├── src
│   ├── components
│   │   ├── head # All meta tags etc.
│   │   ├── io # Intersection Observer component, uses render props
│   │   ├── layout # Layout component
│   │   │   ├── layout.css.js # .css.js for component's `styled-components`
│   │   │   └── layout.js
│   │   └── transition # Page Transition component, used by Gatsby APIs
│   ├── constants # Site-wide constants (breakpoints, colors, etc.)
│   ├── containers # Container components if store is needed
│   ├── helpers
│   │   ├── schemaGenerator.js # Generates JSON-LD schema.org snippets
│   │   └── mediaTemplates.js # Creates media queries for styled-components
│   ├── images # Images needed by the site/theme (not content)
│   ├── pages
│   ├── store # Store and provider of a React.createContext instance
│   └── global.css.js # Global CSS
└── scripts
    ├── lighthouse.test.js # Tests the site specified inside `site-config.js` with Google Lighthouse (WIP)
    └── favicons.js # Generates favicons and manifest using one png only.

Gatsby

• Based off a Gatsby theme Gatsby Universal
• Author of Gatsby Universal Fabian Schultz Stink Studios
  • Version used: fbe237f