BitsxlaMarato · carlotacb · Dec 13, 2023 · Dec 19, 2023 · Dec 19, 2023
diff --git a/README.md b/README.md
@@ -2,75 +2,130 @@
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/71c013e3-dd84-4bc9-b55e-548fd0b8666d/deploy-status)](https://app.netlify.com/sites/bits-live-2020/deploys) 
 
-Hi! This is the code of bitsxlaMarato 2020 (Online edition) live page.
+> This repository contains the live page for Bits x la Marato. Devloped by Hackers@UPC in Vue.js.
 
-## Live
+# How to develop or update the live page
 
-Features included
+> To be able to install this project is necessary to run it in a node specific version. So for that you need to have installed Node.js
 
-- Optional subscription to events - 5 minutes before notifications
-- Schedule live reload
-- Fancy schedule with time padding
-- Normal tabular schedule
-- Countdown
-- Full-screen mode by pressing `p`
+## Install and run the project
 
-## Site Sections
+### Install the correct version of Node and install it
 
-All the sections this live page includes:
+1. Have NVM installed in you system, if you don't have it, [install it](https://github.com/nvm-sh/nvm/blob/master/README.md)
+2. Install the expected version in nvm we will use:
+    ```sh
+   nvm install 12.22.12
+   ```
+3. Change the current version to the one that we just installed:
+    ```sh
+   nvm use 12.22.12
+   ```
 
-- **Home**: Important information to know during the event.
-- **Live**: live realoading schedule.
-- **Schedule**: All information of the schedule (title, description and time of all the activities happening).
-- **Donation**: Goes into another webpage.
-- **Discord**: All the information the hacker needs to know about the discord server.
-- **Challenges**: Challenges proposed for the hackathons (link to the opening explanation of the challenge).
-- **Activities**: All the information about the activities that will take place during the event.
-- **Rules**: Hackathon rules.
-- **FAQ**: All the questions and answers the hackers may have during the event.
-- **Judging**: Judging criteria the hackers needs to know to develop their project.
+### Clone the project
 
-### Config
+```sh
+git clone https://github.com/BitsxlaMarato/bits-live.git
+cd bits-live
+```
 
-Some parameters (offsets, timeouts, defaults) can be changed in `src/config.js`. Keep in mind that some values are just constants and should not be changed.
-Here you can edit the `FAKE_DATE` parameter to test funtionalities.
+### Install the dependencies of project
+
+   ```sh
+    npm install
+   ```
+
+_If you are having any problem when installing dependencies, check the Troubleshooting guide_
+
+### Run the project
+
+Use `npm run serve` to compile and serve the dist directory in real time. Then view the website at [https://localhost:8080](https://localhost:8080)
+
+```sh
+npm run serve
+```
+All the changes will be reflected real time, in the browser.
 
 ## Edit content
 
+### Change metadata
+
+- Change in the `src/config.js` the property `notificationTitle` setting the correct year.
+- Change in the `public/index.html` the following properties:
+  - `<title>` setting the correct year (line 8).
+  - `<meta property="og:title">` setting the correct year (line 35).
+
+
 ### Change theme
 
 If you want to change the theme you should change some properties
-1. For changing the background imatge: Go to `public/assets/live/bg.jpg` and replace it with the one you want (with the same name).
+1. For changing the background image: Go to `public/assets/live/bg.jpg` and replace it with the one you want (with the same name).
 2. For changing all the colors: Go to `src/live/params.scss` and in the top of the file you will find all the colors.
 
-### Update schedule
+### Update basic information
 
-To update or change the schedule go to `public/data/schedule.json`. Changing this file will change the live and the schedule section. Here you can also set the start of the hackathon. The duration of it must be changed in `src/config.js`.
+The screens you will need to change for sure, are the following ones:
 
-#### Schedule file
+#### Home page (Inici)
 
-- `id` can be whatever you want, but all ids must be different  
-- When writing hours, prepend zeroes: Nice: 01:00; Not-so-nice: 1:00.  
-- Events should be ordered by starting hour  
-- `baseTimeOffset` should be the same output as executing (new Date()).getTimezoneOffset() in a machine with local time. (UTC - localtime in minutes)  
-- `dates` are DD/MM/YYYY format  
+1. Change the password Wi-Fi in `src/views/components/Home.vue`. In the `line 10 and 11` you will find the SSID and the password
+2. Change the **Devpost** link in `src/views/components/Home.vue`. In the `line 20` you will find the link.
+3. Change the **Slack** link in `src/views/components/Home.vue`. In the `line 29` you will find the link and the title.
 
-> If an event doesn't have endHour, then will show only startHour and it will finish at the same time as it starts.  
-Useful to specify events that don't have concept of length or that span through more than one day ("Event start", "Event end")
+If needed change the social media links also, adding, removing or changing the links in `src/live/components/Home.vue` in the blocks starting in the `line 35 to 46` and `line 47 to 55`.
 
-## Setup
+#### Donations (Donatius)
 
-```sh
-git clone git@github.com:hackupc/bits-live-2020.git
-cd bits-live-2020
-npm install
-```
+Change the link to redirect to the donations page, you can change in `src/views/App.vue`. In `lines 32 and 63` you will find the links.
+
+#### Challenges (Reptes)
+
+Change all the challenges in `src/views/components/Challenges.vue`
+
+#### Activities (Activitats)
+
+Change all the activities in `src/views/components/Activities.vue`
+
+#### Schedule (Horari)
+
+To update or change the schedule go to `public/data/schedule.json`. And you will need to do the following changes:
+1. Change the start of the hackathon, this is the property `countdownStart`, the specified hour should be the start of the codding time and not the start where the events start. This will trigger the countdown to start working.
+2. Add all the events in the property `days`. Each day have the following properties:
+   ```json
+   {
+      "name": "Day of the week, example: Divendres",
+      "date": "DD/MM/YYYY, example: 16/12/2023",
+      "events": []
+   }
+   ```
+
+   Each day will have events, as many as we want, inside the array of `events`. This should have the following properties:
+   ```json
+   {
+      "id": "0",
+      "title": "Registre",
+      "startHour": "17:00",
+      "endHour": "18:00",
+      "localization": "Entrada de la sala d'actes de l'edifici Vèrtex",
+      "description": "Short description"
+   }
+   ```
+   **Note**: The `id` should be increasing in each event, 
+
+The duration of it must be changed in `src/config.js`, and it's set in hours.
+
+##### Schedule file
+
+- `id` can be whatever you want, but all ids must be different
+- When writing hours, prepend zeroes: Nice: 01:00; Not-so-nice: 1:00.
+- Events should be ordered by starting hour
+- `baseTimeOffset` should be the same output as executing (new Date()).getTimezoneOffset() in a machine with local time. (UTC - localtime in minutes)
+- `dates` are DD/MM/YYYY format
+
+> If an event doesn't have endHour, then will show only startHour, and it will finish at the same time as it starts.  
+Useful to specify events that don't have concept of length or that span through more than one day ("Event start", "Event end")
 
-Use `npm run serve` to compile and serve the dist directory in real time. Then view the website at [https://localhost:8080](https://localhost:8080)
 
-```sh
-npm run serve
-```
 
 ## Deploy
 
@@ -91,12 +146,45 @@ serve -s dist
 
 If you push something that doesn't build, don't worry, it won't be published.
 
-## Support
 
-If you need help understanding something of this repo you can ask the previous developers. The ones that made this edition live were:
+---
+
+# Structure 
+
+## Live
+
+Features included
+
+- Optional subscription to events - 5 minutes before notifications
+- Schedule live reload
+- Fancy schedule with time padding
+- Normal tabular schedule
+- Countdown
+- Full-screen mode by pressing `p`
+
+## Site Sections
+
+All the sections this live page includes:
+
+- **Home**: Important information to know during the event.
+- **Live**: live realoading schedule.
+- **Schedule**: All information of the schedule (title, description and time of all the activities happening).
+- **Donation**: Goes into another webpage.
+- **Discord**: All the information the hacker needs to know about the discord server.
+- **Challenges**: Challenges proposed for the hackathons (link to the opening explanation of the challenge).
+- **Activities**: All the information about the activities that will take place during the event.
+- **Rules**: Hackathon rules.
+- **FAQ**: All the questions and answers the hackers may have during the event.
+- **Judging**: Judging criteria the hackers needs to know to develop their project.
+
+### Config
+
+Some parameters (offsets, timeouts, defaults) can be changed in `src/config.js`. Keep in mind that some values are just constants and should not be changed.
+Here you can edit the `FAKE_DATE` parameter to test funtionalities.
+
+## Support
 
-- Carlota Catot Bragós: Slac `@Carlota` [carlotacb.dev](https://carlotacb.dev/)
-- Maurici Abad Gutierrez: Slack `@mauriciabad` [mauriciabad.com](https://mauriciabad.com/)
+If you need help understanding something of this repo you can ask the previous developers, and the Hackers@UPC webdev team.
 
 ## License