oscafrica / oscafrica-website

🔥 New OSCA Website (WIP)

oscafrica.org

Getting Started

1. Fork this repository

2. Clone the forked repository like so:

git clone https://github.com/<your username>/oscafrica.org.git && cd oscafrica.org

3. Read the Contributors Guide

Installation Guide

1. Install the Gatsby CLI

npm install -g gatsby-cli

2. Change directories into site folder

cd oscafrica.org

3. Create and checkout to a new branch for your feature

git checkout -b gallery-component

4. Start development server

npm run dev

Gatsby will start a hot-reloading development environment accessible by default at localhost:8000

5. Create a production build

npm run build

Gatsby will perform an optimized production build, generating static HTML and per-route JavaScript code bundles.

6. Serve the production build locally

npm run serve

Gatsby starts a local HTML server for testing the built site. Remember to build the site using gatsby build before using this command.

7. Run Storybook

npm run storybook

Storybook will start a hot-reloading development environment accessible on a random open port

8. Make Git commits

npm run commit

We use the commitizen command line utility, you'll be prompted to fill out any required commit fields at commit time. You would not need to run git commit again.

Format and lint

1. See what ESLint and Prettier can fix

npm run analyze

2. Run Prettier and ESLint with the --fix option

npm run fix

oscafrica-website's Issues

Fix failing tests

Fix all failing tests before resuming on the project proper

Refactoring chores

Design handover

Team Flow and convention

Redesign header component

The header on the design looks different from what is currently on the page.

Redesign header to look like the one in the design.

Issue: Gotham font missing

The Gotham font should be used on some write-ups in this design but it is missing in the fonts folder and Tailwind configuration file.

OSCA Home Page

The design for the home page can be found here:

Concerns:
@perriefidelis I noticed that images on page one and page two on the community section on the home page are different. Is the section intended to have carousel images?

About us page

https://www.figma.com/file/dDQ0f43gracsqn1LJYk91E/New-OSCA-website?node-id=1087%3A2503

internationalization Using format.js Library

formatjs is a set of libraries that help you setup internationalization in any project whether it's React or not.
A popular one among the library is ReactIntl.
This makes it easy to extract the strings and make the website translation ready.

https://formatjs.io/docs/getting-started/installation/

Blank space below the Footer

On large screens
there's a little bit of problem-related to the page size, the footer.

The white blank space below the footer.

i tried it out on a bigger screen, it was way bigger than the sample i sent(screen capture)

Redesign footer component

Issue: Build new button variation

Hi! There is a new button variation in the design of the new Osca website and it has not been built and added to the button component as a new variation. Check the "our-community" section in the about-us page design to see a sample of this button variation.