puppetfactory 0.4.0

data/public/gitviz/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Wei Wang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/public/gitviz/README.md

@@ -0,0 +1,13 @@
+explain-git-with-d3
+===================
+
+Use D3 to visualize simple git branching operations.
+
+This simple project is designed to help people understand some basic git concepts visually.
+
+This is my first attempt at using both SVG and D3. I hope it is helpful to you.
+
+I upload the contents of this repository via FTP every once in a while to: http://www.wei-wang.com/ExplainGitWithD3/
+so you can just visit that site to use an (almost) up to date version.
+
+UPDATE: the page can now also be accessed via: http://onlywei.github.io/explain-git-with-d3/

data/public/gitviz/css/explaingit.css

@@ -0,0 +1,227 @@
+/* styles */
+body {
+    min-width: 1200px;
+}
+
+#menuwrapper {
+    position: fixed;
+    width: 100%;
+    min-height: 9px;
+    border-bottom: 1px solid #888;
+    margin: 0;
+    background-color: #dfdfdf;
+    opacity: 0.98;
+    z-index: 150;
+    background: #dfdfdf url(../images/grippy.png) no-repeat bottom center;
+}
+
+#menubar {
+    background: #dfdfdf url(../images/grippy-close.png) no-repeat bottom center;
+}
+
+.intro {
+    padding: 10px 4em 0 0;
+}
+.intro p, .concept-container p {
+    padding-top: 10px;
+}
+
+a.openswitch {
+    display: block;
+}
+
+a.openswitch.selected {
+    font-weight: bold;
+}
+
+.command-list, .example-list {
+    padding: 10px 0;
+}
+
+.command-list a.openswitch {
+    font-family: Courier New;
+}
+
+.concept-area {
+    padding-bottom: 20px;
+    min-height: 525px;
+}
+
+.concept-container {
+    display: none;
+}
+
+.playground-container {
+    height: 550px;
+    margin-top: 20px;
+    position: relative;
+}
+
+span.cmd {
+    background-color: #222222;
+    color: #FFFFFF;
+    font-family: Courier New;
+    padding: 0 0.2em;
+}
+
+#footer {
+  border-top: 2px dashed #888;
+  padding-top: 1em;
+}
+.svg-container {
+    display: inline-block;
+    border: 1px dotted #AAA;
+}
+
+.svg-container.remote-container {
+    position: absolute;
+    top: 0px; right: 0px;
+    background-color: #EFF1FF;
+    border-left: 1px dotted #AAA;
+    border-bottom: 1px dotted #AAA;
+}
+
+.remote-name-display {
+    font-weight: bold;
+    text-align: right;
+}
+
+.control-box {
+    display: inline-block;
+    width: 250px;
+    vertical-align: bottom;
+    background-color: #000;
+    border: 1px dotted #AAA;
+}
+
+.control-box button {
+    font-family: Courier New;
+    font-size: 12px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+}
+
+.control-box .log {
+    overflow-y: auto;
+    border-bottom: 1px solid #AAA;
+}
+
+.control-box .log,
+.control-box input[type="text"] {
+    font-family: Courier New;
+    font-size: 14px;
+}
+
+.control-box .log .command-entry,
+.control-box input[type="text"] {
+    padding-left: 15px;
+    color: #FFF;
+    line-height: 14px;
+    background: url(../images/prompt.gif) no-repeat left center transparent;
+}
+
+.control-box .log .info,
+.control-box .log .error {
+    font-size: 12px;
+    padding: 5px;
+}
+
+.control-box .log .info {
+    color: #FFC;
+}
+
+.control-box .log .error {
+    color: #FCC;
+}
+
+.control-box input[type="text"] {
+    width: 235px;
+    border: none;
+}
+
+circle.commit {
+    fill: #EEEEEE;
+    stroke: #888888;
+    stroke-width: 3;
+}
+
+circle.commit.checked-out {
+    fill: #CCFFCC !important;
+    stroke: #339900;
+}
+
+circle.commit.merge-commit {
+    stroke: #663300;
+    fill: #FFFFCC;
+}
+
+circle.commit.reverted {
+    fill: #FFC;
+    stroke: #933;
+}
+
+circle.commit.rebased {
+    stroke: #3300CC;
+    fill: #CCCCFF;
+}
+
+circle.commit.branchless {
+    fill: #FEFEFE;
+    stroke: #DDD;
+}
+
+.commit-pointer {
+	stroke: #666;
+	stroke-width: 4;
+}
+
+.merge-pointer {
+    stroke: #663300;
+    stroke-width: 4;
+}
+
+.commit-pointer.branchless,
+.merge-pointer.branchless {
+    stroke: #DDD;
+    stroke-width: 2;
+}
+
+text.id-label {
+	text-anchor: middle;
+	font-family: Courier New;
+	fill: #666;
+	font-size: 10px;
+}
+
+g.branch-tag > rect {
+	fill: #FFCC66;
+	stroke: #CC9900;
+	stroke-width: 2;
+}
+
+g.branch-tag.remote-branch > rect {
+	fill: #CCC;
+	stroke: #888;
+}
+
+g.branch-tag > text {
+	text-anchor: middle;
+	fill: #000;
+	font-size: 11px;
+	font-family: Arial;
+}
+
+g.head-tag > rect {
+	fill: #CCFFCC;
+	stroke: #339900;
+	stroke-width: 2;
+}
+
+g.head-tag > text {
+	text-anchor: middle;
+	fill: #000;
+	font-size: 11px;
+	font-family: Arial;
+	font-weight: bold;
+	text-transform: uppercase;
+}

data/public/gitviz/css/vendor/1140.css

@@ -0,0 +1,130 @@
+/* CSS Resets */
+
+html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
+
+
+/* ==================================================================================================================== */
+/* ! The 1140px Grid V2 by Andy Taylor \ http://cssgrid.net \ http://www.twitter.com/andytlr \ http://www.andytlr.com   */
+/* ==================================================================================================================== */
+
+.container {
+padding-left: 20px;
+padding-right: 20px;
+}
+
+.row {
+width: 100%;
+max-width: 1140px;
+min-width: 755px;
+margin: 0 auto;
+overflow: hidden;
+}
+
+.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
+margin-right: 3.8%;
+float: left;
+min-height: 1px;
+}
+
+.row .onecol {
+width: 4.85%;
+}
+
+.row .twocol {
+width: 13.45%;
+}
+
+.row .threecol {
+width: 22.05%;
+}
+
+.row .fourcol {
+width: 30.75%;
+}
+
+.row .fivecol {
+width: 39.45%;
+}
+
+.row .sixcol {
+width: 48%;
+}
+
+.row .sevencol {
+width: 56.75%;
+}
+
+.row .eightcol {
+width: 65.4%;
+}
+
+.row .ninecol {
+width: 74.05%;
+}
+
+.row .tencol {
+width: 82.7%;
+}
+
+.row .elevencol {
+width: 91.35%;
+}
+
+.row .twelvecol {
+width: 100%;
+float: left;
+}
+
+.last {
+margin-right: 0px;
+}
+
+img, object, embed {
+max-width: 100%;
+}
+
+img {
+	height: auto;
+}
+
+
+/* Smaller screens */
+
+@media only screen and (max-width: 1023px) {
+
+	body {
+	font-size: 0.8em;
+	line-height: 1.5em;
+	}
+	
+	}
+
+
+/* Mobile */
+
+@media handheld, only screen and (max-width: 767px) {
+
+	body {
+	font-size: 16px;
+	-webkit-text-size-adjust: none;
+	}
+	
+	.row, body, .container {
+	width: 100%;
+	min-width: 0;
+	margin-left: 0px;
+	margin-right: 0px;
+	padding-left: 0px;
+	padding-right: 0px;
+	}
+	
+	.row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {
+	width: auto;
+	float: none;
+	margin-left: 0px;
+	margin-right: 0px;
+	padding-left: 20px;
+	padding-right: 20px;
+	}
+
+}

data/public/gitviz/index.html

@@ -0,0 +1,734 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+<title>Visualizing Git</title>
+<script data-main="js/main" src="js/vendor/require.min.js"></script>
+<script type="text/javascript" src="js/vendor/jquery-latest.min.js"></script>
+<script type="text/javascript">
+  $( document ).ready(function() {
+    $('#menubar').delay(1000).slideUp(500);
+
+    $("#menuwrapper").hover(
+      function() {
+        $('#menubar').show();
+        $('#menubar-handle').hide();
+      },
+      function() {
+        $('#menubar').slideUp(250);
+        $('#menubar-handle').show();
+      }
+    );
+  });
+</script>
+<link rel="stylesheet" href="js/vendor/normalize.css">
+<link rel="stylesheet" href="css/vendor/1140.css">
+<link rel="stylesheet" href="css/explaingit.css">
+</head>
+<body>
+<div id="menuwrapper">
+  <div id="menubar">
+    <div class="row command-list">
+      <div class="twocol">
+        <h4>Basic Commands</h3>
+        <a id="open-commit" class="openswitch" href="#" onClick="return false;">git commit</a>
+        <a id="open-branch" class="openswitch" href="#" onClick="return false;">git branch</a>
+      </div>
+      <div class="twocol">
+        <h4>&nbsp;</h4>
+        <a id="open-checkout" class="openswitch" href="#" onClick="return false;">git checkout</a>
+        <a id="open-checkout-b" class="openswitch" href="#" onClick="return false;">git checkout -b</a>
+      </div>
+      <div class="twocol">
+        <h4>Undo Commits</h4>
+        <a id="open-reset" class="openswitch" href="#" onClick="return false;">git reset</a>
+        <a id="open-revert" class="openswitch" href="#" onClick="return false;">git revert</a>
+      </div>
+      <div class="twocol">
+        <h4>Combine Branches</h4>
+        <a id="open-merge" class="openswitch" href="#" onClick="return false;">git merge</a>
+        <a id="open-rebase" class="openswitch" href="#" onClick="return false;">git rebase</a>
+      </div>
+      <div class="twocol">
+        <h4>Remote Server</h4>
+        <a id="open-fetch" class="openswitch" href="#" onClick="return false;">git fetch</a>
+        <a id="open-pull" class="openswitch" href="#" onClick="return false;">git pull</a>
+      </div>
+      <div class="twocol last">
+        <h4>&nbsp;</h4>
+        <a id="open-push" class="openswitch" href="#" onClick="return false;">git push</a>
+      </div>
+    </div>
+    <div class="row command-list">
+      <div class="tencol">
+        <h4>Real World Scenarios</h4>
+        <a id="open-clean" class="openswitch" href="#" onClick="return false;">Restore Local Branch to State on Origin Server</a>
+        <a id="open-fetchrebase" class="openswitch" href="#" onClick="return false;">Update Private Local Branch with Latest from Origin</a>
+        <a id="open-deletebranches" class="openswitch" href="#" onClick="return false;">Deleting Local Branches</a>
+      </div>
+      <div class="twocol last">
+        <a id="open-freeplay" class="openswitch" href="#" onClick="return false;">Free Playground</a>
+      </div>
+    </div>
+  </div>
+</div>
+<a href="https://github.com/onlywei/explain-git-with-d3">
+  <img style="position: absolute; top: 0; right: 0; border: 0;"
+    src="images/forkme_right_red_aa0000.png"
+    alt="Fork me on GitHub">
+</a>
+<div class="container">
+  <div class="row intro">
+    <div class="twelvecol">
+      <h1>Visualizing Git Concepts</h1>
+      <p>
+        This tool is designed to help you understand some fundamental git concepts visually.
+        Choose a scenario to explore from the dropdown menu above.
+      </p>
+      <p>
+        Scenario explanations are displayed below the repository viewer.
+      </p>
+    </div>
+  </div>
+  <div class="row concept-area">
+    <div id="ExplainGitCommit-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        We are going to skip instructing you on how to add your files for commit in this explanation.
+        Let's assume you already know how to do that. If you don't, go read some other tutorials.
+      </p>
+      <p>
+        Pretend that you already have your files staged for commit and enter <span class="cmd">git commit</span>
+        as many times as you like in the terminal box.
+      </p>
+    </div>
+    <div id="ExplainGitBranch-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        <span class="cmd">git branch name</span> will create a new branch named "name".
+        Creating branches just creates a new tag pointing to the currently checked out commit.
+      </p>
+      <p>
+        Branches can be deleted using the command <span class="cmd">git branch -d name</span>.
+      </p>
+      <p>
+        Type <span class="cmd">git commit</span> and <span class="cmd">git branch</span> commands
+        to your heart's desire until you understand this concept.
+      </p>
+    </div>
+    <div id="ExplainGitCheckout-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        <span class="cmd">git checkout</span> has many uses,
+        but the main one is to switch between branches.</br>
+        For example, to switch from master branch to dev branch,
+        I would type <span class="cmd">git checkout dev</span>.
+        After that, if I do a git commit, notice where it goes. Try it.
+      </p>
+      <p>
+        In addition to checking out branches, you can also checkout individual commits. Try it.</br>
+        Make a new commit and then type <span class="cmd">git checkout bb92e0e</span>
+        and see what happens.
+      </p>
+      <p>
+        Type <span class="cmd">git commit</span>, <span class="cmd">git branch</span>,
+        and <span class="cmd">git checkout</span> commands to your heart's desire
+        until you understand this concept.
+      </p>
+    </div>
+    <div id="ExplainGitCheckout-b-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        You can combine <span class="cmd">git branch</span> and <span class="cmd">git checkout</span>
+        into a single command by typing <span class="cmd">git checkout -b branchname</span>.
+        This will create the branch if it does not already exist and immediately check it out.
+      </p>
+    </div>
+    <div id="ExplainGitReset-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        <span class="cmd">git reset</span> will move HEAD and the current branch back to wherever
+        you specify, abandoning any commits that may be left behind. This is useful to undo a commit
+        that you no longer need.
+      </p>
+      <p>
+        This command is normally used with one of three flags: "--soft", "--mixed", and "--hard".
+        The soft and mixed flags deal with what to do with the work that was inside the commit after
+        you reset, and you can read about it <a href="http://git-scm.com/2011/07/11/reset.html">here</a>.
+        Since this visualization cannot graphically display that work, only the "--hard" flag will work
+        on this site.
+      </p>
+      <p>
+        The ref "HEAD^" is usually used together with this command. "HEAD^" means "the commit right
+        before HEAD. "HEAD^^" means "two commits before HEAD", and so on.
+      </p>
+      <p>
+        Note that you must <b>never</b> use <span class="cmd">git reset</span> to abandon commits
+        that have already been pushed and merged into the origin. This can cause your local repository
+        to become out of sync with the origin. Don't do it unless you really know what you're doing.
+      </p>
+    </div>
+    <div id="ExplainGitRevert-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        To undo commits that have already been pushed and shared with the team, we cannot use the
+        <span class="cmd">git reset</span> command. Instead, we have to use <span class="cmd">git revert</span>.
+      </p>
+      <p>
+        <span class="cmd">git revert</span> will create a new commit that will undo all of the work that
+        was done in the commit you want to revert.
+      </p>
+    </div>
+    <div id="ExplainGitMerge-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        <span class="cmd">git merge</span> will create a new commit with two parents. The resulting
+        commit snapshot will have the all of the work that has been done in both branches.
+      </p>
+      <p>
+        If there was no divergence between the two commits, git will do a "fast-forward" method merge.</br>
+        To see this happen, checkout the 'ff' branch and then type <span class="cmd">git merge dev</span>.
+      </p>
+    </div>
+    <div id="ExplainGitRebase-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        <span class="cmd">git rebase</span> will take the commits on this branch and "move" them so that their
+        new "base" is at the point you specify.
+      </p>
+      <p>
+        You should pay close attention to the commit IDs of the circles as they move when you do this exercise.
+      </p>
+      <p>
+        The reason I put "move" in quotations because this process actually generates brand new commits with
+        completely different IDs than the old commits, and leaves the old commits where they were. For this reason,
+        you never want to rebase commits that have already been shared with the team you are working with.
+      </p>
+    </div>
+    <div id="ExplainGitFetch-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        <span class="cmd">git fetch</span> will update all of the "remote tracking branches" in your local repository.
+        Remote tracking branches are tagged in grey.
+      </p>
+    </div>
+    <div id="ExplainGitPull-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        A <span class="cmd">git pull</span> is a two step process that first does a <span class="cmd">git fetch</span>,
+        and then does a <span class="cmd">git merge</span> of the remote tracking branch associated with your current branch.
+        If you have no current branch, the process will stop after fetching.
+      </p>
+      <p>
+        If the argument "--rebase" was given by typing <span class="cmd">git pull --rebase</span>, the second step of
+        pull process will be a rebase instead of a merge. This can be set to the default behavior by configuration by typing:
+        <span class="cmd">git config branch.BRANCHNAME.rebase true</span>.
+      </p>
+    </div>
+    <div id="ExplainGitPush-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        A <span class="cmd">git push</span> will find the commits you have on your local branch that the corresponding branch
+        on the origin server does not have, and send them to the remote repository.
+      </p>
+      <p>
+        By default, all pushes must cause a fast-forward merge on the remote repository. If there is any divergence between
+        your local branch and the remote branch, your push will be rejected. In this scenario, you need to pull first and then
+        you will be able to push again.
+      </p>
+    </div>
+    <div id="ExplainGitClean-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        One simple example of the use of <span class="cmd">git reset</span> is to completely restore your local repository
+        state to that of the origin.</br>
+        You can do so by typing <span class="cmd">git reset origin/master</span>.
+      </p>
+      <p>
+        Note that this won't delete untracked files, you will have to delete those separately with
+        the command <span class="cmd">git clean -df</span>.
+      </p>
+    </div>
+    <div id="ExplainGitFetchRebase-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        Below is a situation in which you are working in a local branch that is all your own. You want to receive the latest code
+        from the origin server's master branch. To update your local branch, you can do it without having to switch branches!
+      </p>
+      <p>
+        First do a <span class="cmd">git fetch</span>, then type <span class="cmd">git rebase origin/master</span>!
+      </p>
+    </div>
+    <div id="ExplainGitDeleteBranches-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        <span class="cmd">git branch -d</span> is used to delete branches.
+        I have pre-created a bunch of branches for you to delete in the playground below.
+        Have at it.
+      </p>
+    </div>
+    <div id="ExplainGitFree-Container" class="twelvecol concept-container">
+      <div class="playground-container"></div>
+      <p>
+        Do whatever you want in this free playground.
+      </p>
+    </div>
+  </div>
+  <div id="footer">
+    <p>
+      In all scenarios, assume that files are staged and ready to commit at all times. If
+      you need a refresher on how to add or stage files for commit, please read
+      <a href="http://git-scm.com/book/en/Git-Basics-Recording-Changes-to-the-Repository">Git Basics</a>.
+    </p>
+  </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">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-commit'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Commit',
+            height: 200,
+            baseLine: 0.4,
+            commitData: [
+                {id: 'e137e9b', tags: ['master']}
+            ],
+            initialMessage: 'Type git commit a few times.'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-branch'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Branch',
+            baseLine: 0.6,
+            commitData: [
+                {id: 'e137e9b', tags: ['master']}
+            ]
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-checkout'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Checkout',
+            height: 500,
+            commitData: [
+                {id: 'e137e9b'},
+                {id: 'bb92e0e', parent: 'e137e9b', tags: ['master']},
+                {id: 'e088135', parent: 'e137e9b', tags: ['dev']}
+            ],
+            initialMessage:
+                'Use git checkout, git branch, and git commit commands until you understand.'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-checkout-b'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Checkout-b',
+            height: 500,
+            commitData: [
+                {id: 'e137e9b'},
+                {id: 'f5b32c8', parent: 'e137e9b'},
+                {id: 'bb92e0e', parent: 'f5b32c8', tags: ['master']},
+                {id: 'e088135', parent: 'e137e9b', tags: ['dev']}
+            ],
+            initialMessage:
+                'Use git checkout -b and git commit commands until you understand.'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-reset'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Reset',
+            height: 200,
+            baseLine: 0.5,
+            commitData: [
+                {id: 'e137e9b'},
+                {id: '0e70093', parent: 'e137e9b'},
+                {id: '3e33afd', parent: '0e70093', tags: ['master']}
+            ],
+            initialMessage: 'Type "git reset HEAD^".'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-revert'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Revert',
+            height: 200,
+            baseLine: 0.5,
+            commitData: [
+                {id: 'e137e9b'},
+                {id: '0e70093', parent: 'e137e9b'},
+                {id: '3e33afd', parent: '0e70093', tags: ['master']}
+            ],
+            initialMessage: 'Type "git revert 0e70093".'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-merge'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Merge',
+            height: 500,
+            commitData: [
+                {id: 'e137e9b'},
+                {id: 'bb92e0e', parent: 'e137e9b', tags: ['master']},
+                {id: 'f5b32c8', parent: 'e137e9b', tags: ['ff']},
+                {id: 'e088135', parent: 'f5b32c8', tags: ['dev']}
+            ],
+            initialMessage:
+                'Type "git merge dev".'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-rebase'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Rebase',
+            height: 500,
+            commitData: [
+                {id: 'e137e9b'},
+                {id: 'bb92e0e', parent: 'e137e9b', tags: ['master']},
+                {id: 'f5b32c8', parent: 'e137e9b'},
+                {id: 'e088135', parent: 'f5b32c8', tags: ['dev']}
+            ],
+            currentBranch: 'dev',
+            initialMessage:
+                'Type "git rebase master".'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-fetch'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Fetch',
+            height: 500,
+            commitData: [
+                {id: 'e137e9b', tags: ['origin/master']},
+                {id: '6ce726f', parent: 'e137e9b'},
+                {id: 'bb92e0e', parent: '6ce726f', tags: ['master']},
+                {id: '0cff760', parent: 'e137e9b', tags: ['origin/dev']},
+                {id: '4ed301d', parent: '0cff760', tags: ['dev']}
+            ],
+            originData: [
+                {id: 'e137e9b'},
+                {id: '7eb7654', parent: 'e137e9b'},
+                {id: '090e2b8', parent: '7eb7654'},
+                {id: 'ee5df4b', parent: '090e2b8', tags: ['master']},
+                {id: '0cff760', parent: 'e137e9b'},
+                {id: '2f8d946', parent: '0cff760'},
+                {id: '29235ca', parent: '2f8d946', tags: ['dev']}
+            ],
+            initialMessage:
+                'Carefully compare the commit IDs between the origin and the local repository. ' +
+                'Then type "git fetch".'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-pull'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Pull',
+            height: 500,
+            commitData: [
+                {id: 'e137e9b', tags: ['origin/master']},
+                {id: '46d095b', parent: 'e137e9b', tags: ['master']}
+            ],
+            originData: [
+                {id: 'e137e9b'},
+                {id: '7eb7654', parent: 'e137e9b'},
+                {id: '090e2b8', parent: '7eb7654'},
+                {id: 'ee5df4b', parent: '090e2b8', tags: ['master']}
+            ],
+            initialMessage:
+                'Carefully compare the commit IDs between the origin and the local repository. ' +
+                'Then type "git pull".'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-push'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Push',
+            height: 500,
+            commitData: [
+                {id: 'e137e9b', tags: ['origin/master']},
+                {id: '46d095b', parent: 'e137e9b', tags: ['master']}
+            ],
+            originData: [
+                {id: 'e137e9b'},
+                {id: '7eb7654', parent: 'e137e9b', tags: ['master']}
+            ],
+            initialMessage:
+                'Carefully compare the commit IDs between the origin and the local repository. ' +
+                'Then type "git push".'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-clean'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Clean',
+            height: 200,
+            baseLine: 0.4,
+            commitData: [
+                {id: 'e137e9b', tags: ['origin/master']},
+                {id: '0e70093', parent: 'e137e9b'},
+                {id: '3e33afd', parent: '0e70093', tags: ['master']}
+            ],
+            initialMessage: 'Type "git reset origin/master".'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-fetchrebase'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'FetchRebase',
+            height: 500,
+            commitData: [
+                {id: 'e137e9b', tags: ['origin/master', 'master']},
+                {id: '46d095b', parent: 'e137e9b'},
+                {id: 'dccdc4d', parent: '46d095b', tags: ['my-branch']}
+            ],
+            currentBranch: 'my-branch',
+            originData: [
+                {id: 'e137e9b'},
+                {id: '7eb7654', parent: 'e137e9b'},
+                {id: '090e2b8', parent: '7eb7654'},
+                {id: 'ee5df4b', parent: '090e2b8', tags: ['master']}
+            ],
+            initialMessage:
+                'First type "git fetch". Then type "git rebase origin/master".'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-deletebranches'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'DeleteBranches',
+            height: 500,
+            baseLine: 0.6,
+            commitData: [
+                {id: 'e137e9b'},
+                {id: 'bb92e0e', parent: 'e137e9b'},
+                {id: 'd25ee9b', parent: 'bb92e0e', tags: ['master']},
+                {id: '071ff28', parent: 'e137e9b', tags: ['protoss']},
+                {id: 'f5b32c8', parent: 'bb92e0e'},
+                {id: 'e088135', parent: 'f5b32c8', tags: ['zerg']},
+                {id: '9e6c322', parent: 'bb92e0e'},
+                {id: '593ae02', parent: '9e6c322', tags: ['terran']}
+            ],
+            currentBranch: 'terran',
+            initialMessage:
+                'Delete some branches.'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-freeplay'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Free',
+            height: 500,
+            commitData: [
+                {id: 'e137e9b', tags: ['origin/master', 'master']}
+            ],
+            originData: [
+                {id: 'e137e9b'},
+                {id: '7eb7654', parent: 'e137e9b'},
+                {id: '090e2b8', parent: '7eb7654'},
+                {id: 'ee5df4b', parent: '090e2b8', tags: ['master']}
+            ],
+            initialMessage:
+                'Have fun.'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+</body>
+</html>