uio-gaming / uiogaming.no

UiO Gaming sin nettside. Bygget med Gatsby og Sanity

uiogaming.no

Dette er repoet for UiO Gaming sin nettside. Nettsiden består av tre deler hvorav to av disse er i dette repoet. Her finner du frontend for nettsiden samt et webhook API. Dette APIet brukes til å trigge bygging av nettsiden når innhold endrer seg i CMS, backenden. Repoet for dette CMSet er her. Nettsiden er bygget med GatsbyJS.

Oppsett

Frontend

1. Installer avhengigheter

yarn install

2. Kjør nettsiden

yarn start

Webhook API

Om du vil at innhold skal oppdatere seg når innholdet endres i backend må du kjøre dette APIet. Dette gjelder bare om du bruker en produksjonsversjon av nettsiden (yarn serve)

cd webhook-api
yarn install
yarn start

Du må også spesifisere URL for webhook i Sanity sitt dashbord. Du kan lese mer om det her. Denne URLen skal peke på APIet ditt.

Docker

Docker er for øyeblikket ikke støttet, men vil støttes fremtiden.

Vil du bidra?

Ta gjerne kontakt eller send inn en PR om du vil forbedre nettsiden.

Sjekk også ut bidgragsguiden vår før du sender noe som helst inn.

uiogaming.no's Issues

Design the blog cards

The blog cards are currently in an unfinished state and needs to be finished

TypeScript support

Add TypeScript support as well as converting all the existing code to TypeScript

Move content to sanity

The goal is to move as much content as possible to Sanity instead of statically rendering it. This makes it easier for non-tech people to edit page content to their willing.

This issue does not specify when it can be marked as resolved. This issue serves the purpose of being a reminder of our general goal and must not be closed by any commits.

Docker support

Create a solution that makes it easy to run the frontend as well as the webhook API in conjunction.

Filter past events

The website fetches events in the correct order but doesn't have a filter for past events. This causes the website to not display any new events.

Blog post images are cropped

When creating a blog post, the main image may be cropped. This is due to it being too big or having a weird aspect ratio.

A solution to fix or mitigate the issue should be considered

Separate sections into components

Having one file containng (almost) all the content is messy. We should move every section into its own component. This hasn't been done yet due to issues with making graphql queries within components.

Align blog overview container to the top of the page

It is currently centered on displays with a high resolution

Make use of the gatsby-image package

Add ability to order board members

Add an option to select which order the board members appear on the website.

vedtekter.uiogaming.no

Redirect to another page or make our own.

Fix event card link area

At the moment, the clickable area for event cards extends too far and outside of the card itself. This should be fixed

Semanticize - Less divs

Make less use of div elements. Use semantic HTML elements instead

Create blogpost and event page

Clicking on blogposts or events should bring you to a page created for that post/event. These pages has yet to be created.

All sections are cut off at a certain point

I have set a max width for the content to be a certain width. This is however done incorrectly and causes the sections themselves to have a max width of the set value. This cuts off background colors/images and looks bad on high resolution displays

Blog cards aren't stretched in overview

Cards should ideally be the same height regardless of content

Add footer to blogposts and blog overview page

Replace placeholder images

Adapt image height to split container content height

Images that are placed alongside content, <div> elements that use the split class, should have its height adjusted to the content size. This prevents any issues when using different sized images.

Illustration: to-do

Make blog post overview page

Make a page that contains all blog posts, not just the 3 most recent ones. There's already a link in place that will link to this page here

Unintentional back button behaviour

When accessing one the subsites directly from a new tab, the back button won't work due to there not being anything in the window history.

Solution

Default to homepage when there's nothing in the window history or if the previous website is not the root domain

Establish code styling rules

This should be enforced with a GitHub actions workflow.

Prevent member card footer text from overflowing

On small screens the member card footer text is not centered and may overflow.

Fix header

All content in the Header section should be centered and properly sized

Illustration: to-do

Overflowing section header

https://github.com/UiO-Gaming/uiogaming-website/blob/7566270a93f548be471a1c43d4c5f26c745ae75f/web/src/pages/index.js#L149

This line overflows on small devices due to its large font size

Animate page content on scroll

show page content gradually as you scroll down.

Link overflow in blog overview

The link container is larger than the card itself which causes some issues. For one the text is highlighted in red, which should not be the case. Second, you can click outside of the card and still access the blogpost

Logo is cropped on screens with low vertical resolutions

Translation support

Add support for english

Redesign contact section

At the time of writing this the contact section is poorly designed and should be rewritten.

Add support for hotspots and cropping

Query the graphql sanity api for fluid images to improve load times and responsiveness. When doing this you can use the sanity url builder to make the cropping and hotspot selection tool within sanity actually have an effect on the frontend

Add placeholder text when no events

Event card displaying date in english

unlike the dates in the blog section, event cards display dates in english. this is not supposed to happen. the site does display the correct date format though

Add documentation

Fix discord event formatting

As of now fetching the event description from the CMS gives us unformatted text, making it look ugly. This ugly text is fine for the event overview but when entering the event page it should be formatted properly

Interested in joining in on this

Hei / Hi,

I was wondering if it was possible to join in on this project. I know html/css/js/react/python/rails/ruby/express/postgresql/sql/..more and love coding in general.

I'd love to help set something up for upcoming/previous events such as a gallery of pictures, scoreboards/leadersboards, prices (if any? pizza? :D). Can assist with anything really, but this project seems like an awesome place to connect with like minded people.

Happy to have a chat if interested! I'm currently taking a masters degree in entrepreneurship at ifi, but have a degree in IT already.

Add E-sport section or page

This needs to be discussed further before making a decision. Nonetheless there should be some information about e-sports on our website

Add RSS feed option for events and blogposts

https://www.gatsbyjs.com/plugins/gatsby-plugin-feed/

Create contribution guidelines

Avoid adding "les mer" label to event descriptions that are within size

The text isn't being cut off but the "les mer" label is still displayed