Documentation

README.md

@@ -1,79 +1,19 @@
-# SOCIS Website
-
-This is the official website for the Society of Computing and Information Sciences (SOCIS) at the University of Guelph.
-
-This project was built using [React](https://reactjs.org/) and bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-
-
-## How to run
-
-1. [First fork this repository](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo)
-2. Clone this repository to your local machine
-3. Install dependencies using `yarn install`
-4. Run the server locally using `yarn start`. This will open the server on `localhost:8300` in your browser
-5. To run tests enter `yarn test`, this will lanch the test runner in interactive watch mode. Select `a` to run all tests
-6. To run linter enter `yarn lint`, to autofix linter errors, run `yarn lint-fix`
-
-## Build and run using docker
-
-1. Build: `docker build -t socis-web .`
-2. run: `docker run -p 8080:80 socis-web:latest`
-3. go too the url http://localhost:8080 and see the amazing version of the site.
-
-## Available Scripts
-
-In the project directory, you can run:
-
-`yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-`yarn test`
+![CI testing](https://github.com/UoGSOCIS/socis_website/workflows/CI/badge.svg)
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+![SOCIS Logo](src/assets/socis_logo.png)
 
-`yarn build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
+# SOCIS Website
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+This is the official website for the Society of Computing and Information Sciences (SOCIS) at the University of Guelph.
 
-### Deployment
+## Contributors
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+- Sooraj Modi
+- Ben Pearo
+- Marshall Asch
+- Zaza Hashmi
+- Danindu Marasinghe
 
-### `yarn build` fails to minify
+## License
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+GNU GENERAL PUBLIC LICENSE v3

docs/Accessibility.md

@@ -0,0 +1,15 @@
+# Accessibility
+
+This document outlines the accessibility information for the website.
+
+## Alt-text
+
+All images include alt text, a short description of the image.
+
+## Color
+
+The primary colors used in this website is `#660000`, `#F5F5F5`, `#465052`, `#FFFFFF`, and `#000000`.
+
+Contrast ratio between `#FFFFFF` (foreground) and `#660000` (background) is 13.41:1.
+Contrast ratio between `#000000` (foreground) and `#F5F5F5` (background) is 19.26:1.
+Contrast ratio between `#FFFFFF` (foreground) and `#465052` (background) is 8.3:1.

docs/Contributing.md

@@ -0,0 +1,63 @@
+# Contributing
+
+A big welcome and thank you for considering contributing to the SOCIS website! It’s people like you that make it a reality for users in our community.
+
+Reading and following these guidelines will help us make the contribution process easy and effective for everyone involved. 
+
+It also communicates that you agree to respect the time of the developers managing and developing these open source projects. 
+
+In return, we will reciprocate that respect by addressing your issue, assessing changes, and helping you finalize your pull requests.
+
+## Quicklinks
+
+* [Code of Conduct](#code-of-conduct)
+* [Getting Started](#getting-started)
+    * [Issues](#issues)
+    * [Pull Requests](#pull-requests)
+* [Getting Help](#getting-help)
+
+## Code of Conduct
+
+We take our open source community seriously and hold ourselves and other contributors to high standards of communication. 
+By participating and contributing to this project, you agree to uphold our [Code of Conduct](https://github.com/Botomir/Botomir/blob/main/CODE_OF_CONDUCT.md).
+
+## Getting Started
+
+Contributions are made to this repo via Issues and Pull Requests (PRs). A few general guidelines that cover both:
+
+- To report security vulnerabilities, please contact the SOCIS exec directly at exec@socis.ca.
+- Search for existing Issues and PRs before creating your own.
+- We work hard to makes sure issues are handled in a timely manner but, depending on the impact, it could take a while to investigate the root cause. A friendly ping in the comment thread to the submitter or a contributor can help draw attention if your issue is blocking.
+- If you've never contributed before, see [this link](https://opensource.guide/how-to-contribute/) for resources and tips on how to get started.
+
+### Issues
+
+Issues should be used to report problems with the website, request a new feature, or to discuss potential changes before a PR is created. When you create a new Issue, a template will be loaded that will guide you through collecting and providing the information we need to investigate.
+
+If you find an Issue that addresses the problem you're having, please add your own reproduction information to the existing issue rather than creating a new one. Adding a [reaction](https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) can also help be indicating to our maintainers that a particular problem is affecting more than just the reporter.
+
+### Pull Requests
+
+PRs to the website are always welcome and can be a quick way to get your fix or improvement slated for the next release. In general, PRs should:
+
+- Only fix/add the functionality in question **OR** address wide-spread whitespace/style issues, not both.
+- Add unit or integration tests for fixed or changed functionality (if a test suite already exists).
+- Address a single concern in the least number of changed lines as possible.
+- Include documentation in the repo.
+- Be accompanied by a complete Pull Request template (loaded automatically when a PR is created).
+
+For changes that address core functionality or would require breaking changes (e.g. a major release), it's best to open an Issue to discuss your proposal first. This is not required but can save time creating and reviewing changes.
+
+In general, we follow the ["fork-and-pull" Git workflow](https://github.com/susam/gitpr)
+
+1. Fork the repository to your own Github account
+2. Clone the project to your machine
+3. Create a branch locally with a succinct but descriptive name
+4. Commit changes to the branch
+5. Following any formatting and testing guidelines specific to this repo
+6. Push changes to your fork
+7. Open a PR in our repository and follow the PR template so that we can efficiently review the changes.
+
+## Getting Help
+
+Feel free to reach out to @SoorajModi or @MarshallAsch if you have any questions.

docs/HowToRun.md

@@ -0,0 +1,59 @@
+# How to Run
+
+This document will outline how to download and run this application for development.
+
+## Prerequisites
+
+- Web development
+- Javascript
+- React.js
+- Node.js
+- HTML
+- CSS
+- Docker [optional]
+
+## Resources
+
+- [React.js documentation](https://reactjs.org/)
+- [Node.js download](https://nodejs.org/en/download/)
+- [Docker](https://www.docker.com/)
+
+## Cloning the repo
+
+Clone the repository to your local computer:
+
+```bash
+git clone https://github.com/UoGSOCIS/socis_website.git
+``` 
+
+## Run the app
+
+Download the required dependencies
+
+```bash
+yarn install
+```
+
+Run the application locally
+
+```bash
+yarn start
+``` 
+
+This will start the application on `http://localhost:3000/`. Use this mode for development.
+
+## Build and run using Docker
+
+Build
+
+```bash
+docker build -t socis-web .
+```
+
+Run the application
+
+```bash
+docker run -p 8080:80 socis-web:latest
+```
+
+This will start the application on `http://localhost:8080/`. Use this mode for testing and deployment. This mode does not have hot reloading.

docs/HowToUpdate.md

@@ -0,0 +1,65 @@
+# How to Update
+
+This document outlines how to update parts of the website. See `Contributing.md` to see how to contribute to the repo. 
+
+## Exec/staff list
+
+Open `src/pages/about/components/execList.js`. This file contains the full list of exec and staff including their names,
+roles, and description. By editing this file you can update the contents of the site.
+
+### Updating
+
+Edit the content in `execList.js`.
+
+To update profile pictures, replace the corresponding images in `src/pages/about/assets`. Make sure the file names match
+the imported images in `execList.js`.
+
+### Adding
+
+Add a new individual in `execList.js`. Be sure to include the position, name, image and description fields.
+
+To upload an image, add the image to `src/pages/about/assets`. Then import the image in `execList.js`:
+
+```javascript
+import Exec from '../assets/exec.jpeg';
+```
+
+### Removing
+
+Open `execList.js`, find the individual and either comment them out or delete their section. Also delete their image in
+`src/pages/about/assets`.
+
+## Policy documents
+
+### Updating
+
+Go to `src/pages/policy/assets` and replace the policy documents with the newer version. Next, open `src/pages/policy/components/header.jsx`
+and update the `Last updated` string to today's date.
+
+### Adding
+
+To add new policy documents, first add the new policy document to `src/pages/policy/assets`. Then in `src/pages/policy/index.jsx`
+import the policy document:
+
+```javascript
+import policyDocument from './assets/Policy.pdf';
+```
+
+Then add the component to the functional component:
+
+```javascript
+<FileViewer heading="Policy" file={policyDocument} />
+```
+
+### Removing
+
+To remove policies, delete the corresponding document in `src/pages/policy/assets`. Then open `src/pages/policy/index.jsx`
+and remove the lines for the component:
+
+```javascript
+import policyDocument from './assets/Policy.pdf';
+```
+
+```javascript
+<FileViewer heading="Policy" file={policyDocument} />
+```

package.json

@@ -2,6 +2,7 @@
   "name": "socis_website",
   "version": "0.1.0",
   "private": true,
+  "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-brands-svg-icons": "^5.15.3",

src/pages/about/components/team.jsx

@@ -7,7 +7,7 @@ function Team({
 }) {
   return (
     <TeamCard>
-      <TeamImage src={url} />
+      <TeamImage src={url} alt="Team member image" />
       <TeamCardContentWrapper>
         <TeamCardName>{name}</TeamCardName>
         <TeamCardPosition>{position}</TeamCardPosition>