From: self <self@awful.systems>
Date: Mon, 31 Jul 2023 22:37:59 +0000 (-0700)
Subject: On branch main
X-Git-Url: http://these/git/%7B%60%24%7BwebArchiveUrl%7D/static/git-favicon.png?a=commitdiff_plain;h=6f0dc5d89caa2b6600b1a174dba81f5522fd4109;p=sneer-archive-site.git

On branch main
---

6f0dc5d89caa2b6600b1a174dba81f5522fd4109
diff --git a/.envrc b/.envrc
new file mode 100644
index 0000000..a4f3544
--- /dev/null
+++ b/.envrc
@@ -0,0 +1,7 @@
+if ! has nix_direnv_version || ! nix_direnv_version 2.3.0; then
+    source_url "https://raw.githubusercontent.com/nix-community/nix-direnv/2.3.0/direnvrc" "sha256-Dmd+j63L84wuzgyjITIfSxSD57Tx7v51DMxVZOsiUD8="
+fi
+use flake
+
+source_env_if_exists .envrc.private
+watch_file template.nix
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..44fede9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+.DS_Store
+.idea
+*.log
+tmp/
+
+result
+.direnv
+.envrc.private
diff --git a/Caddyfile b/Caddyfile
new file mode 100644
index 0000000..9d7c673
--- /dev/null
+++ b/Caddyfile
@@ -0,0 +1,13 @@
+{
+	auto_https off
+	log {
+		level ERROR
+	}
+}
+
+http://localhost:1111
+
+root * result/
+try_files {path}.html
+header Cache-Control no-cache, must-revalidate, no-store
+file_server
diff --git a/flake.lock b/flake.lock
new file mode 100644
index 0000000..055b5b7
--- /dev/null
+++ b/flake.lock
@@ -0,0 +1,126 @@
+{
+  "nodes": {
+    "archive-data": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      },
+      "locked": {
+        "lastModified": 1690842193,
+        "narHash": "sha256-XJlNRnOkkdBSo0T9/aSAIzuRBCX9D+lWR06JutzgRE0=",
+        "ref": "refs/heads/main",
+        "rev": "262b488c58c37aa5428a465e1847609656c94236",
+        "revCount": 1,
+        "type": "git",
+        "url": "git://these.awful.systems/sneer-archive-data.git"
+      },
+      "original": {
+        "type": "git",
+        "url": "git://these.awful.systems/sneer-archive-data.git"
+      }
+    },
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1689068808,
+        "narHash": "sha256-6ixXo3wt24N/melDWjq70UuHQLxGV8jZvooRanIHXw0=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "919d646de7be200f3bf08cb76ae1f09402b6f9b4",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flake-utils_2": {
+      "inputs": {
+        "systems": "systems_2"
+      },
+      "locked": {
+        "lastModified": 1687709756,
+        "narHash": "sha256-Y5wKlQSkgEK2weWdOu4J3riRd+kV/VCgHsqLNTTWQ/0=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "dbabf0ca0c0c4bce6ea5eaf65af5cb694d2082c7",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1689078114,
+        "narHash": "sha256-osG8BrX5RpKJ7wH+vI6auOU+ctvNOblT4XXCgknK47c=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "b6cc7ff8fee93789bc871a267ab876c3fca042cb",
+        "type": "github"
+      },
+      "original": {
+        "id": "nixpkgs",
+        "type": "indirect"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1688556768,
+        "narHash": "sha256-mhd6g0iJGjEfOr3+6mZZOclUveeNr64OwxdbNtLc8mY=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "27bd67e55fe09f9d68c77ff151c3e44c4f81f7de",
+        "type": "github"
+      },
+      "original": {
+        "id": "nixpkgs",
+        "type": "indirect"
+      }
+    },
+    "root": {
+      "inputs": {
+        "archive-data": "archive-data",
+        "flake-utils": "flake-utils_2",
+        "nixpkgs": "nixpkgs_2"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "systems_2": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}
diff --git a/flake.nix b/flake.nix
new file mode 100644
index 0000000..87dcdd0
--- /dev/null
+++ b/flake.nix
@@ -0,0 +1,229 @@
+{
+  description = "A static site hosting the r/SneerClub archive";
+
+  inputs = {
+    flake-utils.url = "github:numtide/flake-utils";
+    archive-data.url = "git://these.awful.systems/sneer-archive-data.git";
+  };
+
+  outputs = { self, nixpkgs, flake-utils, archive-data }:
+    flake-utils.lib.eachDefaultSystem (system:
+      let pkgs = nixpkgs.legacyPackages."${system}";
+      in {
+        lib = pkgs.callPackage ./template.nix { };
+
+        packages.site = let
+          threads = (pkgs.lib.trivial.importJSON
+            "${archive-data.packages."${system}".default}/threads-newest.json");
+          bestest = (pkgs.lib.trivial.importJSON "${
+              archive-data.packages."${system}".default
+            }/submissions-bestest.json");
+          longest = (pkgs.lib.trivial.importJSON "${
+              archive-data.packages."${system}".default
+            }/submissions-longest.json");
+          newestPageFn = page: {
+            prev = if page - 1 == 0 then
+              "/archives"
+            else
+              "/archives/pages/${builtins.toString page}";
+            next = "/archives/pages/${builtins.toString (page + 2)}";
+            jump = n:
+              if n == 0 then
+                "/archives"
+              else
+                "/archives/pages/${builtins.toString (n + 1)}";
+          };
+          bestestPageFn = page: {
+            prev = if page - 1 == 0 then
+              "/archives/bestest"
+            else
+              "/archives/bestest/${builtins.toString page}";
+            next = "/archives/bestest/${builtins.toString (page + 2)}";
+            jump = n:
+              if n == 0 then
+                "/archives/bestest"
+              else
+                "/archives/bestest/${builtins.toString (n + 1)}";
+          };
+          longestPageFn = page: {
+            prev = if page - 1 == 0 then
+              "/archives/longest"
+            else
+              "/archives/longest/${builtins.toString page}";
+            next = "/archives/longest/${builtins.toString (page + 2)}";
+            jump = n:
+              if n == 0 then
+                "/archives/longest"
+              else
+                "/archives/longest/${builtins.toString (n + 1)}";
+          };
+          siteName = "r/SneerClub archives";
+          numPerPage = 25;
+          templates =
+            self.lib."${system}".mkTemplates "sneer-archive" ./templates [
+              "base.html"
+              "thread.html"
+              "comment.html"
+              "submission-page.html"
+              "pagination.html"
+              "topbar.html"
+              "search.html"
+            ];
+          baseWithSort = title: sort: content:
+            templates "base.html" {
+              inherit title sort content;
+              topbarTpl = templates "topbar.html";
+            };
+          base = title: content: baseWithSort title null content;
+          paginationTpl = templates "pagination.html";
+          submissionTpl = templates "submission-page.html";
+          topbarTpl = templates "topbar.html";
+          newestPages = builtins.map (n: {
+            inherit n;
+            content = baseWithSort
+              "${siteName} &mdash; page ${builtins.toString (n + 1)}" "newest"
+              (submissionTpl {
+                inherit threads numPerPage topbarTpl paginationTpl;
+                title = "${siteName} &mdash; page ${builtins.toString (n + 1)}";
+                page = n;
+                pageFn = newestPageFn n;
+              });
+          }) (pkgs.lib.lists.range 1
+            (builtins.floor (builtins.length threads / numPerPage)));
+          bestestPages = builtins.map (n: {
+            inherit n;
+            content = baseWithSort
+              "${siteName} &mdash; page ${builtins.toString (n + 1)}" "bestest"
+              (submissionTpl {
+                inherit numPerPage topbarTpl paginationTpl;
+                threads = bestest;
+                title = "${siteName} &mdash; page ${builtins.toString (n + 1)}";
+                page = n;
+                pageFn = bestestPageFn n;
+              });
+          }) (pkgs.lib.lists.range 1
+            (builtins.floor (builtins.length bestest / numPerPage)));
+          longestPages = builtins.map (n: {
+            inherit n;
+            content = baseWithSort
+              "${siteName} &mdash; page ${builtins.toString (n + 1)}" "longest"
+              (submissionTpl {
+                inherit numPerPage topbarTpl paginationTpl;
+                threads = longest;
+                title = "${siteName} &mdash; page ${builtins.toString (n + 1)}";
+                page = n;
+                pageFn = longestPageFn n;
+              });
+          }) (pkgs.lib.lists.range 1
+            (builtins.floor (builtins.length longest / numPerPage)));
+          threadPages = builtins.map (thread: {
+            id = thread.id;
+            content = base "${thread.title} &mdash; ${siteName}"
+              (templates "thread.html" {
+                inherit thread topbarTpl;
+                commentTpl = templates "comment.html";
+              });
+          }) threads;
+          searchResults = base "Search results &mdash; ${siteName}"
+            (templates "search.html" { });
+        in pkgs.runCommand "generate-site" { } ''
+          mkdir -p $out/archives
+          mkdir -p $out/archives/thread
+          mkdir -p $out/archives/pages
+          mkdir -p $out/archives/bestest
+          mkdir -p $out/archives/longest
+
+          cat <<'__EOF__' > $out/archives/index.html
+          ${baseWithSort siteName "newest" (submissionTpl {
+            inherit threads numPerPage topbarTpl paginationTpl;
+            title = siteName;
+            page = 0;
+            pageFn = newestPageFn 0;
+          })}
+          __EOF__
+          ${builtins.concatStringsSep "\n" (builtins.map (page: ''
+            cat <<'__EOF__' > $out/archives/pages/${
+              builtins.toString (page.n + 1)
+            }.html
+            ${page.content}
+            __EOF__
+          '') newestPages)}
+
+          cat <<'__EOF__' > $out/archives//bestest.html
+          ${baseWithSort siteName "bestest" (submissionTpl {
+            inherit numPerPage topbarTpl paginationTpl;
+            title = siteName;
+            threads = bestest;
+            page = 0;
+            pageFn = bestestPageFn 0;
+          })}
+          __EOF__
+          ${builtins.concatStringsSep "\n" (builtins.map (page: ''
+            cat <<'__EOF__' > $out/archives/bestest/${
+              builtins.toString (page.n + 1)
+            }.html
+            ${page.content}
+            __EOF__
+          '') bestestPages)}
+
+          cat <<'__EOF__' > $out/archives/longest.html
+          ${baseWithSort siteName "longest" (submissionTpl {
+            inherit numPerPage topbarTpl paginationTpl;
+            title = siteName;
+            threads = longest;
+            page = 0;
+            pageFn = longestPageFn 0;
+          })}
+          __EOF__
+          ${builtins.concatStringsSep "\n" (builtins.map (page: ''
+            cat <<'__EOF__' > $out/archives/longest/${
+              builtins.toString (page.n + 1)
+            }.html
+            ${page.content}
+            __EOF__
+          '') longestPages)}
+
+          ${builtins.concatStringsSep "\n" (builtins.map (page: ''
+            cat <<'__EOF__' > $out/archives/thread/${page.id}.html
+            ${page.content}
+            __EOF__
+          '') threadPages)}
+
+          cat <<'__EOF__' > $out/archives/search.html
+          ${searchResults}
+          __EOF__
+
+          cp ${
+            archive-data.packages."${system}".default
+          }/submissions-bestest.json $out/archives/lunr.json
+
+          if [ -n "$(ls -A ${./static} 2>/dev/null)" ]; then cp -R ${
+            ./static
+          }/* $out/archives; fi
+        '';
+
+        packages.serve = let
+        in pkgs.writeShellScriptBin "serve" ''
+          shopt -s globstar
+          while true; do
+                ls -d templates/* static/* **/*.nix flake.lock | ${pkgs.entr}/bin/entr -r -d bash -c "\
+                   /usr/bin/env time -f 'Nix rebuild finished in %es'\
+                   nix build $1 --show-trace && \
+                   ${pkgs.caddy}/bin/caddy run --config ${
+                     ./Caddyfile
+                   } --adapter caddyfile"
+                if [ $? -eq 0 ]; then break; fi
+          done
+        '';
+
+        packages.default = self.packages."${system}".site;
+
+        devShells.default = pkgs.mkShell {
+          buildInputs = [
+            self.packages."${system}".serve
+            pkgs.html-tidy
+            archive-data.packages."${system}".default # cache archive data
+          ];
+        };
+      });
+}
diff --git a/static/elasticlunr.min.js b/static/elasticlunr.min.js
new file mode 100644
index 0000000..94b20dd
--- /dev/null
+++ b/static/elasticlunr.min.js
@@ -0,0 +1,10 @@
+/**
+ * elasticlunr - http://weixsong.github.io
+ * Lightweight full-text search engine in Javascript for browser search and offline search. - 0.9.5
+ *
+ * Copyright (C) 2017 Oliver Nightingale
+ * Copyright (C) 2017 Wei Song
+ * MIT Licensed
+ * @license
+ */
+!function(){function e(e){if(null===e||"object"!=typeof e)return e;var t=e.constructor();for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}var t=function(e){var n=new t.Index;return n.pipeline.add(t.trimmer,t.stopWordFilter,t.stemmer),e&&e.call(n,n),n};t.version="0.9.5",lunr=t,t.utils={},t.utils.warn=function(e){return function(t){e.console&&console.warn&&console.warn(t)}}(this),t.utils.toString=function(e){return void 0===e||null===e?"":e.toString()},t.EventEmitter=function(){this.events={}},t.EventEmitter.prototype.addListener=function(){var e=Array.prototype.slice.call(arguments),t=e.pop(),n=e;if("function"!=typeof t)throw new TypeError("last argument must be a function");n.forEach(function(e){this.hasHandler(e)||(this.events[e]=[]),this.events[e].push(t)},this)},t.EventEmitter.prototype.removeListener=function(e,t){if(this.hasHandler(e)){var n=this.events[e].indexOf(t);-1!==n&&(this.events[e].splice(n,1),0==this.events[e].length&&delete this.events[e])}},t.EventEmitter.prototype.emit=function(e){if(this.hasHandler(e)){var t=Array.prototype.slice.call(arguments,1);this.events[e].forEach(function(e){e.apply(void 0,t)},this)}},t.EventEmitter.prototype.hasHandler=function(e){return e in this.events},t.tokenizer=function(e){if(!arguments.length||null===e||void 0===e)return[];if(Array.isArray(e)){var n=e.filter(function(e){return null===e||void 0===e?!1:!0});n=n.map(function(e){return t.utils.toString(e).toLowerCase()});var i=[];return n.forEach(function(e){var n=e.split(t.tokenizer.seperator);i=i.concat(n)},this),i}return e.toString().trim().toLowerCase().split(t.tokenizer.seperator)},t.tokenizer.defaultSeperator=/[\s\-]+/,t.tokenizer.seperator=t.tokenizer.defaultSeperator,t.tokenizer.setSeperator=function(e){null!==e&&void 0!==e&&"object"==typeof e&&(t.tokenizer.seperator=e)},t.tokenizer.resetSeperator=function(){t.tokenizer.seperator=t.tokenizer.defaultSeperator},t.tokenizer.getSeperator=function(){return t.tokenizer.seperator},t.Pipeline=function(){this._queue=[]},t.Pipeline.registeredFunctions={},t.Pipeline.registerFunction=function(e,n){n in t.Pipeline.registeredFunctions&&t.utils.warn("Overwriting existing registered function: "+n),e.label=n,t.Pipeline.registeredFunctions[n]=e},t.Pipeline.getRegisteredFunction=function(e){return e in t.Pipeline.registeredFunctions!=!0?null:t.Pipeline.registeredFunctions[e]},t.Pipeline.warnIfFunctionNotRegistered=function(e){var n=e.label&&e.label in this.registeredFunctions;n||t.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},t.Pipeline.load=function(e){var n=new t.Pipeline;return e.forEach(function(e){var i=t.Pipeline.getRegisteredFunction(e);if(!i)throw new Error("Cannot load un-registered function: "+e);n.add(i)}),n},t.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach(function(e){t.Pipeline.warnIfFunctionNotRegistered(e),this._queue.push(e)},this)},t.Pipeline.prototype.after=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._queue.indexOf(e);if(-1===i)throw new Error("Cannot find existingFn");this._queue.splice(i+1,0,n)},t.Pipeline.prototype.before=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._queue.indexOf(e);if(-1===i)throw new Error("Cannot find existingFn");this._queue.splice(i,0,n)},t.Pipeline.prototype.remove=function(e){var t=this._queue.indexOf(e);-1!==t&&this._queue.splice(t,1)},t.Pipeline.prototype.run=function(e){for(var t=[],n=e.length,i=this._queue.length,o=0;n>o;o++){for(var r=e[o],s=0;i>s&&(r=this._queue[s](r,o,e),void 0!==r&&null!==r);s++);void 0!==r&&null!==r&&t.push(r)}return t},t.Pipeline.prototype.reset=function(){this._queue=[]},t.Pipeline.prototype.get=function(){return this._queue},t.Pipeline.prototype.toJSON=function(){return this._queue.map(function(e){return t.Pipeline.warnIfFunctionNotRegistered(e),e.label})},t.Index=function(){this._fields=[],this._ref="id",this.pipeline=new t.Pipeline,this.documentStore=new t.DocumentStore,this.index={},this.eventEmitter=new t.EventEmitter,this._idfCache={},this.on("add","remove","update",function(){this._idfCache={}}.bind(this))},t.Index.prototype.on=function(){var e=Array.prototype.slice.call(arguments);return this.eventEmitter.addListener.apply(this.eventEmitter,e)},t.Index.prototype.off=function(e,t){return this.eventEmitter.removeListener(e,t)},t.Index.load=function(e){e.version!==t.version&&t.utils.warn("version mismatch: current "+t.version+" importing "+e.version);var n=new this;n._fields=e.fields,n._ref=e.ref,n.documentStore=t.DocumentStore.load(e.documentStore),n.pipeline=t.Pipeline.load(e.pipeline),n.index={};for(var i in e.index)n.index[i]=t.InvertedIndex.load(e.index[i]);return n},t.Index.prototype.addField=function(e){return this._fields.push(e),this.index[e]=new t.InvertedIndex,this},t.Index.prototype.setRef=function(e){return this._ref=e,this},t.Index.prototype.saveDocument=function(e){return this.documentStore=new t.DocumentStore(e),this},t.Index.prototype.addDoc=function(e,n){if(e){var n=void 0===n?!0:n,i=e[this._ref];this.documentStore.addDoc(i,e),this._fields.forEach(function(n){var o=this.pipeline.run(t.tokenizer(e[n]));this.documentStore.addFieldLength(i,n,o.length);var r={};o.forEach(function(e){e in r?r[e]+=1:r[e]=1},this);for(var s in r){var u=r[s];u=Math.sqrt(u),this.index[n].addToken(s,{ref:i,tf:u})}},this),n&&this.eventEmitter.emit("add",e,this)}},t.Index.prototype.removeDocByRef=function(e){if(e&&this.documentStore.isDocStored()!==!1&&this.documentStore.hasDoc(e)){var t=this.documentStore.getDoc(e);this.removeDoc(t,!1)}},t.Index.prototype.removeDoc=function(e,n){if(e){var n=void 0===n?!0:n,i=e[this._ref];this.documentStore.hasDoc(i)&&(this.documentStore.removeDoc(i),this._fields.forEach(function(n){var o=this.pipeline.run(t.tokenizer(e[n]));o.forEach(function(e){this.index[n].removeToken(e,i)},this)},this),n&&this.eventEmitter.emit("remove",e,this))}},t.Index.prototype.updateDoc=function(e,t){var t=void 0===t?!0:t;this.removeDocByRef(e[this._ref],!1),this.addDoc(e,!1),t&&this.eventEmitter.emit("update",e,this)},t.Index.prototype.idf=function(e,t){var n="@"+t+"/"+e;if(Object.prototype.hasOwnProperty.call(this._idfCache,n))return this._idfCache[n];var i=this.index[t].getDocFreq(e),o=1+Math.log(this.documentStore.length/(i+1));return this._idfCache[n]=o,o},t.Index.prototype.getFields=function(){return this._fields.slice()},t.Index.prototype.search=function(e,n){if(!e)return[];e="string"==typeof e?{any:e}:JSON.parse(JSON.stringify(e));var i=null;null!=n&&(i=JSON.stringify(n));for(var o=new t.Configuration(i,this.getFields()).get(),r={},s=Object.keys(e),u=0;u<s.length;u++){var a=s[u];r[a]=this.pipeline.run(t.tokenizer(e[a]))}var l={};for(var c in o){var d=r[c]||r.any;if(d){var f=this.fieldSearch(d,c,o),h=o[c].boost;for(var p in f)f[p]=f[p]*h;for(var p in f)p in l?l[p]+=f[p]:l[p]=f[p]}}var v,g=[];for(var p in l)v={ref:p,score:l[p]},this.documentStore.hasDoc(p)&&(v.doc=this.documentStore.getDoc(p)),g.push(v);return g.sort(function(e,t){return t.score-e.score}),g},t.Index.prototype.fieldSearch=function(e,t,n){var i=n[t].bool,o=n[t].expand,r=n[t].boost,s=null,u={};return 0!==r?(e.forEach(function(e){var n=[e];1==o&&(n=this.index[t].expandToken(e));var r={};n.forEach(function(n){var o=this.index[t].getDocs(n),a=this.idf(n,t);if(s&&"AND"==i){var l={};for(var c in s)c in o&&(l[c]=o[c]);o=l}n==e&&this.fieldSearchStats(u,n,o);for(var c in o){var d=this.index[t].getTermFrequency(n,c),f=this.documentStore.getFieldLength(c,t),h=1;0!=f&&(h=1/Math.sqrt(f));var p=1;n!=e&&(p=.15*(1-(n.length-e.length)/n.length));var v=d*a*h*p;c in r?r[c]+=v:r[c]=v}},this),s=this.mergeScores(s,r,i)},this),s=this.coordNorm(s,u,e.length)):void 0},t.Index.prototype.mergeScores=function(e,t,n){if(!e)return t;if("AND"==n){var i={};for(var o in t)o in e&&(i[o]=e[o]+t[o]);return i}for(var o in t)o in e?e[o]+=t[o]:e[o]=t[o];return e},t.Index.prototype.fieldSearchStats=function(e,t,n){for(var i in n)i in e?e[i].push(t):e[i]=[t]},t.Index.prototype.coordNorm=function(e,t,n){for(var i in e)if(i in t){var o=t[i].length;e[i]=e[i]*o/n}return e},t.Index.prototype.toJSON=function(){var e={};return this._fields.forEach(function(t){e[t]=this.index[t].toJSON()},this),{version:t.version,fields:this._fields,ref:this._ref,documentStore:this.documentStore.toJSON(),index:e,pipeline:this.pipeline.toJSON()}},t.Index.prototype.use=function(e){var t=Array.prototype.slice.call(arguments,1);t.unshift(this),e.apply(this,t)},t.DocumentStore=function(e){this._save=null===e||void 0===e?!0:e,this.docs={},this.docInfo={},this.length=0},t.DocumentStore.load=function(e){var t=new this;return t.length=e.length,t.docs=e.docs,t.docInfo=e.docInfo,t._save=e.save,t},t.DocumentStore.prototype.isDocStored=function(){return this._save},t.DocumentStore.prototype.addDoc=function(t,n){this.hasDoc(t)||this.length++,this.docs[t]=this._save===!0?e(n):null},t.DocumentStore.prototype.getDoc=function(e){return this.hasDoc(e)===!1?null:this.docs[e]},t.DocumentStore.prototype.hasDoc=function(e){return e in this.docs},t.DocumentStore.prototype.removeDoc=function(e){this.hasDoc(e)&&(delete this.docs[e],delete this.docInfo[e],this.length--)},t.DocumentStore.prototype.addFieldLength=function(e,t,n){null!==e&&void 0!==e&&0!=this.hasDoc(e)&&(this.docInfo[e]||(this.docInfo[e]={}),this.docInfo[e][t]=n)},t.DocumentStore.prototype.updateFieldLength=function(e,t,n){null!==e&&void 0!==e&&0!=this.hasDoc(e)&&this.addFieldLength(e,t,n)},t.DocumentStore.prototype.getFieldLength=function(e,t){return null===e||void 0===e?0:e in this.docs&&t in this.docInfo[e]?this.docInfo[e][t]:0},t.DocumentStore.prototype.toJSON=function(){return{docs:this.docs,docInfo:this.docInfo,length:this.length,save:this._save}},t.stemmer=function(){var e={ational:"ate",tional:"tion",enci:"ence",anci:"ance",izer:"ize",bli:"ble",alli:"al",entli:"ent",eli:"e",ousli:"ous",ization:"ize",ation:"ate",ator:"ate",alism:"al",iveness:"ive",fulness:"ful",ousness:"ous",aliti:"al",iviti:"ive",biliti:"ble",logi:"log"},t={icate:"ic",ative:"",alize:"al",iciti:"ic",ical:"ic",ful:"",ness:""},n="[^aeiou]",i="[aeiouy]",o=n+"[^aeiouy]*",r=i+"[aeiou]*",s="^("+o+")?"+r+o,u="^("+o+")?"+r+o+"("+r+")?$",a="^("+o+")?"+r+o+r+o,l="^("+o+")?"+i,c=new RegExp(s),d=new RegExp(a),f=new RegExp(u),h=new RegExp(l),p=/^(.+?)(ss|i)es$/,v=/^(.+?)([^s])s$/,g=/^(.+?)eed$/,m=/^(.+?)(ed|ing)$/,y=/.$/,S=/(at|bl|iz)$/,x=new RegExp("([^aeiouylsz])\\1$"),w=new RegExp("^"+o+i+"[^aeiouwxy]$"),I=/^(.+?[^aeiou])y$/,b=/^(.+?)(ational|tional|enci|anci|izer|bli|alli|entli|eli|ousli|ization|ation|ator|alism|iveness|fulness|ousness|aliti|iviti|biliti|logi)$/,E=/^(.+?)(icate|ative|alize|iciti|ical|ful|ness)$/,D=/^(.+?)(al|ance|ence|er|ic|able|ible|ant|ement|ment|ent|ou|ism|ate|iti|ous|ive|ize)$/,F=/^(.+?)(s|t)(ion)$/,_=/^(.+?)e$/,P=/ll$/,k=new RegExp("^"+o+i+"[^aeiouwxy]$"),z=function(n){var i,o,r,s,u,a,l;if(n.length<3)return n;if(r=n.substr(0,1),"y"==r&&(n=r.toUpperCase()+n.substr(1)),s=p,u=v,s.test(n)?n=n.replace(s,"$1$2"):u.test(n)&&(n=n.replace(u,"$1$2")),s=g,u=m,s.test(n)){var z=s.exec(n);s=c,s.test(z[1])&&(s=y,n=n.replace(s,""))}else if(u.test(n)){var z=u.exec(n);i=z[1],u=h,u.test(i)&&(n=i,u=S,a=x,l=w,u.test(n)?n+="e":a.test(n)?(s=y,n=n.replace(s,"")):l.test(n)&&(n+="e"))}if(s=I,s.test(n)){var z=s.exec(n);i=z[1],n=i+"i"}if(s=b,s.test(n)){var z=s.exec(n);i=z[1],o=z[2],s=c,s.test(i)&&(n=i+e[o])}if(s=E,s.test(n)){var z=s.exec(n);i=z[1],o=z[2],s=c,s.test(i)&&(n=i+t[o])}if(s=D,u=F,s.test(n)){var z=s.exec(n);i=z[1],s=d,s.test(i)&&(n=i)}else if(u.test(n)){var z=u.exec(n);i=z[1]+z[2],u=d,u.test(i)&&(n=i)}if(s=_,s.test(n)){var z=s.exec(n);i=z[1],s=d,u=f,a=k,(s.test(i)||u.test(i)&&!a.test(i))&&(n=i)}return s=P,u=d,s.test(n)&&u.test(n)&&(s=y,n=n.replace(s,"")),"y"==r&&(n=r.toLowerCase()+n.substr(1)),n};return z}(),t.Pipeline.registerFunction(t.stemmer,"stemmer"),t.stopWordFilter=function(e){return e&&t.stopWordFilter.stopWords[e]!==!0?e:void 0},t.clearStopWords=function(){t.stopWordFilter.stopWords={}},t.addStopWords=function(e){null!=e&&Array.isArray(e)!==!1&&e.forEach(function(e){t.stopWordFilter.stopWords[e]=!0},this)},t.resetStopWords=function(){t.stopWordFilter.stopWords=t.defaultStopWords},t.defaultStopWords={"":!0,a:!0,able:!0,about:!0,across:!0,after:!0,all:!0,almost:!0,also:!0,am:!0,among:!0,an:!0,and:!0,any:!0,are:!0,as:!0,at:!0,be:!0,because:!0,been:!0,but:!0,by:!0,can:!0,cannot:!0,could:!0,dear:!0,did:!0,"do":!0,does:!0,either:!0,"else":!0,ever:!0,every:!0,"for":!0,from:!0,get:!0,got:!0,had:!0,has:!0,have:!0,he:!0,her:!0,hers:!0,him:!0,his:!0,how:!0,however:!0,i:!0,"if":!0,"in":!0,into:!0,is:!0,it:!0,its:!0,just:!0,least:!0,let:!0,like:!0,likely:!0,may:!0,me:!0,might:!0,most:!0,must:!0,my:!0,neither:!0,no:!0,nor:!0,not:!0,of:!0,off:!0,often:!0,on:!0,only:!0,or:!0,other:!0,our:!0,own:!0,rather:!0,said:!0,say:!0,says:!0,she:!0,should:!0,since:!0,so:!0,some:!0,than:!0,that:!0,the:!0,their:!0,them:!0,then:!0,there:!0,these:!0,they:!0,"this":!0,tis:!0,to:!0,too:!0,twas:!0,us:!0,wants:!0,was:!0,we:!0,were:!0,what:!0,when:!0,where:!0,which:!0,"while":!0,who:!0,whom:!0,why:!0,will:!0,"with":!0,would:!0,yet:!0,you:!0,your:!0},t.stopWordFilter.stopWords=t.defaultStopWords,t.Pipeline.registerFunction(t.stopWordFilter,"stopWordFilter"),t.trimmer=function(e){if(null===e||void 0===e)throw new Error("token should not be undefined");return e.replace(/^\W+/,"").replace(/\W+$/,"")},t.Pipeline.registerFunction(t.trimmer,"trimmer"),t.InvertedIndex=function(){this.root={docs:{},df:0}},t.InvertedIndex.load=function(e){var t=new this;return t.root=e.root,t},t.InvertedIndex.prototype.addToken=function(e,t,n){for(var n=n||this.root,i=0;i<=e.length-1;){var o=e[i];o in n||(n[o]={docs:{},df:0}),i+=1,n=n[o]}var r=t.ref;n.docs[r]?n.docs[r]={tf:t.tf}:(n.docs[r]={tf:t.tf},n.df+=1)},t.InvertedIndex.prototype.hasToken=function(e){if(!e)return!1;for(var t=this.root,n=0;n<e.length;n++){if(!t[e[n]])return!1;t=t[e[n]]}return!0},t.InvertedIndex.prototype.getNode=function(e){if(!e)return null;for(var t=this.root,n=0;n<e.length;n++){if(!t[e[n]])return null;t=t[e[n]]}return t},t.InvertedIndex.prototype.getDocs=function(e){var t=this.getNode(e);return null==t?{}:t.docs},t.InvertedIndex.prototype.getTermFrequency=function(e,t){var n=this.getNode(e);return null==n?0:t in n.docs?n.docs[t].tf:0},t.InvertedIndex.prototype.getDocFreq=function(e){var t=this.getNode(e);return null==t?0:t.df},t.InvertedIndex.prototype.removeToken=function(e,t){if(e){var n=this.getNode(e);null!=n&&t in n.docs&&(delete n.docs[t],n.df-=1)}},t.InvertedIndex.prototype.expandToken=function(e,t,n){if(null==e||""==e)return[];var t=t||[];if(void 0==n&&(n=this.getNode(e),null==n))return t;n.df>0&&t.push(e);for(var i in n)"docs"!==i&&"df"!==i&&this.expandToken(e+i,t,n[i]);return t},t.InvertedIndex.prototype.toJSON=function(){return{root:this.root}},t.Configuration=function(e,n){var e=e||"";if(void 0==n||null==n)throw new Error("fields should not be null");this.config={};var i;try{i=JSON.parse(e),this.buildUserConfig(i,n)}catch(o){t.utils.warn("user configuration parse failed, will use default configuration"),this.buildDefaultConfig(n)}},t.Configuration.prototype.buildDefaultConfig=function(e){this.reset(),e.forEach(function(e){this.config[e]={boost:1,bool:"OR",expand:!1}},this)},t.Configuration.prototype.buildUserConfig=function(e,n){var i="OR",o=!1;if(this.reset(),"bool"in e&&(i=e.bool||i),"expand"in e&&(o=e.expand||o),"fields"in e)for(var r in e.fields)if(n.indexOf(r)>-1){var s=e.fields[r],u=o;void 0!=s.expand&&(u=s.expand),this.config[r]={boost:s.boost||0===s.boost?s.boost:1,bool:s.bool||i,expand:u}}else t.utils.warn("field name in user configuration not found in index instance fields");else this.addAllFields2UserConfig(i,o,n)},t.Configuration.prototype.addAllFields2UserConfig=function(e,t,n){n.forEach(function(n){this.config[n]={boost:1,bool:e,expand:t}},this)},t.Configuration.prototype.get=function(){return this.config},t.Configuration.prototype.reset=function(){this.config={}},lunr.SortedSet=function(){this.length=0,this.elements=[]},lunr.SortedSet.load=function(e){var t=new this;return t.elements=e,t.length=e.length,t},lunr.SortedSet.prototype.add=function(){var e,t;for(e=0;e<arguments.length;e++)t=arguments[e],~this.indexOf(t)||this.elements.splice(this.locationFor(t),0,t);this.length=this.elements.length},lunr.SortedSet.prototype.toArray=function(){return this.elements.slice()},lunr.SortedSet.prototype.map=function(e,t){return this.elements.map(e,t)},lunr.SortedSet.prototype.forEach=function(e,t){return this.elements.forEach(e,t)},lunr.SortedSet.prototype.indexOf=function(e){for(var t=0,n=this.elements.length,i=n-t,o=t+Math.floor(i/2),r=this.elements[o];i>1;){if(r===e)return o;e>r&&(t=o),r>e&&(n=o),i=n-t,o=t+Math.floor(i/2),r=this.elements[o]}return r===e?o:-1},lunr.SortedSet.prototype.locationFor=function(e){for(var t=0,n=this.elements.length,i=n-t,o=t+Math.floor(i/2),r=this.elements[o];i>1;)e>r&&(t=o),r>e&&(n=o),i=n-t,o=t+Math.floor(i/2),r=this.elements[o];return r>e?o:e>r?o+1:void 0},lunr.SortedSet.prototype.intersect=function(e){for(var t=new lunr.SortedSet,n=0,i=0,o=this.length,r=e.length,s=this.elements,u=e.elements;;){if(n>o-1||i>r-1)break;s[n]!==u[i]?s[n]<u[i]?n++:s[n]>u[i]&&i++:(t.add(s[n]),n++,i++)}return t},lunr.SortedSet.prototype.clone=function(){var e=new lunr.SortedSet;return e.elements=this.toArray(),e.length=e.elements.length,e},lunr.SortedSet.prototype.union=function(e){var t,n,i;this.length>=e.length?(t=this,n=e):(t=e,n=this),i=t.clone();for(var o=0,r=n.toArray();o<r.length;o++)i.add(r[o]);return i},lunr.SortedSet.prototype.toJSON=function(){return this.toArray()},function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.elasticlunr=t()}(this,function(){return t})}();
\ No newline at end of file
diff --git a/static/searchResults.js b/static/searchResults.js
new file mode 100644
index 0000000..76d1052
--- /dev/null
+++ b/static/searchResults.js
@@ -0,0 +1,117 @@
+function el(element, config) {
+  const e = document.createElement(element);
+
+  if(config) {
+    if(config.children) {
+      for(const child of config.children.filter(a => a)) {
+        e.appendChild(child);
+      }
+
+      delete config.children;
+    }
+
+    for(const key in config) {
+      e[key] = config[key];
+    }
+  }
+
+  return e;
+}
+
+async function setup_lunr() {
+  const index_json = await (await fetch('/archives/lunr.json')).json();
+  const num_docs = index_json.length;
+  const search_index = elasticlunr(function() {
+    this.addField('title');
+    this.addField('author');
+    this.setRef('id');
+  });
+
+  for(const doc of index_json) {
+    search_index.addDoc(doc);
+  }
+
+  return [search_index, num_docs];
+}
+
+setup_lunr().then(([index, num_docs]) => {
+  const params = new URLSearchParams(window.location.search);
+  const query = params.get('query');
+  const submissionList = document.getElementById('searchResults');
+  const results = index.search(query, {});
+  submissionList.innerHTML = '';
+  submissionList.className = 'submissionList';
+  submissionList.appendChild(el('div', {
+    className: 'submissionItem',
+    children: [
+      el('span', {
+        textContent: `${results.length} results for "${query}" (out of ${num_docs} archived posts)`
+      })
+    ]
+  }));
+
+  for(const r of results) {
+    submissionList.appendChild(el('div', {
+      className: 'submissionItem',
+      children: [
+        el('div', {
+          className: 'score',
+          textContent: r.doc.score
+        }),
+        el('div', {
+          className: 'submissionContent',
+          children: [
+            el('div', {
+              className: 'title',
+              children: [
+                el('a', {
+                  href: `/archives/thread/${r.doc.id}`,
+                  children: [
+                    r.doc.link_flair_text &&
+                      el('span', {
+                        className: 'flair',
+                        textContent: `${r.doc.link_flair_text} `
+                      }),
+                    el('span', {
+                      textContent: r.doc.title
+                    })
+                  ]
+                }),
+                r.doc.url && el('span', {
+                  className: 'url',
+                  children: [
+                    el('a', {
+                      href: r.doc.url,
+                      innerHTML: ` <span class="truncate">${r.doc.url}</span>`
+                    })
+                  ]
+                })
+              ]
+            }),
+            el('div', {
+              className: 'subtitle',
+              children: [
+                el('span', {
+                  textContent: `posted at ${r.doc.created_date} by `
+                }),
+                el('span', {
+                  className: 'author',
+                  textContent: `u/${r.doc.author}`
+                })
+              ]
+            }),
+            el('div', {
+              className: 'subtitle',
+              children: [
+                el('a', {
+                  href: `/archives/thread/${r.doc.id}`,
+                  textContent: `${r.doc.num_comments} comments`
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    }));
+  }
+});
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..05b1a54
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,203 @@
+html {
+    font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+blockquote {
+    margin: 0;
+    margin-left: 1em;
+    padding-left: 1em;
+    border-left: 2px solid gray;
+}
+
+div.topbar {
+    background-color: darkred;
+    color: white;
+    border-bottom: 1px solid pink;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+div.topbar a {
+    color: inherit;
+    text-decoration: none;
+}
+
+div.topbar div.sitename {
+    font-size: 2em;
+    padding: 0.5em;
+}
+
+div.topbar div.sitename > span.subtitle {
+    font-size: medium;
+}
+
+div.topbar > div.sort {
+    display: flex;
+    padding-right: 0.5em;
+}
+
+div.topbar > div.sort > div {
+    margin: 0.5em;
+    padding: 0.5em;
+}
+
+div.topbar > div.sort > div.active {
+    border: 1px solid white;
+}
+
+div.topbar > form {
+    width: 20em;
+}
+
+div.topbar > form input {
+    width: 100%;
+    background-color: inherit;
+    color: inherit;
+    border: 1px solid white;
+    border-radius: 2px;
+    padding: 1em;
+}
+
+div.submissionList {
+    display: flex;
+    flex-direction: column;
+    padding: 1em;
+}
+
+div.submissionItem {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 1em;
+}
+
+div.thread {
+    display: flex;
+    flex-direction: column;
+}
+
+div.submission {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5em;
+}
+
+div.submission div.body {
+    background-color: #fafafa;
+    border: 1px solid darkred;
+    border-radius: 7px;
+    width: 75%;
+}
+
+div.submission div.submissionInfo {
+    width: 100%;
+    margin-left: 2em;
+}
+
+div.submission div.submissionContent {
+    display: flex;
+    padding: 1em;
+}
+
+div.submission div.submissionContent > div.body {
+    padding: 1em;
+}
+
+div.score {
+    padding: 1em;
+    font-size: small;
+    font-weight: bold;
+    text-align: center;
+    color: darkgray;
+}
+
+div.title {
+    font-weight: bold;
+    font-size: 16px;
+}
+
+div.subtitle {
+    color: #888;
+    font-size: x-small;
+}
+
+div.subtitle a {
+    color: #888;
+    font-weight: bold;
+}
+
+div.comments {
+    border-top: 1px solid gray;
+}
+
+div.comment {
+    display: flex;
+    flex-direction: column;
+    margin-left: 2em;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+div.body {
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+div.metadata {
+    font-size: small;
+    color: #888;
+}
+
+div.pagination {
+    margin: 1em;
+}
+
+.flair {
+    font-size: small;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    background-color: #f5f5f5;
+    color: #555;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+    font-weight: normal;
+}
+
+div.thread .flair {
+    max-width: 10em;
+    text-overflow: ellipsis;
+    margin-right: 0.5em;
+}
+
+span.author {
+    color: darkred;
+    font-weight: bold;
+}
+
+span.url {
+    font-size: x-small;
+    color: #555;
+}
+
+span.url a {
+    color: #555;
+}
+
+span.truncate {
+    max-width: 5em;
+    text-overflow: ellipsis;
+}
+
+#searchResults > div.loading {
+    padding: 1em;
+}
diff --git a/template.nix b/template.nix
new file mode 100644
index 0000000..58ee0a5
--- /dev/null
+++ b/template.nix
@@ -0,0 +1,30 @@
+{ lib, pkgs, ... }:
+
+let
+  templateLib = lib // {
+    map = f: list: builtins.concatStringsSep "" (builtins.map f list);
+  };
+in {
+  mkTemplates = name: templatesDir: templates:
+    let
+      templatesDrv = pkgs.runCommand "${name}-templates" { } ''
+        shopt -s globstar
+        for t in ${templatesDir}/**/*; do
+            subdir=$(dirname "$t" | cut -d'/' -f5-)
+            name=$(basename "$t")
+            echo $subdir
+
+            mkdir -p "$out/$subdir"
+            [ -f "$t" ] &&
+            echo "{lib, ...}@args: '''" | cat - "$t" > "$out/$subdir/$name.nix" &&
+            echo "'''" >> "$out/$subdir/$name.nix"
+        done
+      '';
+      templateCache = builtins.listToAttrs (builtins.map (t: {
+        name = t;
+        value = (import "${templatesDrv}/${t}.nix");
+      }) templates);
+    in template: args:
+    ((builtins.getAttr template templateCache)
+      ({ lib = templateLib; } // args));
+}
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..7b1ec46
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html class="no-js" lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>${args.title}</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="/archives/style.css" rel="stylesheet">
+
+        <link rel="apple-touch-icon" href="/archives/apple-touch-icon.png">
+        <script src="/archives/elasticlunr.min.js"></script>
+    </head>
+    <body>
+        ${args.topbarTpl { inherit (args) sort; }}
+        ${args.content}
+    </body>
+</html>
diff --git a/templates/comment.html b/templates/comment.html
new file mode 100644
index 0000000..47551fa
--- /dev/null
+++ b/templates/comment.html
@@ -0,0 +1,14 @@
+<div class="comment" id="${args.comment.id}">
+    <div class="metadata">
+        <span class="author">u/${args.comment.author}</span>
+        <span>${builtins.toString args.comment.score} points</span>
+        <span>at ${builtins.toString args.comment.created_utc}</span>
+    </div>
+    <div class="body">
+        ${args.comment.body}
+    </div>
+    <div class="subtitle">
+        <a href="#${args.comment.id}">permalink</a>
+    </div>
+    ${lib.map (reply: args.self { comment = reply; inherit (args) self; }) args.comment.replies}
+</div>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..3833139
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,4 @@
+${args.submissionPage {
+    page = 0;
+    inherit (args) threads numPerPage;
+}}
diff --git a/templates/pagination.html b/templates/pagination.html
new file mode 100644
index 0000000..4442acc
--- /dev/null
+++ b/templates/pagination.html
@@ -0,0 +1,16 @@
+<div class="pagination">
+    <div class="nextprev">
+        <span>view more:</span>
+        ${if args.page == 0 then "" else ''<a href="${args.pageFn.prev}">Prev</a>''}
+        ${if args.page == (builtins.floor (builtins.length args.threads / args.numPerPage)) then "" else
+            ''<a href="${args.pageFn.next}">Next</a>''}
+    </div>
+    <div class="jumptopage">
+        <span>jump to page:</span>
+        ${lib.map (n: ''
+        ${if args.page == n
+            then ''<span>${builtins.toString (n + 1)}</span>''
+            else ''<a href="${args.pageFn.jump n}">${builtins.toString (n + 1)}</a>''}
+        '') (lib.lists.range 0 (builtins.floor (builtins.length args.threads / args.numPerPage)))}
+    </div>
+</div>
diff --git a/templates/search.html b/templates/search.html
new file mode 100644
index 0000000..f3d4ad6
--- /dev/null
+++ b/templates/search.html
@@ -0,0 +1,7 @@
+<div id="searchResults">
+    <div class="loading">
+        <span>loading results... (requires javascript)</span>
+    </div>
+</div>
+
+<script src="/archives/searchResults.js" async defer></script>
diff --git a/templates/submission-page.html b/templates/submission-page.html
new file mode 100644
index 0000000..73d0794
--- /dev/null
+++ b/templates/submission-page.html
@@ -0,0 +1,38 @@
+<div class="submissionList">
+    ${lib.map (submission: ''
+    <div class="submissionItem">
+        <div class="score">
+            ${builtins.toString submission.score}
+        </div>
+        <div class="submissionContent">
+            <div class="title">
+                <a href="/archives/thread/${submission.id}">
+                    ${if submission.link_flair_text != null
+                    then ''<span class="flair">${submission.link_flair_text}</span>''
+                    else ""}
+                    <span>${submission.title}</span>
+                </a>
+                ${if submission.url != null
+                then ''<span class="url">
+                    <a href="${submission.url}">(<span class="truncate">${submission.url}</span>)</a>
+                </span>''
+                else ""}
+            </div>
+            <div class="subtitle">
+                posted at ${submission.created_date}
+                by <span class="author">u/${submission.author}</span>
+            </div>
+            <div class="subtitle">
+                <a href="/archives/thread/${submission.id}">
+                    ${builtins.toString submission.num_comments} comments
+                </a>
+                <a href="https://archive.ph/newest/https://www.reddit.com${submission.permalink}">
+                    archive.ph
+                </a>
+            </div>
+        </div>
+    </div>
+    '') (lib.lists.sublist (args.page * args.numPerPage) args.numPerPage args.threads)}
+</div>
+
+${args.paginationTpl { inherit (args) numPerPage threads page pageFn; }}
diff --git a/templates/thread.html b/templates/thread.html
new file mode 100644
index 0000000..72b98e6
--- /dev/null
+++ b/templates/thread.html
@@ -0,0 +1,34 @@
+<div class="thread">
+    <div class="submission">
+        <div class="submissionInfo">
+            <div class="title">
+                ${args.thread.title}
+                ${if args.thread.url != null
+                then ''<span class="url">
+                    <a href="${args.thread.url}">(<span class="truncate">${args.thread.url}</span>)</a>
+                </span>''
+                else ""}
+            </div>
+            <div class="metadata">
+                posted on ${args.thread.created_date} by
+                <span class="author">u/${args.thread.author}</span>
+            </div>
+        </div>
+        <div class="submissionContent">
+            <div class="score">
+                ${builtins.toString args.thread.score}
+            </div>
+            ${if builtins.stringLength args.thread.selftext > 0 then ''
+            <div class="body">
+                ${args.thread.selftext}
+            </div>
+            '' else ""}
+        </div>
+    </div>
+    <div class="comments">
+        ${lib.map (comment: (args.commentTpl {
+        inherit comment;
+        self = args.commentTpl;
+        })) args.thread.comments}
+    </div>
+</div>
diff --git a/templates/topbar.html b/templates/topbar.html
new file mode 100644
index 0000000..2493492
--- /dev/null
+++ b/templates/topbar.html
@@ -0,0 +1,26 @@
+<div class="topbar">
+    <a href="/archives">
+        <div class="sitename">
+            r/SneerClub
+            <span class="subtitle">
+                archives
+            </span>
+        </div>
+    </a>
+    <form action="/archives/search" method="get">
+        <input type="search"
+               name="query"
+               placeholder="type here and hit enter to search">
+    </form>
+    <div class="sort">
+        <div class="${if (lib.attrsets.attrByPath ["sort"] null args) == "newest" then "active" else ""}">
+            <a href="/archives">newest</a>
+        </div>
+        <div class="${if (lib.attrsets.attrByPath ["sort"] null args) == "bestest" then "active" else ""}">
+            <a href="/archives/bestest">bestest</a>
+        </div>
+        <div class="${if (lib.attrsets.attrByPath ["sort"] null args) == "longest" then "active" else ""}">
+            <a href="/archives/longest">longest</a>
+        </div>
+    </div>
+</div>