implemented basic API for getting documents

.gitignore

@@ -1,3 +1,4 @@
 bin/
 obj/
 Snootalogue.db
+wwwroot/Content/*

Controllers/DocumentController.cs

@@ -0,0 +1,36 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using Snootalogue.Models;
+using Snootalogue.Data;
+
+namespace Snootalogue.Controllers {
+	[Route("/api/[controller]")]
+	[ApiController]
+	public class DocumentController : ControllerBase {
+		private readonly SnootalogueContext _context;
+		public DocumentController(SnootalogueContext context) {
+			_context = context;
+		}
+
+		[HttpGet]
+		public async Task<ActionResult<IEnumerable<Document>>> GetDocuments() {
+			return await _context.Document.Take(25).ToListAsync();
+		}
+
+		[HttpGet("{id}")]
+		public async Task<ActionResult<Document>> GetDocumentById(int id) {
+			var document = await _context.Document.FindAsync(id);
+
+			if (document == null) {
+				return NotFound();
+			}
+
+			return document;
+		}
+	}
+}

Pages/Documents/Details.cshtml

@@ -0,0 +1,40 @@
+@page "{id:int}"
+@model Snootalogue.Pages.Documents.DetailsModel
+
+@{
+	ViewData["Title"] = "Details";
+}
+
+<h1>Details</h1>
+
+<dl class="document-details">
+	<dt>@Html.DisplayNameFor(model => model.Document.Title)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Title)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.ID)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.ID)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Filename)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Filename)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Hash)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Hash)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Size)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Size)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Title)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Title)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Authors)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Authors)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Category)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Category)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.DateAdded)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.DateAdded)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Tags)</dt>
+	<dd class="tags">@Html.DisplayFor(model => model.Document.Tags)</dd>
+	<dt>@Html.DisplayNameFor(model => model.Document.Read)</dt>
+	<dd>@Html.DisplayFor(model => model.Document.Read)</dd>
+</dl>
+
+<div class="centred">
+	<a class="button block" href='/'>Return to documents</a>
+	<br>
+	<a class="button block" href='/api/Document/@Model.Document.ID'>View as JSON</a>
+</div>
+

Pages/Documents/Details.cshtml.cs

@@ -0,0 +1,34 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.EntityFrameworkCore;
+using Snootalogue.Data;
+using Snootalogue.Models;
+
+namespace Snootalogue.Pages.Documents {
+	public class DetailsModel : PageModel {
+		private readonly SnootalogueContext _context;
+		public Document Document { get; set; }
+
+		public DetailsModel(SnootalogueContext context) {
+			_context = context;
+		}
+
+		public async Task<IActionResult> OnGetAsync(int? id) {
+			if (id == null) {
+				return NotFound();
+			}
+
+			Document = await _context.Document.FirstOrDefaultAsync(d => d.ID == id);
+
+			if (Document == null) {
+				return NotFound();
+			}
+
+			return Page();
+		}
+	}
+}

Pages/Index.cshtml

@@ -1,12 +1,14 @@
 @page
 @model Snootalogue.Pages.IndexModel
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+
 @{
 	ViewData["Title"] = "Home";
 }
 
 @* <h1>Documents</h1> *@
 <div class="documents">
-	@foreach (var item in Model.Documents) {
+	@foreach (var item in Model.Documents.Take(25)) {
 	<div class="document">
 		<div class="document-column left" style="background-image:url('/img/placeholder.png');"></div>
 		<div class="document-column centre">
@@ -15,13 +17,17 @@
 			<div class="category">Category: @Html.DisplayFor(modelItem => item.Category)</div>
 			<div class="tags">@Html.DisplayFor(modelItem => item.Tags)</div>
 			@{string hash = item.Hash.Substring(0, 8);}
-			<div class="metadata">@Html.DisplayFor(modelItem => item.Filename) | @Html.DisplayFor(modelItem => item.Size) | <span title="@Html.DisplayFor(modelItem => item.Hash)">@hash...</span></div>
+			<div class="metadata">
+				@Html.DisplayFor(modelItem => item.Filename) |
+				<span title="@item.Size bytes">@Html.DisplayFor(modelItem => item.Size)</span> |
+				<span title="SHA256 digest: @Html.DisplayFor(modelItem => item.Hash)">@hash...</span>
+			</div>
 		</div>
 		<div class="document-column right">
 			@* TODO: replace these with font awesome or something *@
 			<div class="vertical-buttons">
-				<a href="#" class="button simple">View</a>
-				<a href="#" class="button simple">Details</a>
+				<a href="/Content/@item.Filename" class="button simple">View</a>
+				<a asp-page="./Documents/Details" asp-route-id="@item.ID" class="button simple">Details</a>
 				<a href="#" class="button simple">Edit</a>
 				<a href="#" class="button simple">Delete</a>
 			</div>
@@ -29,4 +35,6 @@
 
 	</div>
 	}
+
+	<div class="centred subtle">Displaying @Model.Documents.Take(25).Count() of @Model.Documents.Count() results</div>
 </div>

Pages/Index.cshtml.cs

@@ -10,16 +10,16 @@ using Snootalogue.Data;
 
 namespace Snootalogue.Pages {
 	public class IndexModel : PageModel {
-		private readonly SnootalogueContext context;
+		private readonly SnootalogueContext _context;
 		public IList<Document> Documents { get; set; }
 		public string Search { get; set; }
 
 		public IndexModel(SnootalogueContext context) {
-			this.context = context;
+			_context = context;
 		}
 
 		public async Task OnGetAsync() {
-			Documents = await context.Document.ToListAsync();
+			Documents = await _context.Document.ToListAsync();
 		}
 
 	}

Pages/Shared/_Layout.cshtml

@@ -10,8 +10,12 @@
 
 <body>
 	<nav>
-		<div id="nav-links">Snootalogue - Link 1 - Link 2</div>
-		<input id="nav-search" type="search" placeholder="Search...">
+		<div id="nav-links">Snootalogue</div>
+		<div id="nav-controls">
+			<input id="nav-search" type="search" placeholder="Search...">
+			<a class="button inverted" href="#">Help</a>
+			<a class="button inverted" href="#">Upload</a>
+		</div>
 	</nav>
 
 	<main>

Startup.cs

@@ -42,6 +42,7 @@ namespace Snootalogue {
 				// });
 
 				endpoints.MapRazorPages();
+				endpoints.MapControllers();
 			});
 		}
 	}

wwwroot/css/style.css

@@ -5,29 +5,57 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
 	font-weight: 200;
+	text-align: center;
 }
 
-a.simple {
+.centred {
+	margin: 0 auto;
+	width: max-content;
+	text-align: center;
+}
+.subtle {
+	color: #888;
+	font-style: italic;
+}
+
+a {
 	text-decoration: none;
 }
 
+a.button {
+	color: #a66;
+	background: transparent;
+	border: thin #a66 solid;
+	border-radius: 5px;
+	padding: 5px 10px;
+	text-align: center;
+	transition: 0.2s all;
+}
+a.button:hover {
+	background: #a66;
+	color: white;
+}
+a.button.block {
+	display: inline-block;
+	margin: 5px auto;
+}
+a.button.inverted {
+	color: white;
+	border-color: white;
+}
+a.button.inverted:hover {
+	background: white;
+	color: #a00;
+}
+
 .vertical-buttons {
 	display: flex;
 	flex-direction: column;
 }
 .vertical-buttons a.button {
 	flex: 1;
-	color: #a66;
-	background: white;
-	border: thin #a66 solid;
 	border-bottom: none;
-	padding: 5px;
-	text-align: center;
-	transition: 0.2s all;
-}
-.vertical-buttons a.button:hover {
-	background: #a66;
-	color: white;
+	border-radius: 0;
 }
 .vertical-buttons a.button:first-child {
 	border-radius: 5px 5px 0 0;
@@ -58,12 +86,15 @@ main {
 .documents {
 	display: flex;
 	flex-direction: column;
+	margin: 0 auto;
 }
 .document {
 	display: flex;
 	flex: 1;
 	flex-direction: row;
 	margin: 10px;
+	padding-top: 10px;
+	border-top: thin #ccc solid;
 }
 
 .document-column {
@@ -73,6 +104,7 @@ main {
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center;
+	flex-grow: 1;
 }
 .document-column.centre {
 	width: 80%;
@@ -85,16 +117,19 @@ main {
 	margin: 3px 0;
 }
 .document-column .title {
-	font-size: 1.2em;
+	font-size: 1.4em;
+	font-weight: 200;
 	text-align: center;
 }
 .document-column .authors {
 	text-align: center;
+	font-style: italic;
 }
 .document-column .tags {
 	font-size: 0.8em;
 }
-.document-column .tags .list-empty::before {
+.document-column .tags .list-empty::before,
+.document-details .tags .list-empty::before {
 	display: inline-block;
 	content: "No tags";
 }
@@ -102,3 +137,26 @@ main {
 	font-size: 0.8em;
 	color: #888;
 }
+
+.document-details {
+	margin: 10px auto;
+	width: min-content;
+}
+
+@media only screen and (min-width: 900px) {
+	.documents {
+		max-width: 80%;
+	}
+}
+
+@media only screen and (min-width: 600px) and (max-width: 899px) {
+	.documents {
+		max-width: 90%;
+	}
+}
+
+@media only screen and (max-width: 800px) {
+	a.button {
+		padding: 3px 5px;
+	}
+}