Setup for react re-write

2026-03-11 08:54:27 +00:00 · 2018-01-10 20:08:41 +01:00 · 2018-01-10 20:08:41 +01:00 · 6a2e07aba8
commit 6a2e07aba8
parent 5654426230
38 changed files with 3784 additions and 756 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,9 @@
+{
+	"presets": [
+		"@babel/preset-react",
+		"@babel/preset-es2015"
+	],
+	"plugins": [
+		"@babel/plugin-transform-async-to-generator"
+	]
+}
--- a/about.html
+++ b/about.html
@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Removeddit</title>
-    <meta charset="utf-8">
-    <meta type="description" content="Display removed and deleted comments from Reddit">
-    <meta type="author" content="Jesper Wrang">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="/static/css/style.css" rel="stylesheet">
-    <link href="/static/images/favicon.ico" rel="shotcut icon">
-  </head>
-  <body>
-    <header>
-      <div id="header">
-        <h1><a href="/">Removeddit</a></h1>
-        <nav><a href="/r/all">subreddit</a><a href="/r/bestof/comments/7c8jof/">thread</a><a href="/search/">search</a><a href="/about/">about</a></nav>
-      </div>
-    </header>
-    <div id="main">
-      <div id="main-box">
-        <h2 class="about">About</h2>
-        <p>Display <b class="removed" title="Removed by mods">removed</b> (by mods) and <b class="deleted" title="Deleted by users">deleted</b> (by users) comments/threads from  Reddit.</p>
-        <p><b>Usage</b>: Drag this bookmarklet <a class="bookmarklet" href="javascript: document.location = document.URL.replace('reddit.com','removeddit.com');">Removeddit</a>
-          to your bookmark bar and use it to get from reddit to removeddit.<br><br>Alternatively you can manually replace the <i>reddit</i> in the URL to <i>removeddit</i>.<br>E.g. <a href="/r/TwoXChromosomes/comments/6z1hch/">https://www.removeddit.com/r/TwoXChromosomes/comments/6z1hch/</a>
-        </p>
-        <p>Created by <a href="https://github.com/JubbeArt/">Jesper Wrang</a> and uses <a href="https://pushshift.io/">Jason Baumgartner</a> service for getting removed comments.</p>
-        <h2 class="todo">TODO</h2>
-        <ul>
-          <li>Collapsing comments</li>
-          <li>Get removed selftext of thread</li>
-          <li>Subreddits!</li>
-          <li>Maybe for specific users	</li>
-        </ul>
-        <h2 class="contact">Links/Contact</h2>
-        <p style="margin-bottom:8px;">For feedback and bug reports:</p>
-        <ul>
-          <li>email: removeddit (at) gmail.com</li>
-          <li>reddit: <a href="https://www.reddit.com/user/Jubbeart/">/u/JubbeArt</a></li>
-        </ul>
-        <p><a href="https://github.com/JubbeArt/removeddit">Code on Github.</a></p>
-      </div>
-    </div>
-  </body>
-</html>
--- a/compile.sh
+++ b/compile.sh
@ -1,12 +0,0 @@
-### Use these for production
-
-pug -P -o . pug/about.pug pug/thread.pug pug/subreddit.pug pug/search.pug
-sass --sourcemap=none --style expanded sass/main.sass static/css/style.css
-lodash include=defaultTo,toLower,includes,parseInt,has,isNil,uniq,property,map,forEach,join,sortBy,get,now,template -p -o static/js/libraries/lodash.custom.min.js 
-lodash template="jst/*.jst" -p -o static/js/libraries/lodash.templates.min.js
-
-### Use these in development
-
-#pug --watch -P -o . pug/about.pug pug/thread.pug pug/subreddit.pug pug/search.pug
-#sass --watch --sourcemap=none --style expanded sass/main.sass:static/css/style.css
-#lodash template="jst/*.jst" -d -o static/js/libraries/lodash.templates.min.js
--- a/static/js/functions.js
+++ b/static/js/functions.js
--- a/static/js/libraries/js.cookie.js
+++ b/static/js/libraries/js.cookie.js
--- a/static/js/libraries/lodash.custom.min.js
+++ b/static/js/libraries/lodash.custom.min.js
--- a/js/libraries/lodash.templates.min.js
+++ b/js/libraries/lodash.templates.min.js
@ -0,0 +1,328 @@
+;(function() {
+  var undefined;
+
+  var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
+
+  var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+  var root = freeGlobal || freeSelf || Function('return this')();
+
+  var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;
+
+  var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;
+
+  var _ = root._ || {};
+
+  /*----------------------------------------------------------------------------*/
+
+  var templates = {
+    'comment': {},
+    'elasticCommentIDs': {},
+    'elasticComments': {},
+    'elasticSubreddit': {},
+    'elasticThread': {},
+    'search': {},
+    'subredditInfo': {},
+    'subredditPagination': {},
+    'thread': {},
+    'threadInfo': {}
+  };
+
+  templates['comment'] =   function(obj) {
+    obj || (obj = {});
+    var __t, __p = '', __j = Array.prototype.join;
+    function print() { __p += __j.call(arguments, '') }
+    with (obj) {
+
+    var isRemoved = _.has(comment,"removed");
+    var isDeleted = _.has(comment,"deleted");
+
+    var commentCss = "comment comment-" + (isRemoved ? "removed" : (isDeleted ? "deleted" : (comment.depth % 2 == 0 ? "even" : "odd")));
+    __p += '\n\n<div id="' +
+    ((__t = ( id )) == null ? '' : __t) +
+    '" class="' +
+    ((__t = ( commentCss )) == null ? '' : __t) +
+    '">\n	<div class="comment-head">\n		<a href="javascript:void(0)" class="author">[–]</a>\n		<a href="https://www.reddit.com/user/' +
+    ((__t = ( comment.author )) == null ? '' : __t) +
+    '" class="author comment-author">\n			' +
+    ((__t = ( comment.author+(isDeleted ? " (deleted by user)" : "") )) == null ? '' : __t) +
+    '\n		</a>\n		<span class="comment-score">' +
+    ((__t = ( Format.prettyScore(comment.score) )) == null ? '' : __t) +
+    ' point' +
+    ((__t = ( ((comment.score == 1) ? "": "s") )) == null ? '' : __t) +
+    '</span>\n		<span class="comment-time">' +
+    ((__t = ( Format.prettyDate(comment.created_utc) )) == null ? '' : __t) +
+    '</span>\n	</div>\n	<div class="comment-body">\n		' +
+    ((__t = ( (comment.body === "[removed]" && isRemoved ? "<p>[likely removed by automoderator]</p>" : Format.parse(comment.body)) )) == null ? '' : __t) +
+    '\n	</div>\n	<div class="comment-links">\n		<a href="/r/' +
+    ((__t = ( Reddit.subreddit )) == null ? '' : __t) +
+    '/comments/' +
+    ((__t = ( Reddit.threadID )) == null ? '' : __t) +
+    '/_/' +
+    ((__t = ( id )) == null ? '' : __t) +
+    '/">permalink</a>\n		<a href="https://www.reddit.com/r/' +
+    ((__t = ( Reddit.subreddit )) == null ? '' : __t) +
+    '/comments/' +
+    ((__t = ( Reddit.threadID )) == null ? '' : __t) +
+    '/_/' +
+    ((__t = ( id )) == null ? '' : __t) +
+    '/">reddit</a>\n	</div>\n</div>\n\n';
+
+    }
+    return __p
+  };
+
+  templates['elasticCommentIDs'] =   function(obj) {
+    obj || (obj = {});
+    var __t, __p = '';
+    with (obj) {
+    __p += '{\n	"query":{\n		"ids":{\n			"values":[' +
+    ((__t = ( ids.join() )) == null ? '' : __t) +
+    ']\n		}\n	},\n	"_source":[\n		"author","body","created_utc","parent_id","score"\n	]\n}';
+
+    }
+    return __p
+  };
+
+  templates['elasticComments'] =   function(obj) {
+    obj || (obj = {});
+    var __t, __p = '';
+    with (obj) {
+    __p += '{\n	"query":{\n		"term":{\n			"link_id":' +
+    ((__t = ( id )) == null ? '' : __t) +
+    '\n		}\n	},\n	"_source":[\n		"author","body","created_utc","parent_id","score"\n	],\n	"size":20\n}';
+
+    }
+    return __p
+  };
+
+  templates['elasticSubreddit'] =   function(obj) {
+    obj || (obj = {});
+    var __t, __p = '', __j = Array.prototype.join;
+    function print() { __p += __j.call(arguments, '') }
+    with (obj) {
+    __p += '{\n	"query":{\n		"bool":{\n			"must":[\n				';
+     if(_.toLower(subreddit) !== "all") {
+    __p += '\n				{\n					"term":{\n						"subreddit":"' +
+    ((__t = ( _.toLower(subreddit) )) == null ? '' : __t) +
+    '"\n					}\n				},\n				';
+     }
+    __p += '\n				{\n					"range":{\n						"created_utc":{\n							"gt":' +
+    ((__t = ( time )) == null ? '' : __t) +
+    '\n						}\n					}\n				}\n			]\n		}\n	},\n	"_source":[\n		"author","url","subreddit","link_flair_text","score","title","created_utc","num_comments","domain","permalink","id","thumbnail","thumbnail_height","thumbnail_width"\n	],\n	"sort":[\n		{"score":"desc"}\n	],\n	"from":' +
+    ((__t = ( (page-1)*postPerPage )) == null ? '' : __t) +
+    ',\n	"size":' +
+    ((__t = ( postPerPage )) == null ? '' : __t) +
+    '\n}';
+
+    }
+    return __p
+  };
+
+  templates['elasticThread'] =   function(obj) {
+    obj || (obj = {});
+    var __t, __p = '';
+    with (obj) {
+    __p += '{\n	"query":{\n		"term":{\n			"id":"' +
+    ((__t = ( id )) == null ? '' : __t) +
+    '"\n		}\n	},\n	"_source":[\n		"author","created_utc","domain","link_flair_text","num_comments","url","subreddit","score","title","selftext","permalink","thumbnail","thumbnail_height","thumbnail_width"\n	],\n	"size":1\n}';
+
+    }
+    return __p
+  };
+
+  templates['search'] =   function(obj) {
+    obj || (obj = {});
+    var __t, __p = '';
+    with (obj) {
+    __p += '\n	var radioInput = function(name, displayNames, values) {\n		var inputs = "";\n		\n		for(var i = 0, len = displayNames.length; i < len; i++){\n			inputs += \'<span class="radioButton"\'+ (Vars.lookup[name] === values[i] ? \' style="background: #239f2b; color:#fff"\':\'\')+\'>\';\n			inputs += \'<input type="radio" id="\'+name+i+\'" name="\'+name+\'" onchange="CSS.radio(this)"\';\n			inputs += \'value="\'+values[i]+\'" \'+(Vars.lookup[name] === values[i] ? \' checked "\':\'\')+\' >\';\n			inputs += \'<label for="\'+name+i+\'">\'+displayNames[i]+\'</label></span>\';\n		}\n		return inputs;\n	};\n\n	var textInput = function(name){\n		return \'<input type="text" name="\'+name+\'" id="\'+name+\'" value="\'+Vars.get(name)+\'">\'; \n	};\n\n	var label = function(name, display) {\n		return \'<label for="\'+name+\'">\'+display+\': </label>\';\n	};\n\n	var inputRow = function(text, input) {\n		return \'<div class="search-row"><span class="search-left">\'+text+\'</span><span>\'+input+"</span></div>";\n	};\n\n	var selectTime = function() {\n		var values = ["hour", "12hour", "day", "week", "month", "6month", "year", "all"];\n		var display = ["past hour", "past 12 hours", "past day", "past week", "past month", "past 6 months", "past year", "all time"];\n		var html = \'<select name="time" id="time">\';\n\n		for(var i = 0, len = values.length; i < len; i++) {\n			html += \'<option value="\'+values[i]+\'"\' + ((Vars.get("time") === values[i]) ? " selected" : \'\')+\'>\'+display[i]+\'</option>\';\n		}\n\n		return html + "</select>";\n	};\n\n	var select = function(name, display, values){\n		var html = \'<select name="\'+name+\'" id="\'+name+\'">\';\n		\n		for(var i = 0, len = values.length; i < len; i++) {\n			html += \'<option value="\'+values[i]+\'"\' + ((Vars.get(name) === values[i]) ? " selected" : \'\')+\'>\'+display[i]+\'</option>\';\n		}\n\n		return html + "</select>";\n	};\n\nreturn {\n	createSearch: function(){\n		var searchBox = document.createElement("div");\n		searchBox.id = "main-box";\n		searchBox.className = "search-box";\n	/*\n		Comments:\n		text			(body)		string\n		title 		(title)		string\n		subreddit		(subreddit)	string\n		author		(author)		string\n		over_18		(over_18)		sfw,nsfw,both *\n		locked		(locked)		bool *\n		between		(after/before)	"date"\n		sort 		(sort)		asc,desc\n	*/\n		var html = inputRow(\'Im looking for: \', radioInput("thread", ["Thread","Comment"], ["true", "false"]));		\n		html += inputRow(label("text", "Text"), textInput("text"));\n		html += inputRow(label("title","Title"), textInput("title"));\n		html += inputRow(label("subreddit", "Subreddit"), textInput("subreddit"));\n		html += inputRow(label("author", "Author"), textInput("author"));\n		html += inputRow("Over 18: ", radioInput("over_18", ["Both","NSFW","SFW"], ["both","nsfw","sfw"]));\n		html += inputRow("Locked: ", radioInput("locked", ["Both","True", "False"], ["both","true","false"]));\n		html += inputRow("Removed: ", select("removed", ["Removed and non-removed", "Only removed", "Only deleted"], ["all", "removed", "deleted"]));\n		html += inputRow("From:", selectTime());\n		html += inputRow("Sort: ", select("sort", ["Highest score","Lowest score","Newest","Oldest"], ["score_desc","score_asc","time_desc","time_asc"]));\n		html += \'<input type="button" value="\'+(showAdvanced?\'Hide\':\'Show\')+\' advanced">\';\n		html += \'<input type="submit" value="Search">\';\n		searchBox.innerHTML = html;\n	\n		mainDiv.appendChild(searchBox);';
+
+    }
+    return __p
+  };
+
+  templates['subredditInfo'] =   function(obj) {
+    obj || (obj = {});
+    var __t, __p = '', __j = Array.prototype.join;
+    function print() { __p += __j.call(arguments, '') }
+    with (obj) {
+    __p += '<div class="subreddit-info">\n	top post of <a href="https://www.reddit.com/r/' +
+    ((__t = ( subreddit )) == null ? '' : __t) +
+    '">/r/' +
+    ((__t = ( subreddit )) == null ? '' : __t) +
+    '</a> from:\n	<select onchange="Vars.reload(this)">\n		<option value="hour"';
+     if(time === "hour"){
+    __p += ' selected';
+     }
+    __p += '>past hour</option>\n		<option value="12hour"';
+     if(time === "12hour"){
+    __p += ' selected';
+     }
+    __p += '>past 12 hours</option>\n		<option value="day"';
+     if(time === "day"){
+    __p += ' selected';
+     }
+    __p += '>past day</option>\n		<option value="week"';
+     if(time === "week"){
+    __p += ' selected';
+     }
+    __p += '>past week</option>\n		<option value="month"';
+     if(time === "month"){
+    __p += ' selected';
+     }
+    __p += '>past month</option>\n		<option value="6month"';
+     if(time === "6month"){
+    __p += ' selected';
+     }
+    __p += '>past 6 months</option>\n		<option value="year"';
+     if(time === "year"){
+    __p += ' selected';
+     }
+    __p += '>past year</option>\n		<option value="all"';
+     if(time === "all"){
+    __p += ' selected';
+     }
+    __p += '>all time</option>		\n	</select>				\n</div>';
+
+    }
+    return __p
+  };
+
+  templates['subredditPagination'] =   function(obj) {
+    obj || (obj = {});
+    var __t, __p = '', __j = Array.prototype.join;
+    function print() { __p += __j.call(arguments, '') }
+    with (obj) {
+    __p += '<div id="pagination">\n	Page: \n	';
+     if(start > 1) {
+    __p += '\n		<a href="' +
+    ((__t = ( urlBase+1 )) == null ? '' : __t) +
+    '">1</a> ... \n	';
+     }
+
+    	for(var i = start; i <= end; i++) {	
+    		if(currentPage === i) {
+    __p += '\n			<span>' +
+    ((__t = ( i )) == null ? '' : __t) +
+    '</span>\n	';
+    	} else {
+    __p += '\n			<a href="' +
+    ((__t = ( urlBase+i )) == null ? '' : __t) +
+    '">' +
+    ((__t = ( i )) == null ? '' : __t) +
+    '</a>\n	';
+    	}
+    	}
+    __p += '\n</div>';
+
+    }
+    return __p
+  };
+
+  templates['thread'] =   function(obj) {
+    obj || (obj = {});
+    var __t, __p = '', __j = Array.prototype.join;
+    function print() { __p += __j.call(arguments, '') }
+    with (obj) {
+    __p += '<div class="thread">\n';
+    	if(typeof postNr !== "undefined") {
+    __p += '\n	<span class="post-rank">' +
+    ((__t = ( postNr )) == null ? '' : __t) +
+    '</span>\n';
+    	}
+    __p += '\n	<div class="thread-score-box">\n		<div class="vote upvote"></div>\n		<div class="thread-score">' +
+    ((__t = ( Format.prettyScore(thread.score) )) == null ? '' : __t) +
+    '</div>\n		<div class="vote downvote"></div>\n	</div>\n';
+     	var url = _.replace(thread.url, "https://www.reddit.com", "https://www.removeddit.com");
+
+    	if(_.includes(["self", "default", "image", "nsfw"], thread.thumbnail)) {
+    __p += '\n		<a href="' +
+    ((__t = ( url )) == null ? '' : __t) +
+    '" class="thumbnail thumbnail-' +
+    ((__t = ( thread.thumbnail)) == null ? '' : __t) +
+    '"></a>\n';
+    	} else {
+    		var thumbnailWidth = _.defaultTo(thread.thumbnail_width, 140) * 0.5;
+    		var thumbnailHeight = _.defaultTo(thread.thumbnail_height, 140) * 0.5;
+    	;
+    __p += '	<a href="' +
+    ((__t = ( url )) == null ? '' : __t) +
+    '">\n			<img class="thumbnail" src="' +
+    ((__t = ( thread.thumbnail )) == null ? '' : __t) +
+    '" width="' +
+    ((__t = ( thumbnailWidth )) == null ? '' : __t) +
+    '" height="' +
+    ((__t = ( thumbnailHeight )) == null ? '' : __t) +
+    '">\n		</a>\n';
+    	}
+    __p += '\n	<div class="thread-content">\n\n		<a class="thread-title" href="' +
+    ((__t = ( url )) == null ? '' : __t) +
+    '">' +
+    ((__t = ( thread.title )) == null ? '' : __t) +
+    '</a>\n';
+    	if(!_.isNil(thread.link_flair_text)){
+    __p += '\n		<span class="link-flair">' +
+    ((__t = ( thread.link_flair_text )) == null ? '' : __t) +
+    '</span>\n';
+    	}
+    __p += '	\n		<span class="domain">(' +
+    ((__t = ( thread.domain )) == null ? '' : __t) +
+    ')</span>\n		<div class="thread-info">\n			submitted <span class="thread-time">' +
+    ((__t = ( Format.prettyDate(thread.created_utc) )) == null ? '' : __t) +
+    '</span> by\n			<a class="thread-author author" href="https://www.reddit.com/user/' +
+    ((__t = ( thread.author )) == null ? '' : __t) +
+    '">' +
+    ((__t = ( thread.author )) == null ? '' : __t) +
+    '</a>\n		';
+    	if(Reddit.isAll){
+    __p += '\n			to <a class="subreddit-link author" href="/r/' +
+    ((__t = ( thread.subreddit )) == null ? '' : __t) +
+    '">/r/' +
+    ((__t = ( thread.subreddit )) == null ? '' : __t) +
+    '</a>\n		';
+    	}
+    __p += '		\n		</div>\n		<div class="total-comments">\n			<a class="grey-link" href="' +
+    ((__t = ( thread.permalink )) == null ? '' : __t) +
+    '">\n				<b>' +
+    ((__t = ( thread.num_comments )) == null ? '' : __t) +
+    ' comments</b>\n			</a>\n			<a class="grey-link" href="https://www.reddit.com' +
+    ((__t = ( thread.permalink )) == null ? '' : __t) +
+    '">\n				<b>reddit</b>\n			</a>\n		</div>\n	</div>\n</div>';
+
+    }
+    return __p
+  };
+
+  templates['threadInfo'] =   function(obj) {
+    obj || (obj = {});
+    var __t, __p = '';
+    with (obj) {
+    __p += '<div id="comment-info">\n	removed comments: ' +
+    ((__t = ( removedComments )) == null ? '' : __t) +
+    '/' +
+    ((__t = ( totalComments )) == null ? '' : __t) +
+    ' (' +
+    ((__t = ( (100 * removedComments / totalComments).toFixed(1) )) == null ? '' : __t) +
+    '%)\n</div>\n<div id="comment-sort">sorted by: top</div>';
+
+    }
+    return __p
+  };
+
+  /*----------------------------------------------------------------------------*/
+
+  if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
+    define(['lodash'], function(lodash) {
+      _ = lodash;
+      lodash.templates = lodash.extend(lodash.templates || {}, templates);
+    });
+  }
+  else if (freeModule) {
+    _ = require('lodash');
+    (freeModule.exports = templates).templates = templates;
+    freeExports.templates = templates;
+  }
+  else if (_) {
+    _.templates = _.extend(_.templates || {}, templates);
+  }
+}.call(this));
--- a/static/js/libraries/snuownd.js
+++ b/static/js/libraries/snuownd.js
--- a/static/js/polyfills/fetch.js
+++ b/static/js/polyfills/fetch.js
--- a/static/js/polyfills/promise.min.js
+++ b/static/js/polyfills/promise.min.js
--- a/static/js/search.js
+++ b/static/js/search.js
--- a/static/js/subreddit.js
+++ b/static/js/subreddit.js
--- a/static/js/thread.js
+++ b/static/js/thread.js
@ -3,12 +3,6 @@
 var app = (function(){		
 return {
 	loadPage: function() {
-		// Just fucking crach if the user is retarded
-		if(_.isNil(Reddit.threadID)) {
-			Status.error("Missing necessary parts of the URL");
-			return;
-		}
-	
 		Status.loading("Loading thread...");
 		var urlData = {id: parseInt(Reddit.threadID, 36)};

@ -42,7 +36,7 @@ return {
 				Comments.addComments(json);
 				
 				if(Comments.missing.length !== 0) {
-					getRemainingComments();
+					return getRemainingComments();
 				}
 			});
 		})
@ -53,7 +47,6 @@ return {
 				return Fetch2.get(ElasticSearch.commentURL+_.templates.elasticCommentIDs(urlData), "Could not find the specific comment asked for")
 				.then(Fetch2.json)
 				.then(function(json){ 
-					console.log(json.hits.hits)
 					Comments.addComments(json);
 				});	
 			}
@ -61,10 +54,7 @@ return {
 		.then(function(){
 			HTML.main.innerHTML += '<div id="'+Reddit.threadID+'"></div>';
 			Status.loading("Generating comments...");
-			_.forEach(Comments.IDs, function(id){
-				HTML.main.innerHTML += _.templates.comment({id:id, comment:Comments.lookup[id]});
-			});
-			// generate comments
+			Comments.generate();
 			Status.success();
 		})
 		.catch(Fetch2.handleError);
@ -77,7 +67,8 @@ return {
 	IDs: [], // The comments we found
 	lookup: {},
 	missing: [],
-
+	isPermalink: (Reddit.permalink !== undefined && Reddit.permalink !== ""),
+	
 	to36: function(id){
 		return parseInt(id).toString(36);
 	},
@ -85,8 +76,9 @@ return {
 	to10: function(id){
 		return parseInt(id, 36);
 	},
-
+	
 	addComments: function(json){
+
 		Comments.IDs = _.union(Comments.IDs, _.map(json.hits.hits, function(comment){
 			return Comments.to36(comment._id);
 		}));
@ -112,7 +104,49 @@ return {
 		return Reddit.threadID;
 	},

-	isPermalink: (Reddit.permalink !== undefined && Reddit.permalink !== "")
+	generate: function(){
+		//console.log("asdf ",_.includes(Comments.ids, "dms36h7"))
+		Comments.IDs = _.sortBy(_.uniq(Comments.IDs), function(id) {
+			return Comments.lookup[id].score;
+		});
+
+		var createdComments = [];
+
+		if(Comments.isPermalink) {
+			var urlData = {
+				id: Comments.permalink,
+				comment: Comments.lookup[Reddit.permalink]
+			}
+			document.getElementById(Reddit.threadID).innerHTML += _.templates.comment(urlData);
+			createdComments.push(Reddit.permalink);
+		} else {
+			createdComments.push(Reddit.threadID);
+		}
+
+		var didSomething;
+	
+		while(Comments.IDs.length > 0) {
+			didSomething = false;
+	
+			for(var i = Comments.IDs.length - 1; i >= 0; i--) {
+				var id = Comments.IDs[i];
+				var parentID = Comments.lookup[id].parent_id;
+	
+				if(_.includes(createdComments, parentID)) {
+					document.getElementById(parentID).innerHTML += (_.templates.comment({id:id, comment: Comments.lookup[id]}));
+					createdComments.push(id);
+					Comments.IDs.splice(i, 1);
+					didSomething = true;
+				}
+			}
+	
+			// Fail safe (parents missing for the rest of the comments, shouldn't happend but oh well :D)
+			if(!didSomething) {
+				console.error("Didn't generate all comments correctly");
+				break;
+			}
+		}
+	}
 };
 })();

@ -169,36 +203,7 @@ var ThreadHTML = (function(){
 		return data;
 	};

-	var createComments = function(){
-		var commentsToCreate = _.sortBy(_.uniq(Comments.toBeCreated), function(id) {
-			return Comments.lookup[id].score;
-		});
-
-		var createdComments = [Comments.getRoot()];
-		var didSomething = false;
 	
-		while(commentsToCreate.length > 0) {
-			didSomething = false;
-	
-			for(var i = commentsToCreate.length - 1; i >= 0; i--) {
-				var id = commentsToCreate[i];
-				var parentID = Comments.lookup[id].parent_id.split("_")[1];
-	
-				if(_.includes(createdComments, parentID)) {
-					document.getElementById(parentID).appendChild(createComment(Comments.lookup[id]));
-					createdComments.push(id);
-					commentsToCreate.splice(i, 1);
-					didSomething = true;
-				}
-			}
-	
-			// Fail safe (parents missing for the rest of the comments, shouldn't happend but oh well :D)
-			if(!didSomething) {
-				console.error("Didn't generate all comments correctly");
-				break;
-			}
-		}
-	};

 })();*/

--- a/js/utils.js
+++ b/js/utils.js
@ -0,0 +1 @@
+s
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,12 +3,6 @@
  "version": "1.0.0",
  "description": "View removed comments from reddit",
  "main": "src/index.js",
-  "scripts": {
-    "start": "webpack-dev-server --config webpack.dev.js",
-    "build": "webpack --config webpack.dev.js",
-    "build-prod": "webpack --config webpack.prod.js",
-    "gh-pages": "npm run build-prod && node publish.js"
-  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JubbeArt/removeddit.git"
@ -25,19 +19,35 @@
    "url": "https://github.com/JubbeArt/removeddit/issues"
  },
  "homepage": "https://github.com/JubbeArt/removeddit#readme",
+  "scripts": {
+    "start": "webpack-dev-server --config webpack.dev.js",
+    "build": "webpack --config webpack.dev.js",
+    "build-prod": "webpack --config webpack.prod.js",
+    "gh-pages": "npm run build-prod && node publish.js"
+  },
  "dependencies": {
+    "@babel/polyfill": "^7.0.0-beta.37",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
-    "react-router-dom": "^4.2.2"
+    "react-router-dom": "^4.2.2",
+    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.37",
    "@babel/core": "^7.0.0-beta.37",
+    "@babel/plugin-transform-async-to-generator": "^7.0.0-beta.37",
+    "@babel/preset-es2015": "^7.0.0-beta.37",
    "@babel/preset-react": "^7.0.0-beta.37",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^8.0.0-beta.0",
    "clean-webpack-plugin": "^0.1.17",
    "copy-webpack-plugin": "^4.3.1",
+    "css-loader": "^0.28.8",
+    "extract-text-webpack-plugin": "^3.0.2",
    "gh-pages": "^1.1.0",
+    "html-loader": "^0.5.4",
+    "html-webpack-plugin": "^2.30.1",
+    "node-sass": "^4.7.2",
+    "sass-loader": "^6.0.6",
    "uglifyjs-webpack-plugin": "^1.1.6",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.0",
--- a/search.html
+++ b/search.html
@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Removeddit</title>
-    <meta charset="utf-8">
-    <meta type="description" content="Display removed and deleted comments from Reddit">
-    <meta type="author" content="Jesper Wrang">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="/static/css/style.css" rel="stylesheet">
-    <link href="/static/images/favicon.ico" rel="shotcut icon">
-  </head>
-  <body>
-    <header>
-      <div id="header">
-        <h1><a href="/">Removeddit</a></h1>
-        <nav><a href="/r/all">subreddit</a><a href="/r/bestof/comments/7c8jof/">thread</a><a href="/search/">search</a><a href="/about/">about</a></nav>
-      </div>
-    </header>
-    <div id="main">
-    </div>
-    <script src="/static/js/libraries/snuownd.js"></script>
-    <script src="/static/js/libraries/lodash.custom.min.js"></script>
-    <script src="/static/js/libraries/lodash.templates.min.js"></script>
-    <script src="/static/js/polyfills/promise.min.js"></script>
-    <script src="/static/js/polyfills/fetch.js"></script>
-    <script src="/static/js/functions.js"></script>
-    <script src="/static/js/libraries/js.cookie.js"></script>
-    <script src="/static/js/search.js"></script>
-  </body>
-</html>
--- a/src/404.html
+++ b/src/404.html
@ -0,0 +1 @@
+index.html
--- a/static/images/done.png
+++ b/static/images/done.png
--- a/static/images/error.png
+++ b/static/images/error.png
--- a/static/images/favicon.ico
+++ b/static/images/favicon.ico
--- a/static/images/loading.gif
+++ b/static/images/loading.gif
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Removeddit</title>
+	<meta charset="UTF-8">
+	<meta type="description" content="Display removed and deleted comments from Reddit">
+	<meta type="author" content="Jesper Wrang">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<link href="images/favicon.ico" rel="shotcut icon">
+</head>
+<body>
+	<div id="app"></div>
+</body>
+</html>
--- a/src/js/components/Menu.js
+++ b/src/js/components/Menu.js
@ -0,0 +1,9 @@
+{/* <header>
+      <div id="header">
+        <h1><a href="/">Removeddit</a></h1>
+        <nav><a href="/r/all">subreddit</a><a href="/r/bestof/comments/7c8jof/">thread</a><a href="/search/">search</a><a href="/about/">about</a></nav>
+      </div>
+      <div id="status">
+        <p id="status-text"></p><img id="status-image" src="/static/images/loading.gif">
+      </div>
+    </header> */}
--- a/src/js/index.js
+++ b/src/js/index.js
@ -0,0 +1,3 @@
+import '../sass/main.sass'
+
+
--- a/src/sass/about.sass
+++ b/src/sass/about.sass
--- a/src/sass/comment.sass
+++ b/src/sass/comment.sass
--- a/src/sass/header.sass
+++ b/src/sass/header.sass
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
--- a/src/sass/post.sass
+++ b/src/sass/post.sass
--- a/src/sass/search.sass
+++ b/src/sass/search.sass
--- a/src/sass/subreddit.sass
+++ b/src/sass/subreddit.sass
--- a/src/sass/thread.sass
+++ b/src/sass/thread.sass
--- a/static/css/style.css
+++ b/static/css/style.css
@ -1,399 +0,0 @@
-html, body {
-  margin: 0;
-  padding: 0;
-  background-color: #262626;
-  font-family: verdana, arial, helvetica, sans-serif;
-}
-
-#main {
-  margin: 15px;
-}
-
-a {
-  color: #8cb3d9;
-}
-
-a:link, a:visited, a:active {
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-.author {
-  color: #6a98af;
-}
-
-header {
-  background-color: #ca302c;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-}
-header #header a {
-  color: #fff;
-}
-header #header h1 {
-  margin: 7px 0;
-  text-align: center;
-}
-header #header h1 a {
-  transition: color .3s;
-}
-header #header h1 a:hover {
-  text-decoration: none;
-  color: #ff8b88;
-}
-header #header nav a {
-  margin: 0 7px;
-  font-size: 20px;
-}
-header #status {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-header #status #status-text {
-  color: #fff;
-  margin: 0 20px 0 0;
-}
-header #status #status-image {
-  height: 64px;
-  width: 64px;
-  border-radius: 32px;
-}
-
-#main-box {
-  margin: 0 auto;
-  padding: 20px;
-  border-radius: 5px;
-  color: #fff;
-  word-wrap: break-word;
-  max-width: 800px;
-  background-color: #161616;
-}
-#main-box .removed {
-  color: #ca302c;
-}
-#main-box .deleted {
-  color: #00007d;
-}
-#main-box h2 {
-  margin: 20px 0px 12px;
-}
-#main-box h2.about {
-  margin: 0;
-  color: #ca302c;
-}
-#main-box h2.todo {
-  color: #239f2b;
-}
-#main-box h2.contact {
-  color: #1b767a;
-}
-#main-box ul {
-  padding-left: 30px;
-  margin: 0;
-}
-#main-box .bookmarklet {
-  background: #ca302c;
-  color: #fff;
-  padding: 9px;
-  font-size: large;
-  font-weight: bold;
-  display: inline-block;
-  border-radius: 5px;
-}
-
-.comment {
-  margin: 0 0 8px 0;
-  padding: 5px 8px 5px 30px;
-  border: 1px solid #333;
-  border-radius: 3px;
-  color: #ddd;
-  font-size: 14px;
-}
-.comment .comment-head {
-  font-size: 10px;
-}
-.comment .comment-author {
-  font-weight: bold;
-}
-.comment .comment-score {
-  color: #b4b4b4;
-  font-weight: bold;
-}
-.comment .comment-time {
-  color: #828282;
-}
-.comment .comment-body {
-  max-width: 840px;
-  line-height: 20px;
-}
-.comment .comment-body p {
-  margin: 5px 0;
-  line-height: 20px;
-}
-.comment .comment-body a:hover {
-  text-decoration: none;
-}
-.comment .comment-links {
-  margin-bottom: 6px;
-}
-.comment .comment-links a {
-  color: #828282;
-  font-weight: bold;
-  font-size: 10px;
-  margin-right: 4px;
-}
-
-.comment-removed {
-  background-color: #840c09;
-}
-
-.comment-deleted {
-  background-color: #00007d;
-}
-
-.comment-odd {
-  background-color: #121212;
-}
-
-.comment-even {
-  background-color: #161616;
-}
-
-#comment-info {
-  color: #ca302c;
-  margin-top: 10px;
-  font-weight: bold;
-  padding-bottom: 5px;
-  border-bottom: 1px dotted #808080;
-  font-size: 16px;
-}
-
-#comment-sort {
-  color: #808080;
-  font-size: 12px;
-  margin: 5px 0 10px;
-}
-
-.thread {
-  display: flex;
-  flex-grow: 1;
-  margin-bottom: 7px;
-}
-.thread .thumbnail {
-  width: 70px;
-  margin-right: 3px;
-}
-.thread .thumbnail img {
-  border-radius: 1px;
-}
-.thread .thumbnail-default {
-  background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");
-  background-position: 0px -1099px;
-  background-repeat: no-repeat;
-  height: 50px;
-}
-.thread .thumbnail-self {
-  background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");
-  background-position: 0px -1267px;
-  background-repeat: no-repeat;
-  height: 50px;
-}
-.thread .thumbnail-image {
-  background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");
-  background-position: 0px -1043px;
-  background-repeat: no-repeat;
-  height: 50px;
-}
-.thread .thumbnail-nsfw {
-  background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");
-  background-position: 0px -1155px;
-  background-repeat: no-repeat;
-  height: 50px;
-}
-.thread .thread-score-box {
-  margin: 0 7px;
-  width: 43px;
-}
-.thread .vote {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==);
-  background-repeat: no-repeat;
-  margin-left: auto;
-  margin-right: auto;
-  width: 15px;
-  height: 14px;
-  cursor: pointer;
-}
-.thread .upvote {
-  background-position: -15px 0px;
-  margin-top: 2px;
-}
-.thread .downvote {
-  background-position: -15px -14px;
-  margin-top: 2px;
-}
-.thread .thread-score {
-  color: #646464;
-  font-size: 13px;
-  font-weight: bold;
-  text-align: center;
-}
-.thread .thread-content {
-  flex: 1;
-  float: left;
-  margin-left: 3px;
-}
-.thread .link-flair {
-  display: inline-block;
-  color: #c8c8c8;
-  background-color: #404040;
-  margin-right: 5px;
-  border: 1px solid #4d4d4d;
-  border-radius: 2px;
-  padding: 0 2px;
-  font-size: 10px;
-}
-.thread .thread-title {
-  color: #a6a6a6;
-  margin-right: 5px;
-}
-.thread .thread-title:hover {
-  text-decoration: none;
-}
-.thread .domain {
-  color: #888;
-  font-size: 10px;
-}
-.thread .thread-selftext {
-  border: 1px solid #666;
-  border-radius: 7px;
-  margin: 5px 0 7px;
-  padding: 5px 10px;
-  max-width: 840px;
-  color: #ddd;
-  font-size: 14px;
-}
-.thread .thread-selftext p {
-  margin: 5px 0;
-  line-height: 20px;
-}
-.thread .thread-selftext a:hover {
-  text-decoration: none;
-}
-.thread .thread-selftext p:first-child {
-  margin-top: 0px;
-}
-.thread .thread-selftext p:last-child {
-  margin-bottom: 0px;
-}
-.thread .thread-image {
-  max-width: 768px;
-  max-height: 768px;
-}
-.thread .thread-info {
-  color: #828282;
-  font-size: 10px;
-  margin-top: 2px;
-}
-.thread .total-comments {
-  color: #828282;
-  font-size: 10px;
-  margin: 4px 0;
-}
-.thread .grey-link, .thread .grey-link:link, .thread .grey-link:visited, .thread .grey-link:hover, .thread .grey-link:focus, .thread .grey-link:active {
-  color: #828282;
-  margin-right: 4px;
-}
-
-.post-rank {
-  min-width: 20px;
-  color: #505050;
-  font-size: 16px;
-  text-align: right;
-  margin: 14px 4px 0 0;
-}
-
-.subreddit-info {
-  border-bottom: 1px dotted gray;
-  padding: 5px 10px;
-  color: #ccc;
-  font-size: 14px;
-  margin-bottom: 5px;
-}
-.subreddit-info select {
-  background: #262626;
-  color: #808080;
-  font-size: 14px;
-  font-weight: bold;
-  text-decoration: underline;
-  border: 0;
-}
-
-#pagination {
-  border-top: 1px dotted gray;
-  padding: 5px 10px;
-  color: #ccc;
-  font-size: 16px;
-}
-#pagination span, #pagination a {
-  margin: 5px;
-}
-
-.search-box {
-  font-size: 16px;
-}
-.search-box .search-row {
-  padding: 10px 6px 11px;
-  border-bottom: 1px dotted #ccc;
-  min-height: 26px;
-}
-.search-box .search-left {
-  font-weight: bold;
-  display: inline-block;
-  width: 190px;
-  vertical-align: middle;
-}
-.search-box input[type="text"] {
-  font-size: 17px;
-  width: 400px;
-  border-radius: 2px;
-  padding-left: 3px;
-}
-.search-box .radioButton {
-  background: #8a8888;
-  color: black;
-  border-radius: 3px;
-  display: inline-block;
-  margin-right: 9px;
-  transition: all 0.3s;
-}
-.search-box .radioButton label {
-  padding: 7px 10px 7px 3px;
-  display: inline-block;
-}
-.search-box .radioButton input {
-  margin: 0 0 0 5px;
-  height: 35px;
-  display: inline-block;
-  vertical-align: top;
-}
-.search-box select {
-  padding: 3px;
-  font-size: 15px;
-  border-radius: 2px;
-}
-.search-box input[type="submit"] {
-  margin: 16px auto 0px;
-  display: block;
-  padding: 9px 16px;
-  font-size: 18px;
-  background: #239f2b;
-  border: 0;
-  border-radius: 2px;
-  color: white;
-}
--- a/static/js/libraries/lodash.templates.min.js
+++ b/static/js/libraries/lodash.templates.min.js
@ -1,17 +0,0 @@
-/**
- * @license
- * Lodash (Custom Build) lodash.com/license | Underscore.js  underscorejs.org/LICENSE
- * Build: `lodash template="jst/*.jst" -p -o static/js/libraries/lodash.templates.min.js`
- */
-;(function(){var e=typeof self=="object"&&self&&self.Object===Object&&self,e=typeof global=="object"&&global&&global.Object===Object&&global||e||Function("return this")(),f=typeof exports=="object"&&exports&&!exports.nodeType&&exports,h=f&&typeof module=="object"&&module&&!module.nodeType&&module,c=e._||{},d={comment:function(a){a||(a={});var b,g="";with(a){a=c.has(comment,"removed");var d=c.has(comment,"deleted"),e="comment comment-"+(a?"removed":d?"deleted":0==comment.depth%2?"even":"odd"),g=g+('\n\n<div id="'+(null==(b=id)?"":b)+'" class="'+(null==(b=e)?"":b)+'">\n\t<div class="comment-head">\n\t\t<a href="javascript:void(0)" class="author">[–]</a>\n\t\t<a href="https://www.reddit.com/user/'+(null==(b=comment.author)?"":b)+'" class="author comment-author">\n\t\t\t'+(null==(b=comment.author+(d?" (deleted by user)":""))?"":b)+'\n\t\t</a>\n\t\t<span class="comment-score">'+(null==(b=Format.prettyScore(comment.score))?"":b)+" point"+(null==(b=1==comment.score?"":"s")?"":b)+'</span>\n\t\t<span class="comment-time">'+(null==(b=Format.prettyDate(comment.created_utc))?"":b)+'</span>\n\t</div>\n\t<div class="comment-body">\n\t\t'+(null==(b="[removed]"===comment.body&&a?"<p>[likely removed by automoderator]</p>":Format.parse(comment.body))?"":b)+'\n\t</div>\n\t<div class="comment-links">\n\t\t<a href="/r/'+(null==(b=Reddit.subreddit)?"":b)+"/comments/"+(null==(b=Reddit.threadID)?"":b)+"/_/"+(null==(b=id)?"":b)+'/">permalink</a>\n\t\t<a href="https://www.reddit.com/r/'+(null==(b=Reddit.subreddit)?"":b)+"/comments/"+(null==(b=Reddit.threadID)?"":b)+"/_/"+(null==(b=id)?"":b)+'/">reddit</a>\n\t</div>\n</div>\n\n');
-}return g},elasticCommentIDs:function(a){a||(a={});var b;with(a)a=""+('{\n\t"query":{\n\t\t"ids":{\n\t\t\t"values":['+(null==(b=ids.join())?"":b)+']\n\t\t}\n\t},\n\t"_source":[\n\t\t"author","body","created_utc","parent_id","score"\n\t]\n}');return a},elasticComments:function(a){a||(a={});var b;with(a)a=""+('{\n\t"query":{\n\t\t"term":{\n\t\t\t"link_id":'+(null==(b=id)?"":b)+'\n\t\t}\n\t},\n\t"_source":[\n\t\t"author","body","created_utc","parent_id","score"\n\t],\n\t"size":50\n}');return a},elasticSubreddit:function(a){
-a||(a={});var b;with(a)a='{\n\t"query":{\n\t\t"bool":{\n\t\t\t"must":[\n\t\t\t\t',"all"!==c.toLower(subreddit)&&(a+='\n\t\t\t\t{\n\t\t\t\t\t"term":{\n\t\t\t\t\t\t"subreddit":"'+(null==(b=c.toLower(subreddit))?"":b)+'"\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t'),a+='\n\t\t\t\t{\n\t\t\t\t\t"range":{\n\t\t\t\t\t\t"created_utc":{\n\t\t\t\t\t\t\t"gt":'+(null==(b=time)?"":b)+'\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n\t"_source":[\n\t\t"author","url","subreddit","link_flair_text","score","title","created_utc","num_comments","domain","permalink","id","thumbnail","thumbnail_height","thumbnail_width"\n\t],\n\t"sort":[\n\t\t{"score":"desc"}\n\t],\n\t"from":'+(null==(b=(page-1)*postPerPage)?"":b)+',\n\t"size":'+(null==(b=postPerPage)?"":b)+"\n}";
-return a},elasticThread:function(a){a||(a={});var b;with(a)a=""+('{\n\t"query":{\n\t\t"term":{\n\t\t\t"id":"'+(null==(b=id)?"":b)+'"\n\t\t}\n\t},\n\t"_source":[\n\t\t"author","created_utc","domain","link_flair_text","num_comments","url","subreddit","score","title","selftext","permalink","thumbnail","thumbnail_height","thumbnail_width"\n\t],\n\t"size":1\n}');return a},search:function(a){with(a||(a={}),a);return'\n\tvar radioInput = function(name, displayNames, values) {\n\t\tvar inputs = "";\n\t\t\n\t\tfor(var i = 0, len = displayNames.length; i < len; i++){\n\t\t\tinputs += \'<span class="radioButton"\'+ (Vars.lookup[name] === values[i] ? \' style="background: #239f2b; color:#fff"\':\'\')+\'>\';\n\t\t\tinputs += \'<input type="radio" id="\'+name+i+\'" name="\'+name+\'" onchange="CSS.radio(this)"\';\n\t\t\tinputs += \'value="\'+values[i]+\'" \'+(Vars.lookup[name] === values[i] ? \' checked "\':\'\')+\' >\';\n\t\t\tinputs += \'<label for="\'+name+i+\'">\'+displayNames[i]+\'</label></span>\';\n\t\t}\n\t\treturn inputs;\n\t};\n\n\tvar textInput = function(name){\n\t\treturn \'<input type="text" name="\'+name+\'" id="\'+name+\'" value="\'+Vars.get(name)+\'">\'; \n\t};\n\n\tvar label = function(name, display) {\n\t\treturn \'<label for="\'+name+\'">\'+display+\': </label>\';\n\t};\n\n\tvar inputRow = function(text, input) {\n\t\treturn \'<div class="search-row"><span class="search-left">\'+text+\'</span><span>\'+input+"</span></div>";\n\t};\n\n\tvar selectTime = function() {\n\t\tvar values = ["hour", "12hour", "day", "week", "month", "6month", "year", "all"];\n\t\tvar display = ["past hour", "past 12 hours", "past day", "past week", "past month", "past 6 months", "past year", "all time"];\n\t\tvar html = \'<select name="time" id="time">\';\n\n\t\tfor(var i = 0, len = values.length; i < len; i++) {\n\t\t\thtml += \'<option value="\'+values[i]+\'"\' + ((Vars.get("time") === values[i]) ? " selected" : \'\')+\'>\'+display[i]+\'</option>\';\n\t\t}\n\n\t\treturn html + "</select>";\n\t};\n\n\tvar select = function(name, display, values){\n\t\tvar html = \'<select name="\'+name+\'" id="\'+name+\'">\';\n\t\t\n\t\tfor(var i = 0, len = values.length; i < len; i++) {\n\t\t\thtml += \'<option value="\'+values[i]+\'"\' + ((Vars.get(name) === values[i]) ? " selected" : \'\')+\'>\'+display[i]+\'</option>\';\n\t\t}\n\n\t\treturn html + "</select>";\n\t};\n\nreturn {\n\tcreateSearch: function(){\n\t\tvar searchBox = document.createElement("div");\n\t\tsearchBox.id = "main-box";\n\t\tsearchBox.className = "search-box";\n\t/*\n\t\tComments:\n\t\ttext\t\t\t(body)\t\tstring\n\t\ttitle \t\t(title)\t\tstring\n\t\tsubreddit\t\t(subreddit)\tstring\n\t\tauthor\t\t(author)\t\tstring\n\t\tover_18\t\t(over_18)\t\tsfw,nsfw,both *\n\t\tlocked\t\t(locked)\t\tbool *\n\t\tbetween\t\t(after/before)\t"date"\n\t\tsort \t\t(sort)\t\tasc,desc\n\t*/\n\t\tvar html = inputRow(\'Im looking for: \', radioInput("thread", ["Thread","Comment"], ["true", "false"]));\t\t\n\t\thtml += inputRow(label("text", "Text"), textInput("text"));\n\t\thtml += inputRow(label("title","Title"), textInput("title"));\n\t\thtml += inputRow(label("subreddit", "Subreddit"), textInput("subreddit"));\n\t\thtml += inputRow(label("author", "Author"), textInput("author"));\n\t\thtml += inputRow("Over 18: ", radioInput("over_18", ["Both","NSFW","SFW"], ["both","nsfw","sfw"]));\n\t\thtml += inputRow("Locked: ", radioInput("locked", ["Both","True", "False"], ["both","true","false"]));\n\t\thtml += inputRow("Removed: ", select("removed", ["Removed and non-removed", "Only removed", "Only deleted"], ["all", "removed", "deleted"]));\n\t\thtml += inputRow("From:", selectTime());\n\t\thtml += inputRow("Sort: ", select("sort", ["Highest score","Lowest score","Newest","Oldest"], ["score_desc","score_asc","time_desc","time_asc"]));\n\t\thtml += \'<input type="button" value="\'+(showAdvanced?\'Hide\':\'Show\')+\' advanced">\';\n\t\thtml += \'<input type="submit" value="Search">\';\n\t\tsearchBox.innerHTML = html;\n\t\n\t\tmainDiv.appendChild(searchBox);';
-},subredditInfo:function(a){a||(a={});var b;with(a)a=""+('<div class="subreddit-info">\n\ttop post of <a href="https://www.reddit.com/r/'+(null==(b=subreddit)?"":b)+'">/r/'+(null==(b=subreddit)?"":b)+'</a> from:\n\t<select onchange="Vars.reload(this)">\n\t\t<option value="hour"'),"hour"===time&&(a+=" selected"),a+='>past hour</option>\n\t\t<option value="12hour"',"12hour"===time&&(a+=" selected"),a+='>past 12 hours</option>\n\t\t<option value="day"',"day"===time&&(a+=" selected"),a+='>past day</option>\n\t\t<option value="week"',
-"week"===time&&(a+=" selected"),a+='>past week</option>\n\t\t<option value="month"',"month"===time&&(a+=" selected"),a+='>past month</option>\n\t\t<option value="6month"',"6month"===time&&(a+=" selected"),a+='>past 6 months</option>\n\t\t<option value="year"',"year"===time&&(a+=" selected"),a+='>past year</option>\n\t\t<option value="all"',"all"===time&&(a+=" selected");return a+">all time</option>\t\t\n\t</select>\t\t\t\t\n</div>"},subredditPagination:function(a){a||(a={});var b;with(a){a='<div id="pagination">\n\tPage: \n\t',
-1<start&&(a+='\n\t\t<a href="'+(null==(b=urlBase+1)?"":b)+'">1</a> ... \n\t');for(var c=start;c<=end;c++)a=currentPage===c?a+("\n\t\t\t<span>"+(null==(b=c)?"":b)+"</span>\n\t"):a+('\n\t\t\t<a href="'+(null==(b=urlBase+c)?"":b)+'">'+(null==(b=c)?"":b)+"</a>\n\t")}return a+"\n</div>"},thread:function(a){a||(a={});var b;with(a){a='<div class="thread">\n',typeof postNr!="undefined"&&(a+='\n\t<span class="post-rank">'+(null==(b=postNr)?"":b)+"</span>\n"),a+='\n\t<div class="thread-score-box">\n\t\t<div class="vote upvote"></div>\n\t\t<div class="thread-score">'+(null==(b=Format.prettyScore(thread.score))?"":b)+'</div>\n\t\t<div class="vote downvote"></div>\n\t</div>\n';
-var d=c.replace(thread.url,"https://www.reddit.com","https://www.removeddit.com");if(c.includes(["self","default","image","nsfw"],thread.thumbnail))a+='\n\t\t<a href="'+(null==(b=d)?"":b)+'" class="thumbnail thumbnail-'+(null==(b=thread.thumbnail)?"":b)+'"></a>\n';else{var e=.5*c.defaultTo(thread.thumbnail_width,140),f=.5*c.defaultTo(thread.thumbnail_height,140);a+='\t<a href="'+(null==(b=d)?"":b)+'">\n\t\t\t<img class="thumbnail" src="'+(null==(b=thread.thumbnail)?"":b)+'" width="'+(null==(b=e)?"":b)+'" height="'+(null==(b=f)?"":b)+'">\n\t\t</a>\n';
-}a+='\n\t<div class="thread-content">\n\n\t\t<a class="thread-title" href="'+(null==(b=d)?"":b)+'">'+(null==(b=thread.title)?"":b)+"</a>\n",c.isNil(thread.link_flair_text)||(a+='\n\t\t<span class="link-flair">'+(null==(b=thread.link_flair_text)?"":b)+"</span>\n"),a+='\t\n\t\t<span class="domain">('+(null==(b=thread.domain)?"":b)+')</span>\n\t\t<div class="thread-info">\n\t\t\tsubmitted <span class="thread-time">'+(null==(b=Format.prettyDate(thread.created_utc))?"":b)+'</span> by\n\t\t\t<a class="thread-author author" href="https://www.reddit.com/user/'+(null==(b=thread.author)?"":b)+'">'+(null==(b=thread.author)?"":b)+"</a>\n\t\t",
-Reddit.isAll&&(a+='\n\t\t\tto <a class="subreddit-link author" href="/r/'+(null==(b=thread.subreddit)?"":b)+'">/r/'+(null==(b=thread.subreddit)?"":b)+"</a>\n\t\t"),a+='\t\t\n\t\t</div>\n\t\t<div class="total-comments">\n\t\t\t<a class="grey-link" href="'+(null==(b=thread.permalink)?"":b)+'">\n\t\t\t\t<b>'+(null==(b=thread.num_comments)?"":b)+' comments</b>\n\t\t\t</a>\n\t\t\t<a class="grey-link" href="https://www.reddit.com'+(null==(b=thread.permalink)?"":b)+'">\n\t\t\t\t<b>reddit</b>\n\t\t\t</a>\n\t\t</div>\n\t</div>\n</div>';
-}return a},threadInfo:function(a){a||(a={});var b;with(a)a=""+('<div id="comment-info">\n\tremoved comments: '+(null==(b=removedComments)?"":b)+"/"+(null==(b=totalComments)?"":b)+" ("+(null==(b=(100*removedComments/totalComments).toFixed(1))?"":b)+'%)\n</div>\n<div id="comment-sort">sorted by: top</div>');return a}};typeof define=="function"&&typeof define.amd=="object"&&define.amd? define(["lodash"],function(t){c=t,t.templates=t.extend(t.templates||{},d)}):h?(c=require("lodash"),(h.exports=d).templates=d,
-f.templates=d):c&&(c.templates=c.extend(c.templates||{},d))}).call(this);
--- a/subreddit.html
+++ b/subreddit.html
@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Removeddit</title>
-    <meta charset="utf-8">
-    <meta type="description" content="Display removed and deleted comments from Reddit">
-    <meta type="author" content="Jesper Wrang">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="/static/css/style.css" rel="stylesheet">
-    <link href="/static/images/favicon.ico" rel="shotcut icon">
-  </head>
-  <body>
-    <header>
-      <div id="header">
-        <h1><a href="/">Removeddit</a></h1>
-        <nav><a href="/r/all">subreddit</a><a href="/r/bestof/comments/7c8jof/">thread</a><a href="/search/">search</a><a href="/about/">about</a></nav>
-      </div>
-      <div id="status">
-        <p id="status-text"></p><img id="status-image" src="/static/images/loading.gif">
-      </div>
-    </header>
-    <div id="main">
-    </div>
-    <script src="/static/js/libraries/snuownd.js"></script>
-    <script src="/static/js/libraries/lodash.custom.min.js"></script>
-    <script src="/static/js/libraries/lodash.templates.min.js"></script>
-    <script src="/static/js/polyfills/promise.min.js"></script>
-    <script src="/static/js/polyfills/fetch.js"></script>
-    <script src="/static/js/functions.js"></script>
-    <script src="/static/js/subreddit.js"></script>
-  </body>
-</html>
--- a/thread.html
+++ b/thread.html
@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Removeddit</title>
-    <meta charset="utf-8">
-    <meta type="description" content="Display removed and deleted comments from Reddit">
-    <meta type="author" content="Jesper Wrang">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="/static/css/style.css" rel="stylesheet">
-    <link href="/static/images/favicon.ico" rel="shotcut icon">
-  </head>
-  <body>
-    <header>
-      <div id="header">
-        <h1><a href="/">Removeddit</a></h1>
-        <nav><a href="/r/all">subreddit</a><a href="/r/bestof/comments/7c8jof/">thread</a><a href="/search/">search</a><a href="/about/">about</a></nav>
-      </div>
-      <div id="status">
-        <p id="status-text"></p><img id="status-image" src="/static/images/loading.gif">
-      </div>
-    </header>
-    <div id="main">
-    </div>
-    <script src="/static/js/libraries/snuownd.js"></script>
-    <script src="/static/js/libraries/lodash.custom.min.js"></script>
-    <script src="/static/js/libraries/lodash.templates.min.js"></script>
-    <script src="/static/js/polyfills/promise.min.js"></script>
-    <script src="/static/js/polyfills/fetch.js"></script>
-    <script src="/static/js/functions.js"></script>
-    <script src="/static/js/thread.js"></script>
-  </body>
-</html>
--- a/webpack.common.js
+++ b/webpack.common.js
@ -2,20 +2,27 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const extractSass = new ExtractTextPlugin({
+	filename: 'bundle.[contenthash].css',
+});
+

 module.exports = {
 	entry: [
-		'./src/js/index.js'
+		'@babel/polyfill',
+		'whatwg-fetch',
+		'./src/js/index.js',
 	],
 	output: {
 		path: path.resolve(__dirname, 'dist'),
-		filename: 'bundle.js',	
-		publicPath: '/'	
+		filename: 'bundle.[chunkhash].js',	
+		publicPath: './'	
 	},
 	resolve: {
 		modules: [
 			path.resolve('./src/js'),
-			path.resolve('./src'),
 			path.resolve('./node_modules')
 		]
 	},
@ -23,20 +30,31 @@ module.exports = {
 		loaders: [
 			{
 				test: /\.js$/,
-				loader: 'babel-loader',
 				exclude: /node_modules/,
-				query: {
-					presets: ["@babel/preset-react"],
-				}
+				use: [
+					{
+						loader: 'babel-loader',
+						options: {
+							cacheDirectory: true
+						}
+					}
+				]
 			},			
 			{
 				test: /\.html$/,
 				loader: 'html-loader'
-			},			
+			},
+			{
+				test: /\.sass$/,
+				loader: extractSass.extract({
+					use: ['css-loader','sass-loader']
+				})
+			}	
 		]
 	},
 	plugins: [
 		new CleanWebpackPlugin(['dist']),
+		extractSass,
 		new HtmlWebpackPlugin({
 			template: 'src/index.html'
 		}),