Template Training

Other Important Files

Overview

  • Teaching: 15 min
  • Exercises: 0 min

Questions

  • What other files?

Objectives

  • Know that additional files are used to define a consistent appearance.
  • Understand how top and bottom banners can be used to brand training/teaching material.
  • Know that README.md in the root of the repository is converted to index.html in the html build.

Banners

In addition to the episodes a number of files are used to provide a consistent format (branding) for the lesson.  Key in these are `top.html` and `bottom.html`, currently found in the `tools` directory.  Unfortunately we have not yet identified tno to avoid users having to use `html` at this stage.  It is probably worth explaining here that while `markdown` is in its plain form a stripped back human readable mark-up language, it is apparently a superset of `html`, meaning that all valid `html` is also valid `markdown`.  The key words we have used decorate cells with `html` when the rendered notebooks are created.

The top banner consists of a single cell:

<div class="w3-bar w3-padding" style="background-color:#3b93a6">
<div class="w3-bar-item"><h2> ARC Training </h2></div>
<div class="w3-bar-item w3-right"><img class="w3-image w3-right" style="width:40%;max-width:400px" src="./images/uob-logo-white-transparent.png"></div>
</div>

which appears as:

ARC Training

You can customise:

  • The background color of the highlighted cell, here we use University of Bath Research blue-grey
  • The Title or branding of the course, here we brand with ARC, this could equally be the title of the course/lesson.
  • And the logo.

Or you can go completely freestyle and change it completely.

The bottom banner is also a single cell:

<div class="w3-bar" style="background-color:#3b93a6">
<a href="{previous}" class="w3-bar-item w3-button"><h2><i class="fa fa-angle-double-left"></i> Previous</h2></a>
<a href="{index}" class="w3-bar-item w3-button w3-center" style="width:60%"><h2>Schedule</h2></a>
<a href="{next}" class="w3-bar-item w3-button w3-right"><h2>Next <i class="fa fa-angle-double-right"></i></h2></a>
</div>

which appears as:

Here the {previous}, {index} (schedule) and {next} links are assigned when the notebooks are rendered. You may want to change this but the build system currently expects to be able to assign these links during the build so significant changes may prevent a correct build. N.B. that in both these cases the cell appear in the plain notebook as they do in rendered form. This is markdown at work, not the build system. The build system makes use of this feature of markdown when it renders the plain notebooks and generates the correct links, which do not yet work above.

Readme

The README.md forms an essential part of any well maintained repository, and we feel should be included in the html rendering. Also since 00_schedule.* is not index when the html is built, you can't just link to the root directory of the gh-pages or hosting directory because there is no index.html for the browser to hit. So we render the README.md to index.html in the html build directory and add a link to the first page, 00_scehdule.html, proper of the lesson.

Key Points

  • top and bottom are used to decorate the schedule and episodes to provide a consistent appearance.
  • Your README.md describing the project will be used as an index for the html so as always keep it up to date and informative.