HTML validator, CSS validator and JSlint/JShint
This commit is contained in:
Suzanne Soy
parent
4cacd36122
commit
1ae4dd9e31
|
|
@ -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 .graph-view { font-size: 100%; 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.cell-contents, #git-tutorial th.cell-contents { width: 36em; }
|
||||
|
|
@ -84,11 +84,13 @@ article#git-tutorial .onlytoc { display: none; }
|
|||
/* #toc .onlytoc { } */
|
||||
#git-tutorial #toc .tocsmall { font-size: smaller; }
|
||||
#git-tutorial #toc .notoc { display: none; }
|
||||
#git-tutorial h1 { display: inline-block; }
|
||||
#git-tutorial h1 + p { clear: both; }
|
||||
#git-tutorial .permalink { opacity: 0.5; clear: both; padding: 1.2em 1.2em 0 0.5em;
|
||||
#git-tutorial h1, #git-tutorial h2, #git-tutorial h3 { display: inline-block; }
|
||||
#git-tutorial h1 + p, #git-tutorial h2 + p, #git-tutorial h3 + p { clear: both; }
|
||||
#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; }
|
||||
#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 a { color: #666; }
|
||||
#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; }
|
||||
|
||||
/* Section counters */
|
||||
#git-tutorial { counter-reset: h1counter h2counter h3counter; }
|
||||
#git-tutorial > section { counter-reset: h2counter h3counter;}
|
||||
#git-tutorial > section > h1 { counter-increment: h1counter; }
|
||||
#git-tutorial > section > h1::before { content: counter(h1counter) ". " }
|
||||
#git-tutorial > section > section { counter-reset: h3counter; }
|
||||
#git-tutorial > section > section > h1 { counter-increment: h2counter; }
|
||||
#git-tutorial > section > section > h1::before { content: counter(h1counter) "." counter(h2counter) ". " }
|
||||
#git-tutorial > section > section.exercise > h1::before { content: "Exercise " counter(h1counter) "." counter(h2counter) ". " }
|
||||
#git-tutorial { counter-reset: h1counter h2counter h3counter h4counter; }
|
||||
#git-tutorial > section { counter-reset: h3counter;}
|
||||
#git-tutorial > section > h2 { counter-increment: h2counter; }
|
||||
#git-tutorial > section > h2::before { content: counter(h2counter) ". " }
|
||||
#git-tutorial > section > section { counter-reset: h4counter; }
|
||||
#git-tutorial > section > section > h3 { counter-increment: h3counter; }
|
||||
#git-tutorial > section > section > h3::before { content: counter(h2counter) "." counter(h3counter) ". " }
|
||||
#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-reason { border: thin solid #80c5c5; background: #f8fdff; padding: 1em }
|
||||
|
|
|
|||
490
git-tutorial.js
490
git-tutorial.js
|
|
@ -1,5 +1,18 @@
|
|||
function ___stringToUint8Array(s) {
|
||||
var s = ""+s;
|
||||
/* jslint browser: true */
|
||||
/* 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 = [];
|
||||
for (var i = 0; i < s.length; i++) {
|
||||
a.push(s.charCodeAt(i));
|
||||
|
|
@ -14,18 +27,18 @@ function ___uint8ArrayToString(a) {
|
|||
return s.join('');
|
||||
}
|
||||
// Convert bytes to hex
|
||||
function ___to_hex(s) {
|
||||
var s = String(s);
|
||||
var hex = ""
|
||||
function ___to_hex(str) {
|
||||
var s = String(str);
|
||||
var hex = "";
|
||||
for (var i = 0; i < s.length; i++) {
|
||||
hex += ___left_pad(s.charCodeAt(i).toString(16), '0', 2);
|
||||
}
|
||||
return hex;
|
||||
}
|
||||
|
||||
function ___hex_to_bin(hex) {
|
||||
var hex = String(hex);
|
||||
var str = ""
|
||||
function ___hex_to_bin(hexstr) {
|
||||
var hex = String(hexstr);
|
||||
var str = "";
|
||||
for (var i = 0; i < hex.length; i+=2) {
|
||||
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.
|
||||
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))); }
|
||||
inflate = function(s) { return ___uint8ArrayToString(pako.inflate(___stringToUint8Array(s))); }
|
||||
var sha1_from_bytes_returns_hex = function(s) { return Sha1.hash(___to_hex(s), { msgFormat: 'hex-bytes', outFormat: 'hex' }); };
|
||||
var deflate = function(s) { return ___uint8ArrayToString(pako.deflate(___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) {
|
||||
return String(str)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
function ___left_pad(s, char, len) {
|
||||
var s = ""+s;
|
||||
while (s.length < len) { s = char + s; }
|
||||
function ___left_pad(str, chr, len) {
|
||||
var s = String(str);
|
||||
while (s.length < len) { s = chr + s; }
|
||||
return s;
|
||||
}
|
||||
function ___to_hex_for_printf(s) {
|
||||
var s = String(s);
|
||||
var hex = ""
|
||||
function ___to_hex_for_printf(str) {
|
||||
var s = String(str);
|
||||
var hex = "";
|
||||
for (var i = 0; i < s.length; i++) {
|
||||
var h = ___left_pad(s.charCodeAt(i).toString(16), '0', 2);
|
||||
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) {
|
||||
return s.replace(/[^-a-zA-Z0-9+_/!%$@.()':]/g, function (c) {
|
||||
switch (c) {
|
||||
case " ": return '<span class="space"> </span>'; break;
|
||||
case "\\": return '<span class="specialchar">\\\\</span>'; break;
|
||||
case "\0": return '<span class="specialchar newline">\\000</span>'; break;
|
||||
case "\r": return '<span class="specialchar">\\r</span>'; break;
|
||||
case "\n": return '<span class="specialchar newline">\\n</span>'; break;
|
||||
case "\t": return '<span class="specialchar">\\t</span>'; break;
|
||||
case '&': return '&'; break;
|
||||
case '<': return '<'; break;
|
||||
case '>': return '>'; break;
|
||||
case '"': return '"'; break;
|
||||
case "'": return '''; break;
|
||||
default: return '<span class="specialchar">\\x'+___left_pad(c.charCodeAt(0).toString(16), 0, 2)+'</span>'; break;
|
||||
case " ": return '<span class="space"> </span>';
|
||||
case "\\": return '<span class="specialchar">\\\\</span>';
|
||||
case "\0": return '<span class="specialchar newline">\\000</span>';
|
||||
case "\r": return '<span class="specialchar">\\r</span>';
|
||||
case "\n": return '<span class="specialchar newline">\\n</span>';
|
||||
case "\t": return '<span class="specialchar">\\t</span>';
|
||||
case '&': return '&';
|
||||
case '<': return '<';
|
||||
case '>': return '>';
|
||||
case '"': return '"';
|
||||
case "'": return ''';
|
||||
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;
|
||||
|
||||
if (dests.length > 0) {
|
||||
dest = dests[dests.length - 1];
|
||||
var dest = dests[dests.length - 1];
|
||||
while (dest && dest.tagName.toLowerCase() != 'tr') { dest = dest.parentElement; }
|
||||
if (dest) {
|
||||
dest.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
|
|
@ -243,6 +256,8 @@ function ___hilite(srcid, destclass) {
|
|||
}
|
||||
function ___lolite(src, dest) {
|
||||
// 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() {
|
||||
var oldresize = window.onresize;
|
||||
|
|
@ -253,59 +268,64 @@ function ___lolite(src, dest) {
|
|||
___hilite(srcid, destclass);
|
||||
}
|
||||
if (oldresize) { oldresize(); }
|
||||
}
|
||||
};
|
||||
})();
|
||||
function ___hex_hash(s) {
|
||||
var id = ___global_unique_id++;
|
||||
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+'\')">'
|
||||
+ ___to_hex_for_printf(s.substr(0,10))
|
||||
+ ___to_hex_for_printf(s.substr(10,10))
|
||||
+ '</span>'
|
||||
+ ___specialchars_and_colour(s.substr(20) /* should be empty unless there's a bug */);
|
||||
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(10,10)) +
|
||||
/*+*/ '</span>' +
|
||||
/*+*/ ___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 = [];
|
||||
if (s.substr(0,5) == "tree ") {
|
||||
var sp = s.split('\0');
|
||||
sp[0] = ___specialchars_and_colour(sp[0]);
|
||||
sp[1] = ___specialchars_and_colour(sp[1]);
|
||||
for (i = 2; i < sp.length; i++) {
|
||||
for (var i = 2; i < sp.length; i++) {
|
||||
target_hashes.push(___to_hex(sp[i].substr(0,20)));
|
||||
sp[i] = ___hex_hash(sp[i].substr(0,20))
|
||||
+ ___specialchars_and_colour(sp[i].substr(20));
|
||||
sp[i] = ___hex_hash(sp[i].substr(0,20)) +
|
||||
/*+*/ ___specialchars_and_colour(sp[i].substr(20));
|
||||
}
|
||||
var html = sp.join('<span class="specialchar newline">\\000</span>');
|
||||
return { type: 'tree', target_hashes: target_hashes, html: html };
|
||||
} else if (/^[0-9a-f]{40}\n$/.test(s)) {
|
||||
}
|
||||
function ___special_hash(s) {
|
||||
var target_hashes = [];
|
||||
var id = ___global_unique_id++;
|
||||
var h = s.substr(0,40);
|
||||
target_hashes.push(h);
|
||||
var hash = "object-hash-"+h;
|
||||
var html = '<span id="'+id+'" class="plain-hash-or-ref" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">'
|
||||
+ s.substr(0,40)
|
||||
+ '</span>'
|
||||
+ ___specialchars_and_colour(s.substr(40));
|
||||
var html = '<span id="'+id+'" class="plain-hash-or-ref" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">' +
|
||||
/*+*/ s.substr(0,40) +
|
||||
/*+*/ '</span>' +
|
||||
/*+*/ ___specialchars_and_colour(s.substr(40));
|
||||
return { type: 'hash', target_hashes: target_hashes, html: html };
|
||||
} else if (/^ref: refs\/[^\n]*\n$/.test(s)) {
|
||||
}
|
||||
function ___special_ref(s) {
|
||||
var target_hashes = [];
|
||||
var id = ___global_unique_id++;
|
||||
var h = s.substr(5, s.length-6)
|
||||
var h = s.substr(5, s.length-6);
|
||||
target_hashes.push(h);
|
||||
var hash = "object-hash-"+h;
|
||||
var html = s.substr(0,5)
|
||||
+ '<span id="'+id+'" class="plain-hash-or-ref" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">'
|
||||
+ ___specialchars_and_colour(s.substr(5, s.length-6))
|
||||
+ '</span>'
|
||||
+ ___specialchars_and_colour(s.substr(s.length-1));
|
||||
var html = s.substr(0,5) +
|
||||
/*+*/ '<span id="'+id+'" class="plain-hash-or-ref" onmouseover="___hilite('+id+',\''+hash+'\')" onmouseout="___lolite('+id+',\''+hash+'\')">' +
|
||||
/*+*/ ___specialchars_and_colour(s.substr(5, s.length-6)) +
|
||||
/*+*/ '</span>' +
|
||||
/*+*/ ___specialchars_and_colour(s.substr(s.length-1));
|
||||
return { type: 'symbolic ref', target_hashes: target_hashes, html: html };
|
||||
} else if(s.substr(0,4) == "DIRC") {
|
||||
}
|
||||
function ___special_index(s) {
|
||||
var target_hashes = [];
|
||||
var html = 'DIRC'; // magic
|
||||
var i = 4;
|
||||
var binary_span = function(bits) {
|
||||
var bytes = bits / 8;
|
||||
html += '<span class="newline">' + ___to_hex_for_printf(s.substr(i, bytes)) + '</span>';
|
||||
i += bytes;
|
||||
}
|
||||
};
|
||||
binary_span(32); // version
|
||||
binary_span(32); // entries
|
||||
|
||||
|
|
@ -325,7 +345,7 @@ function ___specialchars_and_colour_and_hex(s) {
|
|||
i += 20;
|
||||
var length = s.substr(i, 2);
|
||||
length = length.charCodeAt(0) * 256 + length.charCodeAt(1);
|
||||
length &= 0xfff;
|
||||
length = /* jslint bitwise: true */ length & 0xfff /* jslint bitwise: false */;
|
||||
binary_span(16); // 4 bits flags, 12 bits file length
|
||||
// file path until null
|
||||
html += ___specialchars_and_colour(s.substr(i, length));
|
||||
|
|
@ -344,15 +364,17 @@ function ___specialchars_and_colour_and_hex(s) {
|
|||
entry_start = i;
|
||||
}
|
||||
|
||||
var h = s.substr(i, 20);
|
||||
target_hashes.push(___to_hex(h));
|
||||
html += ___hex_hash(h); // hash
|
||||
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 };
|
||||
} else if(s.substr(0,7) == "commit ") {
|
||||
}
|
||||
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]);
|
||||
|
|
@ -364,10 +386,10 @@ function ___specialchars_and_colour_and_hex(s) {
|
|||
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>';
|
||||
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]);
|
||||
}
|
||||
|
|
@ -378,31 +400,44 @@ function ___specialchars_and_colour_and_hex(s) {
|
|||
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 ") {
|
||||
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") {
|
||||
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 {
|
||||
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) {
|
||||
var inflated = null;
|
||||
try {
|
||||
var inflated = pako.inflate(___stringToUint8Array(s));
|
||||
inflated = pako.inflate(___stringToUint8Array(s));
|
||||
} catch(e) {
|
||||
var inflated = false;
|
||||
inflated = false;
|
||||
}
|
||||
if (inflated) {
|
||||
var id=___global_unique_id++;
|
||||
return {
|
||||
html:
|
||||
'<span id="deflated'+id+'-pretty">'
|
||||
+ '<span class="deflated">deflated:</span>'
|
||||
+ ___specialchars_and_colour_and_hex(___uint8ArrayToString(inflated)).html
|
||||
+ '</span>'
|
||||
+ '<span id="deflated'+id+'-raw" style="display:none">'
|
||||
+ ___specialchars_and_colour_and_hex(s).html
|
||||
+ '</span>',
|
||||
html: '<span id="deflated'+id+'-pretty">' +
|
||||
/*+*/ '<span class="deflated">deflated:</span>' +
|
||||
/*+*/ ___specialchars_and_colour_and_hex(___uint8ArrayToString(inflated)).html +
|
||||
/*+*/ '</span>' +
|
||||
/*+*/ '<span id="deflated'+id+'-raw" style="display:none">' +
|
||||
/*+*/ ___specialchars_and_colour_and_hex(s).html +
|
||||
/*+*/ '</span>',
|
||||
td: function(td) { td.classList.add('deflate-toggle'); td.setAttribute('onclick', '___deflated_click('+id+')'); }
|
||||
};
|
||||
} else {
|
||||
|
|
@ -424,7 +459,7 @@ function ___filesystem_to_printf(fs) {
|
|||
}
|
||||
})
|
||||
// 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(' ');
|
||||
}
|
||||
function ___deflated_click(id) {
|
||||
|
|
@ -462,16 +497,16 @@ function ___get_ref_path(x) {
|
|||
function ___format_filepath(x) {
|
||||
var sp = x.split('/');
|
||||
if (___is_hashed_object_path(x)) {
|
||||
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)+'">'
|
||||
+ sp.slice(sp.length-2).map(___specialchars_and_colour).join('/')
|
||||
+ "</span>";
|
||||
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)+'">' +
|
||||
/*+*/ sp.slice(sp.length-2).map(___specialchars_and_colour).join('/') +
|
||||
/*+*/ "</span>";
|
||||
} else if (___is_ref_path(x)) {
|
||||
var refs_idx = sp.indexOf('refs');
|
||||
return sp.slice(0, refs_idx).map(___specialchars_and_colour).join('/')+'/'
|
||||
+ '<span class="object-hash object-hash-'+___get_ref_path(x)+'">'//TODO
|
||||
+ sp.slice(refs_idx).map(___specialchars_and_colour).join('/')
|
||||
+ "</span>";
|
||||
return sp.slice(0, refs_idx).map(___specialchars_and_colour).join('/')+'/' +
|
||||
/*+*/ '<span class="object-hash object-hash-'+___get_ref_path(x)+'">'/*TODO*/ +
|
||||
/*+*/ sp.slice(refs_idx).map(___specialchars_and_colour).join('/') +
|
||||
/*+*/ "</span>";
|
||||
} else {
|
||||
return ___specialchars_and_colour(x);
|
||||
}
|
||||
|
|
@ -486,9 +521,9 @@ function ___format_contents(contents) {
|
|||
|
||||
}
|
||||
function ___format_entry(previous_filesystem, x) {
|
||||
var previous_filesystem = previous_filesystem || {};
|
||||
var previous_fs = previous_filesystem || {};
|
||||
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');
|
||||
}
|
||||
|
||||
|
|
@ -511,7 +546,7 @@ function ___format_entry(previous_filesystem, x) {
|
|||
}
|
||||
function ___sort_filesystem_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) {
|
||||
var table = document.createElement('table');
|
||||
|
|
@ -545,28 +580,53 @@ function ___filesystem_to_table(fs, previous_filesystem) {
|
|||
tr_empty.append(td_empty);
|
||||
td_empty.setAttribute('colspan', '2');
|
||||
td_empty.classList.add('empty-filesystem');
|
||||
td_empty.innerText = "The filesystem is empty."
|
||||
td_empty.innerText = "The filesystem is empty.";
|
||||
}
|
||||
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) {
|
||||
var entries = ___sort_filesystem_entries(fs);
|
||||
var id = ___global_unique_id++;
|
||||
var html = '';
|
||||
if (! just_table) {
|
||||
html += 'Filesystem contents: ' + entries.length + " files and directories. "
|
||||
+ '<a href="javascript: ___copyzip_click(\'json-'+id+'\');">Download as .zip</a>'
|
||||
+ ' or '
|
||||
+ '<a href="javascript: ___copyprintf_click(\'elem-'+id+'\');">'
|
||||
+ "Copy commands to recreate in *nix terminal"
|
||||
+ "</a>."
|
||||
+ "<br />"
|
||||
+ '<textarea id="elem-'+id+'" disabled="disabled" style="display:none">'
|
||||
+ ___specialchars(___filesystem_to_printf(fs) || 'echo "Empty filesystem."')
|
||||
+ '</textarea>'
|
||||
+ '<textarea id="json-'+id+'" disabled="disabled" style="display:none">'
|
||||
+ ___to_hex(JSON.stringify(fs))
|
||||
+ '</textarea>';
|
||||
html += 'Filesystem contents: ' + entries.length + " files and directories. " +
|
||||
/*+*/ '<a href="javascript: ___copyzip_click(\'serialized-'+id+'\');">Download as .zip</a>' +
|
||||
/*+*/ ' or ' +
|
||||
/*+*/ '<a href="javascript: ___copyprintf_click(\'elem-'+id+'\');">' +
|
||||
/*+*/ "Copy commands to recreate in *nix terminal" +
|
||||
/*+*/ "</a>." +
|
||||
/*+*/ "<br />" +
|
||||
/*+*/ '<textarea id="elem-'+id+'" disabled="disabled" style="display:none">' +
|
||||
/*+*/ ___specialchars(___filesystem_to_printf(fs) || 'echo "Empty filesystem."') +
|
||||
/*+*/ '</textarea>' +
|
||||
/*+*/ '<textarea id="serialized-'+id+'" disabled="disabled" style="display:none">' +
|
||||
/*+*/ ___filesystem_serialize(fs) +
|
||||
/*+*/ '</textarea>';
|
||||
}
|
||||
html += ___filesystem_to_table(fs, previous_filesystem).outerHTML; // TODO: use DOM primitives instead.
|
||||
return html;
|
||||
|
|
@ -579,7 +639,7 @@ function ___textarea_value(elem) {
|
|||
}
|
||||
}
|
||||
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 hierarchy = { subfolders: {}, files: [] };
|
||||
|
|
@ -615,10 +675,9 @@ function ___copyzip_click(id) {
|
|||
|
||||
var join_paths = function(a, b) {
|
||||
return (a == "") ? b : (a + "/" + b);
|
||||
}
|
||||
};
|
||||
|
||||
var add_to_zip = function(zip, base_directory, hierarchy) {
|
||||
var subtrees = [];
|
||||
for (var i in hierarchy.subfolders) {
|
||||
if (hierarchy.subfolders.hasOwnProperty(i)) {
|
||||
var zipfolder = zip.folder(i);
|
||||
|
|
@ -629,7 +688,7 @@ function ___copyzip_click(id) {
|
|||
var filename = hierarchy.files[f];
|
||||
zip.file(filename, ___stringToUint8Array(fs[join_paths(base_directory, filename)]), {binary: true});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var zip = new JSZip();
|
||||
add_to_zip(zip, '', hierarchy);
|
||||
|
|
@ -655,38 +714,39 @@ function ___copyprintf_click(id) {
|
|||
elem.disabled = true;
|
||||
}
|
||||
}
|
||||
var ___script_log_header = ''
|
||||
+ 'var ___log = [];\n'
|
||||
+ 'var alert = (function (real_console, real_alert) {\n'
|
||||
+ ' return function(message) {\n'
|
||||
+ ' ___log[___log.length] = { alert: true, txt: message };\n'
|
||||
+ ' real_console.log("alert:", message);\n'
|
||||
+ ' };\n'
|
||||
+ '})(window.console, window.alert);\n'
|
||||
+ 'var console = (function(real_console) {\n'
|
||||
+ ' return {\n'
|
||||
+ ' log: function() {\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'
|
||||
+ ' },\n'
|
||||
+ ' assert: real_console.assert,\n'
|
||||
+ ' };\n'
|
||||
+ '})(window.console);\n'
|
||||
+ '\n';
|
||||
var ___script_log_header = '' +
|
||||
/*+*/ 'var ___log = [];\n' +
|
||||
/*+*/ 'var alert = (function (real_console, real_alert) {\n' +
|
||||
/*+*/ ' return function(message) {\n' +
|
||||
/*+*/ ' ___log[___log.length] = { alert: true, txt: message };\n' +
|
||||
/*+*/ ' if (real_console && real_console.log) { real_console.log("alert:", message); }\n' +
|
||||
/*+*/ ' };\n' +
|
||||
/*+*/ '})(window.console, window.alert);\n' +
|
||||
/*+*/ 'var console = (function(real_console) {\n' +
|
||||
/*+*/ ' return {\n' +
|
||||
/*+*/ ' log: function() {\n' +
|
||||
/*+*/ ' ___log[___log.length] = { alert: false, txt: Array.from(arguments).map(function (x) { return x.toString(); }).join(", ") };\n' +
|
||||
/*+*/ ' if (real_console && real_console.log) { real_console.log.apply(real_console, arguments); }\n' +
|
||||
/*+*/ ' },\n' +
|
||||
/*+*/ ' assert: real_console.assert,\n' +
|
||||
/*+*/ ' };\n' +
|
||||
/*+*/ '})(window.console);\n' +
|
||||
/*+*/ '\n';
|
||||
|
||||
function ___file_contents_to_graphview(filesystem, path_of_this_file, s) {
|
||||
var gv = '';
|
||||
var s2 = null;
|
||||
try {
|
||||
var inflated = pako.inflate(___stringToUint8Array(s));
|
||||
if (inflated) {
|
||||
var s2 = ___uint8ArrayToString(inflated);
|
||||
s2 = ___uint8ArrayToString(inflated);
|
||||
} else {
|
||||
var s2 = s;
|
||||
s2 = s;
|
||||
}
|
||||
} 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 type = special.type;
|
||||
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
|
||||
|
||||
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') + '"';
|
||||
}
|
||||
|
||||
|
|
@ -722,11 +782,10 @@ function ___entry_to_graphview(previous_filesystem, filesystem, x) {
|
|||
|
||||
var components = x[0].split('/');
|
||||
|
||||
var shortname = components[components.length - 1];
|
||||
if (___is_hashed_object_path(x[0])) {
|
||||
// var hash = components.slice(components.length-2).join('');
|
||||
var shortname = components[components.length - 1].substr(0, 3) + '…';
|
||||
} else {
|
||||
var shortname = components[components.length - 1];
|
||||
shortname = shortname.substr(0, 3) + '…';
|
||||
}
|
||||
|
||||
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 + '" ]';
|
||||
|
||||
if (x[1] === null) {
|
||||
if (shortname.length <= 2) {
|
||||
shortname = shortname + '\ndir';
|
||||
} else {
|
||||
shortname = shortname + '\ndirectory';
|
||||
}
|
||||
if (previous_filesystem.hasOwnProperty(x[0])) {
|
||||
// dim nodes that existed in the previous_filesystem
|
||||
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';
|
||||
}
|
||||
|
||||
var ___legend = ''
|
||||
+ '<div class="legend">'
|
||||
+ '<div class="legend-title">Legend:</div>'
|
||||
+ Viz(
|
||||
var ___legend = '' +
|
||||
/*+*/ '<div class="legend">' +
|
||||
/*+*/ '<div class="legend-title">Legend:</div>' +
|
||||
/*+*/ Viz(
|
||||
'digraph legend {\n' +
|
||||
' bgcolor=transparent;\n' +
|
||||
' ranksep=0;\n' +
|
||||
|
|
@ -837,9 +900,9 @@ var ___legend = ''
|
|||
' "parent" -> "child" ['+___directory_edge_style+'];\n' +
|
||||
' "ref" -> "abcdef" ['+___ref_edge_style+'];\n' +
|
||||
' "existing" -> "new" [style=invis];\n' +
|
||||
'}')
|
||||
+ '</div>'
|
||||
+ '</div>';
|
||||
'}') +
|
||||
/*+*/ '</div>' +
|
||||
/*+*/ '</div>';
|
||||
|
||||
function ___filesystem_to_graphview(filesystem, previous_filesystem) {
|
||||
var html = '';
|
||||
|
|
@ -884,22 +947,22 @@ function ___filesystem_to_graphview(filesystem, previous_filesystem) {
|
|||
}
|
||||
|
||||
function ___log_to_html(log) {
|
||||
return '<pre class="log">'
|
||||
+ log.map(function(l) {
|
||||
return '<div class="' + (l.alert ? 'log-alert' : 'log-log') + '">'
|
||||
+ ___specialchars(l.txt)
|
||||
+ '</div>';
|
||||
}).join('\n')
|
||||
+ '</pre>'
|
||||
return '<pre class="log">' +
|
||||
/*+*/ log.map(function(l) {
|
||||
return '<div class="' + (l.alert ? 'log-alert' : 'log-log') + '">' +
|
||||
/*+*/ ___specialchars(l.txt) +
|
||||
/*+*/ '</div>';
|
||||
}).join('\n') +
|
||||
/*+*/ '</pre>';
|
||||
}
|
||||
|
||||
function ___eval_result_to_html(id, filesystem, previous_filesystem, log, quiet, omit_graph) {
|
||||
var loghtml = ___log_to_html(log);
|
||||
var table = ___filesystem_to_string(filesystem, quiet, previous_filesystem);
|
||||
var gv = ___filesystem_to_graphview(filesystem, previous_filesystem);
|
||||
var html = (log.length > 0 ? '<p>Console output:</p>' + loghtml : '')
|
||||
+ (omit_graph ? '' : gv.html)
|
||||
+ table;
|
||||
var html = (log.length > 0 ? '<p>Console output:</p>' + loghtml : '') +
|
||||
/*+*/ (omit_graph ? '' : gv.html) +
|
||||
/*+*/ table;
|
||||
document.getElementById(id).innerHTML = '<div class="hilite-wrapper">' + html + '</div>';
|
||||
if (!omit_graph) { gv.js(); }
|
||||
}
|
||||
|
|
@ -907,59 +970,60 @@ function ___git_eval(current) {
|
|||
document.getElementById('hide-eval-' + current).style.display = '';
|
||||
var script = ___script_log_header;
|
||||
script += 'try {';
|
||||
for (i = 0; i <= current - 1; i++) {
|
||||
for (var i = 0; i <= current - 1; i++) {
|
||||
script += ___textarea_value(___global_editors[i]);
|
||||
}
|
||||
script += '\n'
|
||||
+ 'var ___previous_filesystem = {};\n'
|
||||
+ 'for (k in filesystem) { ___previous_filesystem[k] = filesystem[k]; }\n'
|
||||
+ '___log = [];\n';
|
||||
script += '\n' +
|
||||
/*+*/ 'var ___previous_filesystem = {};\n' +
|
||||
/*+*/ 'for (k in filesystem) { ___previous_filesystem[k] = filesystem[k]; }\n' +
|
||||
/*+*/ '___log = [];\n';
|
||||
script += ___textarea_value(___global_editors[current]);
|
||||
script += '\n'
|
||||
+ '} catch (e) {'
|
||||
+ ' if (("" + e.message).indexOf("GIT: assertion failed: ") != 0) {'
|
||||
+ ' throw e;'
|
||||
+ ' } else {'
|
||||
+ ' ___log.push({ alert: true, txt: "command failed" });'
|
||||
+ ' }'
|
||||
+ '}'
|
||||
+ '"End of the script";\n'
|
||||
+ '\n'
|
||||
+ '\n'
|
||||
+ '___eval_result_to_html("out" + current, filesystem, ___previous_filesystem, ___log, false);\n'
|
||||
+ 'filesystem;\n';
|
||||
script += '\n' +
|
||||
/*+*/ '} catch (e) {' +
|
||||
/*+*/ ' if (("" + e.message).indexOf("GIT: assertion failed: ") != 0) {' +
|
||||
/*+*/ ' throw e;' +
|
||||
/*+*/ ' } else {' +
|
||||
/*+*/ ' ___log.push({ alert: true, txt: "command failed" });' +
|
||||
/*+*/ ' }' +
|
||||
/*+*/ '}' +
|
||||
/*+*/ '"End of the script";\n' +
|
||||
/*+*/ '\n' +
|
||||
/*+*/ '\n' +
|
||||
/*+*/ '___eval_result_to_html("out" + current, filesystem, ___previous_filesystem, ___log, false);\n' +
|
||||
/*+*/ 'filesystem;\n';
|
||||
try {
|
||||
eval(script);
|
||||
/* jslint evil: true */ eval(script); /* jslint evil: false */
|
||||
} catch (e) {
|
||||
// Stack traces usually include :line:column
|
||||
var rx = /:([0-9][0-9]*):[0-9][0-9]*/g;
|
||||
var linecol = rx.exec(''+e.stack);
|
||||
var line = null;
|
||||
if (linecol && linecol.length > 0) {
|
||||
line=parseInt(linecol[1]);
|
||||
line=parseInt(linecol[1], 10);
|
||||
} else {
|
||||
// Some older versions of Firefox and probably some other browsers use just :line
|
||||
var rx = /:([0-9][0-9]*)*/g;
|
||||
var justline = rx.exec(''+e.stack);
|
||||
var rx2 = /:([0-9][0-9]*)*/g;
|
||||
var justline = rx2.exec(''+e.stack);
|
||||
if (justline && justline.length > 0) {
|
||||
line=parseInt(justline[1], 10);
|
||||
}
|
||||
}
|
||||
var showline = null;
|
||||
if (typeof(line) == 'number') {
|
||||
var lines = script.split('\n');
|
||||
if (line < lines.length) {
|
||||
var from = Math.max(0, line-2);
|
||||
var to = Math.min(lines.length - 1, line+2+1);
|
||||
var showline = ''
|
||||
+ 'Possible location of the error: near line ' + line + '\n'
|
||||
+ '\n'
|
||||
+ lines.slice(from, to).map(function(l, i) { return '' + (from + i) + ': ' + l; }).join('\n')
|
||||
+ '\n'
|
||||
+ '\n';
|
||||
showline = '' +
|
||||
/*+*/ 'Possible location of the error: near line ' + line + '\n' +
|
||||
/*+*/ '\n' +
|
||||
/*+*/ lines.slice(from, to).map(function(l, i) { return '' + (from + i) + ': ' + l; }).join('\n') +
|
||||
/*+*/ '\n' +
|
||||
/*+*/ '\n';
|
||||
}
|
||||
} else {
|
||||
var showline = 'Sorry, this tutorial could not pinpoint precisely\nthe location of the error.\n'
|
||||
+ 'The stacktrace below may contain more information.\n'
|
||||
showline = 'Sorry, this tutorial could not pinpoint precisely\nthe location of the error.\n' +
|
||||
/*+*/ 'The stacktrace below may contain more information.\n';
|
||||
}
|
||||
var error = ___specialchars("" + e + "\n\n" + e.stack);
|
||||
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++) {
|
||||
var level = ___level(sections[i]);
|
||||
while (level < previousLevel) {
|
||||
var p = stack.pop();
|
||||
stack.pop();
|
||||
previousLevel--;
|
||||
}
|
||||
while (level > previousLevel) {
|
||||
|
|
@ -998,8 +1062,11 @@ function ___sections_to_html(sections) {
|
|||
for (var i = 0; i < sections.length; i++) {
|
||||
var li = document.createElement('li');
|
||||
ol.appendChild(li);
|
||||
var headers = sections[i].s.getElementsByTagName('h1');
|
||||
console.assert(!headers || headers.length >= 1)
|
||||
var headers = sections[i].s.querySelectorAll('h2,h3');
|
||||
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 a = document.createElement('a');
|
||||
li.appendChild(a);
|
||||
|
|
@ -1007,10 +1074,12 @@ function ___sections_to_html(sections) {
|
|||
if (target) { a.setAttribute('href', '#' + target); }
|
||||
if (target) {
|
||||
var a2 = document.createElement('a');
|
||||
___insertAfter(a2, headers[0]);
|
||||
a2.className = "permalink"
|
||||
var hd = headers[0];
|
||||
hd.parentElement.replaceChild(a2, hd);
|
||||
a2.appendChild(hd);
|
||||
a2.className = "permalink";
|
||||
a2.setAttribute('href', '#' + target);
|
||||
a2.innerText = "🔗"
|
||||
//a2.innerHTML += "🔗"
|
||||
}
|
||||
li.appendChild(___functions_to_html(sections[i].s));
|
||||
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
|
||||
// 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.
|
||||
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++) {
|
||||
if (___ancestor(ta[j], 'section') == section) {
|
||||
var lines = ta[j].value.split('\n');
|
||||
|
|
@ -1045,17 +1114,19 @@ function ___functions_to_html(section) {
|
|||
var editor = ret.editor;
|
||||
var editor_id = ret.editor_id;
|
||||
editor.on('keydown', ___clearScrolledToLine);
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
for (var k = 0; k < lines.length; k++) {
|
||||
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]; }
|
||||
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 (text) {
|
||||
var li = document.createElement('li');
|
||||
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');
|
||||
if (fun) {
|
||||
var spanFunction = document.createElement('span');
|
||||
|
|
@ -1130,7 +1201,7 @@ function ___hide_eval(editor_id) {
|
|||
function ___get_all_code() {
|
||||
var all = '';
|
||||
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');
|
||||
}
|
||||
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.appendChild(elem2);
|
||||
var all_code = ___get_all_code();
|
||||
elem2.value = all_code
|
||||
elem2.value = all_code;
|
||||
elem2.focus();
|
||||
elem2.disabled = false;
|
||||
elem2.select();
|
||||
|
|
@ -1157,15 +1228,15 @@ function ___copy_all_code() {
|
|||
|
||||
function ___loc_count() {
|
||||
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');
|
||||
for (var i = 0; i < lc.length; i++) {
|
||||
lc[i].innerText = lcv;
|
||||
}
|
||||
var lctv = srclines.length;
|
||||
var lct = document.getElementsByClassName('loc-count-total');
|
||||
for (var i = 0; i < lct.length; i++) {
|
||||
lct[i].innerText = lctv;
|
||||
for (var j = 0; j < lct.length; j++) {
|
||||
lct[j].innerText = lctv;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1173,3 +1244,26 @@ function ___git_tutorial_onload() {
|
|||
___process_elements();
|
||||
___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;
|
||||
131
index.html
131
index.html
|
|
@ -1,3 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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">
|
||||
|
||||
<h1 itemprop="headline">Git tutorial: reimplementing part of GIT in JavaScript</h1>
|
||||
<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>
|
||||
<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" 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>
|
||||
|
||||
<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>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
|
||||
|
||||
Copyright (c) <''year''> <''copyright holders''>
|
||||
Copyright (c) <''year''> <''copyright holders''>
|
||||
|
||||
This software is provided 'as-is', without any express or implied
|
||||
warranty. In no event will the authors be held liable for any damages
|
||||
|
|
@ -237,7 +238,7 @@ GPL version 3
|
|||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
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.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
</pre>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
|
@ -887,7 +889,7 @@ vulnerabilities (user input is not sanitized when displayed).
|
|||
</section>
|
||||
|
||||
<section id="introduction">
|
||||
<h1>Introduction</h1>
|
||||
<h2>Introduction</h2>
|
||||
<p>
|
||||
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
|
||||
|
|
@ -900,10 +902,10 @@ excluded, <span class="loc-count-total">a few more</span> in total.</span>
|
|||
</section>
|
||||
|
||||
<section id="os-filesystem">
|
||||
<h1>The Operating System's filesystem</h1>
|
||||
<h2>The Operating System's filesystem</h2>
|
||||
|
||||
<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
|
||||
simple key-value store. In this very simple filesystem, directories
|
||||
are entries mapped to <code>null</code> and files are entries mapped
|
||||
|
|
@ -916,7 +918,7 @@ var current_directory = '';
|
|||
</section>
|
||||
|
||||
<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
|
||||
replace an entire file, create a directory, test the existence of a filesystem entry, and change the current directory.</p>
|
||||
<textarea id="in1">
|
||||
|
|
@ -953,7 +955,7 @@ function remove(path, recursive) {
|
|||
</section>
|
||||
|
||||
<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
|
||||
directory.</p>
|
||||
<textarea id="in2">
|
||||
|
|
@ -979,11 +981,11 @@ function listdir(dirname) {
|
|||
</section>
|
||||
|
||||
<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,
|
||||
and start filling in some files.</p>
|
||||
<div class="trivia">
|
||||
<p trivia>
|
||||
<p>
|
||||
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
|
||||
(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 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.
|
||||
For now, only the <code>.git</code> folder is needed, The rest
|
||||
of the function implementing <code>git init</code> will be
|
||||
|
|
@ -1029,7 +1031,7 @@ git_init_mkdir();
|
|||
</section>
|
||||
|
||||
<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
|
||||
<code>blob</code> (individual files), <code>tree</code> (directories),
|
||||
<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>
|
||||
|
||||
<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's
|
||||
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>,
|
||||
|
|
@ -1132,7 +1134,7 @@ hash_object(true, 'blob', false, 'src/main.scm');
|
|||
</section>
|
||||
|
||||
<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
|
||||
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
|
||||
|
|
@ -1150,7 +1152,7 @@ unzlib() {
|
|||
</section>
|
||||
|
||||
<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
|
||||
files, but it would be nice to also store the filenames.
|
||||
This is done by creating a <em>tree</em> object</p>
|
||||
|
|
@ -1214,7 +1216,7 @@ function hex_to_raw_bytes(hex) {
|
|||
</textarea>
|
||||
|
||||
<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>
|
||||
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 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.
|
||||
The following utility function takes a list of paths, and builds
|
||||
a tree from those.</p>
|
||||
|
|
@ -1291,7 +1293,7 @@ paths_to_tree(["README", "src/main.scm"]);
|
|||
</section>
|
||||
|
||||
<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,
|
||||
a commit can be created. A commit contains</p>
|
||||
<ul>
|
||||
|
|
@ -1368,7 +1370,7 @@ function format_timezone(tm) {
|
|||
</textarea>
|
||||
|
||||
<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
|
||||
a copy of the tree along with some metadata about this version.
|
||||
The first commit has no parent, which is represented by passing
|
||||
|
|
@ -1392,7 +1394,7 @@ var initial_commit = store_commit(
|
|||
</section>
|
||||
|
||||
<section id="resolving-references">
|
||||
<h1>resolving references</h1>
|
||||
<h2>resolving references</h2>
|
||||
|
||||
<p>The next few subsections will introduce <em>symbolic references</em>
|
||||
and other references like branch names, the special name <code>HEAD</code>
|
||||
|
|
@ -1468,7 +1470,7 @@ function trim_newline(s) {
|
|||
</textarea>
|
||||
|
||||
<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
|
||||
(and in the official GIT implementation also writes and updates)
|
||||
symbolic references given a path relative to <code>.git/</code>.
|
||||
|
|
@ -1537,7 +1539,7 @@ function git_symbolic_ref(ref) {
|
|||
</section>
|
||||
|
||||
<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,
|
||||
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>
|
||||
|
|
@ -1577,7 +1579,7 @@ function git_rev_parse(ref) {
|
|||
</section>
|
||||
|
||||
<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>.
|
||||
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 id="HEAD">
|
||||
<h1><code>HEAD</code></h1>
|
||||
<h2><code>HEAD</code></h2>
|
||||
<p>
|
||||
The <code>HEAD</code> indicates the "current" commit. It is set at first as part of the <code>git init</code> routine.
|
||||
</p>
|
||||
|
|
@ -1682,8 +1684,8 @@ git_init_head();
|
|||
<p>
|
||||
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:
|
||||
|
||||
<pre>
|
||||
</p>
|
||||
<pre>
|
||||
git checkout 0123456789abcdef0123456789abcdef01234567
|
||||
|
||||
touch new_file
|
||||
|
|
@ -1691,11 +1693,11 @@ git add new_file
|
|||
git commit -m 'This is a commit adding a new file'
|
||||
|
||||
git checkout branch-of-feature-foobar
|
||||
</pre>
|
||||
</pre>
|
||||
|
||||
roughly means:
|
||||
<p>roughly means:</p>
|
||||
|
||||
<pre>
|
||||
<pre>
|
||||
HEAD = 0123456789abcdef0123456789abcdef01234567
|
||||
// overwrite the contents of the working tree with
|
||||
// the contents of commit 0123456789abcdef0123456789abcdef01234567
|
||||
|
|
@ -1706,8 +1708,7 @@ HEAD = commit(…)
|
|||
|
||||
// Checkout other branch
|
||||
HEAD = git_rev_parse('branch-of-feature-foobar')
|
||||
</pre>
|
||||
</p>
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
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">
|
||||
<h1>git config</h1>
|
||||
<p>
|
||||
<h2>git config</h2>
|
||||
<p>
|
||||
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).
|
||||
</p>
|
||||
<textarea id="in16">
|
||||
</p>
|
||||
<textarea id="in16">
|
||||
var gitconfig = {
|
||||
user: {
|
||||
name: 'Ada Lovelace',
|
||||
|
|
@ -1760,24 +1761,24 @@ var gitconfig = {
|
|||
};
|
||||
var $EDITOR = function() { return window.prompt('Commit message:'); }
|
||||
</textarea>
|
||||
<p>
|
||||
<p>
|
||||
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
|
||||
stored in <code>~/.gitconfig</code> or <code>.git/config</code> using the following syntax:
|
||||
</p>
|
||||
<pre>
|
||||
</p>
|
||||
<pre>
|
||||
[user]
|
||||
name = Ada Lovelace
|
||||
email = ada@analyti.cal
|
||||
</pre>
|
||||
<p>
|
||||
<p>
|
||||
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>.
|
||||
</p>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="git-commit">
|
||||
<h1><code>git commit</code></h1>
|
||||
<h2><code>git commit</code></h2>
|
||||
|
||||
<p>
|
||||
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 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>
|
||||
and a tag is not normally modified. Once created, it's supposed to always point
|
||||
to the same version.</p>
|
||||
|
|
@ -1900,7 +1901,7 @@ git_tag('v1.0', second_commit);
|
|||
</section>
|
||||
|
||||
<section id="git-checkout">
|
||||
<h1><code>git checkout</code></h1>
|
||||
<h2><code>git checkout</code></h2>
|
||||
<p>
|
||||
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.
|
||||
|
|
@ -1920,7 +1921,7 @@ function git_checkout(tag_or_branch_or_hash) {
|
|||
}
|
||||
</textarea>
|
||||
<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
|
||||
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>
|
||||
|
|
@ -1928,7 +1929,7 @@ function git_checkout(tag_or_branch_or_hash) {
|
|||
</section>
|
||||
|
||||
<section id="checkout-files">
|
||||
<h1>Checking out files</h1>
|
||||
<h3>Checking out files</h3>
|
||||
<p>
|
||||
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
|
||||
|
|
@ -1978,7 +1979,7 @@ function checkout_tree(path_prefix, hash) {
|
|||
</section>
|
||||
|
||||
<section id="parse-assert">
|
||||
<h1>Assert</h1>
|
||||
<h3>Assert</h3>
|
||||
<p>
|
||||
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.
|
||||
|
|
@ -1992,7 +1993,7 @@ function assert(boolean, text) {
|
|||
</section>
|
||||
|
||||
<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
|
||||
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
|
||||
|
|
@ -2021,7 +2022,7 @@ function parse_object(hash) {
|
|||
</section>
|
||||
|
||||
<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>
|
||||
<div id="example-tree-objects-parse"></div>
|
||||
<script class="example">
|
||||
|
|
@ -2084,7 +2085,7 @@ function to_hex(bin) {
|
|||
</section>
|
||||
|
||||
<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>
|
||||
(with some restrictions depending on the header), followed by a blenk line, and a free-form description.</p>
|
||||
<textarea>
|
||||
|
|
@ -2142,7 +2143,7 @@ function parse_commit(hash) {
|
|||
</section>
|
||||
|
||||
<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 <email@domain.tld> timestamp +timezone</code>,
|
||||
for example <code>Ada Lovelace <ada@analyti.cal> 1617120803 +0100</code></p>
|
||||
<textarea>
|
||||
|
|
@ -2163,7 +2164,7 @@ function parse_author(value, field) {
|
|||
</section>
|
||||
|
||||
<section id="checkout-example">
|
||||
<h1>Example checkout</h1>
|
||||
<h3>Example checkout</h3>
|
||||
<p>
|
||||
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.
|
||||
|
|
@ -2175,7 +2176,7 @@ git_checkout(initial_commit);
|
|||
</section>
|
||||
|
||||
<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>
|
||||
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">
|
||||
|
|
@ -2187,7 +2188,7 @@ function git_init() {
|
|||
</section>
|
||||
|
||||
<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.
|
||||
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>
|
||||
|
|
@ -2246,7 +2247,7 @@ store_index(['README', 'src/main.scm']);
|
|||
</section>
|
||||
|
||||
<section id="playground">
|
||||
<h1>Playground</h1>
|
||||
<h2>Playground</h2>
|
||||
<p>The implementation is now sufficiently complete to create a small repository.</p>
|
||||
<textarea id="playground-reset">
|
||||
// Reset the filesystem to its initial state
|
||||
|
|
@ -2286,14 +2287,12 @@ commands.</p>
|
|||
</section>
|
||||
|
||||
<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
|
||||
<span style="font-size: small">(* 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>
|
||||
<div id="copy-all-code" style="display: none;"></div>
|
||||
<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>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>
|
||||
|
|
@ -2305,14 +2304,14 @@ commands.</p>
|
|||
</section>
|
||||
|
||||
<section id="suggested-exercises">
|
||||
<h1>Suggested exercises</h1>
|
||||
<h2>Suggested exercises</h2>
|
||||
<p>
|
||||
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:
|
||||
</p>
|
||||
|
||||
<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">
|
||||
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.
|
||||
|
|
@ -2327,7 +2326,7 @@ commands.</p>
|
|||
</p>
|
||||
</section>
|
||||
<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">
|
||||
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
|
||||
|
|
@ -2343,7 +2342,7 @@ commands.</p>
|
|||
</p>
|
||||
</section>
|
||||
<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">
|
||||
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
|
||||
|
|
@ -2363,7 +2362,7 @@ commands.</p>
|
|||
</p>
|
||||
</section>
|
||||
<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">
|
||||
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
|
||||
|
|
@ -2383,7 +2382,7 @@ commands.</p>
|
|||
</p>
|
||||
</section>
|
||||
<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">
|
||||
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
|
||||
|
|
@ -2398,7 +2397,7 @@ commands.</p>
|
|||
</p>
|
||||
</section>
|
||||
<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">
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user