Added asset pipeline

3839f180 · Janne Mareike Koschinski · 6c4c4da0 · 3839f180 · 3839f180 · 3839f180
Commit 3839f180 authored 7 years ago by Janne Mareike Koschinski
--- a/.gitignore
+++ b/.gitignore
 /.idea/
-/vendor/
\ No newline at end of file
+/vendor/
+/node_modules/
\ No newline at end of file
--- a/Dockerfile
+++ b/Dockerfile
-FROM golang:alpine as builder
+FROM golang:alpine as go_builder

 RUN apk add --no-cache curl git gcc musl-dev
 RUN curl https://glide.sh/get | sh
@@ -8,8 +8,16 @@ COPY . .
 RUN glide install
 RUN CGO_ENABLED=false go build -a app .

+FROM node:alpine as asset_builder
+WORKDIR /app
+COPY package* /app/
+COPY assets /app/assets
+RUN npm install
+RUN npm run build
+
 FROM alpine:3.7
 WORKDIR /
-COPY --from=builder /go/src/app/app /app
-COPY --from=builder /go/src/app/templates /templates
+COPY --from=go_builder /go/src/app/app /app
+COPY --from=go_builder /go/src/app/templates /templates
+COPY --from=asset_builder /app/assets /assets
 CMD ["/app"]
\ No newline at end of file
--- a/assets/sass/style.sass
+++ b/assets/sass/style.sass
+.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
+    position: relative
+    box-shadow: 0 2px 4px rgba(33, 33, 33, 0.2)
+    transition: all 200ms
+
+    .info
+      display: none
+      position: absolute
+      right: 0
+
+    &:hover
+      margin-top: 2px
+      box-shadow: 0 4px 6px rgba(33, 33, 33, 0.3)
+
+      .info
+        display: block
\ No newline at end of file
--- a/main.go
+++ b/main.go
@@ -121,6 +121,7 @@ func main() {
 	}

 	imageServer := http.FileServer(http.Dir(config.TargetFolder))
+	assetServer := http.FileServer(http.Dir("assets"))

 	http.HandleFunc("/upload/", func(w http.ResponseWriter, r *http.Request) {
 		if r.Method == "POST" {
@@ -220,7 +221,17 @@ func main() {
 			Images []Image
 		}

-		result, err := db.Query("SELECT id, title, description, created_at, original_name, type FROM images WHERE owner = $1", user.Id)
+		result, err := db.Query(`
+			SELECT
+				id,
+				coalesce(title,  ''),
+				coalesce(description, ''),
+        		coalesce(created_at, to_timestamp(0)),
+				coalesce(original_name, ''),
+				coalesce(type, '')
+			FROM images
+			WHERE owner = $1
+			`, user.Id)
 		if err != nil {
 			panic(err)
 		}
@@ -248,6 +259,7 @@ func main() {
 		}
 	})

+	http.Handle("/assets/", http.StripPrefix("/assets/", assetServer))
 	http.Handle("/i/", http.StripPrefix("/i/", imageServer))
 	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
 		user := parseUser(r)

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "scripts": {
+    "sass": "node_modules/node-sass/bin/node-sass --output-style compressed assets/sass -o assets/css",
+    "build": "npm run sass"
+  },
+  "devDependencies": {
+    "node-sass": "^4.7.2"
+  }
+}
--- a/templates/me_images
+++ b/templates/me_images
 <!DOCTYPE html>
+<meta charset="utf-8">
+<title>My Images | ik8r</title>
+<link href="/assets/css/style.css" rel="stylesheet">

 <p>Welcome, {{ .User.Name }}</p>
 <p>
@@ -7,11 +10,15 @@
    <a href="/upload">Upload</a>
 </p>

-{{ range .Images }}
-    <a href="/i/{{ .Id }}">
-        <img src="/i/{{ .Id }}t" >
-        <p>{{ .OriginalName }}</p>
-        <p>{{ .CreatedAt }}</p>
-        <p>{{ .MimeType }}</p>
-    </a>
-{{ end }}
\ No newline at end of file
+<div class="images">
+    {{ range .Images }}
+        <a class="image" href="/i/{{ .Id }}">
+            <img src="/i/{{ .Id }}t" >
+            <div class="text">
+                <p>{{ .OriginalName }}</p>
+                <p>{{ .CreatedAt }}</p>
+                <p>{{ .MimeType }}</p>
+            </div>
+        </a>
+    {{ end }}
+</div>
\ No newline at end of file