[⚠️WIP] Rewrite site in Astro.js

[mglsj]

As of now the site is a mix bag of vanilla HTML, CSS & JS

This PR aims to transform (rewrite) it in Astro.js a static site builder, with proper separation for content & ui.

All content is now located in /content dir

Preview

Pages Transformed:

• Home Page (with complete rewrite of codrops/RainEffect to ts)

⚠️⚠️⚠️ DO Not Merge

[mglsj]

Initial commit for Widescreen Fix Packs

Preview

• Organized games into separate content folder
• CSS only image comparisons
• Restored snowfall js easter egg

[ThirteenAG]

I need to warn you, that if the design is not 1to1 to the current one, I will not be using this. Plus I'm not sure how you expect me to maintain a ton of code I didn't make. Are you sure about this?

[mglsj]

I need to warn you, that if the design is not 1to1 to the current one, I will not be using this. Plus I'm not sure how you expect me to maintain a ton of code I didn't make. Are you sure about this?

For the design I'm working for one to one copy, (refactoring old code and preserving all easter eggs), also removing js for stuff that can be done with pure css

For maintainability if specifically separated the content to a content folder that is replicated from the screens

---

And how did you write the site originally? Used any site generator or manually written all the code?

[ThirteenAG]

Manually, from a template.

[mglsj]

Manually, from a template.

Widescreen Fixes Pack Page is near parity, minor ui tweaks + functionality remaining

Layout of content files for template generation
https://github.com/mglsj/fusionfix.io/blob/master/content/wfp/games/gta3/index.md?plain=1

---
after: main2.png
before: main1.png
color: rgba(249, 176, 5, 1)
download: https://github.com/ThirteenAG/WidescreenFixesPack/releases/tag/gta3
downloads:
- name: Direct Link
  url: https://github.com/ThirteenAG/WidescreenFixesPack/releases/download/gta3/GTA3.WidescreenFix.zip
- name: Developer build (untested)
  url: https://ci.appveyor.com/api/projects/ThirteenAG/widescreenfixespack/artifacts/GTA3.WidescreenFix.zip?branch=master
- name: Widescreen Frontend Textures
  url: https://github.com/ThirteenAG/WidescreenFixesPack/releases/download/gta3/GTA3.WidescreenFrontend.zip
icons:
- name: modloader
  tooltip: You can also install this via modloader
  url: https://gtaforums.com/topic/669520-mod-loader/
- name: steam
  tooltip: Works with Steam version
  url: https://store.steampowered.com/app/12100/
- name: rockstar
  tooltip: Official website
  url: https://www.rockstargames.com/grandtheftauto3/
id: gta3
logo: logo.svg
stripe: stripe.jpg
support:
  tooltip: ''
  version: Any | v1.0 recommended
tag: gta
title: Grand Theft Auto III Widescreen Fix
screenshots:
  background: https://i.imgur.com/1wlgqDT.jpg
  images:
  - https://i.imgur.com/IwKH9Wo.jpg
  - https://i.imgur.com/S0YoBBT.jpg
  - https://i.imgur.com/XYDUIhd.jpg
  - https://i.imgur.com/PzosQ5L.jpg
  youtube: https://www.youtube.com/embed/Is5PLkHmG8s
---

1. Download and extract the archive to the game directory, where the exe is located.
2. Download and extract Widescreen Frontend Textures to the game directory *(optional)*.
3. Check the download link below for all available features.

[ThirteenAG]

Manually, from a template.

Widescreen Fixes Pack Page is near parity, minor ui tweaks + functionality remaining

Looks way too different for me.