Website Frontend

[Henrique-FB]

Proposed changes

Implementing a frontend for this project using Jekyll and (maybe hopefully) GitHub Pages.

Types of changes

What types of changes does your content introduce to this project?
Put an x in the boxes that apply (without "`")

• Proofreading (fix spelling, grammar, punctuation, accuracy) Proofreading
• New content (new section, new readme, etc.)
• Modifications (modifying existing content)
• Other (please describe)

Checklist

Put an x in the boxes that apply. You can also fill these out after creating the PR. Don't hesitate to ask if you're unsure about any of them. We're here to help! This simply reminds us of what we will look for before merging your code.
Note: If you submit code make sure to test it

• Tested any code that was added/modified in this PR
• Added external links
• Added internal links
• Added images
• Added videos
• Added code snippets

Further comments

So, as I specified in #800, having a website frontend would probably be great for some things (and introduce some issues like broken markdown really breaking readability, for example).

I used Jekyll to implement this for two reasons, the first one is that it is natively implemented in Github Pages (and hopefully, if we want at a future date, would allow us to very easily and freely start a website by simply allowing Github Pages to work on this repo.).
The second reason is that it works (sortof) flawlessly with markdown. People can still add stuff to the repo in the exact same way they had before, and Jekyll will by itself convert to HTML, link the specified CSS, and etc (with the addition that any semi-broken markdown will completely destroy the page, as it needs to be very clearly defined or the markdown-to-html part of Jekyll will break).

The Jekyll code itself is super simple, most of the changes implemented here are either

1. fixing the main page's Markdown so it works properly with Jekyll (adding line skips before tables and stuff like that)
2. CSS for the website
3. some slight changes to make Jekyll work (like repeating the main page because I don't quite know how to make it render in Jekyll otherwise >.< ) and stuff that Jekyll itself creates after running (that we might be able to delete before properly merging to main)

To build the website locally, install jekyll and use

bundle exec jekyll serve

There are a lot of rough edges to smooth out still, I didn't even begin going through all the pages that could be broken, and although I tried I failed miserably at creating a sidebar with the folder structure (for ease of navigation).

[the-label-bot]

The Label Bot has predicted the following:

Category	Value	Confidence	Applied Label

[Henrique-FB]

(This is my first time working on an open source project so do tell me if I do anything wrong, thanks!)

I guess its also nice to add that I'm available to smooth all the rough edges I mentioned (probably through some weeks), but I wanted to put this PR here before I actually go do that as it will take some time and yall might not even be interested in this idea to begin with.

[shhossain]

@Henrique-FB i don't have any idea how to view the website. can you share any guide or resource link.

[Henrique-FB]

@shhossain

First install Jekyll: https://jekyllrb.com/docs/installation/ (it also needs some dependencies to run, they handle that in this link as well)
On the bottom of the page there's sections for specific OS. (I tryed an installation in linux a bit ago, just go to the "Linux" section and paste the stuff that is there on commadn prompt)

Open the branch on vscode and run bundle install. From what I understand it will install all the dependencies Jekyll needs to run.

After that is done run bundle exec jekyll serve and it should run the website on one of your pc's ports (in my case, I open it on 127.0.0.1:4000, it should be displayed on the terminal once Jekyll starts running)

After you open it, you should see something like this:

If what I said doesn't work I think on this video the dude does it on Windows
https://www.youtube.com/watch?v=g6AJ9qPPoyc
, and sets Github Pages up (something we could do later).

and this site shows the entire setting up process
https://jekyllrb.com/tutorials/using-jekyll-with-bundler/
but you should only really need to do the steps I mentioned before, since everything else is set up already.

Hope this works for you. If not we can try something else.

[shhossain]

@Henrique-FB Okay i will take a look.