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.
Prerequisites
[email protected]. 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 [email protected]:AI-Global/rai-website.git
cd rai-website
npm installTo start developing against the project
npm startAfter running the npm start command, you should have 2 browser tabs open:
// Gatsby site
http://localhost:8000
// Storybook
http://localhost:8100http://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.
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.
To run tests:
npm run testWhen working on a specific component, you can run the tests for that specific component:ß
npm run test ComponentNameResponsible AI website project uses eslint to run a linter of javascript, typescript, and markdown code.
To run the linter, use:
npm run lint
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
}
}
}