Skip to content

Latest commit

 

History

History
98 lines (66 loc) · 2.5 KB

README.md

File metadata and controls

98 lines (66 loc) · 2.5 KB
Raw

🤖 Responsible AI Website

This is the repository for the Responsible AI Website.

This is a React project built using Gatsby as a framework, Contentful as a CMS, and Storybook as a component playground.

Getting Started

Prerequisites

  • node@12.13.0. You can use nvm to manage your node versions.
  • Access to Contentful secrets

To get this project set up on your local machine:

git clone git@github.com:AI-Global/rai-website.git
cd rai-website
npm install

To start developing against the project

npm start

After running the npm start command, you should have 2 browser tabs open:

// Gatsby site
http://localhost:8000
// Storybook
http://localhost:8100

Working with Gatsby

http://localhost:8000/🔗

Gatsby is a React-based open-source framework for creating websites and apps. It's great whether you're building a portfolio site or blog, or a high-traffic e-commerce store or company homepage.

For more reading about Gatsby, check out their docs.

Working with Storybook

http://localhost:8100/🔗

Ideally, components should be created in isolation. The reason for this is that Components should be as generic as possible to allow for as many use cases as possible. To do this, we use Storybook.

Storybook will allow you to develop and test your components in isolation from the rest of the website.

Testing

To run tests:

npm run test

When working on a specific component, you can run the tests for that specific component:ß

npm run test ComponentName

Linting

Responsible AI website project uses eslint to run a linter of javascript, typescript, and markdown code.

To run the linter, use:

npm run lint

Fragment Colocation

The majority of your components will need data directly from Contentful. When this is the case you will want to use Gatsbys style of fragment colocation. This allows you to define your component props through the GraphQL api.

fragment ExampleFragment on ExampleType {
  title
  subtitle
  slug
  contnet {
    raw
  }
}

query ExampleQuery {
  allExampleTypes {
    nodes {
      ...ExampleFragment
    }
  }
}