index.html


<!DOCTYPE html>
<html lang="en-US">
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>PHP Sentence</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://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css"/>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>

		<!-- Index -->
		<style>
			body {
				font-family:			"Segoe UI", Verdana, Helvetica, Arial, sans-serif;
				font-size:				11px;
				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;
			}

			h1,
			h2 {
				background:				black;
				color:					white;
				padding:				.2em .4em;
			}
			h1 {
				margin-top:				1em;
			}
			h2 {
				background:				gray;
			}

			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 first = 2E53,
						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();
					});
				}

				// 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/php-sentence"><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; 2016-2024 Martijn van der Lee. MIT Open Source license applies.
		</div>
	</body>
</html>