suzanne.soy/git-tutorial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HTML validator, CSS validator and JSlint/JShint

Browse Source
This commit is contained in:
Suzanne Soy 2021-07-03 20:13:44 +01:00
parent 4cacd36122
commit 1ae4dd9e31
3 changed files with 456 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
git-tutorial.css
View File

@ -10,7 +10,7 @@ article#git-tutorial { position: absolute; top:0; left:0.5em; transition: right,
#git-tutorial pre.log { border: thin solid gray; padding: 0.3em; font-size: 100%; font-family: monospace; box-sizing: border-box; } #git-tutorial pre.log { border: thin solid gray; padding: 0.3em; font-size: 100%; font-family: monospace; box-sizing: border-box; }
#git-tutorial .graph-view { font-size: 100%; font-family: monospace; } #git-tutorial .graph-view { font-size: 100%; font-family: monospace; }
#git-tutorial td.cell-contents, #git-tutorial th.cell-contents { font-family: monospace; } #git-tutorial td.cell-contents, #git-tutorial th.cell-contents { font-family: monospace; }
article#git-tutorial p, article#git-tutorial h1 { max-width: 63rem; } article#git-tutorial p, article#git-tutorial h1, article#git-tutorial h2, article#git-tutorial h3 { max-width: 63rem; }
#git-tutorial td, #git-tutorial th { padding-left: 0.3em; padding-right: 0.3em; } #git-tutorial td, #git-tutorial th { padding-left: 0.3em; padding-right: 0.3em; }
#git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 36em; } #git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 36em; }
@ -84,11 +84,13 @@ article#git-tutorial .onlytoc { display: none; }
/* #toc .onlytoc { } */ /* #toc .onlytoc { } */
#git-tutorial #toc .tocsmall { font-size: smaller; } #git-tutorial #toc .tocsmall { font-size: smaller; }
#git-tutorial #toc .notoc { display: none; } #git-tutorial #toc .notoc { display: none; }
#git-tutorial h1 { display: inline-block; } #git-tutorial h1, #git-tutorial h2, #git-tutorial h3 { display: inline-block; }
#git-tutorial h1 + p { clear: both; } #git-tutorial h1 + p, #git-tutorial h2 + p, #git-tutorial h3 + p { clear: both; }
#git-tutorial .permalink { opacity: 0.5; clear: both; padding: 1.2em 1.2em 0 0.5em; #git-tutorial .permalink, #git-tutorial .permalink *, #git-tutorial .permalink:after { text-decoration: none; color: black; }
#git-tutorial .permalink:after { content: '🔗'; opacity: 0.5; clear: both; padding: 1.2em 1.2em 0 0.5em;
font-size: small; text-decoration: none; color: gray; } font-size: small; text-decoration: none; color: gray; }
#git-tutorial h1:hover + .permalink, #git-tutorial .permalink:hover { opacity: 1; } #git-tutorial .permalink:hover:after { opacity: 1; }
#git-tutorial .permalink:hover h1, #git-tutorial .permalink:hover h2, #git-tutorial .permalink:hover h3 { text-decoration: underline; }
#git-tutorial #toc ul { list-style-type: none; padding: 0 !important; /*list-style-type: disc;*/ } #git-tutorial #toc ul { list-style-type: none; padding: 0 !important; /*list-style-type: disc;*/ }
#git-tutorial #toc a { color: #666; } #git-tutorial #toc a { color: #666; }
#git-tutorial #toc .function { color: #00f; } #git-tutorial #toc .function { color: #00f; }
@ -131,14 +133,14 @@ article#git-tutorial .onlytoc { display: none; }
#git-tutorial .graph-view .legend { padding: 0.8em 0.3em 0.3em; } #git-tutorial .graph-view .legend { padding: 0.8em 0.3em 0.3em; }
/* Section counters */ /* Section counters */
#git-tutorial { counter-reset: h1counter h2counter h3counter; } #git-tutorial { counter-reset: h1counter h2counter h3counter h4counter; }
#git-tutorial > section { counter-reset: h2counter h3counter;} #git-tutorial > section { counter-reset: h3counter;}
#git-tutorial > section > h1 { counter-increment: h1counter; } #git-tutorial > section > h2 { counter-increment: h2counter; }
#git-tutorial > section > h1::before { content: counter(h1counter) ". " } #git-tutorial > section > h2::before { content: counter(h2counter) ". " }
#git-tutorial > section > section { counter-reset: h3counter; } #git-tutorial > section > section { counter-reset: h4counter; }
#git-tutorial > section > section > h1 { counter-increment: h2counter; } #git-tutorial > section > section > h3 { counter-increment: h3counter; }
#git-tutorial > section > section > h1::before { content: counter(h1counter) "." counter(h2counter) ". " } #git-tutorial > section > section > h3::before { content: counter(h2counter) "." counter(h3counter) ". " }
#git-tutorial > section > section.exercise > h1::before { content: "Exercise " counter(h1counter) "." counter(h2counter) ". " } #git-tutorial > section > section.exercise > h3::before { content: "Exercise " counter(h2counter) "." counter(h3counter) ". " }
#git-tutorial .exercise-task { border: thin solid #80c5c5; background: #f1faff; padding: 1em } #git-tutorial .exercise-task { border: thin solid #80c5c5; background: #f1faff; padding: 1em }
#git-tutorial .exercise-reason { border: thin solid #80c5c5; background: #f8fdff; padding: 1em } #git-tutorial .exercise-reason { border: thin solid #80c5c5; background: #f8fdff; padding: 1em }

644
git-tutorial.js
View File

@ -1,5 +1,18 @@
function ___stringToUint8Array(s) { /* jslint browser: true */
var s = ""+s; /* jslint convert: false */
/* jslint devel: false */
/* jshint es3: true */
/* remove jslint "undefined variable" warnings for these */
/* global pako */
/* global Sha1 */
/* global JSZip */
/* global saveAs */
/* global Viz */
/* global CodeMirror */
function ___stringToUint8Array(str) {
var s = String(str);
var a = []; var a = [];
for (var i = 0; i < s.length; i++) { for (var i = 0; i < s.length; i++) {
a.push(s.charCodeAt(i)); a.push(s.charCodeAt(i));
@ -14,18 +27,18 @@ function ___uint8ArrayToString(a) {
return s.join(''); return s.join('');
} }
// Convert bytes to hex // Convert bytes to hex
function ___to_hex(s) { function ___to_hex(str) {
var s = String(s); var s = String(str);
var hex = "" var hex = "";
for (var i = 0; i < s.length; i++) { for (var i = 0; i < s.length; i++) {
hex += ___left_pad(s.charCodeAt(i).toString(16), '0', 2); hex += ___left_pad(s.charCodeAt(i).toString(16), '0', 2);
} }
return hex; return hex;
} }
function ___hex_to_bin(hex) { function ___hex_to_bin(hexstr) {
var hex = String(hex); var hex = String(hexstr);
var str = "" var str = "";
for (var i = 0; i < hex.length; i+=2) { for (var i = 0; i < hex.length; i+=2) {
str += String.fromCharCode(parseInt(hex.substr(i, 2), 16)); str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
} }
@ -33,26 +46,26 @@ function ___hex_to_bin(hex) {
} }
// These three functions are accessible in the user scripts. // These three functions are accessible in the user scripts.
sha1_from_bytes_returns_hex = function(s) { return Sha1.hash(___to_hex(s), { msgFormat: 'hex-bytes', outFormat: 'hex' }); }; var sha1_from_bytes_returns_hex = function(s) { return Sha1.hash(___to_hex(s), { msgFormat: 'hex-bytes', outFormat: 'hex' }); };
deflate = function(s) { return ___uint8ArrayToString(pako.deflate(___stringToUint8Array(s))); } var deflate = function(s) { return ___uint8ArrayToString(pako.deflate(___stringToUint8Array(s))); };
inflate = function(s) { return ___uint8ArrayToString(pako.inflate(___stringToUint8Array(s))); } var inflate = function(s) { return ___uint8ArrayToString(pako.inflate(___stringToUint8Array(s))); };
var ___global_unique_id = 0 var ___global_unique_id = 0;
function ___specialchars(str) { function ___specialchars(str) {
return String(str) return String(str)
.replace(/&/g, '&amp;') .replace(/&/g, '&amp;')
.replace(/</g, '&lt;') .replace(/</g, '&lt;')
.replace(/>/g, '&gt;') .replace(/>/g, '&gt;')
.replace(/"/g, '&quot;') .replace(/"/g, '&quot;');
} }
function ___left_pad(s, char, len) { function ___left_pad(str, chr, len) {
var s = ""+s; var s = String(str);
while (s.length < len) { s = char + s; } while (s.length < len) { s = chr + s; }
return s; return s;
} }
function ___to_hex_for_printf(s) { function ___to_hex_for_printf(str) {
var s = String(s); var s = String(str);
var hex = "" var hex = "";
for (var i = 0; i < s.length; i++) { for (var i = 0; i < s.length; i++) {
var h = ___left_pad(s.charCodeAt(i).toString(16), '0', 2); var h = ___left_pad(s.charCodeAt(i).toString(16), '0', 2);
hex += '<span class="hex-prefix">\\x<span class="hex">' + h + '</span></span>'; hex += '<span class="hex-prefix">\\x<span class="hex">' + h + '</span></span>';
@ -62,18 +75,18 @@ function ___to_hex_for_printf(s) {
function ___specialchars_and_colour(s) { function ___specialchars_and_colour(s) {
return s.replace(/[^-a-zA-Z0-9+_/!%$@.()':]/g, function (c) { return s.replace(/[^-a-zA-Z0-9+_/!%$@.()':]/g, function (c) {
switch (c) { switch (c) {
case " ": return '<span class="space"> </span>'; break; case " ": return '<span class="space"> </span>';
case "\\": return '<span class="specialchar">\\\\</span>'; break; case "\\": return '<span class="specialchar">\\\\</span>';
case "\0": return '<span class="specialchar newline">\\000</span>'; break; case "\0": return '<span class="specialchar newline">\\000</span>';
case "\r": return '<span class="specialchar">\\r</span>'; break; case "\r": return '<span class="specialchar">\\r</span>';
case "\n": return '<span class="specialchar newline">\\n</span>'; break; case "\n": return '<span class="specialchar newline">\\n</span>';
case "\t": return '<span class="specialchar">\\t</span>'; break; case "\t": return '<span class="specialchar">\\t</span>';
case '&': return '&amp;'; break; case '&': return '&amp;';
case '<': return '&lt;'; break; case '<': return '&lt;';
case '>': return '&gt;'; break; case '>': return '&gt;';
case '"': return '&quot;'; break; case '"': return '&quot;';
case "'": return '&#39;'; break; case "'": return '&#39;';
default: return '<span class="specialchar">\\x'+___left_pad(c.charCodeAt(0).toString(16), 0, 2)+'</span>'; break; default: return '<span class="specialchar">\\x'+___left_pad(c.charCodeAt(0).toString(16), 0, 2)+'</span>';
} }
}); });
} }
@ -105,7 +118,7 @@ function ___scroll_to_dest(srcid, destclass) {
var dests = wrapper_and_dests.dests; var dests = wrapper_and_dests.dests;
if (dests.length > 0) { if (dests.length > 0) {
dest = dests[dests.length - 1]; var dest = dests[dests.length - 1];
while (dest && dest.tagName.toLowerCase() != 'tr') { dest = dest.parentElement; } while (dest && dest.tagName.toLowerCase() != 'tr') { dest = dest.parentElement; }
if (dest) { if (dest) {
dest.scrollIntoView({ behavior: 'smooth', block: 'center' }); dest.scrollIntoView({ behavior: 'smooth', block: 'center' });
@ -243,6 +256,8 @@ function ___hilite(srcid, destclass) {
} }
function ___lolite(src, dest) { function ___lolite(src, dest) {
// For now, keep the highlight onmouseout, to help with scrolling while looking for the target of an arrow. // For now, keep the highlight onmouseout, to help with scrolling while looking for the target of an arrow.
var ignore = [src, dest];
ignore = ignore;
} }
(function() { (function() {
var oldresize = window.onresize; var oldresize = window.onresize;
@ -253,156 +268,176 @@ function ___lolite(src, dest) {
___hilite(srcid, destclass); ___hilite(srcid, destclass);
} }
if (oldresize) { oldresize(); } if (oldresize) { oldresize(); }
} };
})(); })();
function ___hex_hash(s) { function ___hex_hash(s) {
var id = ___global_unique_id++; var id = ___global_unique_id++;
var hash = "object-hash-"+___to_hex(s.substr(0,20)); var hash = "object-hash-"+___to_hex(s.substr(0,20));
return '<span id="'+id+'" class="hex-hash" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">' return '<span id="'+id+'" class="hex-hash" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">' +
+ ___to_hex_for_printf(s.substr(0,10)) /*+*/ ___to_hex_for_printf(s.substr(0,10)) +
+ ___to_hex_for_printf(s.substr(10,10)) /*+*/ ___to_hex_for_printf(s.substr(10,10)) +
+ '</span>' /*+*/ '</span>' +
+ ___specialchars_and_colour(s.substr(20) /* should be empty unless there's a bug */); /*+*/ ___specialchars_and_colour(s.substr(20) /* should be empty unless there's a bug */);
} }
function ___specialchars_and_colour_and_hex(s) { function ___special_tree(s) {
var target_hashes = []; var target_hashes = [];
if (s.substr(0,5) == "tree ") { var sp = s.split('\0');
var sp = s.split('\0'); sp[0] = ___specialchars_and_colour(sp[0]);
sp[0] = ___specialchars_and_colour(sp[0]); sp[1] = ___specialchars_and_colour(sp[1]);
sp[1] = ___specialchars_and_colour(sp[1]); for (var i = 2; i < sp.length; i++) {
for (i = 2; i < sp.length; i++) { target_hashes.push(___to_hex(sp[i].substr(0,20)));
target_hashes.push(___to_hex(sp[i].substr(0,20))); sp[i] = ___hex_hash(sp[i].substr(0,20)) +
sp[i] = ___hex_hash(sp[i].substr(0,20)) /*+*/ ___specialchars_and_colour(sp[i].substr(20));
+ ___specialchars_and_colour(sp[i].substr(20)); }
} var html = sp.join('<span class="specialchar newline">\\000</span>');
var html = sp.join('<span class="specialchar newline">\\000</span>'); return { type: 'tree', target_hashes: target_hashes, html: html };
return { type: 'tree', target_hashes: target_hashes, html: html }; }
} else if (/^[0-9a-f]{40}\n$/.test(s)) { function ___special_hash(s) {
var id = ___global_unique_id++; var target_hashes = [];
var h = s.substr(0,40); var id = ___global_unique_id++;
target_hashes.push(h); var h = s.substr(0,40);
var hash = "object-hash-"+h; target_hashes.push(h);
var html = '<span id="'+id+'" class="plain-hash-or-ref" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">' var hash = "object-hash-"+h;
+ s.substr(0,40) var html = '<span id="'+id+'" class="plain-hash-or-ref" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">' +
+ '</span>' /*+*/ s.substr(0,40) +
+ ___specialchars_and_colour(s.substr(40)); /*+*/ '</span>' +
return { type: 'hash', target_hashes: target_hashes, html: html }; /*+*/ ___specialchars_and_colour(s.substr(40));
} else if (/^ref: refs\/[^\n]*\n$/.test(s)) { return { type: 'hash', target_hashes: target_hashes, html: html };
var id = ___global_unique_id++; }
var h = s.substr(5, s.length-6) function ___special_ref(s) {
target_hashes.push(h); var target_hashes = [];
var hash = "object-hash-"+h; var id = ___global_unique_id++;
var html = s.substr(0,5) var h = s.substr(5, s.length-6);
+ '<span id="'+id+'" class="plain-hash-or-ref" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">' target_hashes.push(h);
+ ___specialchars_and_colour(s.substr(5, s.length-6)) var hash = "object-hash-"+h;
+ '</span>' var html = s.substr(0,5) +
+ ___specialchars_and_colour(s.substr(s.length-1)); /*+*/ '<span id="'+id+'" class="plain-hash-or-ref" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">' +
return { type: 'symbolic ref', target_hashes: target_hashes, html: html }; /*+*/ ___specialchars_and_colour(s.substr(5, s.length-6)) +
} else if(s.substr(0,4) == "DIRC") { /*+*/ '</span>' +
var html = 'DIRC'; // magic /*+*/ ___specialchars_and_colour(s.substr(s.length-1));
var i = 4; return { type: 'symbolic ref', target_hashes: target_hashes, html: html };
var binary_span = function(bits) { }
var bytes = bits / 8; function ___special_index(s) {
html += '<span class="newline">' + ___to_hex_for_printf(s.substr(i, bytes)) + '</span>'; var target_hashes = [];
i += bytes; var html = 'DIRC'; // magic
} var i = 4;
binary_span(32); // version var binary_span = function(bits) {
binary_span(32); // entries var bytes = bits / 8;
html += '<span class="newline">' + ___to_hex_for_printf(s.substr(i, bytes)) + '</span>';
var entry_start = i; i += bytes;
while (i + 20 < s.length) { };
binary_span(64); // ctime binary_span(32); // version
binary_span(64); // mtime binary_span(32); // entries
binary_span(32); // device
binary_span(32); // inode
binary_span(32); // mode (stored as octal → binary)
binary_span(32); // uid
binary_span(32); // gid
binary_span(32); // size
var h = s.substr(i, 20);
target_hashes.push(___to_hex(h));
html += ___hex_hash(h); // hash
i += 20;
var length = s.substr(i, 2);
length = length.charCodeAt(0) * 256 + length.charCodeAt(1);
length &= 0xfff;
binary_span(16); // 4 bits flags, 12 bits file length
// file path until null
html += ___specialchars_and_colour(s.substr(i, length));
i += length;
while (i < s.length && (i - entry_start) % 8 != 0) {
// null bytes
if (s.charCodeAt(i) == 0) {
// as expected
html += '<span class="specialchar">\\000</span>';
} else {
// there's a bug in this git index, display the hex chars as they come.
html += ___specialchars_and_colour(s.substr(i, 1));
}
i++;
}
entry_start = i;
}
var entry_start = i;
while (i + 20 < s.length) {
binary_span(64); // ctime
binary_span(64); // mtime
binary_span(32); // device
binary_span(32); // inode
binary_span(32); // mode (stored as octal → binary)
binary_span(32); // uid
binary_span(32); // gid
binary_span(32); // size
var h = s.substr(i, 20); var h = s.substr(i, 20);
target_hashes.push(___to_hex(h)); target_hashes.push(___to_hex(h));
html += ___hex_hash(h); // hash html += ___hex_hash(h); // hash
i += 20; i += 20;
var length = s.substr(i, 2);
html += ___specialchars_and_colour(s.substr(i)); // should be empty length = length.charCodeAt(0) * 256 + length.charCodeAt(1);
length = /* jslint bitwise: true */ length & 0xfff /* jslint bitwise: false */;
return { type: 'index / staging', target_hashes: target_hashes, html: html }; binary_span(16); // 4 bits flags, 12 bits file length
} else if(s.substr(0,7) == "commit ") { // file path until null
var sz = s.split('\0'); html += ___specialchars_and_colour(s.substr(i, length));
var sp = sz[1].split('\n'); i += length;
sz[0] = ___specialchars_and_colour(sz[0]); while (i < s.length && (i - entry_start) % 8 != 0) {
var i; // null bytes
for (i = 0; i < sp.length && sp[i] != ''; i++) { if (s.charCodeAt(i) == 0) {
if (/(tree|parent) [0-9a-f]{40}/.test(sp[i])) { // as expected
var prefix_len = sp[i].startsWith('tree ') ? 5 : 7; html += '<span class="specialchar">\\000</span>';
var id=___global_unique_id++;
var h = sp[i].substr(prefix_len);
target_hashes.push(h);
var hash = "object-hash-"+h;
sp[i] = ___specialchars_and_colour(sp[i].substr(0,prefix_len))
+ '<span id="'+id+'" class="plain-hash-or-ref" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">'
+ sp[i].substr(prefix_len)
+ '</span>';
} else { } else {
sp[i] = ___specialchars_and_colour(sp[i]); // there's a bug in this git index, display the hex chars as they come.
html += ___specialchars_and_colour(s.substr(i, 1));
} }
i++;
} }
for (; i < sp.length; i++) { entry_start = i;
}
var last_h = s.substr(i, 20);
target_hashes.push(___to_hex(last_h));
html += ___hex_hash(last_h); // hash
i += 20;
html += ___specialchars_and_colour(s.substr(i)); // should be empty
return { type: 'index / staging', target_hashes: target_hashes, html: html };
}
function ___special_commit(s) {
var target_hashes = [];
var sz = s.split('\0');
var sp = sz[1].split('\n');
sz[0] = ___specialchars_and_colour(sz[0]);
var i;
for (i = 0; i < sp.length && sp[i] != ''; i++) {
if (/(tree|parent) [0-9a-f]{40}/.test(sp[i])) {
var prefix_len = sp[i].startsWith('tree ') ? 5 : 7;
var id=___global_unique_id++;
var h = sp[i].substr(prefix_len);
target_hashes.push(h);
var hash = "object-hash-"+h;
sp[i] = ___specialchars_and_colour(sp[i].substr(0,prefix_len)) +
/*+*/ '<span id="'+id+'" class="plain-hash-or-ref" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">' +
/*+*/ sp[i].substr(prefix_len) +
/*+*/ '</span>';
} else {
sp[i] = ___specialchars_and_colour(sp[i]); sp[i] = ___specialchars_and_colour(sp[i]);
} }
var sp_joined = sp.join('<span class="specialchar newline">\\n</span>'); }
var html = [sz[0], sp_joined].join('<span class="specialchar newline">\\000</span>'); for (; i < sp.length; i++) {
return { type: 'commit', target_hashes: target_hashes, html: html }; sp[i] = ___specialchars_and_colour(sp[i]);
}
var sp_joined = sp.join('<span class="specialchar newline">\\n</span>');
var html = [sz[0], sp_joined].join('<span class="specialchar newline">\\000</span>');
return { type: 'commit', target_hashes: target_hashes, html: html };
}
function ___specialchars_and_colour_and_hex(str) {
var s = String(str);
if (s.substr(0,5) == "tree ") {
return ___special_tree(s);
} else if (/^[0-9a-f]{40}\n$/.test(s)) {
return ___special_hash(s);
} else if (/^ref: refs\/[^\n]*\n$/.test(s)) {
return ___special_ref(s);
} else if(s.substr(0,4) == "DIRC") {
return ___special_index(s);
} else if(s.substr(0,7) == "commit ") {
return ___special_commit(s);
} else if (s.substr(0, 5) == "blob ") { } else if (s.substr(0, 5) == "blob ") {
return { type: 'blob', target_hashes: target_hashes, html: ___specialchars_and_colour(s) }; return { type: 'blob', target_hashes: [], html: ___specialchars_and_colour(s) };
} else if (s.substr(0, 11) == "type length") { } else if (s.substr(0, 11) == "type length") {
return { type: 'example object', target_hashes: target_hashes, html: ___specialchars_and_colour(s) }; return { type: 'example object', target_hashes: [], html: ___specialchars_and_colour(s) };
} else { } else {
return { type: 'regular file', target_hashes: target_hashes, html: ___specialchars_and_colour(s) }; return { type: 'regular file', target_hashes: [], html: ___specialchars_and_colour(s) };
} }
} }
function ___specialchars_and_colour_and_hex_and_zlib(s) { function ___specialchars_and_colour_and_hex_and_zlib(s) {
var inflated = null;
try { try {
var inflated = pako.inflate(___stringToUint8Array(s)); inflated = pako.inflate(___stringToUint8Array(s));
} catch(e) { } catch(e) {
var inflated = false; inflated = false;
} }
if (inflated) { if (inflated) {
var id=___global_unique_id++; var id=___global_unique_id++;
return { return {
html: html: '<span id="deflated'+id+'-pretty">' +
'<span id="deflated'+id+'-pretty">' /*+*/ '<span class="deflated">deflated:</span>' +
+ '<span class="deflated">deflated:</span>' /*+*/ ___specialchars_and_colour_and_hex(___uint8ArrayToString(inflated)).html +
+ ___specialchars_and_colour_and_hex(___uint8ArrayToString(inflated)).html /*+*/ '</span>' +
+ '</span>' /*+*/ '<span id="deflated'+id+'-raw" style="display:none">' +
+ '<span id="deflated'+id+'-raw" style="display:none">' /*+*/ ___specialchars_and_colour_and_hex(s).html +
+ ___specialchars_and_colour_and_hex(s).html /*+*/ '</span>',
+ '</span>',
td: function(td) { td.classList.add('deflate-toggle'); td.setAttribute('onclick', '___deflated_click('+id+')'); } td: function(td) { td.classList.add('deflate-toggle'); td.setAttribute('onclick', '___deflated_click('+id+')'); }
}; };
} else { } else {
@ -424,7 +459,7 @@ function ___filesystem_to_printf(fs) {
} }
}) })
// directories start with 'd' which sorts before 'f' // directories start with 'd' which sorts before 'f'
.sort((a,b) => a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); .sort(function (a,b) { return (a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); });
return entries.join(' '); return entries.join(' ');
} }
function ___deflated_click(id) { function ___deflated_click(id) {
@ -462,16 +497,16 @@ function ___get_ref_path(x) {
function ___format_filepath(x) { function ___format_filepath(x) {
var sp = x.split('/'); var sp = x.split('/');
if (___is_hashed_object_path(x)) { if (___is_hashed_object_path(x)) {
return sp.slice(0, sp.length-2).map(___specialchars_and_colour).join('/')+(sp.length > 2 ? '/' : '') return sp.slice(0, sp.length-2).map(___specialchars_and_colour).join('/')+(sp.length > 2 ? '/' : '') +
+ '<span class="object-hash object-hash-'+___get_hashed_object_path(x)+'">' /*+*/ '<span class="object-hash object-hash-'+___get_hashed_object_path(x)+'">' +
+ sp.slice(sp.length-2).map(___specialchars_and_colour).join('/') /*+*/ sp.slice(sp.length-2).map(___specialchars_and_colour).join('/') +
+ "</span>"; /*+*/ "</span>";
} else if (___is_ref_path(x)) { } else if (___is_ref_path(x)) {
var refs_idx = sp.indexOf('refs'); var refs_idx = sp.indexOf('refs');
return sp.slice(0, refs_idx).map(___specialchars_and_colour).join('/')+'/' return sp.slice(0, refs_idx).map(___specialchars_and_colour).join('/')+'/' +
+ '<span class="object-hash object-hash-'+___get_ref_path(x)+'">'//TODO /*+*/ '<span class="object-hash object-hash-'+___get_ref_path(x)+'">'/*TODO*/ +
+ sp.slice(refs_idx).map(___specialchars_and_colour).join('/') /*+*/ sp.slice(refs_idx).map(___specialchars_and_colour).join('/') +
+ "</span>"; /*+*/ "</span>";
} else { } else {
return ___specialchars_and_colour(x); return ___specialchars_and_colour(x);
} }
@ -486,9 +521,9 @@ function ___format_contents(contents) {
} }
function ___format_entry(previous_filesystem, x) { function ___format_entry(previous_filesystem, x) {
var previous_filesystem = previous_filesystem || {}; var previous_fs = previous_filesystem || {};
var tr = document.createElement('tr'); var tr = document.createElement('tr');
if (! (previous_filesystem.hasOwnProperty(x[0]) && previous_filesystem[x[0]] == x[1])) { if (! (previous_fs.hasOwnProperty(x[0]) && previous_fs[x[0]] == x[1])) {
tr.classList.add('different'); tr.classList.add('different');
} }
@ -511,7 +546,7 @@ function ___format_entry(previous_filesystem, x) {
} }
function ___sort_filesystem_entries(fs) { function ___sort_filesystem_entries(fs) {
return Object.entries(fs) return Object.entries(fs)
.sort((a,b) => a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); .sort(function (a,b) { return (a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); });
} }
function ___filesystem_to_table(fs, previous_filesystem) { function ___filesystem_to_table(fs, previous_filesystem) {
var table = document.createElement('table'); var table = document.createElement('table');
@ -545,28 +580,53 @@ function ___filesystem_to_table(fs, previous_filesystem) {
tr_empty.append(td_empty); tr_empty.append(td_empty);
td_empty.setAttribute('colspan', '2'); td_empty.setAttribute('colspan', '2');
td_empty.classList.add('empty-filesystem'); td_empty.classList.add('empty-filesystem');
td_empty.innerText = "The filesystem is empty." td_empty.innerText = "The filesystem is empty.";
} }
return table; return table;
} }
function ___filesystem_serialize(fs) {
// We could use ___to_hex(JSON.stringify(fs)), but that requires a somewhat recent JavaScript
// specification, and it would be unfortunate to increase the requirements
// just for a simple serialization/deserialization
var serialized = '';
var entries = ___sort_filesystem_entries(fs);
for (var i = 0; i < entries.length; i++) {
var name = ___to_hex(entries[i][0]);
var contents = entries[i][1] === null ? 'null' : ___to_hex(entries[i][1]);
serialized += (i == 0 ? '' : ',') + name + ':' + contents;
}
return serialized;
}
function ___filesystem_deserialize(str) {
// We could use JSON.parse(___hex_to_bin(str)), but that requires a somewhat recent JavaScript
// specification, and it would be unfortunate to increase the requirements
// just for a simple serialization/deserialization
var deserialized = {};
var entries = str.split(',');
for (var i = 0; i < entries.length; i++) {
var entry = entries[i].split(':');
deserialized[___hex_to_bin(entry[0])] = (entry[1] == 'null' ? null : ___hex_to_bin(entry[1]));
}
return deserialized;
}
function ___filesystem_to_string(fs, just_table, previous_filesystem) { function ___filesystem_to_string(fs, just_table, previous_filesystem) {
var entries = ___sort_filesystem_entries(fs); var entries = ___sort_filesystem_entries(fs);
var id = ___global_unique_id++; var id = ___global_unique_id++;
var html = ''; var html = '';
if (! just_table) { if (! just_table) {
html += 'Filesystem contents: ' + entries.length + " files and directories. " html += 'Filesystem contents: ' + entries.length + " files and directories. " +
+ '<a href="javascript: ___copyzip_click(\'json-'+id+'\');">Download as .zip</a>' /*+*/ '<a href="javascript: ___copyzip_click(\'serialized-'+id+'\');">Download as .zip</a>' +
+ ' or ' /*+*/ ' or ' +
+ '<a href="javascript: ___copyprintf_click(\'elem-'+id+'\');">' /*+*/ '<a href="javascript: ___copyprintf_click(\'elem-'+id+'\');">' +
+ "Copy commands to recreate in *nix terminal" /*+*/ "Copy commands to recreate in *nix terminal" +
+ "</a>." /*+*/ "</a>." +
+ "<br />" /*+*/ "<br />" +
+ '<textarea id="elem-'+id+'" disabled="disabled" style="display:none">' /*+*/ '<textarea id="elem-'+id+'" disabled="disabled" style="display:none">' +
+ ___specialchars(___filesystem_to_printf(fs) || 'echo "Empty filesystem."') /*+*/ ___specialchars(___filesystem_to_printf(fs) || 'echo "Empty filesystem."') +
+ '</textarea>' /*+*/ '</textarea>' +
+ '<textarea id="json-'+id+'" disabled="disabled" style="display:none">' /*+*/ '<textarea id="serialized-'+id+'" disabled="disabled" style="display:none">' +
+ ___to_hex(JSON.stringify(fs)) /*+*/ ___filesystem_serialize(fs) +
+ '</textarea>'; /*+*/ '</textarea>';
} }
html += ___filesystem_to_table(fs, previous_filesystem).outerHTML; // TODO: use DOM primitives instead. html += ___filesystem_to_table(fs, previous_filesystem).outerHTML; // TODO: use DOM primitives instead.
return html; return html;
@ -579,7 +639,7 @@ function ___textarea_value(elem) {
} }
} }
function ___copyzip_click(id) { function ___copyzip_click(id) {
var fs = JSON.parse(___hex_to_bin(document.getElementById(id).value)); var fs = ___filesystem_deserialize(document.getElementById(id).value);
var paths = Object.keys(fs); var paths = Object.keys(fs);
var hierarchy = { subfolders: {}, files: [] }; var hierarchy = { subfolders: {}, files: [] };
@ -615,10 +675,9 @@ function ___copyzip_click(id) {
var join_paths = function(a, b) { var join_paths = function(a, b) {
return (a == "") ? b : (a + "/" + b); return (a == "") ? b : (a + "/" + b);
} };
var add_to_zip = function(zip, base_directory, hierarchy) { var add_to_zip = function(zip, base_directory, hierarchy) {
var subtrees = [];
for (var i in hierarchy.subfolders) { for (var i in hierarchy.subfolders) {
if (hierarchy.subfolders.hasOwnProperty(i)) { if (hierarchy.subfolders.hasOwnProperty(i)) {
var zipfolder = zip.folder(i); var zipfolder = zip.folder(i);
@ -629,7 +688,7 @@ function ___copyzip_click(id) {
var filename = hierarchy.files[f]; var filename = hierarchy.files[f];
zip.file(filename, ___stringToUint8Array(fs[join_paths(base_directory, filename)]), {binary: true}); zip.file(filename, ___stringToUint8Array(fs[join_paths(base_directory, filename)]), {binary: true});
} }
} };
var zip = new JSZip(); var zip = new JSZip();
add_to_zip(zip, '', hierarchy); add_to_zip(zip, '', hierarchy);
@ -655,38 +714,39 @@ function ___copyprintf_click(id) {
elem.disabled = true; elem.disabled = true;
} }
} }
var ___script_log_header = '' var ___script_log_header = '' +
+ 'var ___log = [];\n' /*+*/ 'var ___log = [];\n' +
+ 'var alert = (function (real_console, real_alert) {\n' /*+*/ 'var alert = (function (real_console, real_alert) {\n' +
+ ' return function(message) {\n' /*+*/ ' return function(message) {\n' +
+ ' ___log[___log.length] = { alert: true, txt: message };\n' /*+*/ ' ___log[___log.length] = { alert: true, txt: message };\n' +
+ ' real_console.log("alert:", message);\n' /*+*/ ' if (real_console && real_console.log) { real_console.log("alert:", message); }\n' +
+ ' };\n' /*+*/ ' };\n' +
+ '})(window.console, window.alert);\n' /*+*/ '})(window.console, window.alert);\n' +
+ 'var console = (function(real_console) {\n' /*+*/ 'var console = (function(real_console) {\n' +
+ ' return {\n' /*+*/ ' return {\n' +
+ ' log: function() {\n' /*+*/ ' log: function() {\n' +
+ ' ___log[___log.length] = { alert: false, txt: Array.from(arguments).map(function (x) { return x.toString(); }).join(", ") };\n' /*+*/ ' ___log[___log.length] = { alert: false, txt: Array.from(arguments).map(function (x) { return x.toString(); }).join(", ") };\n' +
+ ' real_console.log.apply(real_console, arguments);\n' /*+*/ ' if (real_console && real_console.log) { real_console.log.apply(real_console, arguments); }\n' +
+ ' },\n' /*+*/ ' },\n' +
+ ' assert: real_console.assert,\n' /*+*/ ' assert: real_console.assert,\n' +
+ ' };\n' /*+*/ ' };\n' +
+ '})(window.console);\n' /*+*/ '})(window.console);\n' +
+ '\n'; /*+*/ '\n';
function ___file_contents_to_graphview(filesystem, path_of_this_file, s) { function ___file_contents_to_graphview(filesystem, path_of_this_file, s) {
var gv = ''; var gv = '';
var s2 = null;
try { try {
var inflated = pako.inflate(___stringToUint8Array(s)); var inflated = pako.inflate(___stringToUint8Array(s));
if (inflated) { if (inflated) {
var s2 = ___uint8ArrayToString(inflated); s2 = ___uint8ArrayToString(inflated);
} else { } else {
var s2 = s; s2 = s;
} }
} catch(e) { } catch(e) {
var s2 = s; s2 = s;
} }
var special = ___specialchars_and_colour_and_hex(s2) var special = ___specialchars_and_colour_and_hex(s2);
var target_hashes = special.target_hashes; var target_hashes = special.target_hashes;
var type = special.type; var type = special.type;
var paths = Object.keys(filesystem); var paths = Object.keys(filesystem);
@ -712,7 +772,7 @@ var ___previous_directory_node_style = 'color = "#80c5c5", fontcolor = "#80c5c5"
var ___directory_node_style = 'color = "#008b8b", fontcolor = "#008b8b"'; // darkcyan = #008b8b var ___directory_node_style = 'color = "#008b8b", fontcolor = "#008b8b"'; // darkcyan = #008b8b
function ___quote_gv(name) { function ___quote_gv(name) {
console.log('TODO: escape GV') if (window.console && window.console.log) { window.console.log('TODO: escape GV'); }
return '"' + name.replace('\n', '\\n') + '"'; return '"' + name.replace('\n', '\\n') + '"';
} }
@ -722,11 +782,10 @@ function ___entry_to_graphview(previous_filesystem, filesystem, x) {
var components = x[0].split('/'); var components = x[0].split('/');
var shortname = components[components.length - 1];
if (___is_hashed_object_path(x[0])) { if (___is_hashed_object_path(x[0])) {
// var hash = components.slice(components.length-2).join(''); // var hash = components.slice(components.length-2).join('');
var shortname = components[components.length - 1].substr(0, 3) + '…'; shortname = shortname.substr(0, 3) + '…';
} else {
var shortname = components[components.length - 1];
} }
var parent = components.slice(0, components.length - 1).join('/'); var parent = components.slice(0, components.length - 1).join('/');
@ -748,7 +807,11 @@ function ___entry_to_graphview(previous_filesystem, filesystem, x) {
gv += ___quote_gv(x[0]) + ' [ id="' + id + '" ]'; gv += ___quote_gv(x[0]) + ' [ id="' + id + '" ]';
if (x[1] === null) { if (x[1] === null) {
shortname = shortname + '\ndirectory'; if (shortname.length <= 2) {
shortname = shortname + '\ndir';
} else {
shortname = shortname + '\ndirectory';
}
if (previous_filesystem.hasOwnProperty(x[0])) { if (previous_filesystem.hasOwnProperty(x[0])) {
// dim nodes that existed in the previous_filesystem // dim nodes that existed in the previous_filesystem
gv += ___quote_gv(x[0]) + ' [' + ___previous_directory_node_style + ']'; gv += ___quote_gv(x[0]) + ' [' + ___previous_directory_node_style + ']';
@ -821,10 +884,10 @@ function ___hide_graphview_hover(id, default_id) {
document.getElementById(id).style.pointerEvents = 'none'; document.getElementById(id).style.pointerEvents = 'none';
} }
var ___legend = '' var ___legend = '' +
+ '<div class="legend">' /*+*/ '<div class="legend">' +
+ '<div class="legend-title">Legend:</div>' /*+*/ '<div class="legend-title">Legend:</div>' +
+ Viz( /*+*/ Viz(
'digraph legend {\n' + 'digraph legend {\n' +
' bgcolor=transparent;\n' + ' bgcolor=transparent;\n' +
' ranksep=0;\n' + ' ranksep=0;\n' +
@ -837,9 +900,9 @@ var ___legend = ''
' "parent" -> "child" ['+___directory_edge_style+'];\n' + ' "parent" -> "child" ['+___directory_edge_style+'];\n' +
' "ref" -> "abcdef" ['+___ref_edge_style+'];\n' + ' "ref" -> "abcdef" ['+___ref_edge_style+'];\n' +
' "existing" -> "new" [style=invis];\n' + ' "existing" -> "new" [style=invis];\n' +
'}') '}') +
+ '</div>' /*+*/ '</div>' +
+ '</div>'; /*+*/ '</div>';
function ___filesystem_to_graphview(filesystem, previous_filesystem) { function ___filesystem_to_graphview(filesystem, previous_filesystem) {
var html = ''; var html = '';
@ -884,22 +947,22 @@ function ___filesystem_to_graphview(filesystem, previous_filesystem) {
} }
function ___log_to_html(log) { function ___log_to_html(log) {
return '<pre class="log">' return '<pre class="log">' +
+ log.map(function(l) { /*+*/ log.map(function(l) {
return '<div class="' + (l.alert ? 'log-alert' : 'log-log') + '">' return '<div class="' + (l.alert ? 'log-alert' : 'log-log') + '">' +
+ ___specialchars(l.txt) /*+*/ ___specialchars(l.txt) +
+ '</div>'; /*+*/ '</div>';
}).join('\n') }).join('\n') +
+ '</pre>' /*+*/ '</pre>';
} }
function ___eval_result_to_html(id, filesystem, previous_filesystem, log, quiet, omit_graph) { function ___eval_result_to_html(id, filesystem, previous_filesystem, log, quiet, omit_graph) {
var loghtml = ___log_to_html(log); var loghtml = ___log_to_html(log);
var table = ___filesystem_to_string(filesystem, quiet, previous_filesystem); var table = ___filesystem_to_string(filesystem, quiet, previous_filesystem);
var gv = ___filesystem_to_graphview(filesystem, previous_filesystem); var gv = ___filesystem_to_graphview(filesystem, previous_filesystem);
var html = (log.length > 0 ? '<p>Console output:</p>' + loghtml : '') var html = (log.length > 0 ? '<p>Console output:</p>' + loghtml : '') +
+ (omit_graph ? '' : gv.html) /*+*/ (omit_graph ? '' : gv.html) +
+ table; /*+*/ table;
document.getElementById(id).innerHTML = '<div class="hilite-wrapper">' + html + '</div>'; document.getElementById(id).innerHTML = '<div class="hilite-wrapper">' + html + '</div>';
if (!omit_graph) { gv.js(); } if (!omit_graph) { gv.js(); }
} }
@ -907,59 +970,60 @@ function ___git_eval(current) {
document.getElementById('hide-eval-' + current).style.display = ''; document.getElementById('hide-eval-' + current).style.display = '';
var script = ___script_log_header; var script = ___script_log_header;
script += 'try {'; script += 'try {';
for (i = 0; i <= current - 1; i++) { for (var i = 0; i <= current - 1; i++) {
script += ___textarea_value(___global_editors[i]); script += ___textarea_value(___global_editors[i]);
} }
script += '\n' script += '\n' +
+ 'var ___previous_filesystem = {};\n' /*+*/ 'var ___previous_filesystem = {};\n' +
+ 'for (k in filesystem) { ___previous_filesystem[k] = filesystem[k]; }\n' /*+*/ 'for (k in filesystem) { ___previous_filesystem[k] = filesystem[k]; }\n' +
+ '___log = [];\n'; /*+*/ '___log = [];\n';
script += ___textarea_value(___global_editors[current]); script += ___textarea_value(___global_editors[current]);
script += '\n' script += '\n' +
+ '} catch (e) {' /*+*/ '} catch (e) {' +
+ ' if (("" + e.message).indexOf("GIT: assertion failed: ") != 0) {' /*+*/ ' if (("" + e.message).indexOf("GIT: assertion failed: ") != 0) {' +
+ ' throw e;' /*+*/ ' throw e;' +
+ ' } else {' /*+*/ ' } else {' +
+ ' ___log.push({ alert: true, txt: "command failed" });' /*+*/ ' ___log.push({ alert: true, txt: "command failed" });' +
+ ' }' /*+*/ ' }' +
+ '}' /*+*/ '}' +
+ '"End of the script";\n' /*+*/ '"End of the script";\n' +
+ '\n' /*+*/ '\n' +
+ '\n' /*+*/ '\n' +
+ '___eval_result_to_html("out" + current, filesystem, ___previous_filesystem, ___log, false);\n' /*+*/ '___eval_result_to_html("out" + current, filesystem, ___previous_filesystem, ___log, false);\n' +
+ 'filesystem;\n'; /*+*/ 'filesystem;\n';
try { try {
eval(script); /* jslint evil: true */ eval(script); /* jslint evil: false */
} catch (e) { } catch (e) {
// Stack traces usually include :line:column // Stack traces usually include :line:column
var rx = /:([0-9][0-9]*):[0-9][0-9]*/g; var rx = /:([0-9][0-9]*):[0-9][0-9]*/g;
var linecol = rx.exec(''+e.stack); var linecol = rx.exec(''+e.stack);
var line = null; var line = null;
if (linecol && linecol.length > 0) { if (linecol && linecol.length > 0) {
line=parseInt(linecol[1]); line=parseInt(linecol[1], 10);
} else { } else {
// Some older versions of Firefox and probably some other browsers use just :line // Some older versions of Firefox and probably some other browsers use just :line
var rx = /:([0-9][0-9]*)*/g; var rx2 = /:([0-9][0-9]*)*/g;
var justline = rx.exec(''+e.stack); var justline = rx2.exec(''+e.stack);
if (justline && justline.length > 0) { if (justline && justline.length > 0) {
line=parseInt(justline[1], 10); line=parseInt(justline[1], 10);
} }
} }
var showline = null;
if (typeof(line) == 'number') { if (typeof(line) == 'number') {
var lines = script.split('\n'); var lines = script.split('\n');
if (line < lines.length) { if (line < lines.length) {
var from = Math.max(0, line-2); var from = Math.max(0, line-2);
var to = Math.min(lines.length - 1, line+2+1); var to = Math.min(lines.length - 1, line+2+1);
var showline = '' showline = '' +
+ 'Possible location of the error: near line ' + line + '\n' /*+*/ 'Possible location of the error: near line ' + line + '\n' +
+ '\n' /*+*/ '\n' +
+ lines.slice(from, to).map(function(l, i) { return '' + (from + i) + ': ' + l; }).join('\n') /*+*/ lines.slice(from, to).map(function(l, i) { return '' + (from + i) + ': ' + l; }).join('\n') +
+ '\n' /*+*/ '\n' +
+ '\n'; /*+*/ '\n';
} }
} else { } else {
var showline = 'Sorry, this tutorial could not pinpoint precisely\nthe location of the error.\n' showline = 'Sorry, this tutorial could not pinpoint precisely\nthe location of the error.\n' +
+ 'The stacktrace below may contain more information.\n' /*+*/ 'The stacktrace below may contain more information.\n';
} }
var error = ___specialchars("" + e + "\n\n" + e.stack); var error = ___specialchars("" + e + "\n\n" + e.stack);
document.getElementById('out' + current).innerHTML = '<pre class="error">' + showline + error + '</pre>'; document.getElementById('out' + current).innerHTML = '<pre class="error">' + showline + error + '</pre>';
@ -980,7 +1044,7 @@ function ___process_elements() {
for (var i = 0; i < sections.length; i++) { for (var i = 0; i < sections.length; i++) {
var level = ___level(sections[i]); var level = ___level(sections[i]);
while (level < previousLevel) { while (level < previousLevel) {
var p = stack.pop(); stack.pop();
previousLevel--; previousLevel--;
} }
while (level > previousLevel) { while (level > previousLevel) {
@ -998,8 +1062,11 @@ function ___sections_to_html(sections) {
for (var i = 0; i < sections.length; i++) { for (var i = 0; i < sections.length; i++) {
var li = document.createElement('li'); var li = document.createElement('li');
ol.appendChild(li); ol.appendChild(li);
var headers = sections[i].s.getElementsByTagName('h1'); var headers = sections[i].s.querySelectorAll('h2,h3');
console.assert(!headers || headers.length >= 1) if (!headers || headers.length < 1) {
if (window.console && window.console.log) { window.console.log("internal error: found no headers in section"); }
continue;
}
var target = sections[i].s.getAttribute('id'); var target = sections[i].s.getAttribute('id');
var a = document.createElement('a'); var a = document.createElement('a');
li.appendChild(a); li.appendChild(a);
@ -1007,10 +1074,12 @@ function ___sections_to_html(sections) {
if (target) { a.setAttribute('href', '#' + target); } if (target) { a.setAttribute('href', '#' + target); }
if (target) { if (target) {
var a2 = document.createElement('a'); var a2 = document.createElement('a');
___insertAfter(a2, headers[0]); var hd = headers[0];
a2.className = "permalink" hd.parentElement.replaceChild(a2, hd);
a2.appendChild(hd);
a2.className = "permalink";
a2.setAttribute('href', '#' + target); a2.setAttribute('href', '#' + target);
a2.innerText = "🔗" //a2.innerHTML += "🔗"
} }
li.appendChild(___functions_to_html(sections[i].s)); li.appendChild(___functions_to_html(sections[i].s));
li.appendChild(___sections_to_html(sections[i].subsections)); li.appendChild(___sections_to_html(sections[i].subsections));
@ -1037,7 +1106,7 @@ function ___functions_to_html(section) {
// Since CodeMirror replaces the textareas, the collection of HTML nodes // Since CodeMirror replaces the textareas, the collection of HTML nodes
// is automatically updated in some browsers, and the indices become wrong // is automatically updated in some browsers, and the indices become wrong
// after a replacement, so we copy the HTML element collection to a proper array. // after a replacement, so we copy the HTML element collection to a proper array.
for (var j = 0; j < tas.length; j++) { ta.push(tas[j]); } for (var i = 0; i < tas.length; i++) { ta[i] = tas[i]; }
for (var j = 0; j < ta.length; j++) { for (var j = 0; j < ta.length; j++) {
if (___ancestor(ta[j], 'section') == section) { if (___ancestor(ta[j], 'section') == section) {
var lines = ta[j].value.split('\n'); var lines = ta[j].value.split('\n');
@ -1045,17 +1114,19 @@ function ___functions_to_html(section) {
var editor = ret.editor; var editor = ret.editor;
var editor_id = ret.editor_id; var editor_id = ret.editor_id;
editor.on('keydown', ___clearScrolledToLine); editor.on('keydown', ___clearScrolledToLine);
for (var i = 0; i < lines.length; i++) { for (var k = 0; k < lines.length; k++) {
var text = false; var text = false;
var fun = lines[i].match(/^function\s+([a-zA-Z_][a-zA-Z0-9_]*)/); var fun = lines[k].match(/^function\s+([a-zA-Z_][a-zA-Z0-9_]*)/);
if (fun) { text = fun[1]; } if (fun) { text = fun[1]; }
var v = lines[i].match(/^var\s+([a-zA-Z_][a-zA-Z0-9_]*)\s*=/); var v = lines[k].match(/^var\s+([a-zA-Z_][a-zA-Z0-9_]*)\s*=/);
if (v) { text = v[1]; } if (v) { text = v[1]; }
if (text) { if (text) {
var li = document.createElement('li'); var li = document.createElement('li');
var a = document.createElement('a'); var a = document.createElement('a');
a.setAttribute('href', 'javascript: ___scrollToLine(___global_editors['+(editor_id)+'], '+i+'); void(0);'); /* split the javascript: … string to prevent jslint from complaining. */
var js = 'java'+'script';
a.setAttribute('href', js + ': ___scrollToLine(___global_editors['+(editor_id)+'], '+k+'); void(0);');
var code = document.createElement('code'); var code = document.createElement('code');
if (fun) { if (fun) {
var spanFunction = document.createElement('span'); var spanFunction = document.createElement('span');
@ -1130,7 +1201,7 @@ function ___hide_eval(editor_id) {
function ___get_all_code() { function ___get_all_code() {
var all = ''; var all = '';
for (var i = 0; i < ___global_editors.length; i++) { for (var i = 0; i < ___global_editors.length; i++) {
var val = ___global_editors[i].getValue() var val = ___global_editors[i].getValue();
all += val + (val.endsWith('\n') ? '' : '\n') + (val.endsWith('\n\n') ? '' : '\n'); all += val + (val.endsWith('\n') ? '' : '\n') + (val.endsWith('\n\n') ? '' : '\n');
} }
return all.substr(0, all.length-1/*remove last newline in the last \n\n*/); return all.substr(0, all.length-1/*remove last newline in the last \n\n*/);
@ -1145,7 +1216,7 @@ function ___copy_all_code() {
elem.innerHTML = ''; elem.innerHTML = '';
elem.appendChild(elem2); elem.appendChild(elem2);
var all_code = ___get_all_code(); var all_code = ___get_all_code();
elem2.value = all_code elem2.value = all_code;
elem2.focus(); elem2.focus();
elem2.disabled = false; elem2.disabled = false;
elem2.select(); elem2.select();
@ -1157,19 +1228,42 @@ function ___copy_all_code() {
function ___loc_count() { function ___loc_count() {
var srclines = ___get_all_code().split('\n'); var srclines = ___get_all_code().split('\n');
var lcv = srclines.filter(function (l) { return ! (/^(\s*}?)?$/.test(l)); }).length var lcv = srclines.filter(function (l) { return ! (/^(\s*}?)?$/.test(l)); }).length;
var lc = document.getElementsByClassName('loc-count'); var lc = document.getElementsByClassName('loc-count');
for (var i = 0; i < lc.length; i++) { for (var i = 0; i < lc.length; i++) {
lc[i].innerText = lcv; lc[i].innerText = lcv;
} }
var lctv = srclines.length; var lctv = srclines.length;
var lct = document.getElementsByClassName('loc-count-total'); var lct = document.getElementsByClassName('loc-count-total');
for (var i = 0; i < lct.length; i++) { for (var j = 0; j < lct.length; j++) {
lct[i].innerText = lctv; lct[j].innerText = lctv;
} }
} }
function ___git_tutorial_onload() { function ___git_tutorial_onload() {
___process_elements(); ___process_elements();
___loc_count(); ___loc_count();
} }
/* remove jslint "unused variable" warnings for these */
var ___jslint_variables_called_from_event_handlers_and_from_tutorial = [
___scroll_to_dest,
___lolite,
___deflated_click,
___copyzip_click,
___copyprintf_click,
___click_graphview_hover,
___mouseout_graphview_hover,
___mouseover_graphview_hover,
___eval_result_to_html,
___git_eval,
___scrollToLine,
___hide_eval,
___copy_all_code,
___git_tutorial_onload,
sha1_from_bytes_returns_hex,
inflate,
deflate
];
// also ignore this dummy variable.
___jslint_variables_called_from_event_handlers_and_from_tutorial = ___jslint_variables_called_from_event_handlers_and_from_tutorial;

145
index.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" lang="en-GB" xml:lang="en-GB" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" lang="en-GB" xml:lang="en-GB" />
@ -41,12 +42,12 @@ function ___example(id, f) {
<article id="git-tutorial" itemscope="itemscope" itemtype="http://schema.org/Article"> <article id="git-tutorial" itemscope="itemscope" itemtype="http://schema.org/Article">
<h1 itemprop="headline">Git tutorial: reimplementing part of GIT in JavaScript</h1> <a href="#" class="permalink"><h1 itemprop="headline">Git tutorial: reimplementing part of GIT in JavaScript</h1></a>
<p class="article-metadata">By <a href="https://suzanne.soy/" itemprop="author" rel="author" itemtype="https://schema.org/Person">Suzanne Soy</a> for <a href="https://ligolang.org/" itemprop="copyrightHolder" itemtype="https://schema.org/Organization">LIGO</a>. <time itemprop="dateCreated datePublished" datetime="2021-06-29">02021-06-29</time>.</p> <p class="article-metadata">By <a href="https://suzanne.soy/" itemprop="author" rel="author" itemscope="itemscope" itemtype="https://schema.org/Person">Suzanne Soy</a> for <a href="https://ligolang.org/" itemprop="copyrightHolder" itemscope="itemscope" itemtype="https://schema.org/Organization">LIGO</a>. <time itemprop="dateCreated datePublished" datetime="2021-06-29">02021-06-29</time>.</p>
<p>Please send remarks and suggestions to <a href="mailto:git-tutorial@suzanne.soy">git-tutorial@suzanne.soy</a> or simply fork <a href="https://github.com/jsmaniac/git-tutorial">this repository on GitHub</a></p> <p>Please send remarks and suggestions to <a href="mailto:git-tutorial@suzanne.soy">git-tutorial@suzanne.soy</a> or simply fork <a href="https://github.com/jsmaniac/git-tutorial">this repository on GitHub</a></p>
<section id="credits-license"> <section id="credits-license">
<h1>Credits and license</h1> <h2>Credits and license</h2>
<p>This article was written as part of my work for <a href="https://ligolang.org/">LIGO</a>.</p> <p>This article was written as part of my work for <a href="https://ligolang.org/">LIGO</a>.</p>
<p>The main reference for this tutorial is the <a href="https://git-scm.com/book/en/v2/Git-Internals-Git-Objects">Pro Git book</a> section on GIT internals.</p> <p>The main reference for this tutorial is the <a href="https://git-scm.com/book/en/v2/Git-Internals-Git-Objects">Pro Git book</a> section on GIT internals.</p>
@ -148,7 +149,7 @@ Copyright notice:
(C) 1995-2013 Jean-loup Gailly and Mark Adler (C) 1995-2013 Jean-loup Gailly and Mark Adler
Copyright (c) <''year''> <''copyright holders''> Copyright (c) &lt;''year''&gt; &lt;''copyright holders''&gt;
This software is provided 'as-is', without any express or implied This software is provided 'as-is', without any express or implied
warranty. In no event will the authors be held liable for any damages warranty. In no event will the authors be held liable for any damages
@ -237,7 +238,7 @@ GPL version 3
GNU GENERAL PUBLIC LICENSE GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007 Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/> Copyright (C) 2007 Free Software Foundation, Inc. &lt;http://fsf.org/&gt;
Everyone is permitted to copy and distribute verbatim copies Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed. of this license document, but changing it is not allowed.
@ -855,6 +856,7 @@ Program, unless a warranty or assumption of liability accompanies a
copy of the Program in return for a fee. copy of the Program in return for a fee.
END OF TERMS AND CONDITIONS END OF TERMS AND CONDITIONS
</pre>
</li> </li>
</ul> </ul>
@ -887,7 +889,7 @@ vulnerabilities (user input is not sanitized when displayed).
</section> </section>
<section id="introduction"> <section id="introduction">
<h1>Introduction</h1> <h2>Introduction</h2>
<p> <p>
GIT is based on a simple model, with a lot of shorthands for common GIT is based on a simple model, with a lot of shorthands for common
use cases. This model is sometimes hard to guess just from the use cases. This model is sometimes hard to guess just from the
@ -900,10 +902,10 @@ excluded, <span class="loc-count-total">a few more</span> in total.</span>
</section> </section>
<section id="os-filesystem"> <section id="os-filesystem">
<h1>The Operating System's filesystem</h1> <h2>The Operating System's filesystem</h2>
<section id="os-filesystem-model"> <section id="os-filesystem-model">
<h1>Model of the filesystem</h1> <h3>Model of the filesystem</h3>
<p>The Operating System's filesystem will be simulated by a very <p>The Operating System's filesystem will be simulated by a very
simple key-value store. In this very simple filesystem, directories simple key-value store. In this very simple filesystem, directories
are entries mapped to <code>null</code> and files are entries mapped are entries mapped to <code>null</code> and files are entries mapped
@ -916,7 +918,7 @@ var current_directory = '';
</section> </section>
<section id="os-filesystem-functions"> <section id="os-filesystem-functions">
<h1>Filesystem access functions<span class="notoc"> (<code>read</code>, <code>write</code>, <code>mkdir</code>, <code>exists</code>, <code>remove</code>, <code>cd</code>)</span></h1> <h3>Filesystem access functions<span class="notoc"> (<code>read</code>, <code>write</code>, <code>mkdir</code>, <code>exists</code>, <code>remove</code>, <code>cd</code>)</span></h3>
<p>The filesystem exposes functions to read an entire file, create or <p>The filesystem exposes functions to read an entire file, create or
replace an entire file, create a directory, test the existence of a filesystem entry, and change the current directory.</p> replace an entire file, create a directory, test the existence of a filesystem entry, and change the current directory.</p>
<textarea id="in1"> <textarea id="in1">
@ -953,7 +955,7 @@ function remove(path, recursive) {
</section> </section>
<section id="os-filesystem-listdir"> <section id="os-filesystem-listdir">
<h1>Filesystem access functions<span class="notoc"> (<code>listdir</code>)</span></h1></h1> <h3>Filesystem access functions<span class="notoc"> (<code>listdir</code>)</span></h3>
<p>It will be handy for some operations to list the contents of a <p>It will be handy for some operations to list the contents of a
directory.</p> directory.</p>
<textarea id="in2"> <textarea id="in2">
@ -979,11 +981,11 @@ function listdir(dirname) {
</section> </section>
<section id="example-working-directory"> <section id="example-working-directory">
<h1>Example working tree</h1> <h2>Example working tree</h2>
<p>Our imaginary user will create a <code>proj</code> directory, <p>Our imaginary user will create a <code>proj</code> directory,
and start filling in some files.</p> and start filling in some files.</p>
<div class="trivia"> <div class="trivia">
<p trivia> <p>
A <em>working tree</em> designates the directory (and the subdirectories and files within) in which A <em>working tree</em> designates the directory (and the subdirectories and files within) in which
the user will normally view and edit the files. GIT has commands to save the state of the working tree the user will normally view and edit the files. GIT has commands to save the state of the working tree
(git commit), in order to be able to go back in time later on, and view older versions of the files. (git commit), in order to be able to go back in time later on, and view older versions of the files.
@ -1007,7 +1009,7 @@ write('proj/src/main.scm', '(map (lambda (x) (+ x 1)) (list 1 2 3))\n');
</section> </section>
<section id="git-init-dot-git"> <section id="git-init-dot-git">
<h1><code>git init</code> (creating <code>.git</code>)</h1> <h2><code>git init</code> (creating <code>.git</code>)</h2>
<p>The first thing to do is to initialize the GIT directory. <p>The first thing to do is to initialize the GIT directory.
For now, only the <code>.git</code> folder is needed, The rest For now, only the <code>.git</code> folder is needed, The rest
of the function implementing <code>git init</code> will be of the function implementing <code>git init</code> will be
@ -1029,7 +1031,7 @@ git_init_mkdir();
</section> </section>
<section id="git-hash-object"> <section id="git-hash-object">
<h1><code>git hash-object</code><span class="notoc"> (storing a copy of a file in <code>.git</code>)</span></h1> <h2><code>git hash-object</code><span class="notoc"> (storing a copy of a file in <code>.git</code>)</span></h2>
<p>The most basic element of a GIT repository is an <em>object</em>. Objects have a type which can be <p>The most basic element of a GIT repository is an <em>object</em>. Objects have a type which can be
<code>blob</code> (individual files), <code>tree</code> (directories), <code>blob</code> (individual files), <code>tree</code> (directories),
<code>commit</code> (pointers to a specific version of the root directory, <code>commit</code> (pointers to a specific version of the root directory,
@ -1106,7 +1108,7 @@ function hash_object(must_write, type, is_data, path_or_data) {
</textarea> </textarea>
<section id="add-file-to-git"> <section id="add-file-to-git">
<h1>Adding a file to the GIT database</h1> <h3>Adding a file to the GIT database</h3>
<p>So far, our GIT database does not know about any of the user&apos;s <p>So far, our GIT database does not know about any of the user&apos;s
files. In order to add the contents of the <code>README</code> file in files. In order to add the contents of the <code>README</code> file in
the database, we use <code>git hash-object -w -t blob README</code>, the database, we use <code>git hash-object -w -t blob README</code>,
@ -1132,7 +1134,7 @@ hash_object(true, 'blob', false, 'src/main.scm');
</section> </section>
<section id="zlib-compression-note"> <section id="zlib-compression-note">
<h1><code>zlib</code> compression</h1> <h2><code>zlib</code> compression</h2>
<p>GIT compresses objects with zlib. The <code>deflate()</code> function used in <p>GIT compresses objects with zlib. The <code>deflate()</code> function used in
the script above comes from the <a href="https://github.com/nodeca/pako">pako 2.0.3</a> library. the script above comes from the <a href="https://github.com/nodeca/pako">pako 2.0.3</a> library.
To view a zlib-compressed object in your *nix terminal, simply write this To view a zlib-compressed object in your *nix terminal, simply write this
@ -1150,7 +1152,7 @@ unzlib() {
</section> </section>
<section id="storing-trees"> <section id="storing-trees">
<h1>Storing trees (list of hashed files and subtrees)</h1> <h2>Storing trees (list of hashed files and subtrees)</h2>
<p>At this point GIT knows about the contents of both of the user's <p>At this point GIT knows about the contents of both of the user's
files, but it would be nice to also store the filenames. files, but it would be nice to also store the filenames.
This is done by creating a <em>tree</em> object</p> This is done by creating a <em>tree</em> object</p>
@ -1214,7 +1216,7 @@ function hex_to_raw_bytes(hex) {
</textarea> </textarea>
<section id="store-tree-example"> <section id="store-tree-example">
<h1>Example use of <code>store_tree()</code></h1> <h3>Example use of <code>store_tree()</code></h3>
<p>The following code, once uncommented, stores into the GIT database the trees for <code>src</code> <p>The following code, once uncommented, stores into the GIT database the trees for <code>src</code>
and for the root directory of the GIT project.</p> and for the root directory of the GIT project.</p>
@ -1229,7 +1231,7 @@ the hierarchy, and stores the corresponding trees bottom-up.</p>
</section> </section>
<section id="store-tree-from-paths"> <section id="store-tree-from-paths">
<h1>Storing a tree from a list of paths</h1> <h3>Storing a tree from a list of paths</h3>
<p>Making trees out of the subfolders one by one is cumbersome. <p>Making trees out of the subfolders one by one is cumbersome.
The following utility function takes a list of paths, and builds The following utility function takes a list of paths, and builds
a tree from those.</p> a tree from those.</p>
@ -1291,7 +1293,7 @@ paths_to_tree(["README", "src/main.scm"]);
</section> </section>
<section id="store-commit"> <section id="store-commit">
<h1>Storing a commit in the GIT database</h1> <h2>Storing a commit in the GIT database</h2>
<p>Now that the GIT database contains the entire tree for the current version, <p>Now that the GIT database contains the entire tree for the current version,
a commit can be created. A commit contains</p> a commit can be created. A commit contains</p>
<ul> <ul>
@ -1368,7 +1370,7 @@ function format_timezone(tm) {
</textarea> </textarea>
<section id="store-commit-example"> <section id="store-commit-example">
<h1>Storing an example commit</h1> <h3>Storing an example commit</h3>
<p>It is now possible to store a commit in the database. This saves <p>It is now possible to store a commit in the database. This saves
a copy of the tree along with some metadata about this version. a copy of the tree along with some metadata about this version.
The first commit has no parent, which is represented by passing The first commit has no parent, which is represented by passing
@ -1392,7 +1394,7 @@ var initial_commit = store_commit(
</section> </section>
<section id="resolving-references"> <section id="resolving-references">
<h1>resolving references</h1> <h2>resolving references</h2>
<p>The next few subsections will introduce <em>symbolic references</em> <p>The next few subsections will introduce <em>symbolic references</em>
and other references like branch names, the special name <code>HEAD</code> and other references like branch names, the special name <code>HEAD</code>
@ -1468,7 +1470,7 @@ function trim_newline(s) {
</textarea> </textarea>
<section id="git-symbolic-ref"> <section id="git-symbolic-ref">
<h1><code>git symbolic-ref</code></h1> <h3><code>git symbolic-ref</code></h3>
<p><code>git symbolic-ref</code> is a low-level command which reads <p><code>git symbolic-ref</code> is a low-level command which reads
(and in the official GIT implementation also writes and updates) (and in the official GIT implementation also writes and updates)
symbolic references given a path relative to <code>.git/</code>. symbolic references given a path relative to <code>.git/</code>.
@ -1537,7 +1539,7 @@ function git_symbolic_ref(ref) {
</section> </section>
<section id="git-rev-parse"> <section id="git-rev-parse">
<h1><code>git rev-parse</code></h1> <h3><code>git rev-parse</code></h3>
<p><code>git rev-parse</code> is another low-level command. It takes a symbolic reference or other reference, <p><code>git rev-parse</code> is another low-level command. It takes a symbolic reference or other reference,
and returns the hash. The difference with <code>git symbolic-ref</code> is that <code>symbolic-ref</code> follows indirections and returns the hash. The difference with <code>git symbolic-ref</code> is that <code>symbolic-ref</code> follows indirections
to other references, and returns the last named reference in the chain of indirections, whereas <code>rev-parse</code> to other references, and returns the last named reference in the chain of indirections, whereas <code>rev-parse</code>
@ -1577,7 +1579,7 @@ function git_rev_parse(ref) {
</section> </section>
<section id="git-branch"> <section id="git-branch">
<h1><code>git branch</code></h1> <h2><code>git branch</code></h2>
<p>A branch is a pointer to a commit, stored in a file in <code>.git/refs/heads/name_of_the_branch</code>. <p>A branch is a pointer to a commit, stored in a file in <code>.git/refs/heads/name_of_the_branch</code>.
The branch can be overwritten with <code>git branch -f</code>. Also, as will be explained later, The branch can be overwritten with <code>git branch -f</code>. Also, as will be explained later,
@ -1649,7 +1651,7 @@ git_branch('main', initial_commit, true);
</section> </section>
<section id="HEAD"> <section id="HEAD">
<h1><code>HEAD</code></h1> <h2><code>HEAD</code></h2>
<p> <p>
The <code>HEAD</code> indicates the "current" commit. It is set at first as part of the <code>git init</code> routine. The <code>HEAD</code> indicates the "current" commit. It is set at first as part of the <code>git init</code> routine.
</p> </p>
@ -1682,8 +1684,8 @@ git_init_head();
<p> <p>
Since the HEAD is supposed to be a transient pointer, it is easy to lose track of the hash of Since the HEAD is supposed to be a transient pointer, it is easy to lose track of the hash of
an important commit. For example, the following sequence of operations: an important commit. For example, the following sequence of operations:
</p>
<pre> <pre>
git checkout 0123456789abcdef0123456789abcdef01234567 git checkout 0123456789abcdef0123456789abcdef01234567
touch new_file touch new_file
@ -1691,11 +1693,11 @@ git add new_file
git commit -m 'This is a commit adding a new file' git commit -m 'This is a commit adding a new file'
git checkout branch-of-feature-foobar git checkout branch-of-feature-foobar
</pre> </pre>
roughly means: <p>roughly means:</p>
<pre> <pre>
HEAD = 0123456789abcdef0123456789abcdef01234567 HEAD = 0123456789abcdef0123456789abcdef01234567
// overwrite the contents of the working tree with // overwrite the contents of the working tree with
// the contents of commit 0123456789abcdef0123456789abcdef01234567 // the contents of commit 0123456789abcdef0123456789abcdef01234567
@ -1706,8 +1708,7 @@ HEAD = commit(…)
// Checkout other branch // Checkout other branch
HEAD = git_rev_parse('branch-of-feature-foobar') HEAD = git_rev_parse('branch-of-feature-foobar')
</pre> </pre>
</p>
<p> <p>
The hash of the new commit which is stored in HEAD on the second step is overwritten The hash of the new commit which is stored in HEAD on the second step is overwritten
@ -1746,12 +1747,12 @@ HEAD = git_rev_parse('branch-of-feature-foobar')
<section id="git-config"> <section id="git-config">
<h1>git config</h1> <h2>git config</h2>
<p> <p>
The official implementation of GIT stores the settings in various files (<code>.git/config</code> within a repository, The official implementation of GIT stores the settings in various files (<code>.git/config</code> within a repository,
<code>~/.gitconfig</code> in the user's home folder, and several other places). <code>~/.gitconfig</code> in the user's home folder, and several other places).
</p> </p>
<textarea id="in16"> <textarea id="in16">
var gitconfig = { var gitconfig = {
user: { user: {
name: 'Ada Lovelace', name: 'Ada Lovelace',
@ -1760,24 +1761,24 @@ var gitconfig = {
}; };
var $EDITOR = function() { return window.prompt('Commit message:'); } var $EDITOR = function() { return window.prompt('Commit message:'); }
</textarea> </textarea>
<p> <p>
These files use a <code>.ini</code> syntax These files use a <code>.ini</code> syntax
with <code>key = value</code> lines grouped under some <code>[section]</code> headings. The configuration above could be with <code>key = value</code> lines grouped under some <code>[section]</code> headings. The configuration above could be
stored in <code>~/.gitconfig</code> or <code>.git/config</code> using the following syntax: stored in <code>~/.gitconfig</code> or <code>.git/config</code> using the following syntax:
</p> </p>
<pre> <pre>
[user] [user]
name = Ada Lovelace name = Ada Lovelace
email = ada@analyti.cal email = ada@analyti.cal
</pre> </pre>
<p> <p>
The <code>$EDITOR</code> variable is a traditional *NIX environment variable, and could e.g. be declared with The <code>$EDITOR</code> variable is a traditional *NIX environment variable, and could e.g. be declared with
<code>EDITOR=nano</code> in <code>~/.profile</code> or <code>~/.bashrc</code>. <code>EDITOR=nano</code> in <code>~/.profile</code> or <code>~/.bashrc</code>.
</p> </p>
</section> </section>
<section id="git-commit"> <section id="git-commit">
<h1><code>git commit</code></h1> <h2><code>git commit</code></h2>
<p> <p>
The <code>git commit</code> command stores a commit (metadata and a pointer to a tree The <code>git commit</code> command stores a commit (metadata and a pointer to a tree
@ -1857,7 +1858,7 @@ var second_commit = git_commit(['README', 'src/main.scm'], 'Some updates');
</section> </section>
<section id="git-tag"> <section id="git-tag">
<h1><code>git tag</code></h1> <h2><code>git tag</code></h2>
<p>Tags behave like branches, but are stored in <code>.git/refs/tags/the_tag_name</code> <p>Tags behave like branches, but are stored in <code>.git/refs/tags/the_tag_name</code>
and a tag is not normally modified. Once created, it's supposed to always point and a tag is not normally modified. Once created, it's supposed to always point
to the same version.</p> to the same version.</p>
@ -1900,7 +1901,7 @@ git_tag('v1.0', second_commit);
</section> </section>
<section id="git-checkout"> <section id="git-checkout">
<h1><code>git checkout</code></h1> <h2><code>git checkout</code></h2>
<p> <p>
The <code>git checkout commit-hash-or-reference</code> command modifies the HEAD to point to the given commit, The <code>git checkout commit-hash-or-reference</code> command modifies the HEAD to point to the given commit,
and modifies the working tree to match the contents of the tree object pointed to by that commit. and modifies the working tree to match the contents of the tree object pointed to by that commit.
@ -1920,7 +1921,7 @@ function git_checkout(tag_or_branch_or_hash) {
} }
</textarea> </textarea>
<section id="checkout-branch-vs-other"> <section id="checkout-branch-vs-other">
<h1>Checkout, branches and other references</h1> <h3>Checkout, branches and other references</h3>
<p>The HEAD does not normally point to a tag. Although nothing actually <p>The HEAD does not normally point to a tag. Although nothing actually
prevents writing <code>ref: refs/tags/v1.0</code> into <code>.git/HEAD</code>, the GIT prevents writing <code>ref: refs/tags/v1.0</code> into <code>.git/HEAD</code>, the GIT
commands will not automatically do this. For example, <code>git checkout tag-or-branch-or-hash</code> commands will not automatically do this. For example, <code>git checkout tag-or-branch-or-hash</code>
@ -1928,7 +1929,7 @@ function git_checkout(tag_or_branch_or_hash) {
</section> </section>
<section id="checkout-files"> <section id="checkout-files">
<h1>Checking out files</h1> <h3>Checking out files</h3>
<p> <p>
In order to replace the contents of the working tree with those of the given commit, we In order to replace the contents of the working tree with those of the given commit, we
recursively compare the subtrees, deleting from the working tree the files or directories recursively compare the subtrees, deleting from the working tree the files or directories
@ -1978,7 +1979,7 @@ function checkout_tree(path_prefix, hash) {
</section> </section>
<section id="parse-assert"> <section id="parse-assert">
<h1>Assert</h1> <h3>Assert</h3>
<p> <p>
The <code>checkout_tree()</code> function needs to read the commit, tree and blob objects from the The <code>checkout_tree()</code> function needs to read the commit, tree and blob objects from the
<code>.git/</code> folder. The following sections will introduce some parsers for these objects. <code>.git/</code> folder. The following sections will introduce some parsers for these objects.
@ -1992,7 +1993,7 @@ function assert(boolean, text) {
</section> </section>
<section id="parsed-compressed"> <section id="parsed-compressed">
<h1>Reading compressed objects</h1> <h3>Reading compressed objects</h3>
<p>The GIT objects which are stored in <code>.git/objects</code> are compressed with <code>zlib</code>, and need to be <p>The GIT objects which are stored in <code>.git/objects</code> are compressed with <code>zlib</code>, and need to be
uncompressed before they can be parsed. The actual implementation of GIT also stores some objects in <em>packs</em>. Packs uncompressed before they can be parsed. The actual implementation of GIT also stores some objects in <em>packs</em>. Packs
contain a large number of objects, and used a form of delta compression, which effectively stores objects as the diff with contain a large number of objects, and used a form of delta compression, which effectively stores objects as the diff with
@ -2021,7 +2022,7 @@ function parse_object(hash) {
</section> </section>
<section id="parse-tree"> <section id="parse-tree">
<h1>Parsing tree objects</h1> <h3>Parsing tree objects</h3>
<p>We will start by parsing tree objects. As a reminder, a tree object has the following form:</p> <p>We will start by parsing tree objects. As a reminder, a tree object has the following form:</p>
<div id="example-tree-objects-parse"></div> <div id="example-tree-objects-parse"></div>
<script class="example"> <script class="example">
@ -2084,7 +2085,7 @@ function to_hex(bin) {
</section> </section>
<section id="parse-commit"> <section id="parse-commit">
<h1>Parsing commit objects</h1> <h3>Parsing commit objects</h3>
<p>The following function is fairly long, but only parses lines of the form <code>header-name header-value</code> <p>The following function is fairly long, but only parses lines of the form <code>header-name header-value</code>
(with some restrictions depending on the header), followed by a blenk line, and a free-form description.</p> (with some restrictions depending on the header), followed by a blenk line, and a free-form description.</p>
<textarea> <textarea>
@ -2142,7 +2143,7 @@ function parse_commit(hash) {
</section> </section>
<section id="parse-author-committer"> <section id="parse-author-committer">
<h1>Parsing author and committer metadata</h1> <h3>Parsing author and committer metadata</h3>
<p>The author and committer metadata has the form <code>Name &lt;email@domain.tld&gt; timestamp +timezone</code>, <p>The author and committer metadata has the form <code>Name &lt;email@domain.tld&gt; timestamp +timezone</code>,
for example <code>Ada Lovelace &lt;ada@analyti.cal&gt; 1617120803 +0100</code></p> for example <code>Ada Lovelace &lt;ada@analyti.cal&gt; 1617120803 +0100</code></p>
<textarea> <textarea>
@ -2163,7 +2164,7 @@ function parse_author(value, field) {
</section> </section>
<section id="checkout-example"> <section id="checkout-example">
<h1>Example checkout</h1> <h3>Example checkout</h3>
<p> <p>
Now that we can parse blobs objects, trees, and commits, it is now possible to checkout a given commit. Now that we can parse blobs objects, trees, and commits, it is now possible to checkout a given commit.
The following operation will revert the working tree to the state that was copied in the initial commit. The following operation will revert the working tree to the state that was copied in the initial commit.
@ -2175,7 +2176,7 @@ git_checkout(initial_commit);
</section> </section>
<section id="git-init"> <section id="git-init">
<h1><code>git init</code></h1> <h2><code>git init</code></h2>
<p>The <code>git init</code> command creates the <code>.git</code> directory and points <code>.git/HEAD</code> <p>The <code>git init</code> command creates the <code>.git</code> directory and points <code>.git/HEAD</code>
to the default branch (a file which does not exist yet, as this branch does not contain any commit at this point).</p> to the default branch (a file which does not exist yet, as this branch does not contain any commit at this point).</p>
<textarea id="in21"> <textarea id="in21">
@ -2187,7 +2188,7 @@ function git_init() {
</section> </section>
<section id="index"> <section id="index">
<h1>The index</h1> <h2>The index</h2>
<p>When adding files with <code>git add</code>, GIT does not immediately create a commit object. <p>When adding files with <code>git add</code>, GIT does not immediately create a commit object.
Instead, it adds the files to the index, which uses a binary format with lots of metadata. Instead, it adds the files to the index, which uses a binary format with lots of metadata.
The mock filesystem used here lacks most of these pieces of information, so the value <code>0</code> The mock filesystem used here lacks most of these pieces of information, so the value <code>0</code>
@ -2246,7 +2247,7 @@ store_index(['README', 'src/main.scm']);
</section> </section>
<section id="playground"> <section id="playground">
<h1>Playground</h1> <h2>Playground</h2>
<p>The implementation is now sufficiently complete to create a small repository.</p> <p>The implementation is now sufficiently complete to create a small repository.</p>
<textarea id="playground-reset"> <textarea id="playground-reset">
// Reset the filesystem to its initial state // Reset the filesystem to its initial state
@ -2286,14 +2287,12 @@ commands.</p>
</section> </section>
<section id="conclusion"> <section id="conclusion">
<h1>Conclusion</h1> <h2>Conclusion</h2>
<p>This article shows that a large part of the core of GIT can be re-implemented in <span class="loc-count">a few</span> source lines of code <p>This article shows that a large part of the core of GIT can be re-implemented in <span class="loc-count">a few</span> source lines of code
<span style="font-size: small">(*&nbsp;empty lines and single closing braces excluded, <span class="loc-count-total">a few more</span> in total)</span>.</p> <span style="font-size: small">(*&nbsp;empty lines and single closing braces excluded, <span class="loc-count-total">a few more</span> in total)</span>.</p>
<p>Click here to <a href="javascript:___copy_all_code(); void(0);">copy all the code</a>.</p> <p>Click here to <a href="javascript:___copy_all_code(); void(0);">copy all the code</a>.</p>
<div id="copy-all-code" style="display: none;"></div> <div id="copy-all-code" style="display: none;"></div>
<ul> <ul>
</ul>
<li>Some of the features which may appear mysterious at first sight (e.g. detached HEAD) should be clearer with the knowledge of how GIT works behind the scenes.</li> <li>Some of the features which may appear mysterious at first sight (e.g. detached HEAD) should be clearer with the knowledge of how GIT works behind the scenes.</li>
<li>Furthermore, branches are often associated with an intuition (containers into which commits are added) which does not match the implementation (mutable pointers to commits).</li> <li>Furthermore, branches are often associated with an intuition (containers into which commits are added) which does not match the implementation (mutable pointers to commits).</li>
<li>Finally, it is tempting to think of commits as patches. While <code>darcs</code> tries to expose an interface which matches this intuition, it is clear that the implementation of GIT considers commits as copies of the entire repository, and are linked to the previous version solely by the <code>parent</code> metadata in the commit headers.</li> <li>Finally, it is tempting to think of commits as patches. While <code>darcs</code> tries to expose an interface which matches this intuition, it is clear that the implementation of GIT considers commits as copies of the entire repository, and are linked to the previous version solely by the <code>parent</code> metadata in the commit headers.</li>
@ -2305,14 +2304,14 @@ commands.</p>
</section> </section>
<section id="suggested-exercises"> <section id="suggested-exercises">
<h1>Suggested exercises</h1> <h2>Suggested exercises</h2>
<p> <p>
The reader willing to improve their grasp of GIT's mental model, and reduce their reliance on a few learned recipies, might The reader willing to improve their grasp of GIT's mental model, and reduce their reliance on a few learned recipies, might
be interested in the following warm-up exercises: be interested in the following warm-up exercises:
</p> </p>
<section class="exercise" id="exercise-cat-file"> <section class="exercise" id="exercise-cat-file">
<h1>Inspection using <code>git cat-file</code></h1> <h3>Inspection using <code>git cat-file</code></h3>
<p class="exercise-task"> <p class="exercise-task">
Inspect an existing repository, starting with <code>cat .git/HEAD</code> and using <code>git cat-file -p some-hash</code> Inspect an existing repository, starting with <code>cat .git/HEAD</code> and using <code>git cat-file -p some-hash</code>
to pretty-print an object given its hash. to pretty-print an object given its hash.
@ -2327,7 +2326,7 @@ commands.</p>
</p> </p>
</section> </section>
<section class="exercise" id="exercise-files-in-dot-git"> <section class="exercise" id="exercise-files-in-dot-git">
<h1>Inspection of the files in <code>.git/</code></h1> <h3>Inspection of the files in <code>.git/</code></h3>
<p class="exercise-task"> <p class="exercise-task">
Inspect a small existing repository, starting with <code>cat .git/HEAD</code> and using the <code>zlib</code> decompression Inspect a small existing repository, starting with <code>cat .git/HEAD</code> and using the <code>zlib</code> decompression
tool from the <a href=#zlib-compression-note><code>zlib</code> compression</a> section. Larger repositories will make use tool from the <a href=#zlib-compression-note><code>zlib</code> compression</a> section. Larger repositories will make use
@ -2343,7 +2342,7 @@ commands.</p>
</p> </p>
</section> </section>
<section class="exercise" id="exercise-repo-from-statch"> <section class="exercise" id="exercise-repo-from-statch">
<h1>Creating a repository from scratch</h1> <h3>Creating a repository from scratch</h3>
<p class="exercise-task"> <p class="exercise-task">
Run <code>git init new-directory</code> in a terminal, and create an initial single-file commit from scratch, using only Run <code>git init new-directory</code> in a terminal, and create an initial single-file commit from scratch, using only
<code>git hash-object</code>, <code>printf</code> and overwriting <code>.git/HEAD</code> and/or <code>git hash-object</code>, <code>printf</code> and overwriting <code>.git/HEAD</code> and/or
@ -2363,7 +2362,7 @@ commands.</p>
</p> </p>
</section> </section>
<section class="exercise" id="exercise-only-basic-commands"> <section class="exercise" id="exercise-only-basic-commands">
<h1>Using only basic GIT commands</h1> <h3>Using only basic GIT commands</h3>
<p class="exercise-task"> <p class="exercise-task">
For a couple of weeks, only use the GIT commands <code>commit</code>, <code>diff</code>, <code>checkout</code>, For a couple of weeks, only use the GIT commands <code>commit</code>, <code>diff</code>, <code>checkout</code>,
<code>merge</code>, <code>cherry-pick</code>, <code>log</code>, <code>clone</code>, <code>fetch</code> and <code>merge</code>, <code>cherry-pick</code>, <code>log</code>, <code>clone</code>, <code>fetch</code> and
@ -2383,7 +2382,7 @@ commands.</p>
</p> </p>
</section> </section>
<section class="exercise" id="exercise-commits-are-copies"> <section class="exercise" id="exercise-commits-are-copies">
<h1>Understanding commits as copies of the root directory</h1> <h3>Understanding commits as copies of the root directory</h3>
<p class="exercise-task"> <p class="exercise-task">
Try not even using <code>git cherry-pick</code> or <code>git diff</code> a few times, instead make two copies the git Try not even using <code>git cherry-pick</code> or <code>git diff</code> a few times, instead make two copies the git
directoy, check out the two different commits in each copy, and use the traditional *NIX commands <code>diff</code> and directoy, check out the two different commits in each copy, and use the traditional *NIX commands <code>diff</code> and
@ -2398,7 +2397,7 @@ commands.</p>
</p> </p>
</section> </section>
<section class="exercise" id="exercise-branches-as-pointers"> <section class="exercise" id="exercise-branches-as-pointers">
<h1>Branches as pointers: living without branches</h1> <h3>Branches as pointers: living without branches</h3>
<p class="exercise-task"> <p class="exercise-task">
For a couple of weeks, don't use any local branch, and stay in detached HEAD state all the time. When checking out a For a couple of weeks, don't use any local branch, and stay in detached HEAD state all the time. When checking out a
colleague's work, use <code>git fetch && git checkout origin/remote-branch</code>, and use the reflog and a text file colleague's work, use <code>git fetch && git checkout origin/remote-branch</code>, and use the reflog and a text file