Change how hash urls work so they're bookmarkable and linkable

retro · retro · commit 9f58a650eaf1 · 2012-02-29T23:59:42.000+01:00
diff --git a/_site/index.html b/_site/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
-<title>CanJS**</title>
+<title>CanJS</title>
 <link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
 <link rel="stylesheet" type="text/css" href="stylesheets/tango.css">
 
diff --git a/_site/javascripts/application.js b/_site/javascripts/application.js
@@ -1,3 +1,5 @@
+var currentH2slug = "";
+
 $.Controller('Menu', {}, {
 	init : function(){
 		this.find('#menu').append(this.buildMenu());
@@ -24,8 +26,14 @@ $.Controller('Menu', {}, {
 						for(var i = 0; i < nodes.length; i++){
 							var h = $(nodes[i].node), text = $('<div>' + h.html() + '</div>');
 							text.find('code').remove();
+							var slug = $.trim(text.text()).toLowerCase().replace(/[^A-Za-z0-9_]/g, '_');
+							if(nodes[i].level === 2){
+								currentH2slug = slug
+							} else if(currentH2slug != "" && nodes[i].level === 3){
+								slug = currentH2slug + "-" + slug;
+							}
 							html.push('<li>');
-							html.push('<a href="#heading-' + nodes[i].id + '" data-level="'+ nodes[i].level +'">' + text.text() + '</a>');
+							html.push('<a href="#' + slug + '" class="heading-'+nodes[i].id+'" data-level="'+ nodes[i].level +'">' + text.text() + '</a>');
 							html.push(build(nodes[i].id));
 							html.push('</li>')
 						}
@@ -37,9 +45,17 @@ $.Controller('Menu', {}, {
 			var level       = parseInt(this.headings[i].nodeName.match(/\d/), 10),
 					parentLevel = level - 1,
 					id          = function(){ return i+1; }(),
-					node        = { node: this.headings[i], children: [], level: level, id: id };
+					node        = { node: this.headings[i], children: [], level: level, id: id },
+					text = $('<div>' + $(this.headings[i]).html() + '</div>');
+			text.find('code').remove();
 			this.headingOffsets.push($(this.headings[i]).offset().top)
-			$(this.headings[i]).attr('id', 'heading-' + id);
+			var slug = $.trim(text.text()).toLowerCase().replace(/[^A-Za-z0-9_]/g, '_');
+			if(level === 2){
+				currentH2slug = slug;
+			} else if(level === 3){
+				slug = currentH2slug + "-" + slug;
+			}
+			$(this.headings[i]).attr('id', slug);
 			byId[id] = node;
 			lastByLevel[level] = node;
 			byLevel[level].push(node);
@@ -65,7 +81,7 @@ $.Controller('Menu', {}, {
 			var offset = this.headingOffsets[i];
 			if(offset - windowHeight / 2 < scroll){
 				var active = this.find('#menu a.active'),
-						current = this.find('#menu a[href="#heading-' + (i + 1) + '"]');
+						current = this.find('#menu a.heading-' + (i + 1));
 				this.markActive(active, current);
 				return;
 			}
diff --git a/_site/stylesheets/styles.less b/_site/stylesheets/styles.less
@@ -285,4 +285,9 @@ body {
 	b,strong {
 		font-weight: bold;
 	}
+}
+body {
+	-moz-tab-size: 1;
+	-o-tab-size:   1;
+	tab-size:      1;
 }
diff --git a/javascripts/application.js b/javascripts/application.js
@@ -1,3 +1,5 @@
+var currentH2slug = "";
+
 $.Controller('Menu', {}, {
 	init : function(){
 		this.find('#menu').append(this.buildMenu());
@@ -24,8 +26,14 @@ $.Controller('Menu', {}, {
 						for(var i = 0; i < nodes.length; i++){
 							var h = $(nodes[i].node), text = $('<div>' + h.html() + '</div>');
 							text.find('code').remove();
+							var slug = $.trim(text.text()).toLowerCase().replace(/[^A-Za-z0-9_]/g, '_');
+							if(nodes[i].level === 2){
+								currentH2slug = slug
+							} else if(currentH2slug != "" && nodes[i].level === 3){
+								slug = currentH2slug + "-" + slug;
+							}
 							html.push('<li>');
-							html.push('<a href="#heading-' + nodes[i].id + '" data-level="'+ nodes[i].level +'">' + text.text() + '</a>');
+							html.push('<a href="#' + slug + '" class="heading-'+nodes[i].id+'" data-level="'+ nodes[i].level +'">' + text.text() + '</a>');
 							html.push(build(nodes[i].id));
 							html.push('</li>')
 						}
@@ -37,9 +45,17 @@ $.Controller('Menu', {}, {
 			var level       = parseInt(this.headings[i].nodeName.match(/\d/), 10),
 					parentLevel = level - 1,
 					id          = function(){ return i+1; }(),
-					node        = { node: this.headings[i], children: [], level: level, id: id };
+					node        = { node: this.headings[i], children: [], level: level, id: id },
+					text = $('<div>' + $(this.headings[i]).html() + '</div>');
+			text.find('code').remove();
 			this.headingOffsets.push($(this.headings[i]).offset().top)
-			$(this.headings[i]).attr('id', 'heading-' + id);
+			var slug = $.trim(text.text()).toLowerCase().replace(/[^A-Za-z0-9_]/g, '_');
+			if(level === 2){
+				currentH2slug = slug;
+			} else if(level === 3){
+				slug = currentH2slug + "-" + slug;
+			}
+			$(this.headings[i]).attr('id', slug);
 			byId[id] = node;
 			lastByLevel[level] = node;
 			byLevel[level].push(node);
@@ -65,7 +81,7 @@ $.Controller('Menu', {}, {
 			var offset = this.headingOffsets[i];
 			if(offset - windowHeight / 2 < scroll){
 				var active = this.find('#menu a.active'),
-						current = this.find('#menu a[href="#heading-' + (i + 1) + '"]');
+						current = this.find('#menu a.heading-' + (i + 1));
 				this.markActive(active, current);
 				return;
 			}

Original file line number	Diff line number	Diff line change
`@@ -285,4 +285,9 @@ body {`
`285`	`285`	`b,strong {`
`286`	`286`	`font-weight: bold;`
`287`	`287`	`}`
	`288`	`+}`
	`289`	`+body {`
	`290`	`+ -moz-tab-size: 1;`
	`291`	`+ -o-tab-size: 1;`
	`292`	`+ tab-size: 1;`
`288`	`293`	`}`