From ffd4c36830e6789b37581c1b666a12545c07ca4e Mon Sep 17 00:00:00 2001
From: Carlos Villavicencio <carlos.po5i@gmail.com>
Date: Tue, 15 May 2018 18:19:55 -0500
Subject: Introducing syntax highlight

---
 client/README.md  | 12 ++++++++++-
 client/client.js  | 47 +++++++++++++++++++++++++++++++++++++++++
 client/index.html | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 120 insertions(+), 2 deletions(-)

(limited to 'client')

diff --git a/client/README.md b/client/README.md
index 292daab..4172271 100644
--- a/client/README.md
+++ b/client/README.md
@@ -1 +1,11 @@
-(TODO)
+## Development
+A quick way to start a server is to use Node.js `http-server`:
+
+```
+npm install http-server -g
+cd client
+http-server
+```
+
+## Deployment
+(TODO)
\ No newline at end of file
diff --git a/client/client.js b/client/client.js
index ff2decc..d7706cd 100644
--- a/client/client.js
+++ b/client/client.js
@@ -18,6 +18,7 @@ var frontpage = [
 	"Formatting:",
 	"Whitespace is preserved, so source code can be pasted verbatim.",
 	"Surround LaTeX with a dollar sign for inline style $\\zeta(2) = \\pi^2/6$, and two dollars for display. $$\\int_0^1 \\int_0^1 \\frac{1}{1-xy} dx dy = \\frac{\\pi^2}{6}$$",
+	"For syntax highlight, the first line of the code block should start with @<format> where <format> can be html, js or any known format",
 	"",
 	"Current Github: https://github.com/hack-chat includes server and client source along with other resources",
 	"",
@@ -213,6 +214,18 @@ function pushMessage(args) {
 		}
 	}
 
+	if ($('#syntax-highlight').checked) {
+		if (textEl.textContent.indexOf('@') == 0) {
+			var lang = textEl.textContent.split('\n', 1)[0].replace('@', '');
+			var codeEl = document.createElement('code');
+			codeEl.classList.add(lang);
+			codeEl.textContent = textEl.textContent.replace('@' + lang + '\n', '');
+			hljs.highlightBlock(codeEl);
+			textEl.innerHTML = '';
+			textEl.appendChild(codeEl);
+		}
+	}
+
 	messageEl.appendChild(textEl);
 
 	// Scroll to bottom
@@ -522,7 +535,19 @@ var schemes = [
 	'tomorrow'
 ];
 
+var highlights = [
+	'agate',
+	'androidstudio',
+	'darcula',
+	'github',
+	'rainbow',
+	'tomorrow',
+	'xcode',
+	'zenburn'
+]
+
 var currentScheme = 'atelier-dune';
+var currentHighlight = 'darcula';
 
 function setScheme(scheme) {
 	currentScheme = scheme;
@@ -530,6 +555,12 @@ function setScheme(scheme) {
 	localStorageSet('scheme', scheme);
 }
 
+function setHighlight(scheme) {
+	currentHighlight = scheme;
+	$('#highlight-link').href = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/" + scheme + ".min.css";
+	localStorageSet('highlight', scheme);
+}
+
 // Add scheme options to dropdown selector
 schemes.forEach(function (scheme) {
 	var option = document.createElement('option');
@@ -538,16 +569,32 @@ schemes.forEach(function (scheme) {
 	$('#scheme-selector').appendChild(option);
 });
 
+highlights.forEach(function (scheme) {
+	var option = document.createElement('option');
+	option.textContent = scheme;
+	option.value = scheme;
+	$('#highlight-selector').appendChild(option);
+});
+
 $('#scheme-selector').onchange = function (e) {
 	setScheme(e.target.value);
 }
 
+$('#highlight-selector').onchange = function (e) {
+	setHighlight(e.target.value);
+}
+
 // Load sidebar configaration values from local storage if available
 if (localStorageGet('scheme')) {
 	setScheme(localStorageGet('scheme'));
 }
 
+if (localStorageGet('highlight')) {
+	setHighlight(localStorageGet('highlight'));
+}
+
 $('#scheme-selector').value = currentScheme;
+$('#highlight-selector').value = currentHighlight;
 
 /* main */
 
diff --git a/client/index.html b/client/index.html
index d71c62d..9abdebc 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1 +1,62 @@
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="utf-8"><title>hack.chat</title><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="katex/katex.min.css"><link id="scheme-link" rel="stylesheet" href="schemes/atelier-dune.css"><script src="katex/katex.min.js"></script><script src="katex/contrib/auto-render.min.js"></script></head><body><article class="container"><div id="messages" class="messages"></div></article><footer id="footer"><div class="container"><form id="chatform" class="messages"><textarea id="chatinput" type="text" autocomplete="off" autofocus></textarea></form></div></footer><nav id="sidebar"><div id="sidebar-content" class="hidden"><p><input id="pin-sidebar" type="checkbox"><label for="pin-sidebar">Pin sidebar</label></p><h4>Settings</h4><p><input id="joined-left" type="checkbox" checked><label for="joined-left">Join/left notify</label></p><p><input id="parse-latex" type="checkbox" checked><label for="parse-latex">Parse LaTeX</label></p><p><button id="clear-messages">Clear messages</button></p><h4>Color scheme</h4><select id="scheme-selector"></select><h4>Users online</h4><p>(Click user to invite)</p><ul id="users"></ul></div></nav><script src="client.js"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="utf-8">
+  <title>hack.chat</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="katex/katex.min.css">
+  <link id="scheme-link" rel="stylesheet" href="schemes/atelier-dune.css">
+  <script src="katex/katex.min.js"></script>
+  <script src="katex/contrib/auto-render.min.js"></script>
+  <link id="highlight-link" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/hybrid.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+</head>
+
+<body>
+  <article class="container">
+    <div id="messages" class="messages"></div>
+  </article>
+  <footer id="footer">
+    <div class="container">
+      <form id="chatform" class="messages">
+        <textarea id="chatinput" type="text" autocomplete="off" autofocus></textarea>
+      </form>
+    </div>
+  </footer>
+  <nav id="sidebar">
+    <div id="sidebar-content" class="hidden">
+      <p>
+        <input id="pin-sidebar" type="checkbox">
+        <label for="pin-sidebar">Pin sidebar</label>
+      </p>
+      <h4>Settings</h4>
+      <p>
+        <input id="joined-left" type="checkbox" checked>
+        <label for="joined-left">Join/left notify</label>
+      </p>
+      <p>
+        <input id="parse-latex" type="checkbox" checked>
+        <label for="parse-latex">Parse LaTeX</label>
+      </p>
+      <p>
+        <button id="clear-messages">Clear messages</button>
+      </p>
+      <h4>Color scheme</h4>
+      <select id="scheme-selector"></select>
+      <p>
+        <input id="syntax-highlight" type="checkbox" checked>
+        <label for="syntax-highlight">Syntax Highlight</label>
+      </p>
+      <h4>Highlight scheme</h4>
+      <select id="highlight-selector"></select>
+      <h4>Users online</h4>
+      <p>(Click user to invite)</p>
+      <ul id="users"></ul>
+    </div>
+  </nav>
+  <script src="client.js"></script>
+</body>
+
+</html>
\ No newline at end of file
-- 
cgit v1.2.1


From b4e36eff3867d80b644b0045bbf8da2d6bf5068d Mon Sep 17 00:00:00 2001
From: Carlos Villavicencio <carlos.po5i@gmail.com>
Date: Wed, 16 May 2018 13:22:54 -0500
Subject: Changed @ for # as highlight symbol

---
 client/client.js | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

(limited to 'client')

diff --git a/client/client.js b/client/client.js
index d7706cd..e597737 100644
--- a/client/client.js
+++ b/client/client.js
@@ -18,7 +18,7 @@ var frontpage = [
 	"Formatting:",
 	"Whitespace is preserved, so source code can be pasted verbatim.",
 	"Surround LaTeX with a dollar sign for inline style $\\zeta(2) = \\pi^2/6$, and two dollars for display. $$\\int_0^1 \\int_0^1 \\frac{1}{1-xy} dx dy = \\frac{\\pi^2}{6}$$",
-	"For syntax highlight, the first line of the code block should start with @<format> where <format> can be html, js or any known format",
+	"For syntax highlight, the first line of the code block must begin with #<format> where <format> can be html, js or any known format",
 	"",
 	"Current Github: https://github.com/hack-chat includes server and client source along with other resources",
 	"",
@@ -201,7 +201,18 @@ function pushMessage(args) {
 	textEl.textContent = args.text || '';
 	textEl.innerHTML = textEl.innerHTML.replace(/(\?|https?:\/\/)\S+?(?=[,.!?:)]?\s|$)/g, parseLinks);
 
-	if ($('#parse-latex').checked) {
+	if ($('#syntax-highlight').checked) {
+		if (textEl.textContent.indexOf('#') == 0) {
+			var lang = textEl.textContent.split(/\s+/g)[0].replace('#', '');
+			var codeEl = document.createElement('code');
+			codeEl.classList.add(lang);
+			var content = textEl.textContent.replace('#' + lang, '');
+			codeEl.textContent = content.trim();
+			hljs.highlightBlock(codeEl);
+			textEl.innerHTML = '';
+			textEl.appendChild(codeEl);
+		}
+	} else if ($('#parse-latex').checked) {
 		// Temporary hotfix for \rule spamming, see https://github.com/Khan/KaTeX/issues/109
 		textEl.innerHTML = textEl.innerHTML.replace(/\\rule|\\\\\s*\[.*?\]/g, '');
 		try {
@@ -214,18 +225,6 @@ function pushMessage(args) {
 		}
 	}
 
-	if ($('#syntax-highlight').checked) {
-		if (textEl.textContent.indexOf('@') == 0) {
-			var lang = textEl.textContent.split('\n', 1)[0].replace('@', '');
-			var codeEl = document.createElement('code');
-			codeEl.classList.add(lang);
-			codeEl.textContent = textEl.textContent.replace('@' + lang + '\n', '');
-			hljs.highlightBlock(codeEl);
-			textEl.innerHTML = '';
-			textEl.appendChild(codeEl);
-		}
-	}
-
 	messageEl.appendChild(textEl);
 
 	// Scroll to bottom
-- 
cgit v1.2.1


From 345dbfec41062408171b521f297f03e122f762c0 Mon Sep 17 00:00:00 2001
From: marzavec <admin@marzavec.com>
Date: Thu, 17 May 2018 11:13:35 -0500
Subject: Highlight Hotfix

---
 client/client.js | 40 +++++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 21 deletions(-)

(limited to 'client')

diff --git a/client/client.js b/client/client.js
index e597737..1c40f01 100644
--- a/client/client.js
+++ b/client/client.js
@@ -36,13 +36,13 @@ function $(query) {
 function localStorageGet(key) {
 	try {
 		return window.localStorage[key]
-	}	catch(e) {}
+	} catch(e) { }
 }
 
 function localStorageSet(key, val) {
 	try {
 		window.localStorage[key] = val
-	} catch(e) {}
+	} catch(e) { }
 }
 
 var ws;
@@ -158,13 +158,13 @@ function pushMessage(args) {
 
 	if (args.nick == myNick) {
 		messageEl.classList.add('me');
-	}	else if (args.nick == '!') {
+	} else if (args.nick == '!') {
 		messageEl.classList.add('warn');
-	}	else if (args.nick == '*') {
+	} else if (args.nick == '*') {
 		messageEl.classList.add('info');
-	}	else if (args.admin) {
+	} else if (args.admin) {
 		messageEl.classList.add('admin');
-	}	else if (args.mod) {
+	} else if (args.mod) {
 		messageEl.classList.add('mod');
 	}
 
@@ -201,17 +201,15 @@ function pushMessage(args) {
 	textEl.textContent = args.text || '';
 	textEl.innerHTML = textEl.innerHTML.replace(/(\?|https?:\/\/)\S+?(?=[,.!?:)]?\s|$)/g, parseLinks);
 
-	if ($('#syntax-highlight').checked) {
-		if (textEl.textContent.indexOf('#') == 0) {
-			var lang = textEl.textContent.split(/\s+/g)[0].replace('#', '');
-			var codeEl = document.createElement('code');
-			codeEl.classList.add(lang);
-			var content = textEl.textContent.replace('#' + lang, '');
-			codeEl.textContent = content.trim();
-			hljs.highlightBlock(codeEl);
-			textEl.innerHTML = '';
-			textEl.appendChild(codeEl);
-		}
+	if ($('#syntax-highlight').checked && textEl.textContent.indexOf('#') == 0) {
+		var lang = textEl.textContent.split(/\s+/g)[0].replace('#', '');
+		var codeEl = document.createElement('code');
+		codeEl.classList.add(lang);
+		var content = textEl.textContent.replace('#' + lang, '');
+		codeEl.textContent = content.trim();
+		hljs.highlightBlock(codeEl);
+		textEl.innerHTML = '';
+		textEl.appendChild(codeEl);
 	} else if ($('#parse-latex').checked) {
 		// Temporary hotfix for \rule spamming, see https://github.com/Khan/KaTeX/issues/109
 		textEl.innerHTML = textEl.innerHTML.replace(/\\rule|\\\\\s*\[.*?\]/g, '');
@@ -220,7 +218,7 @@ function pushMessage(args) {
 				{ left: "$$", right: "$$", display: true },
 				{ left: "$", right: "$", display: false },
 			]})
-		}	catch (e) {
+		} catch (e) {
 			console.warn(e);
 		}
 	}
@@ -301,7 +299,7 @@ function updateTitle() {
 	var title;
 	if (myChannel) {
 		title = "?" + myChannel;
-	}	else {
+	} else {
 		title = "hack.chat";
 	}
 
@@ -333,7 +331,7 @@ $('#chatinput').onkeydown = function (e) {
 
 			updateInputSize();
 		}
-	}	else if (e.keyCode == 38 /* UP */) {
+	} else if (e.keyCode == 38 /* UP */) {
 		// Restore previous sent messages
 		if (e.target.selectionStart === 0 && lastSentPos < lastSent.length - 1) {
 			e.preventDefault();
@@ -367,7 +365,7 @@ $('#chatinput').onkeydown = function (e) {
 		lastSent[lastSentPos] = "";
 
 		updateInputSize();
-	}	else if (e.keyCode == 9 /* TAB */) {
+	} else if (e.keyCode == 9 /* TAB */) {
 		// Tab complete nicknames starting with @
 		e.preventDefault();
 
-- 
cgit v1.2.1