Use templating engine for all pages

assets/sass/fonts.sass

+@font-face
+  font-family: 'Lato'
+  src: url('/assets/fonts/Lato-Regular.eot')
+  src: url('/assets/fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/Lato-Regular.woff2') format('woff2'), url('/assets/fonts/Lato-Regular.woff') format('woff'), url('/assets/fonts/Lato-Regular.ttf') format('truetype')
+  font-style: normal
+  font-weight: normal
+  text-rendering: optimizeLegibility
+
+@font-face
+  font-family: 'Lato'
+  src: url('/assets/fonts/Lato-Bold.eot')
+  src: url('/assets/fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/Lato-Bold.woff2') format('woff2'), url('/assets/fonts/Lato-Bold.woff') format('woff'), url('/assets/fonts/Lato-Bold.ttf') format('truetype')
+  font-style: normal
+  font-weight: bold
+  text-rendering: optimizeLegibility
+
+@font-face
+  font-family: 'Lato'
+  src: url('/assets/fonts/Lato-BoldItalic.eot')
+  src: url('/assets/fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/Lato-BoldItalic.woff2') format('woff2'), url('/assets/fonts/Lato-BoldItalic.woff') format('woff'), url('/assets/fonts/Lato-BoldItalic.ttf') format('truetype')
+  font-style: italic
+  font-weight: bold
+  text-rendering: optimizeLegibility
+
+@font-face
+  font-family: 'Lato'
+  src: url('/assets/fonts/Lato-Italic.eot')
+  src: url('/assets/fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/Lato-Italic.woff2') format('woff2'), url('/assets/fonts/Lato-Italic.woff') format('woff'), url('/assets/fonts/Lato-Italic.ttf') format('truetype')
+  font-style: italic
+  font-weight: normal
+  text-rendering: optimizeLegibility
\ No newline at end of file

assets/sass/style.sass

+* 
+  margin:  0
+  padding:  0
+
+body
+  background: #F2F2F2
+  font-family: 'Lato', sans-serif
+  font-size: 81.25%
+
 .images 
   display: flex
   max-width: 1024px
   margin: 0 auto
 
   .image
-    display: flex
-    height: 160px
-    width: 160px
-    justify-content: center
-    align-content: center
-    justify-items: center
-    align-items: center
-    padding: 4px
-    margin: 4px
+    padding: 8px
+    margin: 8px
     position: relative
     box-shadow: 0 2px 4px rgba(33,33,33,0.2)
     transition: all 200ms
-
-    .info
-      display: none
-      position: absolute
-      right: 0
+    text-decoration:  none
+    width:  160px
+    background: #ffffff
 
     &:hover
       margin-top: 2px
       box-shadow: 0 4px 6px rgba(33,33,33,0.3)
 
+    .image-container
+      display: flex
+      justify-content: center
+      align-content: center
+      justify-items: center
+      align-items: center
+      flex-direction: column
+      height: 160px
+      width: 160px
+
     .info
       display: block
+      z-index:  1
+      color:  #212121
+      line-height:  1.25
+      font-size:  10pt
+      padding-top:  4px
+

main.go

@@ -76,23 +76,6 @@ func createImage(config *Config, body io.ReadCloser, fileHeader *multipart.FileH
 	return image, nil
 }
 
-func returnResult(writer http.ResponseWriter, result Result) error {
-	writer.Header().Add("Content-Type", "text/html")
-	body, err := json.Marshal(result)
-	if err != nil {
-		return err
-	}
-	writer.Write([]byte("<pre>"))
-	writer.Write(body)
-	writer.Write([]byte("</pre>"))
-	if result.Success {
-		writer.Write([]byte("<p><a href=\""))
-		writer.Write([]byte(fmt.Sprintf("https://i.k8r.eu/i/%s", result.Id)))
-		writer.Write([]byte("\">Uploaded Image</a></p>"))
-	}
-	return nil
-}
-
 type UserInfo struct {
 	Id    string
 	Name  string
@@ -107,6 +90,31 @@ func parseUser(r *http.Request) UserInfo {
 	}
 }
 
+type UploadData struct {
+	User   UserInfo
+	Result Result
+}
+
+func returnResult(w http.ResponseWriter, data UploadData) error {
+	var pageTemplate *template.Template
+	var err error
+	if data.Result.Success {
+		pageTemplate, err = template.New("upload_success.html").ParseFiles("templates/upload_success.html")
+	} else {
+		pageTemplate, err = template.New("upload_failure.html").ParseFiles("templates/upload_failure.html")
+	}
+	if err != nil {
+		return err
+	}
+
+	err = pageTemplate.Execute(w, data)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
 func main() {
 	config := NewConfigFromEnv()
 
@@ -131,10 +139,13 @@ func main() {
 			file, header, err := r.FormFile("file")
 			image, err := createImage(&config, file, header)
 			if err != nil {
-				returnResult(w, Result{
+				returnResult(w, UploadData{
+					user,
+					Result{
 						Id:      "",
 						Success: false,
 						Errors:  []string{err.Error()},
+					},
 				})
 				return
 			}
@@ -148,10 +159,13 @@ func main() {
 
 			data, err := json.Marshal(image)
 			if err != nil {
-				returnResult(w, Result{
+				returnResult(w, UploadData{
+					user,
+					Result{
 						Id:      image.Id,
 						Success: false,
 						Errors:  []string{err.Error()},
+					},
 				})
 				return
 			}
@@ -165,10 +179,13 @@ func main() {
 			for waiting {
 				message, err := pubsub.ReceiveMessage()
 				if err != nil {
-					returnResult(w, Result{
+					returnResult(w, UploadData{
+						user,
+						Result{
 							Id:      image.Id,
 							Success: false,
 							Errors:  []string{err.Error()},
+						},
 					})
 					return
 				}
@@ -176,10 +193,13 @@ func main() {
 				result := Result{}
 				err = json.Unmarshal([]byte(message.Payload), &result)
 				if err != nil {
-					returnResult(w, Result{
+					returnResult(w, UploadData{
+						user,
+						Result{
 							Id:      image.Id,
 							Success: false,
 							Errors:  []string{err.Error()},
+						},
 					})
 					return
 				}
@@ -189,7 +209,10 @@ func main() {
 				if result.Id == image.Id {
 					waiting = false
 
-					returnResult(w, result)
+					returnResult(w, UploadData{
+						user,
+						result,
+					})
 					return
 				}
 			}
@@ -200,7 +223,7 @@ func main() {
 				User UserInfo
 			}
 
-			tmpl, err := template.New("upload").ParseFiles("templates/upload")
+			tmpl, err := template.New("upload.html").ParseFiles("templates/upload.html")
 			if err != nil {
 				panic(err)
 			}
@@ -246,7 +269,7 @@ func main() {
 			images = append(images, info)
 		}
 
-		pageTemplate, err := template.New("me_images").ParseFiles("templates/me_images")
+		pageTemplate, err := template.New("me_images.html").ParseFiles("templates/me_images.html")
 		if err != nil {
 			panic(err)
 		}
@@ -268,7 +291,7 @@ func main() {
 			User UserInfo
 		}
 
-		tmpl, err := template.New("index").ParseFiles("templates/index")
+		tmpl, err := template.New("index.html").ParseFiles("templates/index.html")
 		if err != nil {
 			panic(err)
 		}

templates/index → templates/index.html

 <!DOCTYPE html>
+<meta charset="utf-8">
+<title>ik8r</title>
+<link href="/assets/css/style.css" rel="stylesheet">
+<link href="/assets/css/fonts.css" rel="stylesheet">
 
 {{ if .User.Id }}
     <p>Welcome, {{ .User.Name }}</p>

templates/me_images → templates/me_images.html

@@ -2,6 +2,7 @@
 <meta charset="utf-8">
 <title>My Images | ik8r</title>
 <link href="/assets/css/style.css" rel="stylesheet">
+<link href="/assets/css/fonts.css" rel="stylesheet">
 
 <p>Welcome, {{ .User.Name }}</p>
 <p>
@@ -13,11 +14,13 @@
 <div class="images">
     {{ range .Images }}
         <a class="image" href="/i/{{ .Id }}">
+            <div class="image-container">
               <img src="/i/{{ .Id }}t" >
-            <div class="text">
-                <p>{{ .OriginalName }}</p>
-                <p>{{ .CreatedAt }}</p>
-                <p>{{ .MimeType }}</p>
+            </div>
+            <div class="info">
+              <span>{{ .OriginalName }}</span>
+              <span>{{ .CreatedAt }}</span>
+              <span>{{ .MimeType }}</span>
             </div>
         </a>
     {{ end }}

templates/upload → templates/upload.html

 <!DOCTYPE html>
+<meta charset="utf-8">
+<title>Upload | ik8r</title>
+<link href="/assets/css/style.css" rel="stylesheet">
+<link href="/assets/css/fonts.css" rel="stylesheet">
 
 <p>Welcome, {{ .User.Name }}</p>
 <p>

templates/upload_failure.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Upload | ik8r</title>
+<link href="/assets/css/style.css" rel="stylesheet">
+<link href="/assets/css/fonts.css" rel="stylesheet">
+
+<p>Welcome, {{ .User.Name }}</p>
+<p>
+    <a href="/me/images">My Images</a> |
+    <a href="/me/albums">My Albums</a> |
+    <a href="/upload">Upload</a>
+</p>
+
+<div class="info error">
+    <h2>Upload of {{ .Result.Id }} failed.</h2>
+    {{ range .Result.Errors }}
+    <pre>{{ . }}</pre>
+    {{ end }}
+</div>
+
+<form action="/upload/" method="POST" enctype="multipart/form-data">
+    <input type="file" name="file"/>
+    <input type="submit"/>
+</form>
\ No newline at end of file

templates/upload_success.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Upload | ik8r</title>
+<link href="/assets/css/style.css" rel="stylesheet">
+<link href="/assets/css/fonts.css" rel="stylesheet">
+
+<p>Welcome, {{ .User.Name }}</p>
+<p>
+    <a href="/me/images">My Images</a> |
+    <a href="/me/albums">My Albums</a> |
+    <a href="/upload">Upload</a>
+</p>
+
+<div class="info success">
+    <h2>Upload of {{ .Result.Id }} finished. <a href="/i/{{ .Result.Id }}">View</a>.</h2>
+</div>
+
+<form action="/upload/" method="POST" enctype="multipart/form-data">
+    <input type="file" name="file"/>
+    <input type="submit"/>
+</form>
\ No newline at end of file