Skip to content

Instantly share code, notes, and snippets.

@aafaque33
Created April 23, 2019 01:56
Show Gist options
  • Save aafaque33/19a863f68e0a22c55bc1df38fbbf7626 to your computer and use it in GitHub Desktop.
Save aafaque33/19a863f68e0a22c55bc1df38fbbf7626 to your computer and use it in GitHub Desktop.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.js"></script>
<style id="jsbin-css">
*{
font-family:Arial;
}
</style>
</head>
<body>
<canvas id="graph"></canvas>
<script id="jsbin-javascript">
// http://gitgraphjs.com/
var myTemplateConfig = {
colors: ["#008fb5", "#979797", "#f1c109", "#33cc33"],
branch: {
lineWidth: 3,
spacingX: 30,
labelRotation: 0
},
commit: {
spacingY: 40,
dot: {
size: 10
},
message: {
displayAuthor: false,
displayBranch: true,
displayHash: true,
font: "normal 14pt Arial"
}
}
};
var myTemplate = new GitGraph.Template( myTemplateConfig );
var graph = new GitGraph({
template: "metro", // or blackarrow
orientation: "vertical",
author: "Aafaque",
elementId: 'graph',
mode: "extended", // or compact if you don't want the messages
template: myTemplate
});
var master = graph.branch("master");
graph.commit("\"git clone https://github.com/repo/project.git\"");
master.commit("Initial Commit");
var develop = graph.branch("develop");
develop.commit("\"git checkout -b develop\"");
const aFeature = develop.branch("feature/one");
aFeature
.commit("[LPTEST-001] new feature added")
.commit("[LPTEST-001] Adding unit tests")
.commit("[LPTEST-001] Fixing some bugs");
develop.merge(aFeature);
develop.commit("Prepare v1");
const release = develop.branch("release/v1.0");
release.commit("Prepare v1");
master.commit("Initial Commit");
master.merge(develop).tag("v1.0.0");
</script>
<script id="jsbin-source-css" type="text/css">*{
font-family:Arial;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">// http://gitgraphjs.com/
var myTemplateConfig = {
colors: ["#008fb5", "#979797", "#f1c109", "#33cc33"],
branch: {
lineWidth: 3,
spacingX: 30,
labelRotation: 0
},
commit: {
spacingY: 40,
dot: {
size: 10
},
message: {
displayAuthor: false,
displayBranch: true,
displayHash: true,
font: "normal 14pt Arial"
}
}
};
var myTemplate = new GitGraph.Template( myTemplateConfig );
var graph = new GitGraph({
template: "metro", // or blackarrow
orientation: "vertical",
author: "Aafaque",
elementId: 'graph',
mode: "extended", // or compact if you don't want the messages
template: myTemplate
});
var master = graph.branch("master");
graph.commit("\"git clone https://github.com/repo/project.git\"");
master.commit("Initial Commit");
var develop = graph.branch("develop");
develop.commit("\"git checkout -b develop\"");
const aFeature = develop.branch("feature/one");
aFeature
.commit("[LPTEST-001] new feature added")
.commit("[LPTEST-001] Adding unit tests")
.commit("[LPTEST-001] Fixing some bugs");
develop.merge(aFeature);
develop.commit("Prepare v1");
const release = develop.branch("release/v1.0");
release.commit("Prepare v1");
master.commit("Initial Commit");
master.merge(develop).tag("v1.0.0");
</script></body>
</html>
*{
font-family:Arial;
}
// http://gitgraphjs.com/
var myTemplateConfig = {
colors: ["#008fb5", "#979797", "#f1c109", "#33cc33"],
branch: {
lineWidth: 3,
spacingX: 30,
labelRotation: 0
},
commit: {
spacingY: 40,
dot: {
size: 10
},
message: {
displayAuthor: false,
displayBranch: true,
displayHash: true,
font: "normal 14pt Arial"
}
}
};
var myTemplate = new GitGraph.Template( myTemplateConfig );
var graph = new GitGraph({
template: "metro", // or blackarrow
orientation: "vertical",
author: "Aafaque",
elementId: 'graph',
mode: "extended", // or compact if you don't want the messages
template: myTemplate
});
var master = graph.branch("master");
graph.commit("\"git clone https://github.com/repo/project.git\"");
master.commit("Initial Commit");
var develop = graph.branch("develop");
develop.commit("\"git checkout -b develop\"");
const aFeature = develop.branch("feature/one");
aFeature
.commit("[LPTEST-001] new feature added")
.commit("[LPTEST-001] Adding unit tests")
.commit("[LPTEST-001] Fixing some bugs");
develop.merge(aFeature);
develop.commit("Prepare v1");
const release = develop.branch("release/v1.0");
release.commit("Prepare v1");
master.commit("Initial Commit");
master.merge(develop).tag("v1.0.0");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment