Reorganise tutorials and add inline solutions

[bbrcknl]

Aim: Arrange the tutorial material such that it is clear and easy to follow
Solution: Inspired by the Rust book https://doc.rust-lang.org/book/, the user can see the chapters in the index on the left, and go straight to the sections that they need

Specifically, updated tutorials with:

• a streamlined guide to completing the tutorials
• a streamlined "setting up your machine" page
• a how-to page with solutions to tutorial questions
• more organised landing page

To-dos:

• The new tutorial md files are not those from the tutorials repo. The md files in the tutorials repo need to be updated to match the tutorials in this PR, which include solutions and corrections. The new tutorial md files then need to be rewritten as includes to read in the md files from the tutorials repo.
• Sections on the docsite, other than the tutorials, need to be streamlined

[Indanz]

In the preview you gave it looked great, good work!

To-dos:

* The new tutorial md files _are not_ those from the tutorials repo. The md files in the tutorials repo need to be updated to match the tutorials in this PR, which include solutions and corrections. The new tutorial md files then need to be rewritten as includes to read in the md files from the tutorials repo.

Because this hasn't been done yet, I can't see what your changes to the tutorial files themselves are, making reviewing it difficult. I can do a manual diffs between _repos/sel4proj/sel4-tutorials/tutorials/* and Tutorials/*, but that is cumbersome.

I used the following diff to build and preview the site locally:

diff --git a/Gemfile b/Gemfile
index 9e06a50e54..363f7f04eb 100644
--- a/Gemfile
+++ b/Gemfile
@@ -27,6 +27,7 @@ group :jekyll_plugins do
   gem 'jekyll-toc'
   gem 'jekyll-redirect-from'
   gem 'jekyll-remote-theme'
+  gem "jekyll-sass-converter", "~> 2.0" # TODO: Prevent 3.0 untill sass warnings are fixed
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
diff --git a/_config.yml b/_config.yml
index 65f4b8b9a2..b56c93e493 100644
--- a/_config.yml
+++ b/_config.yml
@@ -129,3 +129,4 @@ exclude:
   - assets/css/highlighting/demos
   - assets/css/highlighting/tools
   - assets/css/highlighting/index.html
+  - Tutorials-old

On the http://0.0.0.0:4000/Tutorials/ page, the two blocks on the right don't seem right and point to the wrong url? Maybe they shouldn't always be generated, but only on some pages where it makes sense.

The "Tutorials about seL4" page has some broken urls (e.g. "About seL4"), mostly missing the new subdirectories you added for the tutorials, but other pages also have broken links.

The "Quick solution" need a bit more margin below them and it would help if the mouse pointer would change when hovering above them, both can be fixed with a small css change. Also, when adding a new CSS rule, remove all existing styles from the HTML.

It would be nice if, when clicking on a link in "How to: A quick solutions guide", the Quick solution would be expanded automatically. We can add this in the future, but it will require some Javascript (It needs to check a GET or POST variable and set open to true for all details elements).

All in all my first impression is that the new structure is a lot better and makes more sense compared to what we have now. I'll give more detailed feedback later, maybe when the changes are moved to the tutorials repo.

[bbrcknl]

@Indanz

In the preview you gave it looked great, good work!

Thanks!

To-dos:

* The new tutorial md files _are not_ those from the tutorials repo. The md files in the tutorials repo need to be updated to match the tutorials in this PR, which include solutions and corrections. The new tutorial md files then need to be rewritten as includes to read in the md files from the tutorials repo.

Because this hasn't been done yet, I can't see what your changes to the tutorial files themselves are, making reviewing it difficult. I can do a manual diffs between _repos/sel4proj/sel4-tutorials/tutorials/* and Tutorials/*, but that is cumbersome.

I suggest waiting to review the tutorials until I've made the changes in the tutorials repo, then you'll be able to see line-by-line diffs.
I will start that early next week and keep you posted. It will take ~2 weeks.

On the http://0.0.0.0:4000/Tutorials/ page, the two blocks on the right don't seem right and point to the wrong url? Maybe they shouldn't always be generated, but only on some pages where it makes sense.

I have added two new layouts to the Tutorial pages to remove the blocks that don't make sense.
_layouts/overview.html
_layouts/tutorial.html

The "Tutorials about seL4" page has some broken urls (e.g. "About seL4"), mostly missing the new subdirectories you added for the tutorials, but other pages also have broken links.

The urls have been fixed.

The "Quick solution" need a bit more margin below them and it would help if the mouse pointer would change when hovering above them, both can be fixed with a small css change. Also, when adding a new CSS rule, remove all existing styles from the HTML.

TBD: Integrate CSS with markdown for quick solutions

It would be nice if, when clicking on a link in "How to: A quick solutions guide", the Quick solution would be expanded automatically. We can add this in the future, but it will require some Javascript (It needs to check a GET or POST variable and set open to true for all details elements).

TBD: Integrate js with markdown to expand solutions automatically

All in all my first impression is that the new structure is a lot better and makes more sense compared to what we have now. I'll give more detailed feedback later, maybe when the changes are moved to the tutorials repo.