# Website Documentation

The idea of this page is to make it so that even a monkey can make changes to the website. Unfortunately these docs were also written by a monkey so when you inevitably run into issues I suggest you consult [Google](https://google.com) or in dire cases you may want to contact the mysterious [Anson Biggs](mailto:anson@ansonbiggs.com).  

- [Website Documentation](#website-documentation)
  - [Background Image](#background-image)
  - [Updating Sponsors](#updating-sponsors)
    - [Field Descriptions](#field-descriptions)
    - [Example list.json](#example-listjson)

## Background Image

Most images are embedded in `html` and its pretty straight forward to update them. However, background images are defined by CSS which means you will unfortunately have to dig a little deeper. I would actually recommend just replacing `images\bg.webp` and `images\bg-min.webp` which means that you won't have to change any code to change the background. `webp` is a fancy file extension for internet stuff that supposedly loads faster, and the `-min` file is just a smaller version of the image for smaller screens like phones. 

The file you have to update is: `assets\css\main.css`. This is where almost all of the styling of the website lives and it is a *scary* file because there isn't a person on earth that can use CSS correctly, and at the time of writing the file is 4275 lines long. I would recommend just using ctrl-f to find the `background-image` property and going from there.

**[I would recommend ImageMagick to compress any new background images.](https://imagemagick.org/index.php)**

## Updating Sponsors

Updating the sponsors is as simple as downloading a nice looking image of the sponsors logo, dropping it into the `./images/sponsors/` directory and editing the file in the `sponsors` directory named `list.json`. Inside the `list.json` file there is a list of companies with some metadata information that is used for building the webpage and telling search engines what the image actually is so its important that all fields are filled out as fully as possible and correctly. 

  *Make sure alt text is properly filled in. This is information for disabled and blind people to understand what the image is, [and not using it means we could be vulnerable to a lawsuit.](https://www.latimes.com/politics/story/2019-10-07/blind-person-dominos-ada-supreme-court-disabled)*

### Field Descriptions

```json
{
      "companyName": "Should be the full name of the company",
      "company_URL": "Should be the url pointing to the home page of the company unless otherwise specified. Preferably a https:// link.",
      "company_image": "images/sponsors/imgName.ext - This can also be a url to an image hosted on another site if the sponsor wants that, otherwise try to keep the file local and inside of the sponsors directory.",
      "SponsorLevel": "simply 'gold', 'silver', or 'bronze'",
      "altText": "Full name of company and maybe their slogan or something. This describes what the image is to search engines and people that can't see well (more common than you would think). Try to keep this to 2-3 scentences don't write a novel like I am right now."
} 
```

### Example list.json

```json
{
  "Companies": [
    {
      "companyName": "Red Bull Racing",
      "company_URL": "https://redbullracing.redbull.com/",
      "company_image": "images/sponsors/RedBullEnergy.png",
      "SponsorLevel": "gold",
      "altText": "Red Bull Formula 1 Racing"
    },
    {
      "companyName": "Mercedes AMG",
      "company_URL": "https://www.mercedes-amg.com/en.html",
      "company_image": "images/sponsors/mercedes.png",
      "SponsorLevel": "bronze",
      "altText": "Mercedes Benz AMG"
    },
    {
      "companyName": "The Hub Grill and Bar",
      "company_URL": "https://www.hubgrill.com",
      "company_image": "images/sponsors/HUB_LOGO_OFFICIAL.png",
      "SponsorLevel": "silver",
      "altText": "The Hub Grill and Bar Mesa, Az"
    },
    {
      "companyName": "Haas F1",
      "company_URL": "http://haasf1team.com/",
      "company_image": "https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.bleacherreport.net%2Fimages%2Fteam_logos%2F328x328%2Fhaas.png&f=1&nofb=1",
      "SponsorLevel": "gold",
      "altText": "Haas Formula One Team"
    }
  ]
}
```