Website changes during week 6 of 2024

A lot happened this week. While working on assignment 4.

Changes

Theme

Pink theme! Changed it in mkdocs.yml.

theme:
  name: material
  # see https://squidfunk.github.io/mkdocs-material/getting-started/#color-palette
  palette:
    primary: "pink"
    accent: "red"

Tabs

Tabs and reorganizing the website. I didn’t like how the website navigation showed the Steps folder, which was meant only to be navigated through the weekly excercises, and the whole thing was also quite busy. I am not sure if the problem was caused by me or what, but the tab extension was already defined in the mkdocs.yml file, but it was indented incorrectly, so I needed to fix it. It should look like this:

theme:
  name: material
  # see https://squidfunk.github.io/mkdocs-material/getting-started/#color-palette
  palette:
    primary: "pink"
    accent: "red"
  font:
    false
    # text: "Ubuntu"
    # code: "Ubuntu Mono"
  features:
    - navigation.tabs

In order to hide some pages from view (like the pages in the steps folder), I needed to manually write every page to mkdocs.yml file that should be visible in the navigation:

nav:
  - Home: 'index.md'
  - Assignments: 
    - Week 1: 'assignments/week01.md'
    - Week 2: 'assignments/week02.md'
    - Week 3: 'assignments/week03.md'
    - Week 4: 'assignments/week04.md'
    - Week 5: 'assignments/week05.md'
    - Week 6: 'assignments/week06.md'
    - Week 7: 'assignments/week07.md'
    - Week 8: 'assignments/week08.md'
    - Week 9: 'assignments/week09.md'
    - Week 10: 'assignments/week10.md'
    - Week 11: 'assignments/week11.md'
    - Week 12: 'assignments/week12.md'
    - Week 13: 'assignments/week13.md'
    - Week 14: 'assignments/week14.md'
    - Week 15: 'assignments/week15.md'
    - Week 16: 'assignments/week16.md'
    - Week 17: 'assignments/week17.md'
    - Week 18: 'assignments/week18.md'
    - Week 19: 'assignments/week19.md'
    - Week 20: 'assignments/week20.md'
  - Final Project: 'projects/final-project.md'
  - Agreement: 'about/agreement.md'

Assignments landing page

As the tabs navigation automatically open the first page of each subsection, I needed to create a landing page for the assignments. If I didn’t do that, the navigation tab would always open the page for week01.md first. And that just seemed wrong. I added one more line to the mkdocs.yml file’s nav category:

nav:
  // cut for clarity

  - Assignments: 
    - Table on Contents: 'assignments/assignment_index.md'
    // cut for clarity

The page uses grid cards defined in mkdocs extension attr_list. I had some trouble with the syntax, when I tried to include html to the cards. Mkdocs doesn’t seem to like it when you write markdown that contains html that contains markdown that contains html. I probably should not do that in the future.

The grid cards are quite useful in mkdocs. They take markdown lists, and format them as cards. The syntax in quite simple, if you do not try to do complex stuff:

<div class="grid cards" markdown>

-   Write any markdown content here

-   Here is the content for another card

-   ![](./path/to/image)[This is how my cards are defined!](./path/to/the/linked/markdownfile.md)

</div>

Videos

Video plugin! I didn’t want to keep writing html for videos, so I followed these instructions. Now videos can be added similarly to images.