add browse functionality

assets/css/src/main.css

@@ -2467,7 +2467,7 @@ h2 {
   margin: .83em 0;
 }
 
-header {
+nav {
   position: fixed;
   top: 0;
   left: 0;
@@ -2480,7 +2480,7 @@ header {
   color: #eee;
 }
 
-header nav ul {
+nav ul {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -2494,21 +2494,21 @@ header nav ul {
   display: flex;
 }
 
-header nav ul li {
+nav ul li {
   list-style-type: none;
   display: inline-block;
   vertical-align: middle;
 }
 
-header nav ul li:last-child {
+nav ul li:last-child {
   margin-left: auto;
 }
 
-header nav img {
+nav img {
   height: 2em;
 }
 
-header nav ul li a {
+nav ul li a {
   padding: .5em;
   line-height: 2em;
   display: block;
@@ -2517,11 +2517,11 @@ header nav ul li a {
   transition: .5s ease background-color;
 }
 
-header nav ul li a:hover {
+nav ul li a:hover {
   background-color: rgba(255, 255, 255, 0.57);
 }
 
-main {
+.main {
   position: fixed;
   top: 3em;
   left: 0;
@@ -2530,6 +2530,16 @@ main {
   overflow: auto;
 }
 
+header {
+  color: #fff;
+  background-color: #37474f;
+  padding: .67em 0;
+}
+
+header h1 {
+  margin: 0;
+}
+
 .content {
   margin: 1.5em auto;
   width: 80%;

assets/css/src/sass/main.scss

@@ -1,29 +1,29 @@
 body {
   font-family: 'Roboto', sans-serif;
-  color: #212121;
+  color      : #212121;
-  height: 100%;
+  height     : 100%;
-  width: 100%;
+  width      : 100%;
 }
 
 h2 {
   margin: .83em 0;
 }
 
-header {
+nav {
-  position: fixed;
+  position        : fixed;
-  top: 0;
+  top             : 0;
-  left: 0;
+  left            : 0;
-  height: 3em;
+  height          : 3em;
-  width: 100%;
+  width           : 100%;
   background-color: #263238;
-  padding: 0 1em;
+  padding         : 0 1em;
-  box-sizing: border-box;
+  box-sizing      : border-box;
-  z-index: 999;
+  z-index         : 999;
-  color: #eee;
+  color           : #eee;
 }
 
-header nav ul {
+nav ul {
-  margin: 0;
+  margin : 0;
   padding: 0;
   display: -webkit-box;
   /* OLD - iOS 6-, Safari 3.1-6 */
@@ -36,45 +36,55 @@ header nav ul {
   display: flex;
 }
 
-header nav ul li {
+nav ul li {
   list-style-type: none;
-  display: inline-block;
+  display        : inline-block;
-  vertical-align: middle;
+  vertical-align : middle;
 }
 
-header nav ul li:last-child {
+nav ul li:last-child {
   margin-left: auto;
 }
 
-header nav img {
+nav img {
   height: 2em;
 }
 
-header nav ul li a {
+nav ul li a {
-  padding: .5em;
+  padding        : .5em;
-  line-height: 2em;
+  line-height    : 2em;
-  display: block;
+  display        : block;
   text-decoration: none;
-  color: inherit;
+  color          : inherit;
-  transition: .5s ease background-color;
+  transition     : .5s ease background-color;
 }
 
-header nav ul li a:hover {
+nav ul li a:hover {
   background-color: rgba(255, 255, 255, 0.57);
 }
 
-main {
+.main {
   position: fixed;
-  top: 3em;
+  top     : 3em;
-  left: 0;
+  left    : 0;
-  width: 100%;
+  width   : 100%;
-  height: calc(100% - 3em);
+  height  : calc(100% - 3em);
   overflow: auto;
 }
 
+header {
+  color           : #fff;
+  background-color: #37474f;
+  padding         : .67em 0;
+}
+
+header h1 {
+  margin: 0;
+}
+
 .content {
-  margin: 1.5em auto;
+  margin   : 1.5em auto;
-  width: 80%;
+  width    : 80%;
   max-width: 800px;
 }
 
@@ -84,26 +94,26 @@ main {
 
 /* EDITOR STYLE */
 .editor .sidebar {
-  position: fixed;
+  position        : fixed;
-  left: 0;
+  left            : 0;
-  top: 3em;
+  top             : 3em;
-  overflow-y: auto;
+  overflow-y      : auto;
-  overflow-x: hidden;
+  overflow-x      : hidden;
-  height: calc(100% - 3em);
+  height          : calc(100% - 3em);
-  width: 25%;
+  width           : 25%;
   background-color: #37474f;
-  color: #ddd;
+  color           : #ddd;
-  box-sizing: border-box;
+  box-sizing      : border-box;
-  padding: 1.5em 1em;
+  padding         : 1.5em 1em;
 }
 
 .editor .container {
-  position: fixed;
+  position  : fixed;
-  top: 3em;
+  top       : 3em;
-  right: 0;
+  right     : 0;
-  overflow: hidden;
+  overflow  : hidden;
-  height: calc(100% - 6em);
+  height    : calc(100% - 6em);
-  width: 75%;
+  width     : 75%;
   box-sizing: border-box;
 }
 
@@ -113,13 +123,13 @@ main {
 
 .editor #preview-area,
 .editor textarea {
-  position: relative;
+  position  : relative;
   box-sizing: border-box;
-  height: 100%;
+  height    : 100%;
-  width: 100%;
+  width     : 100%;
-  border: 0;
+  border    : 0;
-  padding: 1.5em 10%;
+  padding   : 1.5em 10%;
-  font-size: 1.05em;
+  font-size : 1.05em;
 }
 
 .editor #preview-area *:first-child {
@@ -127,7 +137,7 @@ main {
 }
 
 .editor textarea {
-  resize: none;
+  resize     : none;
   font-family: monospace;
 }
 
@@ -136,36 +146,36 @@ main {
 }
 
 .editor input {
-  width: 100%;
+  width           : 100%;
   background-color: rgba(0, 0, 0, 0.25);
-  color: rgba(255, 255, 255, 0.3);
+  color           : rgba(255, 255, 255, 0.3);
-  border: 0;
+  border          : 0;
-  border-radius: 5px;
+  border-radius   : 5px;
-  padding: .5em 1em;
+  padding         : .5em 1em;
-  box-sizing: border-box;
+  box-sizing      : border-box;
 }
 
 .editor input:focus {
-  color: rgba(255, 255, 255, 0.7);
+  color : rgba(255, 255, 255, 0.7);
   border: 0;
 }
 
 .editor h3 {
-  font-size: 1em;
+  font-size  : 1em;
   font-weight: bold;
-  margin: 0;
+  margin     : 0;
 }
 
 .action-bar {
-  position: fixed;
+  position        : fixed;
-  bottom: 0;
+  bottom          : 0;
-  right: 0;
+  right           : 0;
-  width: 75%;
+  width           : 75%;
   background-color: #455a64;
-  height: 3em;
+  height          : 3em;
-  display: flex;
+  display         : flex;
-  padding: .5em 1em;
+  padding         : .5em 1em;
-  box-sizing: border-box;
+  box-sizing      : border-box;
 }
 
 .action-bar .left {
@@ -178,31 +188,31 @@ main {
 
 /* FORMS ELEMENTS */
 form input {
-  color: rgba(0, 0, 0, 0.41);
+  color           : rgba(0, 0, 0, 0.41);
-  width: 15em;
+  width           : 15em;
-  line-height: 1.25em;
+  line-height     : 1.25em;
-  margin: .5em 0;
+  margin          : .5em 0;
-  border: 1px solid #fff;
+  border          : 1px solid #fff;
-  transition: .5s ease-out all;
+  transition      : .5s ease-out all;
   background-color: transparent;
 }
 
 form input:focus {
-  color: inherit;
+  color        : inherit;
-  outline: 0;
+  outline      : 0;
   border-bottom: 1px solid #2196f3;
 }
 
 form label {
-  width: 10.5em;
+  width  : 10.5em;
   display: inline-block;
-  margin: .1em 0 0;
+  margin : .1em 0 0;
 }
 
 form fieldset {
-  border: 0;
+  border    : 0;
-  margin: 1em 0 0;
+  margin    : 1em 0 0;
-  padding: 1em 0 0;
+  padding   : 1em 0 0;
   border-top: 1px solid rgba(255, 255, 255, 0.25);
 }
 
@@ -212,16 +222,16 @@ form legend {
 
 button,
 input[type="submit"] {
-  border: 0;
+  border          : 0;
-  color: #fff;
+  color           : #fff;
-  margin: 0;
+  margin          : 0;
-  padding: .5em 1em;
+  padding         : .5em 1em;
-  border-radius: 10px;
+  border-radius   : 10px;
-  font-size: .9em;
+  font-size       : .9em;
-  width: auto;
+  width           : auto;
-  line-height: 1em;
+  line-height     : 1em;
   background-color: #bbb;
-  transition: .3s ease all;
+  transition      : .3s ease all;
 }
 
 button,
@@ -256,12 +266,12 @@ input[type="submit"].default:active {
 
 button.add {
   vertical-align: middle;
-  border-radius: 50%;
+  border-radius : 50%;
-  height: 1.5em;
+  height        : 1.5em;
-  width: 1.5em;
+  width         : 1.5em;
-  font-size: .7em;
+  font-size     : .7em;
-  padding: 0;
+  padding       : 0;
-  opacity: 0;
+  opacity       : 0;
 }
 
 h3:hover > button.add {

browse/browse.go

@@ -1,14 +1,47 @@
 package browse
 
 import (
+	"log"
 	"net/http"
+	"strings"
 
 	"github.com/hacdias/caddy-hugo/page"
+	"github.com/mholt/caddy/middleware"
+	"github.com/mholt/caddy/middleware/browse"
 )
 
 // Execute sth
 func Execute(w http.ResponseWriter, r *http.Request) (int, error) {
-	page := new(page.Page)
+	if r.URL.Path[len(r.URL.Path)-1] != '/' {
-	page.Title = "Browse"
+		http.Redirect(w, r, r.URL.Path+"/", http.StatusTemporaryRedirect)
-	return page.Render(w, r, "browse")
+		return 0, nil
+	}
+
+	r.URL.Path = strings.Replace(r.URL.Path, "/admin/browse", "", 1)
+
+	if r.URL.Path == "" {
+		r.URL.Path = "/"
+	}
+
+	tpl, err := page.GetTemplate(r, "browse")
+
+	if err != nil {
+		log.Print(err)
+		return 500, err
+	}
+
+	b := browse.Browse{
+		Next: middleware.HandlerFunc(func(w http.ResponseWriter, r *http.Request) (int, error) {
+			return 404, nil
+		}),
+		Root: "./",
+		Configs: []browse.Config{
+			browse.Config{
+				PathScope: "/",
+				Template:  tpl,
+			},
+		},
+	}
+
+	return b.ServeHTTP(w, r)
 }

edit/edit.go

@@ -91,7 +91,7 @@ func Execute(w http.ResponseWriter, r *http.Request) (int, error) {
 		}
 
 		page := new(page.Page)
-		page.Title = "Edit"
+		page.Name = "Edit"
 		page.Body = inf
 		return page.Render(w, r, "edit", "frontmatter")
 	}

frontmatter/frontmatter.go

@@ -85,6 +85,7 @@ func sortByTitle(config []*frontmatter) {
 	}
 
 	sort.Strings(keys)
+	// TODO: http://golang.org/pkg/sort/#Interface
 	cnf := make([]*frontmatter, len(config))
 
 	for index, title := range keys {

page/page.go

@@ -1,9 +1,9 @@
 package page
 
 import (
-	"html/template"
 	"log"
 	"net/http"
+	"text/template"
 
 	"github.com/hacdias/caddy-hugo/assets"
 	"github.com/hacdias/caddy-hugo/utils"
@@ -19,12 +19,24 @@ var funcMap = template.FuncMap{
 
 // Page type
 type Page struct {
-	Title string
+	Name string
 	Body interface{}
 }
 
 // Render the page
 func (p *Page) Render(w http.ResponseWriter, r *http.Request, templates ...string) (int, error) {
+	tpl, err := GetTemplate(r, templates...)
+
+	if err != nil {
+		log.Print(err)
+		return 500, err
+	}
+
+	tpl.Execute(w, p)
+	return 200, nil
+}
+
+func GetTemplate(r *http.Request, templates ...string) (*template.Template, error) {
 	if r.Header.Get("X-PJAX") == "true" {
 		templates = append(templates, "base_minimal")
 	} else {
@@ -38,7 +50,7 @@ func (p *Page) Render(w http.ResponseWriter, r *http.Request, templates ...strin
 
 		if err != nil {
 			log.Print(err)
-			return 500, err
+			return new(template.Template), err
 		}
 
 		if i == 0 {
@@ -49,10 +61,9 @@ func (p *Page) Render(w http.ResponseWriter, r *http.Request, templates ...strin
 
 		if err != nil {
 			log.Print(err)
-			return 500, err
+			return new(template.Template), err
 		}
 	}
 
-	tpl.Execute(w, p)
+	return tpl, nil
-	return 200, nil
 }

settings/settings.go

@@ -61,7 +61,7 @@ func Execute(w http.ResponseWriter, r *http.Request) (int, error) {
 		}
 
 		page := new(page.Page)
-		page.Title = "Settings"
+		page.Name = "Settings"
 		page.Body = f
 		return page.Render(w, r, "settings", "frontmatter")
 	}

templates/base_full.tmpl

@@ -6,7 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="#fff">
-  <title>{{ .Title }}</title>
+  <title>{{ .Name }}</title>
 
   <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="/admin/assets/css/main.min.css">
@@ -14,7 +14,6 @@
 </head>
 
 <body>
-  <header>
   <nav>
     <ul>
       <li><a href="/"><i class="fa fa-home fa-lg"></i> Home</a></li>
@@ -24,8 +23,7 @@
       <li><a id="logout" href="#logout"><i class="fa fa-sign-out"></i> Logout</a></li>
     </ul>
   </nav>
-  </header>
+  <div class="main" id="container">
-  <div id="container">
   {{ template "content" . }}
   </div>
   <footer>

templates/browse.tmpl

@@ -1,5 +1,61 @@
 {{ define "content" }}
+<header>
+  <div class="content">
+  <h1>{{.Path}}</h1>
+  {{ $path := .Path }}
+</div>
+</header>
+
 <main>
-<a href="/admin/settings">Settings</a>
+  <div class="content">
+    {{if .CanGoUp}}
+			<a href=".." class="up" title="Up one level">&#11025;</a>
+			{{else}}
+			<div class="up">&nbsp;</div>
+			{{end}}
+
+    <table>
+  				<tr>
+  					<th>
+  						{{if and (eq .Sort "name") (ne .Order "desc")}}
+  						<a href="?sort=name&order=desc">Name &#9650;</a>
+  						{{else if and (eq .Sort "name") (ne .Order "asc")}}
+  						<a href="?sort=name&order=asc">Name &#9660;</a>
+  						{{else}}
+  						<a href="?sort=name&order=asc">Name</a>
+  						{{end}}
+  					</th>
+  					<th>
+  						{{if and (eq .Sort "size") (ne .Order "desc")}}
+  						<a href="?sort=size&order=desc">Size &#9650;</a>
+  						{{else if and (eq .Sort "size") (ne .Order "asc")}}
+  						<a href="?sort=size&order=asc">Size &#9660;</a>
+  						{{else}}
+  						<a href="?sort=size&order=asc">Size</a>
+  						{{end}}
+  					</th>
+  					<th class="hideable">
+  						{{if and (eq .Sort "time") (ne .Order "desc")}}
+  						<a href="?sort=time&order=desc">Modified &#9650;</a>
+  						{{else if and (eq .Sort "time") (ne .Order "asc")}}
+  						<a href="?sort=time&order=asc">Modified &#9660;</a>
+  						{{else}}
+  						<a href="?sort=time&order=asc">Modified</a>
+  						{{end}}
+  					</th>
+  				</tr>
+  				{{range .Items}}
+  				<tr>
+  					<td>
+  						{{if .IsDir}}&#128194;<a href="{{.URL}}">{{.Name}}</a>{{else}}
+              &#128196;<a href="/admin/edit{{ $path }}{{.URL}}">{{.Name}}</a>{{end}}
+
+  					</td>
+  					<td>{{.HumanSize}}</td>
+  					<td class="hideable">{{.HumanModTime "01/02/2006 3:04:05 PM -0700"}}</td>
+  				</tr>
+  				{{end}}
+  			</table>
+</div>
 </main>
 {{ end }}