Giter VIP home page Giter VIP logo

ubccsss.org's Introduction

ubccsss.org

Website for the UBC Computer Science Student Society.

Installation

  • install Hugo - to build the website. The current version of Hugo used is listed in netlify.toml, under the key HUGO_VERSION.
  • install Node - to install npm. The current version of Node used is in .nvmrc. This is used by Netlify to build the site with the correct version of Node.
  • install nvm - to ensure the correct version of Node is used. Take a look at this to see how to use .nvmrc to automatically switch to the correct version of Node.
# clone the repository
git clone https://github.com/ubccsss/ubccsss.org.git

# cd into the repository
cd ubccsss.org

# ensure that the correct version of Node is used
nvm install

# install dependencies
npm install

# start the development server
hugo server

Contributing

We welcome contributions of any kind including pages, suggestions, bug reports, pull requests etc. We would love to hear from you.

When you submit a PR, we automatically run the Prettier code formatter with the prettier-plugin-go-template plugin to help with Go template formatting. Please ensure you checkout the latest version of your PR after any formatting commits have been made when continuing to work on your PR.

To make changes to .prettierrc, disable the Prettifier action on Github before making the PR.

Additional documentation can be found in the docs folder.

Add a new event

Create a new event from the template using the hugo new command. Replace "2021-01-01" with the day of the event, and "cool-event" with the URL for the event. The URL should be lowercase.

hugo new events/2021-01-01-cool-event.md

Add a course review

We especially appreciate contributions to our growing course review database!

There's a course review form on each course page at ubccsss.org/services/courses. Course review submissions are manually processed by CSSS team members, but if you would like to help us add your review directly to the course page by making a PR:

  1. Navigate to a course page on our course review database and submit a course review.
  2. Look in this repository's PRs to find your review. It'll have been automatically generated by a GitHub user called csssbot.
  3. Wait the review PR to be approved and merged by a CSSS team member. This may take several days to process and will be scanned for inappropriate or malicious content.

Important folders

content

Contains content files corresponding to every post, event, and page. The events folder contains events which can be added to a student's calendar, and the posts folder contain general posts to display.

data

YAML files with some data used elsewhere in the site, including the Cube's address, images for the 3D cube on the homepage, and social media links.

layouts and themes.

HTML template files for the site. Files with the same name in the layouts folder override files in the themes/hugo-bootstrap folder.

static

Static files that are copied into the website with no modifications. Images and PDF files are placed here.

Headers and Redirects

HTTP headers can be set by editing the static/_headers file.

Short links and other redirects can be configured in the static/_redirects file. If you want to redirect to another page on the site, you can add a aliases item to the metadata.

Environments

The site has three environments:

  • development: This enviroment is used for development.
  • preview: The enviroment used for previewing the site on Netlify deploy previews (previews for merge requests).
  • production: This enviroment is used for production.

Each environment has its own environment variables accessible in the config folder.

Config folder

The config folder contains the following folders:

  • _default
  • development
  • preview
  • production

_default contains the base configuration files, and depending on the environment, the files in the other folders will be automatically merged into the base configuration if _merge: deep is added to the base file.

hugo server runs the site in development mode by default.

hugo builds the site in production mode by default.

Read the Hugo docs for more information on how they work.

Environment variables

Currently, there are three enviornment variables:

  • recaptchaSiteKey: reCAPTCHA key for courses databse new review form
  • workerURL: Cloudflare worker url for courses databse new review form
  • gcseURL: Google custom search engine url for searchbar
  • CFBeaconData : Data required for Cloudflare Analytics, which only includes our token for now

netlify.toml

netlify.toml contains the configuration for the Netlify. HUGO_ENV is used to select the environment for different Netlify environments.

Dev Scripts

# format all files
npm run format

# check for formatting errors
npm run dry

# start the development server
npm run dev

# build the website
npm run build

Related

ubccsss.org's People

Contributors

amyjzhu avatar animeallstar avatar argonaut0 avatar armanmoztar avatar chloecurry avatar csssbot avatar cyruskalafchi avatar efskap avatar eqfy avatar frostyshadows avatar frozemint avatar hailin-zhang avatar hgjnnf avatar imgbot[bot] avatar imgbotapp avatar jopika avatar justindhillon avatar kewbish avatar laurenkerker avatar lenawang03 avatar mdctleo avatar natchensing avatar notwoods avatar patrickhysh avatar ramitkataria avatar rayhua12 avatar ryanmckim avatar shaunak avatar toblrne avatar wgervasio avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

ubccsss.org's Issues

New review for CPSC 317 by eqfy

A fairly interesting course that covers the basics of internet computing. The course goes over each of the five layers of the internet and focuses on a few select protocols from each layer (HTTP, SMTP, POP3, IMAP, DNS, TCP, IP, DHCP, BGP, VPN, TLS etc.). Jonatan Schroeder (currently at York University) is a great professor who explains the concepts very thoroughly. Beware that there is going to be a lot of technical documentation reading (RFCs) for assignments and the quizzes/exams focus quite heavily on conceptual understanding.

eqfy

Randomization + sorting for tutors

We should randomize the order of tutors by default on the main tutor page regardless of the filter selected. We can also potentially add a sort alphabetically button so that the user can switch to ASC/DES order based on tutor name.

Some more discussion on this topic:
The main goal of this change is to promote fairness on our tutor page and improve accessibility. Randomization of tutor display was a topic that was previously discussed. The idea didn't get implemented because

  • we didn't have many tutors at the time
  • each tutor entry was visually smaller so less scrolling was needed to view all the tutors
  • it might be a bit confusing for the users when they go to the tutor page multiple times

However, now that we have a number of tutors for certain courses (CPSC 110, 210), it makes sense for this change to be added. In regards to point 3, I think adding the sort button will somewhat mitigate confusion.

Course database create entry UI

Currently, our course database is updated by having the visitor go to GitHub, make changes to the markdown, and submit a pull request. However, this is cumbersome and might scare students unfamiliar with GitHub/Markdown. Hence, it is probably a good idea to have some sort of UI for submitting course reviews directly on our website. Although it is possible to just have a Google forms there, it will be really nice if we can automatically create PRs after user submits a review.

New review for CPSC 311 by eqfy

Awesome course that teaches you about programming languages, with a emphasis on language semantics. Despite being a third year course, CPSC 311 directly uses quite a lot of the concepts from CPSC 110. Some notable things include the PLAI (Racket) language and templates. Finally, for recent offerings taught by Prof. Ron Garcia (2020, 2021), all exams are coding exams done on the computer.

eqfy

CS course prerequisite diagram

Integrate a course prerequisite diagram to our webpage (probably by embedding it as an iframe). There are actually a few different implementations of this already available, including @AnimeAllstar's personal project. We should research different options first.

Events are not added as posts

When a new event is created, it only appears at the top of the main page and not as a post. For example, see Tech Industry Night event and Professional Photoshoot event which are both added to the events folder but only the latter is shown as a post on the main page. Currently, I am unsure about which behaviour is the correct one, though I am personally leaning towards the second behaviour 🤔

This issue may also be linked with #124.

This might be related to the change in submodule dependency that happened #80

Update information to current year

Review and make sure the following items are up to date:
(Please comment below if there are things on the website that are not up to date)

Computer Science Clubs Page

Create a new page featuring all the student clubs affiliated with UBC computer science. For each of the clubs, have their logos and the links to their websites.

Format similar to services page

UBC CTF
ACM
WICS
Queer Coded
NW Plus
UBC Game Dev
Please comment other clubs

Remove the extra hop between Cloudflare's CDN and Netlify's CDN

Currently, the website is proxied through Cloudflare's DNS even though it is already hosted on a CDN by Netlify which runs on Google's and Amazon's CDNs. Here's an article from Netlify support about why we shouldn't use 2 CDNs. The main benefit to us is removing an extra hop and being able to clear cache directly through Netlify in case something breaks and we need to rollback or quickly fix something.

To keep Cloudflare Analytics working, we need to use manual setup since Cloudflare will not be able to add the script element itself anymore, before turning off the proxy.

Improve home page to look more like a home page

The homepage does not look like a landing page. Improve the layout so that it looks better.

Consider taking out the cube, no one uses it and there are way better ways to make it easier to navigate.

Add dark mode

Not sure how feasible this is but I thought it'd be a cool addition to the website. I could take a look into this if y'all think that this is something that we could potentially have on the website (a toggle for light/dark mode).

Event metadata issues

Search Console has identified that your site is affected by 4 new issues of type Events.

Top Errors

Errors can prevent your page or feature from appearing in Search results. The following errors were found on your site:

  • Missing field "location"

Top Warnings (5 maximum)

Warnings are suggestions for improvement. Some warnings can enhance your appearance on Search; some warnings can become errors in the future. The following warnings were found on your site:

  • Missing field "performer"
  • Missing field "offers"
  • Missing field "image"

We recommend that you learn more about these issues and fix them when possible to enable your site to have the best possible experience and coverage in Google Search.

Broken labels

Many labels and headers are broken after #163 . This might be because we removed the hugo-bootstrap submodule. Please check ASAP!

This seems to be missing the "tags" and "category" text
image
We are missing several headers here, including recent post, tags, category
image

Professional Headshot Event

Add the professional headshot event. See department email for more details.

For the poster, check slack website channel

[ASAP] Remove all exams and links to exams from website.

We have requests from faculty to remove certain past exams. It looks like these exams are duplicatedly hosted on exams.ubccsss.org and under /services/exams/

We currently don't have access to the web app at exams.ubccsss.org. While we sort this out, can we remove all links and endpoints for exams in the meantime?

Thanks!!

2021-2022 Feature Update

Create a post detailing some of the changes made to the website in the last term (2021W1).

Some talking points include

  • Tutor information display
  • Tutor course filtering
  • Club page
  • Updating content to current year
  • Misc. improvements (ubc grades link etc.)

Bug fixes:

  • Mobile display

Add a "databases" dropdown nav-item in navbar

So, when I first visited the website it was not intuitive where the databases are. I was thinking about adding a "databases" dropdown in the navbar with 2 options; exams database, courses database. That way it'll be easier for people, especially new visitors, to locate it instantly.

Alternatively, we could make the "services" nav-item itself a dropdown, but I personally feel like it'd be easier to locate the databases with a database nav-item.

(this was meant to be added from my account @AnimeAllstar, forgot that the bot was signed in)

Add search

Add a search bar to the website using Algolia or a Google custom search.

Theme repo migration

RE our meeting on 5 February 2022:

  • We discussed a migration to move all our overwrites into the theme repo
    • This is currently linked on Ramit's Google Search issue PR, once that gets merged it should be reflected overall
  • We would have to move the /layouts, /archetypes, /i18n folders, and perhaps more
  • Potential issues:
    • Things might break, but for now they seem to be deploying okay, so this shouldn't be too much of an issue
    • CI/CD loop on Netlify might need editing ⇒ use a hook to link the repos together and ensure theme repo changes are reflected in the Netlify cache or something

Currently, we mentioned that we'd put this on the shelf for now, but also want to do this before we start making additional or significant changes to the exams database or main landing page.

Add ICS output

Use Hugo custom outputs to provide an ICS version of the events list.

Follow up: Embed calendar that previews ICS feed.

Slanting navbar button on mobile devices

Problem:

image

Cause:

.blog-header .navbar has the css property transform: rotateZ(-2deg);, which causes the slanting navbar, and hence the slanting navbar button for the menu. I believe that this is by design.

Solutions:

  • we could remove the property entirely, which would make the navbar horizontal both on the mobile and on the desktop
  • we could keep it slanting on desktop and make it horizontal on mobile devices.

Add sorting options to the tutors page

To be fair to all tutors, we should add Javascript to randomize the tutors page list.

Currently the tutors page is a static HTML file generated by Hugo. Tutors are listed in chronological order, with the tutors who have most recently updated their listing put at the top.

Additional sorting options would be nice to have.

Relevant files and folders

Service page entry alignment

Currently, the entries on the service page are unaligned. We should make each entry component the same height so that they align.

image

2021W1 Event Recap

Potentially do a summary of CSSS activities in 2021W1

Events:

  • First Year Welcome Event
  • Research Night
  • Movie Night
  • Halloween Social
  • Professional Photoshoot Session

Other accomplishments:

  • Discord membership

Planned events:

  • CS week

Need to consult other execs

Add a disclaimer about tutors

Just add a line saying that we do not background check the tutors so they are not affiliated with or endorsed by the CSSS

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.