A little frontend for the code samples

frontend/init.js

@@ -0,0 +1,46 @@
+const cache = {};
+
+const userName = window.location.origin
+  .split('https://').join('')
+  .split('http://').join('')
+  .split('.')
+  .shift();
+
+const preRepoName = window.location.pathname
+  .split('index.html').join('');
+const repoName = preRepoName
+  .slice(1, preRepoName.length - 1);
+
+
+const views = {
+  tableOfContents: {
+    dom: renderTableOfContents(tableOfContents),
+    console: `Let JavaScript Be Your Next Adventure!
+  (https://www.javascriptmancy.com/)
+Are you a C# or Java developer curious about the awesome things happening in the JavaScript world? Would you like to be a part of it? Build super rich web applications, mobile apps, backend services or even robots? Does JavaScript frustrate you? Would you like to master it and never again feel like you cannot make the language do what you want?
+Are you a fan of the Fantasy genre? A sucker for wizards, elf-bowmen, powerful sorceresses and evil trolls? Love the works of Brandon Sanderson, G.R.R. Martin or Tolkien? Did you enjoy the Lord of the Rings or Game of Thrones?
+Then this is the place for you! The JavaScript-mancy series are a collection of beautifully written JavaScript books that are a blast to read. Learn the basics of JavaScript, OOP, Functional Programming, async, ES6, TypeScript, tooling, testing, Angular 2 and more! `,
+  },
+}
+
+window.onload = () => {
+
+  // permalinking files would be cool, but doesn't exist yet
+
+  const urlString = window.location.href;
+  const url = new URL(urlString);
+
+  const directory = url.searchParams.get("directory");
+  const file = url.searchParams.get("file");
+
+  const root = document.getElementById('root');
+  if (directory && file) {
+    const fileView = renderFile(directory, file);
+    views[directory + '/' + file] = fileView;
+    root.appendChild(fileView);
+  } else {
+    console.log(views.tableOfContents.console)
+    root.appendChild(views.tableOfContents.dom);
+  }
+
+};

frontend/prism/style.css

@@ -0,0 +1,168 @@
+/* PrismJS 1.17.1
+https://prismjs.com/download.html#themes=prism-okaidia&languages=clike+javascript&plugins=line-numbers */
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+	color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #e6db74;
+}
+
+.token.keyword {
+	color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		pointer-events: none;
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+

frontend/style.css

@@ -0,0 +1 @@
+/* javascriptmancy CSS goes here */