Implementation of ExplainGit with D3 for LiaScript
There are three ways to use this template. The easiest way is to use the
import statement and the URL of the raw text-file of the master branch or any
other branch or version. But you can also copy the required functionality
directly into the header of your Markdown document, see therefor the
Implementation. And of course, you could also clone this
project and change it, as you wish.
-
Load the macros via
import: https://github.com/liaTemplates/ExplainGit/master/README.md -
Copy the definitions into your Project
-
Clone this repository on GitHub
You can use the @ExplainGit macro to create a blank repository with only one
initial commit.
@ExplainGit
Or you can use the @ExplainGit.eval macro for preconfiguring your repository
with git commands.
You can use create origin to enable the remote origin. A big issue is that the used framework doesn't support branches in the
remote origin!
__Example:__
``` text @ExplainGit.eval
git commit
git commit -m Hello World
git branch dev
git checkout dev
git commit -m dev commit
git checkout master
git commit -m master commit
```This code generates the repository below.
git commit
git commit -m Hello World
git branch dev
git checkout dev
git commit -m dev commit
git checkout master
git commit -m master commit
@ExplainGit: @ExplainGit._eval_(@uid, )
@ExplainGit.eval: @ExplainGit._eval_(@uid,```@0```)
@ExplainGit._eval_
<script>
function git(input) {
if (window.git) {
let srcdoc = window.git.replace("var cmds = \"\";", "var cmds = \"" + input + "\";")
let frame = document.getElementById("eval_@0");
frame.srcdoc = srcdoc
} else {
setTimeout(function(){git(input)}, 100)
}
}
git(`@1`.replace(/\n/g, "|").trim())
</script>
<iframe width=100% height=500px id="eval_@0"></iframe>
@end
@onload
window.git = `<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Implementation of explaingit with d3 for LiaScript</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/LiaTemplates/ExplainGit/bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/1140/2.0/1140.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LiaTemplates/ExplainGit/explaingit.min.css">
</head>
<body>
<div id="ExplainGitZen-Container" style="display:none">
<div class="playground-container"></div>
</div>
<svg version="1.1" baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="0" height="0">
<marker id="triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="#666"
markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">
<path d="M 0 0 L 10 5 L 0 10 z"/>
</marker>
<marker id="faded-triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="#DDD"
markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">
<path d="M 0 0 L 10 5 L 0 10 z"/>
</marker>
<marker id="brown-triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="#663300"
markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">
<path d="M 0 0 L 10 5 L 0 10 z"/>
</marker>
</svg>
<script type="text/javascript">
var cmds = "";
if(cmds) {
explainGit.reset();
const gitHubJson = {
name: 'Zen',
height: '100%',
commitData: [
{id: 'e137e9b', tags: ['master'], message: 'first commit'}
],
initialMessage: "",
cmds: cmds.split("|").filter(cmd => cmd !== "" && cmd !== "create origin")
};
if(cmds.includes("create origin")) {
gitHubJson["originData"] = [{id: 'e137e9b', tags: ['master'], message: 'first commit'}]
}
explainGit.open(gitHubJson);
} else {
explainGit.reset();
explainGit.open({
name: 'Zen',
height: '100%',
commitData: [{id: 'e137e9b', tags: ['master'], message: 'first commit'}],
initialMessage:
'Type in your git commands below.'
});
}
</script>
</body>
</html>`
@end