Use mermaid git graphs

[davidwyld]

Resolves #50

Just a draft example at present to show using mermaid's git graphs in the materials.

I've had to use the customMermaidURL parameter of the learn theme since it hasn't been updated in a while and is quite outdated vis a vis mermaid. However, it would be nice to remove this at some point so we don't have to keep track of the versions.

{{<mermaid>}}
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true,'showCommitLabel': false}} }%%
gitGraph
    commit
    commit
    commit
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
{{</mermaid>}}

Creates a git graph that looks like this at present.

with the commit labels deliberately removed in this example.

[davidwyld]

🚀 Works on the test deployment here: https://deploy-preview-51--srse-git-github-zero2hero.netlify.app/04-collaborative_github_advanced/00-intro/

[davidwyld]

Any input on this gratefully received! @annakrystalli @ns-rse @bobturneruk 🎂

[bobturneruk]

I like this as it brings an example of how to use mermaid into the material, and usefully illustrates a point. Mermaid diagrams are easier to version control and update than binaries.

I think, however, the diagram it creates is a bit too small and tucked away at the bottom of the page to be really useful in delivery. Could you:

• Make the diagram appear bigger or,
• Replace the above diagram with a mermaid version?

[bobturneruk]

Are these just sub-minor version changes?

[davidwyld]

It seems that way doesn't it, hugo modules are still a bit confusing to me.

[bobturneruk]

WHat does this do, please?

[davidwyld]

Have now tidied this up, it's something to do with hugo modules.

[davidwyld]

Look into doing this bottom to top, so the diagrams look more similar to gitkraken's graph

[netlify]

✅ Deploy Preview for peppy-otter-7a55ad ready!

Name	Link
🔨 Latest commit	01932b6
🔍 Latest deploy log	https://app.netlify.com/sites/peppy-otter-7a55ad/deploys/63a0481af278920008a2560c
😎 Deploy Preview	https://deploy-preview-51--peppy-otter-7a55ad.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[davidwyld]

Look into doing this bottom to top, so the diagrams look more similar to gitkraken's graph

Unfortunately this is not a thing *sigh* - requested feature for @mermaid-js but alas not yet.

Also AFAICT there is no good way of resizing mermaid graphs in hugo either...

[ns-rse]

Maybe long term we could look to migrating to GitHub Pages?

[ns-rse]

I came across a possible solution to this the other day.

The mermaid.live site provides the ability to copy a Markdown link to a graph you have previewed. I've embedded these in the Carpentries Sandpaper Workbench site and they render nicely and seem to do so here on GitHub so I suspect they will work with this site.

Here's a messy graph I once drew to demonstrate something