Implement blob display.

2 files changed, 61 insertions, 5 deletions

diff --git a/lib/static/styles.css b/lib/static/styles.css
index f72a473..ad38179 100644
--- a/lib/static/styles.css
+++ b/lib/static/styles.css
@@ -71,12 +71,56 @@ div#main a:hover {
 }
 
 h1 {
-    position: sticky;
-    top: 0;
-    background: inherit;
+    /* position: sticky; */
+    /* top: 0; */
+    /* background: inherit; */
     padding: 0.5em 0;
 }
 
 .commit-hash {
     font-family: monospace;
 }
+
+#blob {
+    display: grid;
+    column-gap: 1.5em;
+    grid-template-columns: 3em auto;
+    font-family: monospace;
+}
+
+#blob a.line-anchor {
+    color: grey;
+    text-decoration: none;
+    text-align: right;
+}
+
+#blob a.line-anchor:target {
+    color: white;
+    background-color: grey;
+}
+
+#blob a.line-anchor:hover {
+    color: skyblue;
+    background-color: inherit;
+    text-decoration: none;
+}
+
+#blob span.line {
+    white-space: preserve-spaces;
+}
+
+footer {
+    margin-top: 1em;
+    text-align: center;
+}
+
+@media (max-width: 400px) {
+    body {
+        padding: 0;
+    }
+
+    #blob {
+	column-gap: 1em;
+	grid-template-columns: max-content auto;
+    }
+}
diff --git a/lib/views.ml b/lib/views.ml
index e1056b7..029e311 100644
--- a/lib/views.ml
+++ b/lib/views.ml
@@ -199,10 +199,22 @@ module Repo = struct
         content;
       }
 
-  let blob repo blob =
+  let file repo blob =
     let title = Printf.sprintf "%s" repo in
+    let to_numbered_line number line =
+      let n = number + 1 in
+      HTML.
+        [
+          a [ id "%d" n; class_ "line-anchor"; href "#%d" n ] [ txt "%d" n ];
+          span [ class_ "line" ] [ txt "\t%s\n" line ];
+        ]
+    in
+    let formatted_blob =
+      String.split_on_char '\n' blob.content
+      |> List.mapi to_numbered_line |> List.flatten
+    in
     let content =
-      HTML.[ h3 [] [ txt "Blob" ]; p [] [ txt "%s" blob.content ] ]
+      HTML.[ h3 [] [ txt "File" ]; div [ id "blob" ] formatted_blob ]
     in
     Page.render ~page_title:(page_title repo)
       {