Update CSS and templates

db.go

@@ -92,6 +92,7 @@ var makeRandomId = func() func() string {
 
 type Bin struct {
 	ObjectID primitive.ObjectID
+	Host     string
 	BinId    string
 	Rekwests []Rekwest
 }

handle_bin_inspect.go

@@ -17,6 +17,8 @@ func (s *server) handleBinInspect() http.HandlerFunc {
 				return
 			}
 
+			bin.Host = r.Host
+
 			s.renderTemplate(w, "inspect", &bin)
 			return
 

handle_rekwest.go

@@ -16,5 +16,7 @@ func (s *server) handleRequest() http.HandlerFunc {
 		} else {
 			http.NotFound(w, r)
 		}
+
+		w.WriteHeader(http.StatusOK)
 	}
 }

main.go

@@ -79,4 +79,6 @@ func (s *server) renderTemplate(writer http.ResponseWriter, tmpl string, bin *Bi
 	if err != nil {
 		http.Error(writer, err.Error(), http.StatusInternalServerError)
 	}
+
+	writer.WriteHeader(http.StatusOK)
 }

middleware.go

@@ -31,17 +31,51 @@ func (s *server) fixIPAddress(h http.HandlerFunc) http.HandlerFunc {
 	}
 }
 
+type (
+	responseData struct {
+		status int
+		size   int
+	}
+
+	loggingResponseWriter struct {
+		http.ResponseWriter
+		responseData *responseData
+	}
+)
+
+func (r loggingResponseWriter) Write(b []byte) (int, error) {
+	size, err := r.ResponseWriter.Write(b)
+	r.responseData.size += size
+	return size, err
+}
+
+func (r loggingResponseWriter) WriteHeader(statusCode int) {
+	r.ResponseWriter.WriteHeader(statusCode)
+	r.responseData.status = statusCode
+}
+
 func (s *server) withLogging(h http.HandlerFunc) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		start := time.Now()
 
+		responseData := &responseData{
+			status: 0,
+			size:   0,
+		}
+
+		lrw := loggingResponseWriter{
+			ResponseWriter: w,
+			responseData:   responseData,
+		}
+
+		h.ServeHTTP(lrw, r) // serve the original request
+
 		uri := r.RequestURI
 		method := r.Method
-		h.ServeHTTP(w, r) // serve the original request
 
 		duration := time.Since(start)
 
 		// log request details
-		fmt.Println(uri, method, duration)
+		fmt.Printf("%s %s (%d) - %d bytes, %v\n", method, uri, lrw.responseData.status, lrw.responseData.size, duration)
 	}
 }

public/css/style.css

@@ -1,20 +1,113 @@
-html {
-  padding: 3em 1em;
-  margin: auto;
-  line-height: 1.75;
-  font-size: 1.25em;
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
 }
 
-h1,h2,h3,h4,h5,h6 {
-  margin: 3em 0 1em;
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+   scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
-p,ul,ol {
-  margin-bottom: 2em;
-  color: #1d1d1d;
+h1 {
+  margin-top: 1.5em;
+}
+
+h2 {
+  margin-top: 1em;
+}
+
+h3 {
+  margin-top: 1em;
+}
+
+html {
+  padding: 1em 3em;
   font-family: sans-serif;
 }
 
-dt, dd {
+div.request {
+  margin-top: 1em;
+}
+
+#request-line dd, dt {
   display: inline;
 }
+
+#request-line dt {
+  font-weight: bold;
+  margin-right: .5em;
+}
+
+#request-line dd {
+  margin-right: 1.5em;
+}
+
+.request {
+  border: 1px solid black;
+  padding: 1em
+}

templates/inspect.html

@@ -8,14 +8,19 @@
     <link href="/css/style.css" rel="stylesheet">
   </head>
   <body>
-    <h1>Requests to {{.BinId}}</h1>
-    <p> Bin created: {{.Timestamp}} </p>
+    <header>
+      <h1>Bin: {{.BinId}}</h1>
+      <p> Bin created: {{.Timestamp}} </p>
+      <p>Make a request to: http://{{.Host}}/r/{{.BinId}}</p>
+      <p>View request at: http://{{.Host}}/inspect/{{.BinId}}</p>
+    </header>
+    <main>
+      <h2> Requests </h2>
     {{range .Rekwests}}
       {{template "request" .}}
     {{else}}
-      <h2>No requests</h2>
-      <p>Make a request to: {{.BinId}}</p>
-      <p>View request at: {{.BinId}}?inspect</p>
+      <h3>No requests in bin yet</h3>
     {{end}}
+    </main>
   </body>
 </html>

templates/rekwest.html

@@ -1,26 +1,30 @@
 {{define "request"}}
 <div class="request">
-  <div class="request-line">
+  <div id="request-line">
     <dl>
-      <dt>Method:</dt> <dd>{{.Method}}</dd>
-      <dt>Host:</dt> <dd>{{.Host}}</dd>
-      <dt>Path:</dt> <dd>{{.Path}}</dd>
+      <dt>Method:</dt>
+      <dd>{{.Method}}</dd>
+      <dt>Host:</dt>
+      <dd>{{.Host}}</dd>
+      <dt>Path:</dt>
+      <dd>{{.Path}}</dd>
+      <dt>Timestamp:</dt>
+      <dd>{{.Timestamp}}</dd>
     </dl>
-    </div>
-    <div>
-      <strong>Query Params:</strong>
-      <dl>
+  </div>
+  <div id="query-params">
+    <h3>Query Params:</h3>
+    <dl>
       {{range $key, $val := .Params}}
-      <strong> {{ $key }} </strong>:
-        {{range $val}}
-          {{ . }},
-        {{end}}
+        <dt> {{ $key }} </dt>
+        <dd>{{range $val}}</dd>
+        {{ . }} {{end}}
       {{else}}
         None
       {{end}}
-      </dl>
-    <div>Request Made At: {{.Timestamp}}</div>
+    </dl>
   </div>
+  <h3>Raw Request:</h3>
   <pre>{{.Raw}}</pre>
 </div>
 {{end}}