How to contribute updates to this repository

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

---

Please be mindful of keeping your project links active. Please submit a pull request with your new project URL if you relocate your work to a different domain name or hosting provider.

---

WIP/wishlist

• add filter query to URL via router
• add share feature based on filter query via router
• add project preview
• performance improvements (e.g. remove unused fonts, lazy load components)
• look into ways to reduce bundle size?
• dependabot alert - upgrade vue-cli to remove glob-parent vulnerability
• a11y audit
• make filters a sticky header on scroll
• show number of projects in each tag in dropdown
• show scroll on project details when project overview is displayed rather than on hover
• add a close button to project details on mobile

Data

Project data is stored in @/src/projects.json. It is imported into the Body component.

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
        },

---

Workflow for contributing to MS Data Visualization repositories

1. Initial setup:

   • Fork a repository, create a local clone of your fork, and configure Git to sync your fork with the original repository

2. In the local clone of your fork, create a branch for your edits. git branch mybranch creates a branch named mybranch git checkout mybranch switches 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 main branch!
   • gh-pages will publish directly to the live site (it takes about 5 minutes to update)

3. Pull in changes often from the upstream main to keep it synced so that when you prepare your pull request, merge conflicts will be less likely. Again, never work in the main branch!

4. 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.

5. 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).

Deploying

Unbundled code (i.e., what you should use as a starting point) is in the main branch. The gh-pages branch, which is served to http://visualizedata.github.io/thesis (redirects to https://parsons.nyc/thesis), is a deployed version of the dist folder generated by running npm run build/yarn build. To redeploy code on gh-pages, follow instructions at https://cli.vuejs.org/guide/deployment.html#github-pages from the main branch.

Tips

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.

Helpful resources

• Introduction to GitHub Flow
• GitHub Help: Collaborating on projects using issues and pull requests
• GitHub Guides: contributing to open source

Vue CLI

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.