Feature/ui (#16)

* Add more metadata to plugins

* Add ui files

* Switch to gotemplates

* Ignore binary

* Fix CSS

* Remove unused vendored packages

* Remove debugging, fix Dockerfile

* Vendor go-chi/cors

* Update dependencies

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+/feedbridge

Dockerfile

@@ -1,8 +1,13 @@
 FROM golang:1.10-alpine as builder
 WORKDIR $GOPATH/src/github.com/dewey/feedbridge
 ADD ./ $GOPATH/src/github.com/dewey/feedbridge
-RUN go build -o /feedbridge ./main.go
-
+RUN apk update && \
+    apk upgrade && \
+    apk add git
+RUN go get -u github.com/gobuffalo/packr/... && \
+    cd $GOPATH/src/github.com/dewey/feedbridge && \    
+    packr && \
+    go build -v -o /feedbridge
 FROM alpine:latest  
 RUN apk --no-cache add ca-certificates
 WORKDIR /root/

main.go

@@ -1,14 +1,17 @@
 package main
 
 import (
+	"errors"
 	"fmt"
 	"net"
 	"net/http"
 	"os"
 	"strings"
+	"text/template"
 	"time"
 
 	"github.com/caarlos0/env"
+	"github.com/gobuffalo/packr"
 	"github.com/prometheus/client_golang/prometheus"
 	"github.com/prometheus/client_golang/prometheus/promhttp"
 
@@ -71,13 +74,32 @@ func main() {
 
 	apiService := api.NewService(l, storageRepo, pluginRepo)
 
+	templates := packr.NewBox("./ui/templates")
+	assets := packr.NewBox("./ui/assets")
+
 	r := chi.NewRouter()
 	r.Get("/", func(w http.ResponseWriter, r *http.Request) {
-		w.Write([]byte("feedbridge"))
+		t, err := template.New("index.tmpl").Parse(templates.String("index.tmpl"))
+		if err != nil {
+			http.Error(w, errors.New("couldn't serve template").Error(), http.StatusInternalServerError)
+			return
+		}
+		if err := t.Execute(w, apiService.ListFeeds()); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
 	})
+
+	r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(assets)))
 	r.Handle("/metrics", promhttp.Handler())
+
 	// TODO(dewey): Switch to promhttp middleware instead of this deprecated one
 	r.Mount("/feed", prometheus.InstrumentHandler("feed", api.NewHandler(*apiService)))
+
+	r.NotFound(func(w http.ResponseWriter, r *http.Request) {
+		w.Write([]byte("nothing to see here"))
+	})
+
 	l.Log("msg", fmt.Sprintf("feedbridge listening on %s:%d", config.APIHostname, config.Port))
 	err = http.ListenAndServe(fmt.Sprintf(":%d", config.Port), r)
 	if err != nil {

plugins/scmp/scmp.go

@@ -141,10 +141,8 @@ func (p *plugin) listHandler(doc *goquery.Document) ([]*feeds.Item, error) {
 		times := s.Find("time.updated")
 		val, exists = times.Attr("content")
 		if exists {
-			fmt.Println(val)
 			t, err := time.Parse("2006-01-02T15:04:05-07:00", val)
 			if err == nil {
-				fmt.Println(t)
 				item.Updated = t
 				item.Created = t
 			} else {

ui/assets/styles.css

@@ -0,0 +1,286 @@
+.white {
+    color: #FFFFFF
+}
+
+.bg-green {
+    background-color: #19A974
+}
+
+.bg-near-white {
+    background-color: #F4F4F4
+}
+
+.bt {
+    border-top-style: solid;
+    border-top-width: 1px;
+}
+
+.bb {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+}
+
+.b--black-10 {
+    border-color: rgba(0, 0, 0, .1);
+}
+
+p.raw-text-link>a {
+    color: white;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+.avenir {
+    font-family: 'avenir next', avenir, sans-serif;
+}
+
+.baskerville {
+    font-family: baskerville, serif;
+}
+
+.fw1 {
+    font-weight: 100;
+}
+
+.lh-title {
+    line-height: 1.25;
+}
+
+.lh-copy {
+    line-height: 1.5;
+}
+
+.mw7 {
+    max-width: 48rem;
+}
+
+.w-100 {
+    width: 100%;
+}
+
+.black {
+    color: #000;
+}
+
+.pv4 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+.ph3 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.mb4 {
+    margin-bottom: 2rem;
+}
+
+.mt0 {
+    margin-top: 0;
+}
+
+.mv0 {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.no-underline {
+    text-decoration: none;
+}
+
+.f3 {
+    font-size: 1.5rem;
+}
+
+.f6 {
+    font-size: .875rem;
+}
+
+.center {
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.dim {
+    opacity: 1;
+    transition: opacity .15s ease-in;
+}
+
+.dim:hover,
+.dim:focus {
+    opacity: .5;
+    transition: opacity .15s ease-in;
+}
+
+.dim:active {
+    opacity: .8;
+    transition: opacity .15s ease-out;
+}
+
+@media screen and (min-width: 30em) {
+    .flex-row-ns {
+        flex-direction: row;
+    }
+    .w-40-ns {
+        width: 40%;
+    }
+    .w-60-ns {
+        width: 60%;
+    }
+    .pl3-ns {
+        padding-left: 1rem;
+    }
+    .pr3-ns {
+        padding-right: 1rem;
+    }
+    .mb0-ns {
+        margin-bottom: 0;
+    }
+}
+
+@media screen and (min-width: 60em) {
+    .ph0-l {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .f5-l {
+        font-size: 1rem;
+    }
+}
+
+.border-box {
+    box-sizing: border-box;
+}
+
+.br-100 {
+    border-radius: 100%;
+}
+
+.dib {
+    display: inline-block;
+}
+
+.h2 {
+    height: 2rem;
+}
+
+.link {
+    text-decoration: none;
+    transition: color .15s ease-in;
+    color: white;
+}
+
+.link:link,
+.link:visited {
+    transition: color .15s ease-in;
+}
+
+.link:hover {
+    transition: color .15s ease-in;
+}
+
+.link:active {
+    transition: color .15s ease-in;
+}
+
+.link:focus {
+    transition: color .15s ease-in;
+    outline: 1px dotted currentColor;
+}
+
+.w2 {
+    width: 2rem;
+}
+
+.w-100 {
+    width: 100%;
+}
+
+.dark-gray {
+    color: #4d4d4f;
+}
+
+.mid-gray {
+    color: #555;
+}
+
+.pa3 {
+    padding: 1rem;
+}
+
+.mr3 {
+    margin-right: 1rem;
+}
+
+.mb2 {
+    margin-bottom: .5rem;
+}
+
+.tc {
+    text-align: center;
+}
+
+.f6 {
+    font-size: .875rem;
+}
+
+.v-mid {
+    vertical-align: middle;
+}
+
+.dim {
+    opacity: 1;
+    transition: opacity .15s ease-in;
+}
+
+.dim:hover,
+.dim:focus {
+    opacity: .5;
+    transition: opacity .15s ease-in;
+}
+
+.dim:active {
+    opacity: .8;
+    transition: opacity .15s ease-out;
+}
+
+@media screen and (min-width: 60em) {
+    .dt-l {
+        display: table;
+    }
+    .dtc-l {
+        display: table-cell;
+    }
+    .w-25-l {
+        width: 25%;
+    }
+    .w-75-l {
+        width: 75%;
+    }
+    .ph5-l {
+        padding-left: 4rem;
+        padding-right: 4rem;
+    }
+    .mr4-l {
+        margin-right: 2rem;
+    }
+    .mb0-l {
+        margin-bottom: 0;
+    }
+    .tl-l {
+        text-align: left;
+    }
+    .tr-l {
+        text-align: right;
+    }
+    .f5-l {
+        font-size: 1rem;
+    }
+}