Add a template engine for status dashboard

[Andrewnt219]

What would you like to be added:
A template engine somewhat like this

<!-- side-bar.html -->

<nav>
  Sidebar content
</nav>

<!-- index.html -->

{{> sidebar }}

<main>
  Main content 

  <ul>
  {{#each items}}
    <li>{{this.title}}</li>
  {{/each}}
 </ul>
</main>

At the moment, I'm looking at the good old handlebars from WEB322. It's the closest to HTML and has a simple compiler setup like SCSS.

Why would you like this to be added:
Two main reasons:

• The duplicate of HTML: With only two active pages, we already have a problem with different sidebar on both pages in Dashboard and Build Log are not the same #2505
• The verbose code to render HTML from JS in Add API status to the new dashboard #2551

[humphd]

Sounds like a good idea to me.

[Kevan-Y]

Maybe we can separate into several issues maybe, one to setup handlebars, other to add components

[DukeManh]

Let's eventually use React to write it 😃.

[Kevan-Y]

Let's eventually use React to write it 😃.

That what I was thinking too using Next.Js.

[humphd]

@DukeManh I'm hoping to use a different set of technologies so students not as interested in React have a place to work as well. We have all the Next.js we can handle already :)

[Kevan-Y]

I can try and work on it.