WATO amazing website by amazing people

• WATO amazing website by amazing people
  • Abstract
  • For Developers
  • For Everyone Else
    • Creating a New Job Posting
    • Creating a New Blog Post
    • Images
    • Adding New Members to the Member List

Abstract

WATonomous' new website initiative. Built with Next.js, Typescript and Tailwind. Deployed via Vercel.

Inquiries regarding the website or joining WATonomous can be directed to @kenzoengineer.

For Developers

Clone the repo as you would normally. Run

npm i

in the root directory to install all required dependencies. Then run

npm run dev

to start a development server on http://localhost:3000/.

npm run build will build the repo as if it was being deployed.

npm run lint will run the linter.

npm run pretty will run the formatter on all source files (!) (personally I wouldn't run this, who cares about formatting anyways :clown:)

For Everyone Else

Creating a New Job Posting

Creating a new job posting is as simple as creating a markdown (.md) file.

If you know how to use Github, feel free to open a pull request and tag a developer. If you don't know how to use Github, or would prefer to do this with the guidance of a developer, let one of us know in the discord and we would be happy to help.

A markdown file is simply a plain text file, with special characters to format text. Creating a markdown file can be done by renaming a standard .txt file.

Place the markdown document in /static/job_postings. The name of the file will not be the title of the posting, rather it will be what is displayed in the URL.

e.g. A file named posting-01.md will display as watonomous.ca/careers/posting-01

The start of the file must include a metadata header. This will be a list fenced by three hyphens ---.

Within the block a list with the following parameters must be included:

• Title: Job title, e.g. "Graphic Designer"

• Team: Main team name, e.g. "BizOps"

• Subteam: Subteam within main team, e.g. "Website"

• Location: Most likely either "Waterloo, ON", or "Remote"

• Type: Full Time, Part Time, Contract, etc.

Below is an example of a valid header.

---
title: "Full Stack Developer"
team: "BizOps"
subteam: "Website"
location: "Waterloo, ON"
type: "Full Time"
---

After this header block, add all content you would like the applicant to see when they click on the posting. A description of WATonomous, responsibilities, key qualifications, etc.

Most common markdown syntax is supported, refer to the documentation.

Our website may not support every single piece of syntax, however, everything I would expect in a job posting (headers, lists, images) work as intended.

Creating a New Blog Post

Blog posts also use markdown. For brevity I will not reiterate creating a markdown file or what the format of a header should be like. Refer to the above section Creating a New Job Posting if you ever get lost.

Posts will be placed in /static/blogs. Again, feel free to open a pull request to do this, otherwise contact a developer on discord.

Again, the name of the file will not be the title of the post, rather it will be what is displayed in the URL.

e.g. A file named blog-01.md will display as watonomous.ca/blogs/blog-01

• Create a markdown document in /static/blogs, titled anything
• Write a metadata section by fencing some text with ---. Inside write the job title and team. Follow the headers and format exactly or it won't work.

Blog metadata is a little more involved. The following headers must be present:

• title: The name of the blog post
• date: The date the post was created, please have it in the format MMMM DD YYYY
• image: All posts must have an image associated with them. This will be the file path relative to the public folder. e.g. /imgs/blog-01-image.png
• description: A short blurb about the post. The user will see this before clicking to view the full thing
• tags: A list of tags you want associated with the post
• authors: A list the authors of the post. Even if there is one author place, place them in the list.
• spotlight: Our blog has a special spotlight i.e. featured section. true will place this post in it, and false will not.

Below is an example of a valid header:

---
title: 'Don Quixote'
date: 'March 17 2023'
image: '/imgs/blog-01.png'
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla porttitor massa id neque aliquam vestibulum. Facilisis mauris sit amet massa vitae tortor.'
tags: ['tag1', 'tag2', 'tag3']
authors: ['Miguel de Cervantes']
spotlight: true
---

Images

If you ever need to place an image inside a markdown file, you follow this syntax:

![Alt Text](URL of the Image)

Alt text is important for accessibility. This is what screen readers will dictate when they come across an image. It is also the text that will display if the actual image itself cannot be displayed. Make this descriptive!

The URL can be in one of two formats. If using an image from the internet, simply place the image URL here, e.g.:

![Red Mage Single Target Rotation](https://pbs.twimg.com/media/EktBITsVgAAgwV2.jpg)

If you have an image on your computer, first place your image in public/imgs. This is where all images on the website should be placed.

Then refer to the file name through its path including public. e.g.:

![The WATonomous Team Group Picture](public/imgs/team.jpg)

Adding New Members to the Member List

This is done in the ./pages/about.tsx file. At the top of the file is a very large array of MemberCardProps objects called MemberData. Member order in the array will match that of the page.

To add a new member to the list just add a new MemebrCardProps object:

{
    imageSrc: image_src,
    firstName: "Cloud",
    lastName: "Strife",
    description: "Cloud loves his Chocobo",
    position: "Party Leader",
}

Please note that we don't actually use the description field right now, feel free to leave it a blank string

imageSrc should point to a statically imported image for best performance. Copy the imports at the top of the page. The format will be similar to this:

import image_src from "../public/imgs/headshots/cloud_strife.jpg";

To keep things organized, images should be kept in the headshots folder.