4 files changed, 29 insertions, 7 deletions
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index 097918a..7a2d432 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -1,7 +1,13 @@
 @import java.util.ArrayList
 @args (ArrayList files)
-@layout.template(files.size() + " Files") -> {
+
+@css => {
+<link href="/css/files.css" rel="stylesheet">
+}
+
+@layout.template(files.size() + " Files", css, RockerContent.NONE) -> {
 @for (String file : files) {
-<a href="@file">@file</a><br>
+<a class="filename" href="@file">@file</a><br>
+<hr>
 }
 }
diff --git a/src/main/resources/views/fileview.rocker.html b/src/main/resources/views/fileview.rocker.html
index 03a7418..1029b9b 100644
--- a/src/main/resources/views/fileview.rocker.html
+++ b/src/main/resources/views/fileview.rocker.html
@@ -1,5 +1,18 @@
-@args (String content, String filename)
+@args (String content, String filename, String extension)
 
-@layout.template("File " + filename) -> {
-@content
+@css => {
+<link href="/css/fileview.css" rel="stylesheet">
+}
+
+@js => {
+<script>const extension = "@extension";</script>
+<script src="/js/prettify.js"></script>
+<script src="/js/marked.js"></script>
+<script src="/js/fileview.js"></script>
+}
+
+@layout.template("File " + filename, css, js) -> {
+<button class="switch" id="switch">Show raw</button>
+<pre class="prettyprint" id="content"><code class="lang-@extension">@content</code></pre>
+<div class="preview" id="preview"></div>
 }
diff --git a/src/main/resources/views/layout.rocker.html b/src/main/resources/views/layout.rocker.html
index 583c723..c7c7bc3 100644
--- a/src/main/resources/views/layout.rocker.html
+++ b/src/main/resources/views/layout.rocker.html
@@ -1,4 +1,4 @@
-@args (String title, RockerBody content)
+@args (String title, RockerContent css, RockerContent js, RockerBody content)
 
 <!doctype html>
 <html lang="en">
@@ -7,9 +7,12 @@
     <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
           name="viewport">
     <meta content="ie=edge" http-equiv="X-UA-Compatible">
+    <link href="/css/layout.css" rel="stylesheet">
+    @css
     <title>@title</title>
 </head>
 <body>
 @content
+@js
 </body>
 </html>
diff --git a/src/main/resources/views/upload.rocker.html b/src/main/resources/views/upload.rocker.html
index 441a570..b36abdc 100644
--- a/src/main/resources/views/upload.rocker.html
+++ b/src/main/resources/views/upload.rocker.html
@@ -1,6 +1,6 @@
 @args (String content)
 
-@layout.template("Upload") -> {
+@layout.template("Upload", RockerContent.NONE, RockerContent.NONE) -> {
 <form action="/api/upload?dir=test" enctype="multipart/form-data" method="post">
     <input multiple name="files" type="file">
     <button>Submit</button>