search

RSE-Sheffield / git-github-zero-to-hero

Training materials for zero to hero training in version control through git, github and gitkraken
https://srse-git-github-zero2hero.netlify.app/
17 stars 10 forks source link

Use mermaid git graphs #51

Open davidwilby opened 1 year ago

davidwilby commented 1 year ago

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. image with the commit labels deliberately removed in this example.

davidwilby commented 1 year ago

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

davidwilby commented 1 year ago

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

davidwilby commented 1 year ago

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

netlify[bot] commented 1 year ago

Deploy Preview for peppy-otter-7a55ad ready!

Name Link
Latest commit 01932b6d40af4532c2dc0111dd1e8c5d1fa6015b
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...

QR Code

Use your smartphone camera to open QR code link.

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

davidwilby commented 1 year ago

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 commented 1 year ago

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

ns-rse commented 6 months ago

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