Improve DX by creating development environment with minimal and documented setup

[olillin]

This pull request aims to provide a better developer experience when getting started working on the website. It does this by providing a development environment powered by Docker Compose and documenting how to get started step-by-step.

Changelog

Below is a list of the changes in this pull request. The format is based on Keep a Changelog.

Added

• CONTRIBUTING.md
  • Documentation on how to start the website for local development.
• Development Compose file dev/docker-compose.yml which runs a single-node MongoDB replica set.
• Support for there to be 0 committees.
• Support for there to be 0 timeline categories.
• Section for creating, editing and deleting timeline categories.
• API endpoint for updating timeline categories (/api/admin/category/update).

Changed

• Most component props are now optional and display nothing if no data is available.
• Development section of README.md to explain how to start the development environment with Docker Compose.
• ImageWithFallback to treat empty fallback URLs as having no fallback URL.
• ImageWithFallback to use unoptimized to stop errors when trying to optimize the 404 page, which is HTML and not an image.
• temp.js to data.js to better reflect its purpose.

Removed

• "För att utveckla" section from README.md, it has been moved to CONTRIBUTING.md

Fixed

• CommitteeManagementDisplay always showing that the save to database was succeessful even if it failed.
• Deleting a committee leaving behind timeline events of that year.

[daancs]

This line (and likely more in this file) throws typeErrors when trying to view timeline on admin page.

https://github.com/olillin/nollk.it/blob/91878c9e1acdfb0c80fdb6228e40e9d84ce84b4f/components/ManagementDisplays/TimelineManagementDisplay.tsx#L14

[daancs]

All in all, the PR lgtm and is a welcome change for future developers to be able to maintain this repo. I couldn't find any other breaking changes.

Although, I was wondering why the ImageWithFallback was changed to have unoptimized tags? I couldn't figure out a good reason for it.

[daancs]

lgtm

[olillin]

Although, I was wondering why the ImageWithFallback was changed to have unoptimized tags? I couldn't figure out a good reason for it.

It is to stop errors when the image doesn't exist. When an image doesn't exist the 404 page is returned. However Next.js tries to optimize the page, which obviously fails because it's HTML and not an image.

I've edited the comment to explain this.

Although, I'm still a beginner at Next.js so I could be misunderstanding things.

[daancs]

Might've been a bit too quick on the merge.

I'm not sure unoptimized is the best tbh. I guess it could be a fix for if the volume of the images ever gets deleted somehow but if that would happen then we would have other issues.

Did you have issues with it when you were developing?

[olillin]

I'm not sure unoptimized is the best tbh. I guess it could be a fix for if the volume of the images ever gets deleted somehow but if that would happen then we would have other issues.

You're right about that. There is probably a better solution, but that's what I came up with for now. I'll create an issue to address it with a better solution in the future.

Did you have issues with it when you were developing?

I did, since there were no images it would always fail and give errors. Adding unoptimized made the errors go away so I accepted that as a solution, even if I probably should have thought it through more.