/P33-DEI-dashboard-project

A website to analyze the equality - or lack thereof - that exists among underrepresented communities in the tech sector.

Primary LanguageSvelte

open in Gitpod Build

Tech Equity Index

A website to analyze the equality - or lack thereof - that exists among underrepresented communities in the tech sector.

Features of the website:

  • 📱🖥 Cross-platform: mobile-first, responsive design
  • 🏎⚡️ Fast: served from edge CDN, statically rendering for server, inlined assets, client-side rendering after initial page view, only one large-ish JavaScript file, Plotly.js. (audit)
  • 🔍🧏 Accessible: can be used without JavaScript, keyboard navigation, high-contrast
  • 👩‍💻 Developer-friendly: click here to open editor in browser, technical documentation, intuitive design system (Tailwind), commit hooks, web component and accessibility tools enabled out-of-the-box.

This repository consists of two sub repositories:

  • p33py: Python package for processing data to generate visualizations and JSON
  • web: website which takes visualizations and JSON as input and outputs the website as static HTML.

See p33py/README.md and web/README.md for details.

Getting started

There are two ways of getting a development environment:

  1. Using the cloud-based development workspace, Gitpod (recommended)
  2. Installing things to your local machine (for advanced users)

See the sections below for more info on development environemnts, and Tech overview for an overview of the project.

Cloud-based development environment (Gitpod)

To launch the development workspace in your browser, visit the project's Github page and click the "Contribute with Gitpod" badge at the top of this README.md file.

Tip: browser keyboard shortcuts can interfere with VSCode's shortcuts. To avoid this, launch the workspace as its own application window. In Chrome, create a shortcut via Menu > More Tools > Create Shortcut ...

Local development environment

⚠️ CAUTION ⚠️:️ If you use this approach, please be sure you have the proper safetynets - install the githooks!.

It's not practical to document everything needed for local development. As an alternative, you can clone the git repo, then look at .gitpod.yml to see what Gitpod does to create a workspace. See Gitpod's documentation for details.

Regardless, here are some important points:

  • Install githooks
  • If a pre-commit hook fails, understand why (there's a reason)
  • Use install.sh and start_dev.sh :)

Previewing changes to scorecard and metrics

Follow these steps to test changes in a development environment:

Notable folders

Additional documentation

See docs for additional documentation, including: