diff --git a/cmd/add.go b/cmd/add.go
index e5eac88c..5624ad48 100644
--- a/cmd/add.go
+++ b/cmd/add.go
@@ -4,6 +4,7 @@ import (
"github.com/RadhiFadlillah/go-readability"
"github.com/RadhiFadlillah/shiori/model"
"github.com/spf13/cobra"
+ "html/template"
"os"
"time"
)
@@ -63,7 +64,7 @@ func addBookmark(url, title, excerpt string, tags []string, offline bool) (book
MinReadTime: article.Meta.MinReadTime,
MaxReadTime: article.Meta.MaxReadTime,
Content: article.Content,
- HTML: article.RawContent,
+ HTML: template.HTML(article.RawContent),
}
bookTags := make([]model.Tag, len(tags))
diff --git a/cmd/serve.go b/cmd/serve.go
index 58b520f5..94b206d5 100644
--- a/cmd/serve.go
+++ b/cmd/serve.go
@@ -8,6 +8,7 @@ import (
"github.com/julienschmidt/httprouter"
"github.com/sirupsen/logrus"
"github.com/spf13/cobra"
+ "html/template"
"net/http"
fp "path/filepath"
"strings"
@@ -26,15 +27,17 @@ var (
router.GET("/js/*filepath", serveFiles)
router.GET("/css/*filepath", serveFiles)
router.GET("/webfonts/*filepath", serveFiles)
+
+ router.GET("/bookmark/:id", openBookmark)
router.GET("/api/bookmarks", apiGetBookmarks)
router.POST("/api/bookmarks", apiInsertBookmarks)
router.PUT("/api/bookmarks", apiUpdateBookmarks)
router.DELETE("/api/bookmarks", apiDeleteBookmarks)
// Route for panic
- router.PanicHandler = func(w http.ResponseWriter, r *http.Request, arg interface{}) {
- http.Error(w, fmt.Sprint(arg), 500)
- }
+ // router.PanicHandler = func(w http.ResponseWriter, r *http.Request, arg interface{}) {
+ // http.Error(w, fmt.Sprint(arg), 500)
+ // }
url := fmt.Sprintf(":%d", 8080)
logrus.Infoln("Serve shiori in", url)
@@ -51,7 +54,6 @@ func serveFiles(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
filepath := r.URL.Path
filepath = strings.TrimPrefix(filepath, "/")
filepath = fp.Join("view", filepath)
- fmt.Println(filepath)
http.ServeFile(w, r, filepath)
}
@@ -117,3 +119,23 @@ func apiDeleteBookmarks(w http.ResponseWriter, r *http.Request, ps httprouter.Pa
fmt.Fprint(w, request)
}
+
+func openBookmark(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
+ // Read param in URL
+ id := ps.ByName("id")
+
+ // Read bookmarks
+ bookmarks, err := DB.GetBookmarks(db.GetBookmarksOptions{WithContents: true}, id)
+ checkError(err)
+
+ if len(bookmarks) == 0 {
+ panic(fmt.Errorf("No bookmark with matching index"))
+ }
+
+ // Read template
+ templates, err := template.New("content.html").ParseFiles("view/content.html")
+ checkError(err)
+
+ err = templates.ExecuteTemplate(w, "content.html", &bookmarks[0])
+ checkError(err)
+}
diff --git a/cmd/update.go b/cmd/update.go
index 5f535b18..531627b9 100644
--- a/cmd/update.go
+++ b/cmd/update.go
@@ -6,6 +6,7 @@ import (
db "github.com/RadhiFadlillah/shiori/database"
"github.com/RadhiFadlillah/shiori/model"
"github.com/spf13/cobra"
+ "html/template"
"strconv"
"strings"
"sync"
@@ -114,7 +115,7 @@ func updateBookmarks(indices []string, url, title, excerpt string, tags []string
book.MinReadTime = article.Meta.MinReadTime
book.MaxReadTime = article.Meta.MaxReadTime
book.Content = article.Content
- book.HTML = article.RawContent
+ book.HTML = template.HTML(article.RawContent)
mutex.Lock()
bookmarks[pos] = book
diff --git a/model/model.go b/model/model.go
index 49825581..a2d992d6 100644
--- a/model/model.go
+++ b/model/model.go
@@ -1,5 +1,7 @@
package model
+import "html/template"
+
// Tag is tag for the bookmark
type Tag struct {
ID int64 `db:"id" json:"id"`
@@ -9,16 +11,16 @@ type Tag struct {
// Bookmark is record of a specified URL
type Bookmark struct {
- ID int64 `db:"id" json:"id"`
- URL string `db:"url" json:"url"`
- Title string `db:"title" json:"title"`
- ImageURL string `db:"image_url" json:"imageURL"`
- Excerpt string `db:"excerpt" json:"excerpt"`
- Author string `db:"author" json:"author"`
- MinReadTime int `db:"min_read_time" json:"minReadTime"`
- MaxReadTime int `db:"max_read_time" json:"maxReadTime"`
- Modified string `db:"modified" json:"modified"`
- Content string `db:"content" json:"-"`
- HTML string `db:"html" json:"-"`
- Tags []Tag `json:"tags"`
+ ID int64 `db:"id" json:"id"`
+ URL string `db:"url" json:"url"`
+ Title string `db:"title" json:"title"`
+ ImageURL string `db:"image_url" json:"imageURL"`
+ Excerpt string `db:"excerpt" json:"excerpt"`
+ Author string `db:"author" json:"author"`
+ MinReadTime int `db:"min_read_time" json:"minReadTime"`
+ MaxReadTime int `db:"max_read_time" json:"maxReadTime"`
+ Modified string `db:"modified" json:"modified"`
+ Content string `db:"content" json:"-"`
+ HTML template.HTML `db:"html" json:"-"`
+ Tags []Tag `json:"tags"`
}
diff --git a/view/content.html b/view/content.html
new file mode 100644
index 00000000..82ab2c21
--- /dev/null
+++ b/view/content.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{.Title}} - Shiori - Bookmarks Manager
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/view/css/stylesheet.css b/view/css/stylesheet.css
index c1cde2e9..871f56bf 100644
--- a/view/css/stylesheet.css
+++ b/view/css/stylesheet.css
@@ -1 +1 @@
-.header-link{border-right:1px solid #E5E5E5;color:#000;cursor:pointer;font-size:.9em;line-height:70px;overflow:hidden;padding:0 16px}.header-link:hover{color:#F44336}*{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0;text-decoration:none}.spacer{-webkit-box-flex:1;flex:1 0}#app{background-color:#F5F5F5;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;height:auto;min-height:100vh}#app #header{background-color:#FFF;box-shadow:0 0 3px rgba(0,0,0,0.3);left:0;position:fixed;right:0;top:0;z-index:99;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap}#app #header #n-selected{line-height:70px;font-size:1.3em;color:#6F757A;-webkit-box-flex:1;flex:1 0;border-right:1px solid #E5E5E5;padding:0 32px}#app #header #logo{border-left:1px solid #E5E5E5;cursor:default;flex-shrink:0;border-right:1px solid #E5E5E5;color:#000;cursor:pointer;font-size:.9em;overflow:hidden;padding:0 16px;line-height:70px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;font-size:1.5em;font-weight:100;color:#F44336}#app #header #logo:hover{color:#F44336}#app #header #logo span{margin-right:8px}#app #header #logo:hover{background-color:#F5F5F5}#app #header #search-box{-webkit-box-align:center;align-items:center;border-right:1px solid #E5E5E5;display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1 0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;width:100%}#app #header #search-box .button,#app #header #search-box input{background-color:#FFF;border:1px solid #E5E5E5;color:#000;font-size:.9em;padding:8px}#app #header #search-box .button{cursor:pointer;color:#535A60}#app #header #search-box .button:hover{color:#F44336}#app #header #search-box input{border-right:0;-webkit-box-flex:1;flex:1 0;padding:8px 16px}#app #header #header-menu{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap}#app #header #header-menu a{line-height:70px;padding:0 16px;color:#535A60;font-size:.9em;cursor:pointer}#app #header #header-menu a:not(:last-child){border-right:1px solid #E5E5E5}#app #header #header-menu a i{margin-right:4px}#app #header #header-menu a:hover{color:#F44336;background-color:#F5F5F5}#app #main{margin-top:70px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap}#app #main #grid{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row;padding:4px}#app #main #grid>.column{-webkit-box-flex:1;flex:1 0;padding:12px}#app #main #grid>.column>*:not(:last-child){margin-bottom:24px}#app #main #message-bar{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;-webkit-box-align:center;align-items:center;padding:32px;-webkit-box-pack:center;justify-content:center;position:absolute;top:50%;left:0;width:100%;margin-top:-60px;height:120px}#app #main #message-bar i{color:#6F757A;font-size:3em}.error-message{color:#F44336 !important;font-size:.9em}.bookmark{background-color:#FFF;border:1px solid #E5E5E5;position:relative}.bookmark .checkbox{z-index:9;right:0;opacity:0;position:absolute;outline:1px solid #E5E5E5;color:#535A60;background-color:#FFF;width:32px;line-height:32px;text-align:center;display:block;cursor:pointer;font-size:.9em}.bookmark .checkbox:hover{color:#F44336 !important}.bookmark .bookmark-metadata{padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;border-bottom:1px solid #E5E5E5}.bookmark .bookmark-metadata .bookmark-time{color:#6F757A;font-size:.9em;margin-bottom:8px}.bookmark .bookmark-metadata .bookmark-title{color:#000;font-size:1.3em;font-weight:600}.bookmark .bookmark-metadata .bookmark-url{color:#6F757A;font-size:.9em;margin-bottom:8px;margin-bottom:0;margin-top:8px;max-height:2.6em;line-height:1.3em;text-overflow:ellipsis;overflow:hidden}.bookmark .bookmark-metadata.has-image{min-height:250px;background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-box-pack:end;justify-content:flex-end;position:relative}.bookmark .bookmark-metadata.has-image::before{content:"";background-color:rgba(0,0,0,0.5);position:absolute;top:0;left:0;right:0;bottom:0;z-index:0}.bookmark .bookmark-metadata.has-image .bookmark-time,.bookmark .bookmark-metadata.has-image .bookmark-url{z-index:2;color:white;text-shadow:1px 1px 1px rgba(0,0,0,0.5)}.bookmark .bookmark-metadata.has-image .bookmark-title{z-index:2;color:white;text-shadow:1px 1px 1px rgba(0,0,0,0.5)}.bookmark .bookmark-metadata:hover .bookmark-title{text-decoration:underline}.bookmark .bookmark-excerpt{padding:16px 16px 0;color:#000}.bookmark .bookmark-tags{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;padding:12px 12px 0;margin-bottom:-4px}.bookmark .bookmark-tags a{cursor:pointer;font-size:.9em;padding:4px;color:#F44336 !important}.bookmark .bookmark-tags a::before{content:"#"}.bookmark .bookmark-tags a:hover{text-decoration:underline}.bookmark .bookmark-menu{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;border-top:1px solid #E5E5E5;visibility:hidden;margin-top:16px}.bookmark .bookmark-menu a{cursor:pointer;display:block;-webkit-box-flex:1;flex:1 0;color:#535A60 !important;padding:8px;font-size:.9em;text-align:center}.bookmark .bookmark-menu a i{margin-right:4px}.bookmark .bookmark-menu a:not(:last-child){border-right:1px solid #E5E5E5}.bookmark .bookmark-menu a:hover{color:#F44336 !important}.bookmark:hover .checkbox{opacity:1}.bookmark:hover .bookmark-menu{visibility:visible}.bookmark.checked{border:1px solid #9E9E9E;outline:6px solid #9E9E9E}.bookmark.checked .checkbox{opacity:1;outline:0;background-color:#9E9E9E;color:white}#input-bookmark{align-self:center;max-width:600px;width:100%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;margin:32px 8px 20px;background-color:#FFF;outline:1px solid #E5E5E5}#input-bookmark>p{color:#000;font-weight:600;text-transform:uppercase;padding:16px}#input-bookmark>p.error-message{color:#F44336;font-size:.9em;border-bottom:1px solid #E5E5E5;font-weight:500;text-transform:none}#input-bookmark input[type=text],#input-bookmark textarea{outline:1px solid #E5E5E5;color:#000;font-size:.9em;padding:12px 16px}#input-bookmark textarea{resize:vertical;min-height:4em;max-height:10em}#input-bookmark .button-area{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:8px}#input-bookmark .button-area a{color:#535A60;text-transform:uppercase;padding:8px;background-color:#FFF;font-size:.9em}#input-bookmark .button-area a.button{cursor:pointer}#input-bookmark .button-area a.button:hover{color:#F44336}#dialog-overlay{position:fixed;z-index:101;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;background-color:rgba(0,0,0,0.5);top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-box-pack:center;justify-content:center;padding:32px}#dialog-overlay #dialog{display:-webkit-box;display:flex;background-color:#FFF;align-self:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;border:1px solid #E5E5E5;max-width:500px}#dialog-overlay #dialog #dialog-title{color:#000;font-weight:600;text-transform:uppercase;padding:16px;font-size:1em;border-bottom:1px solid #E5E5E5}#dialog-overlay #dialog #dialog-content{padding:16px}#dialog-overlay #dialog #dialog-button{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:8px;border-top:1px solid #E5E5E5}#dialog-overlay #dialog #dialog-button a{color:#535A60;text-transform:uppercase;padding:8px;background-color:#FFF}#dialog-overlay #dialog #dialog-button a.button{cursor:pointer}#dialog-overlay #dialog #dialog-button a.button:not(:last-child){margin-right:16px}#dialog-overlay #dialog #dialog-button a.button:hover{color:#F44336}
\ No newline at end of file
+.header-link{border-right:1px solid #E5E5E5;color:#000;cursor:pointer;font-size:.9em;line-height:70px;overflow:hidden;padding:0 16px}.header-link:hover{color:#F44336}*{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0;text-decoration:none}.spacer{-webkit-box-flex:1;flex:1 0}#main-page{background-color:#F5F5F5;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;height:auto;min-height:100vh}#main-page #header{background-color:#FFF;box-shadow:0 0 3px rgba(0,0,0,0.3);left:0;position:fixed;right:0;top:0;z-index:99;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap}#main-page #header #n-selected{line-height:70px;font-size:1.3em;color:#6F757A;-webkit-box-flex:1;flex:1 0;border-right:1px solid #E5E5E5;padding:0 32px}#main-page #header #logo{border-left:1px solid #E5E5E5;cursor:default;flex-shrink:0;border-right:1px solid #E5E5E5;color:#000;cursor:pointer;font-size:.9em;overflow:hidden;padding:0 16px;line-height:70px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;font-size:1.5em;font-weight:100;color:#F44336}#main-page #header #logo:hover{color:#F44336}#main-page #header #logo span{margin-right:8px}#main-page #header #logo:hover{background-color:#F5F5F5}#main-page #header #search-box{-webkit-box-align:center;align-items:center;border-right:1px solid #E5E5E5;display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1 0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;width:100%}#main-page #header #search-box .button,#main-page #header #search-box input{background-color:#FFF;border:1px solid #E5E5E5;color:#000;font-size:.9em;padding:8px}#main-page #header #search-box .button{cursor:pointer;color:#535A60}#main-page #header #search-box .button:hover{color:#F44336}#main-page #header #search-box input{border-right:0;-webkit-box-flex:1;flex:1 0;padding:8px 16px}#main-page #header #header-menu{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap}#main-page #header #header-menu a{line-height:70px;padding:0 16px;color:#535A60;font-size:.9em;cursor:pointer}#main-page #header #header-menu a:not(:last-child){border-right:1px solid #E5E5E5}#main-page #header #header-menu a i{margin-right:4px}#main-page #header #header-menu a:hover{color:#F44336;background-color:#F5F5F5}#main-page #main{margin-top:70px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap}#main-page #main #grid{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row;padding:4px}#main-page #main #grid>.column{-webkit-box-flex:1;flex:1 0;padding:12px}#main-page #main #grid>.column>*:not(:last-child){margin-bottom:24px}#main-page #main #message-bar{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;-webkit-box-align:center;align-items:center;padding:32px;-webkit-box-pack:center;justify-content:center;position:absolute;top:50%;left:0;width:100%;margin-top:-60px;height:120px}#main-page #main #message-bar i{color:#6F757A;font-size:3em}#cache-page{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center}#cache-page a{color:#F44336}#cache-page a:visited{color:#F44336}#cache-page a:hover{text-decoration:underline}#cache-page>*{width:100%;max-width:864px}#cache-page #menu{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;max-width:864px;border-bottom:1px solid #E5E5E5}#cache-page #menu a{-webkit-box-flex:1;flex:1 0;font-size:.9em;text-align:center;color:#535A60;padding:16px;cursor:pointer}#cache-page #menu a i{margin-right:4px}#cache-page #menu a:not(:last-child){border-right:1px solid #E5E5E5}#cache-page #menu a:visited{color:#535A60}#cache-page #menu a:hover{color:#F44336;text-decoration:none}#cache-page #metadata{padding:32px;border-bottom:1px solid #E5E5E5}#cache-page #metadata a{font-size:.9em;display:block}#cache-page #metadata h3{font-size:2em;margin:8px 0}#cache-page #metadata p{font-size:.9em;color:#000}#cache-page #content{padding:16px 32px 32px}#cache-page #content *{margin-top:16px;line-height:180%;overflow:auto}#cache-page #content pre,#cache-page #content code{font-family:'Ubuntu Mono','Courier New',Courier,monospace}#cache-page.dark-mode{background-color:#222;color:white}#cache-page.dark-mode #menu a{color:white}#cache-page.dark-mode #menu a:visited{color:white}#cache-page.dark-mode #menu a:hover{color:#F44336;text-decoration:none}#cache-page.dark-mode #metadata p{color:white}.error-message{color:#F44336 !important;font-size:.9em}.bookmark{background-color:#FFF;border:1px solid #E5E5E5;position:relative}.bookmark .checkbox{z-index:9;right:0;opacity:0;position:absolute;outline:1px solid #E5E5E5;color:#535A60;background-color:#FFF;width:32px;line-height:32px;text-align:center;display:block;cursor:pointer;font-size:.9em}.bookmark .checkbox:hover{color:#F44336 !important}.bookmark .bookmark-metadata{padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;border-bottom:1px solid #E5E5E5}.bookmark .bookmark-metadata .bookmark-time{color:#6F757A;font-size:.9em;margin-bottom:8px}.bookmark .bookmark-metadata .bookmark-title{color:#000;font-size:1.3em;font-weight:600}.bookmark .bookmark-metadata .bookmark-url{color:#6F757A;font-size:.9em;margin-bottom:8px;margin-bottom:0;margin-top:8px;max-height:2.6em;line-height:1.3em;text-overflow:ellipsis;overflow:hidden}.bookmark .bookmark-metadata.has-image{min-height:250px;background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-box-pack:end;justify-content:flex-end;position:relative}.bookmark .bookmark-metadata.has-image::before{content:"";background-color:rgba(0,0,0,0.5);position:absolute;top:0;left:0;right:0;bottom:0;z-index:0}.bookmark .bookmark-metadata.has-image .bookmark-time,.bookmark .bookmark-metadata.has-image .bookmark-url{z-index:2;color:white;text-shadow:1px 1px 1px rgba(0,0,0,0.5)}.bookmark .bookmark-metadata.has-image .bookmark-title{z-index:2;color:white;text-shadow:1px 1px 1px rgba(0,0,0,0.5)}.bookmark .bookmark-metadata:hover .bookmark-title{text-decoration:underline}.bookmark .bookmark-excerpt{padding:16px 16px 0;color:#000}.bookmark .bookmark-tags{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;padding:12px 12px 0;margin-bottom:-4px}.bookmark .bookmark-tags a{cursor:pointer;font-size:.9em;padding:4px;color:#F44336 !important}.bookmark .bookmark-tags a::before{content:"#"}.bookmark .bookmark-tags a:hover{text-decoration:underline}.bookmark .bookmark-menu{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;border-top:1px solid #E5E5E5;visibility:hidden;margin-top:16px}.bookmark .bookmark-menu a{cursor:pointer;display:block;-webkit-box-flex:1;flex:1 0;color:#535A60 !important;padding:8px;font-size:.9em;text-align:center}.bookmark .bookmark-menu a i{margin-right:4px}.bookmark .bookmark-menu a:not(:last-child){border-right:1px solid #E5E5E5}.bookmark .bookmark-menu a:hover{color:#F44336 !important}.bookmark:hover .checkbox{opacity:1}.bookmark:hover .bookmark-menu{visibility:visible}.bookmark.checked{border:1px solid #9E9E9E;outline:6px solid #9E9E9E}.bookmark.checked .checkbox{opacity:1;outline:0;background-color:#9E9E9E;color:white}#input-bookmark{align-self:center;max-width:600px;width:100%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;margin:32px 8px 20px;background-color:#FFF;outline:1px solid #E5E5E5}#input-bookmark>p{color:#000;font-weight:600;text-transform:uppercase;padding:16px}#input-bookmark>p.error-message{color:#F44336;font-size:.9em;border-bottom:1px solid #E5E5E5;font-weight:500;text-transform:none}#input-bookmark input[type=text],#input-bookmark textarea{outline:1px solid #E5E5E5;color:#000;font-size:.9em;padding:12px 16px}#input-bookmark textarea{resize:vertical;min-height:4em;max-height:10em}#input-bookmark .button-area{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:8px}#input-bookmark .button-area a{color:#535A60;text-transform:uppercase;padding:8px;background-color:#FFF;font-size:.9em}#input-bookmark .button-area a.button{cursor:pointer}#input-bookmark .button-area a.button:hover{color:#F44336}#dialog-overlay{position:fixed;z-index:101;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;background-color:rgba(0,0,0,0.5);top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-box-pack:center;justify-content:center;padding:32px}#dialog-overlay #dialog{display:-webkit-box;display:flex;background-color:#FFF;align-self:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;border:1px solid #E5E5E5;max-width:500px}#dialog-overlay #dialog #dialog-title{color:#000;font-weight:600;text-transform:uppercase;padding:16px;font-size:1em;border-bottom:1px solid #E5E5E5}#dialog-overlay #dialog #dialog-content{padding:16px}#dialog-overlay #dialog #dialog-button{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:8px;border-top:1px solid #E5E5E5}#dialog-overlay #dialog #dialog-button a{color:#535A60;text-transform:uppercase;padding:8px;background-color:#FFF}#dialog-overlay #dialog #dialog-button a.button{cursor:pointer}#dialog-overlay #dialog #dialog-button a.button:not(:last-child){margin-right:16px}#dialog-overlay #dialog #dialog-button a.button:hover{color:#F44336}
\ No newline at end of file
diff --git a/view/css/ubuntu-mono.css b/view/css/ubuntu-mono.css
new file mode 100644
index 00000000..d741b1fb
--- /dev/null
+++ b/view/css/ubuntu-mono.css
@@ -0,0 +1,15 @@
+/* ubuntu-mono-regular - latin */
+
+@font-face {
+ font-family: 'Ubuntu Mono';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../webfonts/ubuntu-mono-v7-latin-regular.eot');
+ /* IE9 Compat Modes */
+ src: local('Ubuntu Mono'), local('UbuntuMono-Regular'), url('../webfonts/ubuntu-mono-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../webfonts/ubuntu-mono-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../webfonts/ubuntu-mono-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
+ url('../webfonts/ubuntu-mono-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../webfonts/ubuntu-mono-v7-latin-regular.svg#UbuntuMono') format('svg');
+ /* Legacy iOS */
+}
\ No newline at end of file
diff --git a/view/index.html b/view/index.html
index 1473be18..991516fd 100644
--- a/view/index.html
+++ b/view/index.html
@@ -14,7 +14,7 @@
-
+
@@ -131,7 +131,7 @@
instance.defaults.timeout = 10000;
var app = new Vue({
- el: '#app',
+ el: '#main-page',
data: {
windowWidth: 0,
error: "",
diff --git a/view/less/stylesheet.less b/view/less/stylesheet.less
index 97876cef..bca5a4a5 100644
--- a/view/less/stylesheet.less
+++ b/view/less/stylesheet.less
@@ -12,7 +12,7 @@
flex: 1 0;
}
-#app {
+#main-page {
background-color: @appBg;
display: flex;
flex-flow: column nowrap;
@@ -141,6 +141,97 @@
}
}
+#cache-page {
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
+ a {
+ color: @main;
+ &:visited {
+ color: @main;
+ }
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ >* {
+ width: 100%;
+ max-width: 864px;
+ }
+ #menu {
+ display: flex;
+ flex-flow: row nowrap;
+ max-width: 864px;
+ border-bottom: 1px solid @border;
+ a {
+ flex: 1 0;
+ font-size: 0.9em;
+ text-align: center;
+ color: @linkColor;
+ padding: 16px;
+ i {
+ margin-right: 4px;
+ }
+ cursor: pointer;
+ &:not(:last-child) {
+ border-right: 1px solid @border;
+ }
+ &:visited {
+ color: @linkColor
+ }
+ &:hover {
+ color: @main;
+ text-decoration: none;
+ }
+ }
+ }
+ #metadata {
+ padding: 32px;
+ border-bottom: 1px solid @border;
+ a {
+ font-size: 0.9em;
+ display: block;
+ }
+ h3 {
+ font-size: 2em;
+ margin: 8px 0;
+ }
+ p {
+ font-size: 0.9em;
+ color: @fontColor;
+ }
+ }
+ #content {
+ padding: 16px 32px 32px;
+ * {
+ margin-top: 16px;
+ line-height: 180%;
+ overflow: auto;
+ }
+ pre,
+ code {
+ font-family: 'Ubuntu Mono', 'Courier New', Courier, monospace;
+ }
+ }
+ &.dark-mode {
+ background-color: #222;
+ color: white;
+ #menu a {
+ color: white;
+ &:visited {
+ color: white;
+ }
+ &:hover {
+ color: @main;
+ text-decoration: none;
+ }
+ }
+ #metadata p {
+ color: white;
+ }
+ }
+}
+
.error-message {
color: @main !important;
font-size: 0.9em;
diff --git a/view/webfonts/ubuntu-mono-v7-latin-regular.eot b/view/webfonts/ubuntu-mono-v7-latin-regular.eot
new file mode 100644
index 00000000..6abdecef
Binary files /dev/null and b/view/webfonts/ubuntu-mono-v7-latin-regular.eot differ
diff --git a/view/webfonts/ubuntu-mono-v7-latin-regular.svg b/view/webfonts/ubuntu-mono-v7-latin-regular.svg
new file mode 100644
index 00000000..518cb082
--- /dev/null
+++ b/view/webfonts/ubuntu-mono-v7-latin-regular.svg
@@ -0,0 +1,350 @@
+
+
+
diff --git a/view/webfonts/ubuntu-mono-v7-latin-regular.ttf b/view/webfonts/ubuntu-mono-v7-latin-regular.ttf
new file mode 100644
index 00000000..b366ab4a
Binary files /dev/null and b/view/webfonts/ubuntu-mono-v7-latin-regular.ttf differ
diff --git a/view/webfonts/ubuntu-mono-v7-latin-regular.woff b/view/webfonts/ubuntu-mono-v7-latin-regular.woff
new file mode 100644
index 00000000..a7505551
Binary files /dev/null and b/view/webfonts/ubuntu-mono-v7-latin-regular.woff differ
diff --git a/view/webfonts/ubuntu-mono-v7-latin-regular.woff2 b/view/webfonts/ubuntu-mono-v7-latin-regular.woff2
new file mode 100644
index 00000000..fd72bb15
Binary files /dev/null and b/view/webfonts/ubuntu-mono-v7-latin-regular.woff2 differ