This repository archives projects made by students of the MS Data Visualization program at Parsons School of Design.
Note: Please submit a pull request with your new project URL if you relocate your work to a different domain name or hosting provider.
You will need the following command line tools.
Required:
- Node.js (v18.19.1) https://nodejs.org/
- pnpm (v9.15.2) https://pnpm.io/installation#using-npm
Optional:
[TBD]
[TBD]
This repository uses pnpm to run commands. pnpm is an alternative to npm but uses less storage space on your computer by installing local dependencies within a shared location.
Our package.json file defines some common scripts that are used during development. They can be invoked by running pnpm [script name].
# Example:
# pnpm [script name]
pnpm dev| script name | description | why is this helpful |
|---|---|---|
| dev | starts development server | gives us a live preview of our site that we can view in the browser |
| build | builds static deployment assets | compiles framework specific files (like .vue) to browser compatible javascript |
| preview | previews the built site | gives us a live preview of our site that we can view in the browser |
| format | runs prettier to format files according to .pretterrc.yml config | keeps code style consistent and reduces the number of line changes between Pull Requests |
| lint | runs eslint to check for code errors and bugs | helps catch errors like typos before we build the site |
| test | runs jest to execute unit tests to check components | checks that recent changes don't change how our components function |
This repository is set up to use GitHub Actions to check the status of commits made and to deploy the project to GitHub Pages. Each workflow is defined in a separate Yaml file in .github/workflows/. Check pnpm versions in each workflow if they fail to run successfully.
| workflow | description |
|---|---|
| test | runs formatter, linter, and ensures that build process do not throw any errors |
| deploy | builds web assets and pushes automatically to github pages branch |
Project data is stored in ./src/data/projects/*.json.
The projects array follows this template:
{
"description": "Project description",
"image": "static/preview-YEAR/<STUDENT NAME>.png",
"name": "Student Name",
"portfolio": "<PORTFOLIO LINK>",
"repo": "<PROJECT REPO>",
"subtitle": "Project intro text",
"tags": ["#data", "#technology"],
"title": "Project title",
"url": "<PROJECT LINK>",
"video": "<VIDEO LINK>",
"year": YYYY
}-
Make sure you have the right version of Node.js
node --version # v18.19.1 -
Make sure you have the right version of pnpm
pnpm --version # >= 9.15.2 -
Install dependencies
pnpm install
-
Start development server
pnpm dev
-
You can now open http://localhost:8080 in your browser.
An update to gh-pages is made when a commit is pushed to the main branch.
It is recommended to follow the best practices detailed in the MS Data Visualization GitHub workflow document found at https://github.com/visualizedata/github-workflow
-
Initial setup:
-
In the local clone of your fork, create a branch for your edits.
git branch mybranchcreates a branch named mybranchgit checkout mybranchswitches to the branch mybranch- Do all your work in this branch.
- Push your branch to the forked repo early and often.
- Never work in the
mainbranch! - gh-pages will publish directly to the live site (it takes about 5 minutes to update)
-
Pull in changes often from the
upstream mainto keep it synced so that when you prepare your pull request, merge conflicts will be less likely. Again, never work in themainbranch! -
Merge the fork main into the fork branch and, if applicable, resolve any merge conflicts.
git merge <branch>merges the specified branch into the current branch. -
When you are ready for your contributions to be considered, open a Pull Request in GitHub. The Pull Request should be for the up-to-date branch of your fork. Prior to submitting the Pull Request, make sure you have:
- Synced the fork main with the latest version of the upstream main (#3).
- Merged the fork main to the fork branch and resolved any merge conflicts (#4).
Use GitHub issues to log problems and communicate.
Sometimes, you mess up and need to go back to a previous commit. Use revert. Do not use reset! Here's a helpful Stack Overflow answer.
Astro
pnpm
GitHub