index.html

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>PHP Syllable</title>

		<!-- jQuery/jQueryUI (hosted) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

		<!-- Markdown parser -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.min.js"></script>

		<!-- Prettyprint -->
		<link href="https://google-code-prettify.googlecode.com/svn/loader/prettify.css" rel="stylesheet" type="text/css"/>
		<script src="https://google-code-prettify.googlecode.com/svn/loader/prettify.js"></script>

		<!-- Index -->
		<style>
			body {
				font-family:			"Segoe UI", Verdana, Helvetica, Arial, sans-serif;
				font-size:				13px;
				padding:				3em 8em 1em 4em;
			}

			#menu {
				margin-bottom:			2em;
			}

			#preview {
				text-align:				center;
			}
			#preview > * {
				box-shadow:				0 0 2em silver;
				padding:				2em;
			}

			.chapter {
				-webkit-columns:		460px;
				   -moz-columns:		460px;
						columns:		460px;

				-webkit-column-gap:		4em;
				   -moz-column-gap:		4em;
						column-gap:		4em;

				-webkit-column-rule:	thin solid silver;
				   -moz-column-rule:	thin solid silver;
						column-rule:	thin solid silver;

				text-align:				justify;
			}

			p {
				margin:					.4em 0 1.2em .8em;
			}

			h1, h2, h3, h4 {
				margin-top:					1.6em;
				margin-bottom:				.4em;
			}

			h1, h2 {
				border-top-left-radius:		1em;
				border-top-right-radius:	2em;
				padding:					.2em .4em .2em .8em;
				background:					#34495e;
				color:						white;
			}
			h1 {
				margin-top:				2em;
			}
			h2 {
				background:				#95a5a6;
			}
			h3 {
				border-bottom:			thin solid #95a5a6;
				margin-left:			.4em;
			}
			h4 {
				margin:					.4em 0 .2em 0;
			}

			ul, ol {
				padding-left:		2em;
			}

			hr {
				border-top:			double;
				margin:				2em 25%;
			}

			#footer {
				margin-top:			4em;
				text-align:			center;
				color:				silver;
				border-top:			thin solid silver;
				padding-top:		1em;
			}

			.output {
				font-family:		monospace;
				border:				solid thin silver;
				padding:			.2em .4em;
				background-color:	#cf3;
			}

			.clickable {
				cursor:				pointer;
			}

			pre {
				tab-size:			4;
				overflow-x:			auto;
				background-color:	#eee;
			}
		</style>
		<script>
			$(function() {
				function tabsToSpaces(line, tabsize) {
					var out		= '',
						tabsize = tabsize || 4,
						c;
					for (c in line) {
						var ch = line.charAt(c);
						if (ch === '\t') {
							do {
								out += ' ';
							} while (out.length % tabsize);
						} else {
							out += ch;
						}
					}
					return out;
				}

				function visualizeElement(element, type) {
					var code		= $(element).html().split('\n'),
						tabsize		= 4,
						minlength	= 2E53,
						l;

					// Convert tabs to spaces
					for (l in code) {
						code[l] = tabsToSpaces(code[l], tabsize);
					}


					// determine minimum length
					var minlength = 2E53;
					var first = 2E53;
					var last = 0;
					for (l in code) {
						if (/\S/.test(code[l])) {
							minlength = Math.min(minlength, /^\s*/.exec(code[l])[0].length);
							first = Math.min(first, l);
							last = Math.max(last, l);
						}
					}

					code = code.slice(first, last + 1);

					// strip tabs at start
					for (l in code) {
						code[l] = code[l].slice(minlength);
					}

					// recombine
					code = code.join('\n');

					var fragment = $('<pre class="prettyprint"><code/></pre>').text(code).insertAfter(element);
					$('<h3 class="clickable">'+type+'&hellip;</h3>').insertBefore(fragment).click(function() {
						fragment.slideToggle();
					});
				}

				$('.year').text((new Date).getFullYear());

				// extract html fragments
				$('div.prettyprint, span.prettyprint').each(function() {
					visualizeElement(this, 'HTML');
				});

				// extract scripts
				$('script.prettyprint').each(function() {
					visualizeElement(this, 'Javascript');
				});

				// Include the readme
				var markdown = new Markdown.Converter();
				$.get('README.md', function(readme) {
					$('#readme').html(markdown.makeHtml(readme));
					$('#readme h1').each(function() {
						$(this).nextUntil('h1').wrapAll('<div class="chapter"/>');
					});
					$('#readme pre').addClass('prettyprint');
					prettyPrint();

					// build menu
					var menuitems = [];
					$('h1').each(function() {
						var text	= $(this).text(),
							id		= $(this).attr('id') || 'chapter '+text;
						$(this).attr('id', id);
						menuitems.push('<a href="#'+id+'">'+text+'</a>');
					});
					$(menu).html(menuitems.join(' &mdash; '));
				}, 'html');
			});
		</script>
    </head>
    <body>
		<a href="https://github.com/vanderlee/phpSyllable"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

		<div id="menu"></div>

		<div id="book">
			<div id="readme"></div>
		</div>
		
		<div id="footer">
			Copyright &copy; <span class="year">2015</span> Martijn van der Lee. MIT Open Source license applies.
		</div>
	</body>
</html>