Plenum is an online journal devoted to showcasing the highest quality scholarship in undergraduate geography while building community amongst the Geography Department at the University of Washington. It is managed, produced, and reviewed by undergraduate students from the Department of Geography at the UW.
Plenum's website is a Vue.js web application built and maintained by Plenum members. The app is populated via JSON API data from Contenta CMS, an API first Drupal distribution.
- Github Account - Sign up for the student developer pack for freebies
- Review the standards we try to follow at the bottom of the README
- Node & NPM - Most version should be fine, LTS option is safest
- git - Install directly or via Homebrew(Mac) or Chocolatey(Windows)
- Your favorite IDE - The student developer pack includes JetBrains. IntelliJ is robust and extendable
- Install any Vue.js and Typescript plug-ins for your IDE
- Install Vue Dev Tools for your browser
- Fork this repo into your personal GitHub account.
- Clone your repo to your local development machine. *Cloning the OG repo will prevent you from submitting pull requests
git clone https://github.com/{{YOUR_GITHUB_ACCOUNT}}/plenum-website.git
- Be sure to work on the dev branch or other relevant dev sub-branches. The master branch is what is live on the site.
- Check out "A Successful Git Branching Model" to see what we will be following.
- Consider naming your branches with a directory format. If you follow this naming pattern, be sure to have a 'master' of the sub-branch.
- dev <- feat/search-feature/master <- feat/search-feature/add-api-calls
- dev <- style/home-page/master <- style/home-page/add-bootstrap
- dev <- hotfix/arcgis-embed-bug
- Install project dependencies with NPM
cd /plenum-website # Navigates into the project directory
npm install # Node Package Manager installs all the necessary packages to develop the website
- NPM will prompt you to install peer dependencies. Install all of them, except for JQUERY.
- Prepare local Plenum Contenta CMS *Without a local copy of Plenum's Contenta CMS, development options will be severely limited. Currently, there are no 'disconnected' alternatives.
- Create a new file .env.development.local at the project's root directory, paste the following code and replace
{{PORT_NUMBER}}with the port number of the local server that is hosting your Contenta CMS:
VUE_APP_CONTENTA_API=http://localhost:{{PORT_NUMBER}}/contenta/web/api
VUE_APP_CONTENTA_BASE=http://localhost:{{PORT_NUMBER}}
Congratz! You are ready to develop!
In order to actively observe the changes that you are making during development, 'serve' the website:
npm run serve
This creates a local dev server on which a Vue app is hosted which updates and re-compiles when changes are made within your IDE. The terminal will output the compilation process, THERE WILL BE LOTS OF 'ERRORS'. Ignore them. The current typescript config outputs errors, even though the project is still valid; currently working on fixing the output of these errors. P.S. Vue-CLI GUI is a feature that doesn't work with our distribution of Vue-CLI. Someday a migration will occur in order to benefit from this newer feature.
We are using a Fork & Pull model to manage collaborative development; this allows our team to accomodate all types of contributors, both new and experienced, without putting the code base at risk from conflicting merges.
Once you're happy with what you've developed and believe it is ready to be merged into the PlenumUW's repo:
- Push your work to your personal fork
- Create a Pull Request
- If your work is in response to a specific Issue, use issue closing keywords in your pull request title or message
- Your pull request will be reviewed and merged into the main repo
- WebAIM - Testing Articles
- Getting Started with Web Accessibility in Vue
- W3 HTML Techniques for Web Content Accessibility Guidelines 1.0 - Index of Web Accessibility Standards
- Menu Navigation Concepts
- Menubar Example
- Keyboard only focus