Visualizing Molecular Structures with VMD: Authors Guide

Preface

This style is based on based on The Carpentries style and has some modifications for use by the Digital Research Alliance of Canada (the Alliance) and ACENET. Creating and editing lessons from such styles is explained in the Carpentries Lesson Example.

Creating a Lesson With This Style

Here is a quick rundown on how to create a lesson based on this style.

Initializing a lesson

$ git clone .git  my_lesson
$ cd my_lesson
$ python3 bin/lesson_initialize.py
$ git remote rename origin template
$ git remote add origin  <GITHUB_URL_FOR_YOUR_LESSON>
$ git commit --all  -m "initialize lesson"
$ git push -u  origin  gh-pages

Configuring the Lesson

Edit the file _config.yml to set these values:

Also don’t forget to edit these files:

Updating the style

Make sure to resolve conflicts!

Merging changes from the template can result in merge conflicts.

Proficiency in resolving conflicts is recommended, as is having Jekyll set up to test the page locally. But as we are working with git repositories, we can always go back to an earlier version of the history.

# check if you have a remote "template" and whether it points to .git :
$ git remote -v
origin	git@github.com:ComputeCanada/my_lesson.git (fetch)
origin	git@github.com:ComputeCanada/my_lesson.git (push)
template	.git (fetch)
template	.git (push)

# if you don't already have the remote "template", add it:
$ git remote  add  template  .git

# now "fetch" the latest commits from "template":
$ git fetch template

# merge the changes:
$ git merge template/gh-pages

# Now resolve the conflicts and test if the page still works.

Using Syntax Extensions in this Style

MathJax

MathJax is a JavaScript library that can render LaTeX math equations on a website. This template has MathJax support enabled and can be used as shown below.

Inline equation within the text

Sometimes we want to use a math expression within the text. We can enclose the LaTeX math expression within double-$ characters like $$ math-expression $$.

This code:

Lorem ipsum dolor sit amet, consectetur  $$ k_{B}T/2 $$ adipisicing elit, sed 
do eiusmod tempor incididunt ut labore et dolore magna aliqua.

… will be rendered like this:

Lorem ipsum dolor sit amet, consectetur \(k_{B}T/2\) adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Math blocks

But we can also have our equations as blocks in between paragraphs.

Centered Block Equation

This code:

$k_{n+1} = n^2 + k_n^2 - k_{n-1}$
{: .math-center}

… will align the equation to the center of the page:

$k_{n+1} = n^2 + k_n^2 - k_{n-1}$

Left Justified Block Equation

This code:

$k_{n+1} = n^2 + k_n^2 - k_{n-1}$
{: .math-left}

… will align the equation to the left of the page:

$k_{n+1} = n^2 + k_n^2 - k_{n-1}$

Mermaid Examples

Mermaid is a JavaScript library that can be used to write various graphs and flow-charts within Markdown and render them on a website. This template has Mermaid support enabled and can be used as shown below.

Flowchart

Documentation for Mermaid Flowchart

<div class="mermaid">
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
</div>
graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]

Git Graph

Documentation for Mermaid gitGraph

<div class="mermaid">
gitGraph
   commit id: "C1"
   commit id: "C2"
   branch develop
   checkout develop
   commit id: "C3"
   commit id: "C4"
   checkout main
   merge develop
   commit id: "C5"
   commit id: "C6"
</div>
gitGraph commit id: "C1" commit id: "C2" branch develop checkout develop commit id: "C3" commit id: "C4" checkout main merge develop commit id: "C5" commit id: "C6"

Instructor View

Some lessons are rather complex and require a lot of information, which can result in long blocks of text that are needed for self-study as well as new instructors that need to familiarize themselves with the material.
In a workshop or presentation setting however it’s difficult to pick out the talking points and having key information in bullet-points would be much better.

A solution to this is to introduce an “Instructor View” that will hide paragraphs that have been marked as {: .self_study_text :} and instead show paragraphs marked as {: .instructor_notes :}, which are otherwise hidden.

If any of those markers a present on a particular page (and only on those), the following toggle switch will appear in the Navigation bar at the top to turn the instructor view on or off:

 

The state of the toggle is persistent for some time (by default 7 days) by setting a cookie, however this duration can be customized by a variable in _config.yml:

instructor_view_cookie_lifetime: 3

Example:

This is a long text that describes a complex topic in detail. 
This contains information that the instructor explains in detail.   
_Lorem ipsum dolor sit amet,[...] sunt in culpa qui officia deserunt mollit anim id est laborum._
{: .self_study_text :}

* talking points for instructor
* easier to read during the workshop
{: .instructor_notes :}

This is a long text that describes a complex topic in detail. This contains information that the instructor explains verbally in detail.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.