1
2<!DOCTYPE html>
3<html>
4	<head>
5        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6        <title>PHP Sentence</title>
7
8		<!-- jQuery/jQueryUI (hosted) -->
9		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
10		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
11
12		<!-- Markdown parser -->
13		<script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.min.js"></script>
14
15		<!-- Prettyprint -->
16		<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css"/>
17		<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
18
19		<!-- Index -->
20		<style>
21			body {
22				font-family:			"Segoe UI", Verdana, Helvetica, Arial, sans-serif;
23				font-size:				11px;
24				padding:				3em 8em 1em 4em;
25			}
26
27			#menu {
28				margin-bottom:			2em;
29			}
30
31			#preview {
32				text-align:				center;
33			}
34			#preview > * {
35				box-shadow:				0 0 2em silver;
36				padding:				2em;
37			}
38
39			.chapter {
40				-webkit-columns:		460px;
41				   -moz-columns:		460px;
42						columns:		460px;
43
44				-webkit-column-gap:		4em;
45				   -moz-column-gap:		4em;
46						column-gap:		4em;
47
48				-webkit-column-rule:	thin solid silver;
49				   -moz-column-rule:	thin solid silver;
50						column-rule:	thin solid silver;
51
52				text-align:				justify;
53			}
54
55			h1,
56			h2 {
57				background:				black;
58				color:					white;
59				padding:				.2em .4em;
60			}
61			h1 {
62				margin-top:				1em;
63			}
64			h2 {
65				background:				gray;
66			}
67
68			hr {
69				border-top:			double;
70				margin:				2em 25%;
71			}
72
73			#footer {
74				margin-top:			4em;
75				text-align:			center;
76				color:				silver;
77				border-top:			thin solid silver;
78				padding-top:		1em;
79			}
80
81			.output {
82				font-family:		monospace;
83				border:				solid thin silver;
84				padding:			.2em .4em;
85				background-color:	#cf3;
86			}
87
88			.clickable {
89				cursor:				pointer;
90			}
91
92			pre {
93				tab-size:			4;
94				overflow-x:			auto;
95				background-color:	#eee;
96			}
97		</style>
98		<script>
99			$(function() {
100				function tabsToSpaces(line, tabsize) {
101					var out		= '',
102						tabsize = tabsize || 4,
103						c;
104					for (c in line) {
105						var ch = line.charAt(c);
106						if (ch === '\t') {
107							do {
108								out += ' ';
109							} while (out.length % tabsize);
110						} else {
111							out += ch;
112						}
113					}
114					return out;
115				}
116
117				function visualizeElement(element, type) {
118					var code		= $(element).html().split('\n'),
119						tabsize		= 4,
120						minlength	= 2E53,
121						l;
122
123					// Convert tabs to spaces
124					for (l in code) {
125						code[l] = tabsToSpaces(code[l], tabsize);
126					}
127
128
129					// determine minimum length
130					var minlength = 2E53;
131					var first = 2E53;
132					var last = 0;
133					for (l in code) {
134						if (/\S/.test(code[l])) {
135							minlength = Math.min(minlength, /^\s*/.exec(code[l])[0].length);
136							first = Math.min(first, l);
137							last = Math.max(last, l);
138						}
139					}
140
141					code = code.slice(first, last + 1);
142
143					// strip tabs at start
144					for (l in code) {
145						code[l] = code[l].slice(minlength);
146					}
147
148					// recombine
149					code = code.join('\n');
150
151					var fragment = $('<pre class="prettyprint"><code/></pre>').text(code).insertAfter(element);
152					$('<h3 class="clickable">'+type+'&hellip;</h3>').insertBefore(fragment).click(function() {
153						fragment.slideToggle();
154					});
155				}
156
157				// extract html fragments
158				$('div.prettyprint, span.prettyprint').each(function() {
159					visualizeElement(this, 'HTML');
160				});
161
162				// extract scripts
163				$('script.prettyprint').each(function() {
164					visualizeElement(this, 'Javascript');
165				});
166
167				// Include the readme
168				var markdown = new Markdown.Converter();
169				$.get('README.md', function(readme) {
170					$('#readme').html(markdown.makeHtml(readme));
171					$('#readme h1').each(function() {
172						$(this).nextUntil('h1').wrapAll('<div class="chapter"/>');
173					});
174					$('#readme pre').addClass('prettyprint');
175					prettyPrint();
176
177					// build menu
178					var menuitems = [];
179					$('h1').each(function() {
180						var text	= $(this).text(),
181							id		= $(this).attr('id') || 'chapter '+text;
182						$(this).attr('id', id);
183						menuitems.push('<a href="#'+id+'">'+text+'</a>');
184					});
185					$(menu).html(menuitems.join(' &mdash; '));
186				}, 'html');
187			});
188		</script>
189    </head>
190    <body>
191		<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>
192
193		<div id="menu"></div>
194
195		<div id="book">
196			<div id="readme"></div>
197		</div>
198
199		<div id="footer">
200			Copyright &copy; 2016 Martijn van der Lee. MIT Open Source license applies.
201		</div>
202	</body>
203</html>
204