From a60a7cc9e60eda44dcb04a570a7849e38a12f4dd Mon Sep 17 00:00:00 2001 From: andreimarcu Date: Wed, 7 Oct 2015 23:35:48 -0400 Subject: [PATCH] Cache static files + Separate CSS more. Fixes #44 --- fileserve.go | 22 ++- static/css/hint.css | 282 +++++++++++++++++++++++++++ static/css/linx.css | 452 +------------------------------------------ templates/paste.html | 58 +++--- 4 files changed, 328 insertions(+), 486 deletions(-) create mode 100644 static/css/hint.css diff --git a/fileserve.go b/fileserve.go index 3983232..d41523d 100644 --- a/fileserve.go +++ b/fileserve.go @@ -1,6 +1,8 @@ package main import ( + "bytes" + "io" "net/http" "os" "path" @@ -35,6 +37,8 @@ func fileServeHandler(c web.C, w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, filePath) } +var staticCache = make(map[string][]byte) + func staticHandler(c web.C, w http.ResponseWriter, r *http.Request) { path := r.URL.Path if path[len(path)-1:] == "/" { @@ -46,15 +50,23 @@ func staticHandler(c web.C, w http.ResponseWriter, r *http.Request) { } filePath := strings.TrimPrefix(path, "/static/") - file, err := staticBox.Open(filePath) - if err != nil { - notFoundHandler(c, w, r) - return + + _, exists := staticCache[filePath] + if !exists { + file, err := staticBox.Open(filePath) + if err != nil { + notFoundHandler(c, w, r) + return + } + + buf := bytes.NewBuffer(nil) + io.Copy(buf, file) + staticCache[filePath] = buf.Bytes() } w.Header().Set("Etag", timeStartedStr) w.Header().Set("Cache-Control", "max-age=86400") - http.ServeContent(w, r, filePath, timeStarted, file) + http.ServeContent(w, r, filePath, timeStarted, bytes.NewReader(staticCache[filePath])) return } } diff --git a/static/css/hint.css b/static/css/hint.css new file mode 100644 index 0000000..9165763 --- /dev/null +++ b/static/css/hint.css @@ -0,0 +1,282 @@ +/*! Hint.css - v1.3.1 - 2013-11-23 +* http://kushagragour.in/lab/hint/ +* Copyright (c) 2013 Kushagra Gour; Licensed MIT */ + +/*-------------------------------------*\ + HINT.css - A CSS tooltip library +\*-------------------------------------*/ +/** + * HINT.css is a tooltip library made in pure CSS. + * + * Source: https://github.com/chinchang/hint.css + * Demo: http://kushagragour.in/lab/hint/ + * + * Release under The MIT License + * + */ +/** + * source: hint-core.scss + * + * Defines the basic styling for the tooltip. + * Each tooltip is made of 2 parts: + * 1) body (:after) + * 2) arrow (:before) + * + * Classes added: + * 1) hint + */ +.hint, [data-hint] { + position: relative; + display: inline-block; + /** + * tooltip arrow + */ + /** + * tooltip body + */ } + .hint:before, .hint:after, [data-hint]:before, [data-hint]:after { + position: absolute; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + visibility: hidden; + opacity: 0; + z-index: 1000000; + pointer-events: none; + -webkit-transition: 0.3s ease; + -moz-transition: 0.3s ease; + transition: 0.3s ease; } + .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after { + visibility: visible; + opacity: 1; } + .hint:before, [data-hint]:before { + content: ''; + position: absolute; + background: transparent; + border: 6px solid transparent; + z-index: 1000001; } + .hint:after, [data-hint]:after { + content: attr(data-hint); + background: #556A7F; + color: white; + text-shadow: 0 -1px 0px black; + padding: 8px 10px; + font-size: 12px; + line-height: 12px; + white-space: nowrap; + box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } + +/** + * source: hint-position.scss + * + * Defines the positoning logic for the tooltips. + * + * Classes added: + * 1) hint--top + * 2) hint--bottom + * 3) hint--left + * 4) hint--right + */ +/** + * set default color for tooltip arrows + */ +.hint--top:before { + border-top-color: #556A7F; } + +.hint--bottom:before { + border-bottom-color: #556A7F; } + +.hint--left:before { + border-left-color: #556A7F; } + +.hint--right:before { + border-right-color: #556A7F; } + +/** + * top tooltip + */ +.hint--top:before { + margin-bottom: -12px; } +.hint--top:after { + margin-left: -18px; } +.hint--top:before, .hint--top:after { + bottom: 100%; + left: 50%; } +.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + +/** + * bottom tooltip + */ +.hint--bottom:before { + margin-top: -12px; } +.hint--bottom:after { + margin-left: -18px; } +.hint--bottom:before, .hint--bottom:after { + top: 100%; + left: 50%; } +.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + +/** + * right tooltip + */ +.hint--right:before { + margin-left: -12px; + margin-bottom: -6px; } +.hint--right:after { + margin-bottom: -14px; } +.hint--right:before, .hint--right:after { + left: 100%; + bottom: 50%; } +.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + +/** + * left tooltip + */ +.hint--left:before { + margin-right: -12px; + margin-bottom: -6px; } +.hint--left:after { + margin-bottom: -14px; } +.hint--left:before, .hint--left:after { + right: 100%; + bottom: 50%; } +.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + +/** + * source: hint-color-types.scss + * + * Contains tooltips of various types based on color differences. + * + * Classes added: + * 1) hint--error + * 2) hint--warning + * 3) hint--info + * 4) hint--success + * + */ +/** + * Error + */ +.hint--error:after { + background-color: #b34e4d; + text-shadow: 0 -1px 0px #592726; } +.hint--error.hint--top:before { + border-top-color: #b34e4d; } +.hint--error.hint--bottom:before { + border-bottom-color: #b34e4d; } +.hint--error.hint--left:before { + border-left-color: #b34e4d; } +.hint--error.hint--right:before { + border-right-color: #b34e4d; } + +/** + * Warning + */ +.hint--warning:after { + background-color: #c09854; + text-shadow: 0 -1px 0px #6c5328; } +.hint--warning.hint--top:before { + border-top-color: #c09854; } +.hint--warning.hint--bottom:before { + border-bottom-color: #c09854; } +.hint--warning.hint--left:before { + border-left-color: #c09854; } +.hint--warning.hint--right:before { + border-right-color: #c09854; } + +/** + * Info + */ +.hint--info:after { + background-color: #3986ac; + text-shadow: 0 -1px 0px #193b4d; } +.hint--info.hint--top:before { + border-top-color: #3986ac; } +.hint--info.hint--bottom:before { + border-bottom-color: #3986ac; } +.hint--info.hint--left:before { + border-left-color: #3986ac; } +.hint--info.hint--right:before { + border-right-color: #3986ac; } + +/** + * Success + */ +.hint--success:after { + background-color: #458746; + text-shadow: 0 -1px 0px #1a321a; } +.hint--success.hint--top:before { + border-top-color: #458746; } +.hint--success.hint--bottom:before { + border-bottom-color: #458746; } +.hint--success.hint--left:before { + border-left-color: #458746; } +.hint--success.hint--right:before { + border-right-color: #458746; } + +/** + * source: hint-always.scss + * + * Defines a persisted tooltip which shows always. + * + * Classes added: + * 1) hint--always + * + */ +.hint--always:after, .hint--always:before { + opacity: 1; + visibility: visible; } +.hint--always.hint--top:after, .hint--always.hint--top:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } +.hint--always.hint--bottom:after, .hint--always.hint--bottom:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } +.hint--always.hint--left:after, .hint--always.hint--left:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } +.hint--always.hint--right:after, .hint--always.hint--right:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + +/** + * source: hint-rounded.scss + * + * Defines rounded corner tooltips. + * + * Classes added: + * 1) hint--rounded + * + */ +.hint--rounded:after { + border-radius: 4px; } + +/** + * source: hint-effects.scss + * + * Defines various transition effects for the tooltips. + * + * Classes added: + * 1) hint--bounce + * + */ +.hint--bounce:before, .hint--bounce:after { + -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); + -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); + transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } diff --git a/static/css/linx.css b/static/css/linx.css index 5329b74..65a488c 100644 --- a/static/css/linx.css +++ b/static/css/linx.css @@ -117,7 +117,7 @@ body { #footer { color: gray; text-align: right; - margin-top: 30px; + margin-top: 10px; margin-bottom: 10px; font-size: 11px; @@ -319,452 +319,4 @@ body { height: 800px; font-size: 13px; } -/* }}} */ - -/* cat.js */ -.qq-uploader { position:relative; width: 100%;} - - -.qq-upload-button { - width: 400px; - padding-top: 60px; - height: 75px; - margin-left:auto; - margin-right:auto; - border: 2px dashed #C9C9C9; - color:#C9C9C9; - font: 14px "helvetica neue", helvetica, arial, sans-serif; - background-color: #FAFBFC; -} - -.qq-upload-button-hover { - background:#EFF4F8; -} -.qq-upload-button-focus {outline:1px dotted black;} - - -.qq-upload-button-depr { - background-color: #8C9CBF; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8C9CBF), color-stop(50%, #546A9E), color-stop(50%, #36518F), color-stop(100%, #3D5691)); - background-image: -webkit-linear-gradient(top, #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%); - background-image: -moz-linear-gradient(top, #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%); - background-image: -ms-linear-gradient(top, #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%); - background-image: -o-linear-gradient(top, #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%); - background-image: linear-gradient(top, #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%); - border: 1px solid #172D6E; - border-bottom: 1px solid #0E1D45; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: inset 0 1px 0 0 #b1b9cb; - -moz-box-shadow: inset 0 1px 0 0 #b1b9cb; - box-shadow: inset 0 1px 0 0 #b1b9cb; - color: white; - font: bold 14px "helvetica neue", helvetica, arial, sans-serif; - padding: 7px 0 8px 0; - text-decoration: none; - text-align: center; - text-shadow: 0 -1px 1px #000F4D; - width: 140px; - -} - -.qq-upload-button2 { - display:block; /* or inline-block */ - margin-left:auto; - margin-right:auto; - width: 105px; padding: 7px 0; text-align:center; - background: hsl(212, 77%, 26%); border-bottom:1px solid #ddd;color:#fff; -} - -.qq-upload-drop-area { - - position:absolute; top:0; left:0; width:100%; height:100%; min-height: 50px; z-index:2; - background:#2c89f0; text-align:center; - border: 2px dashed #C9C9C9; - color:white; -} -.qq-upload-drop-area span { - display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px; -} -.qq-upload-drop-area-active {background:#093E7C;} - - -#toggleme{ - display:none; -} - -.qq-upload-list { - margin: 15px 3px 10px 3px; - font-size: 12px; - -} - -.qq-upload-list li { - display: block; - background-color:#E8ECF0; - padding: 8px 5px 8px 5px; - margin: 5px 0 0 0; - border: 1px solid #C9C9C9; - - font-size:13px; - text-align: left; - list-style: none; - line-height: normal; -} - -.qq-upload-list li a:hover { -} - -.qq-upload-list li a { - -} - -.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text { - margin-right: 7px; -} - -.qq-upload-file {} -.qq-upload-spinner {display:inline-block; width:15px; height:15px; vertical-align:text-bottom;} -.qq-upload-size,.qq-upload-cancel {font-size:11px;} - -.qq-upload-failed-text {display:none;} -.qq-upload-fail .qq-upload-failed-text {display:inline;} - -/* -Uploadify v2.1.4 -Release Date: November 8, 2010 - -Copyright (c) 2010 Ronnie Garcia, Travis Nickels - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. -*/ -.uploadifyQueueItem { - background-color: #F5F5F5; - border: 2px solid #E5E5E5; - font: 11px Verdana, Geneva, sans-serif; - margin-top: 5px; - padding: 10px; - width: 350px; -} -.uploadifyError { - background-color: #FDE5DD !important; - border: 2px solid #FBCBBC !important; -} -.uploadifyQueueItem .cancel { - float: right; -} -.uploadifyQueue .completed { - background-color: #E5E5E5; -} -.uploadifyProgress { - background-color: #E5E5E5; - margin-top: 10px; - width: 100%; -} -.uploadifyProgressBar { - background-color: #0099FF; - height: 3px; - width: 1px; -} - - - -/*! Hint.css - v1.3.1 - 2013-11-23 -* http://kushagragour.in/lab/hint/ -* Copyright (c) 2013 Kushagra Gour; Licensed MIT */ - -/*-------------------------------------*\ - HINT.css - A CSS tooltip library -\*-------------------------------------*/ -/** - * HINT.css is a tooltip library made in pure CSS. - * - * Source: https://github.com/chinchang/hint.css - * Demo: http://kushagragour.in/lab/hint/ - * - * Release under The MIT License - * - */ -/** - * source: hint-core.scss - * - * Defines the basic styling for the tooltip. - * Each tooltip is made of 2 parts: - * 1) body (:after) - * 2) arrow (:before) - * - * Classes added: - * 1) hint - */ -.hint, [data-hint] { - position: relative; - display: inline-block; - /** - * tooltip arrow - */ - /** - * tooltip body - */ } - .hint:before, .hint:after, [data-hint]:before, [data-hint]:after { - position: absolute; - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - visibility: hidden; - opacity: 0; - z-index: 1000000; - pointer-events: none; - -webkit-transition: 0.3s ease; - -moz-transition: 0.3s ease; - transition: 0.3s ease; } - .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after { - visibility: visible; - opacity: 1; } - .hint:before, [data-hint]:before { - content: ''; - position: absolute; - background: transparent; - border: 6px solid transparent; - z-index: 1000001; } - .hint:after, [data-hint]:after { - content: attr(data-hint); - background: #556A7F; - color: white; - text-shadow: 0 -1px 0px black; - padding: 8px 10px; - font-size: 12px; - line-height: 12px; - white-space: nowrap; - box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } - -/** - * source: hint-position.scss - * - * Defines the positoning logic for the tooltips. - * - * Classes added: - * 1) hint--top - * 2) hint--bottom - * 3) hint--left - * 4) hint--right - */ -/** - * set default color for tooltip arrows - */ -.hint--top:before { - border-top-color: #556A7F; } - -.hint--bottom:before { - border-bottom-color: #556A7F; } - -.hint--left:before { - border-left-color: #556A7F; } - -.hint--right:before { - border-right-color: #556A7F; } - -/** - * top tooltip - */ -.hint--top:before { - margin-bottom: -12px; } -.hint--top:after { - margin-left: -18px; } -.hint--top:before, .hint--top:after { - bottom: 100%; - left: 50%; } -.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before { - -webkit-transform: translateY(-8px); - -moz-transform: translateY(-8px); - transform: translateY(-8px); } - -/** - * bottom tooltip - */ -.hint--bottom:before { - margin-top: -12px; } -.hint--bottom:after { - margin-left: -18px; } -.hint--bottom:before, .hint--bottom:after { - top: 100%; - left: 50%; } -.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before { - -webkit-transform: translateY(8px); - -moz-transform: translateY(8px); - transform: translateY(8px); } - -/** - * right tooltip - */ -.hint--right:before { - margin-left: -12px; - margin-bottom: -6px; } -.hint--right:after { - margin-bottom: -14px; } -.hint--right:before, .hint--right:after { - left: 100%; - bottom: 50%; } -.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before { - -webkit-transform: translateX(8px); - -moz-transform: translateX(8px); - transform: translateX(8px); } - -/** - * left tooltip - */ -.hint--left:before { - margin-right: -12px; - margin-bottom: -6px; } -.hint--left:after { - margin-bottom: -14px; } -.hint--left:before, .hint--left:after { - right: 100%; - bottom: 50%; } -.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before { - -webkit-transform: translateX(-8px); - -moz-transform: translateX(-8px); - transform: translateX(-8px); } - -/** - * source: hint-color-types.scss - * - * Contains tooltips of various types based on color differences. - * - * Classes added: - * 1) hint--error - * 2) hint--warning - * 3) hint--info - * 4) hint--success - * - */ -/** - * Error - */ -.hint--error:after { - background-color: #b34e4d; - text-shadow: 0 -1px 0px #592726; } -.hint--error.hint--top:before { - border-top-color: #b34e4d; } -.hint--error.hint--bottom:before { - border-bottom-color: #b34e4d; } -.hint--error.hint--left:before { - border-left-color: #b34e4d; } -.hint--error.hint--right:before { - border-right-color: #b34e4d; } - -/** - * Warning - */ -.hint--warning:after { - background-color: #c09854; - text-shadow: 0 -1px 0px #6c5328; } -.hint--warning.hint--top:before { - border-top-color: #c09854; } -.hint--warning.hint--bottom:before { - border-bottom-color: #c09854; } -.hint--warning.hint--left:before { - border-left-color: #c09854; } -.hint--warning.hint--right:before { - border-right-color: #c09854; } - -/** - * Info - */ -.hint--info:after { - background-color: #3986ac; - text-shadow: 0 -1px 0px #193b4d; } -.hint--info.hint--top:before { - border-top-color: #3986ac; } -.hint--info.hint--bottom:before { - border-bottom-color: #3986ac; } -.hint--info.hint--left:before { - border-left-color: #3986ac; } -.hint--info.hint--right:before { - border-right-color: #3986ac; } - -/** - * Success - */ -.hint--success:after { - background-color: #458746; - text-shadow: 0 -1px 0px #1a321a; } -.hint--success.hint--top:before { - border-top-color: #458746; } -.hint--success.hint--bottom:before { - border-bottom-color: #458746; } -.hint--success.hint--left:before { - border-left-color: #458746; } -.hint--success.hint--right:before { - border-right-color: #458746; } - -/** - * source: hint-always.scss - * - * Defines a persisted tooltip which shows always. - * - * Classes added: - * 1) hint--always - * - */ -.hint--always:after, .hint--always:before { - opacity: 1; - visibility: visible; } -.hint--always.hint--top:after, .hint--always.hint--top:before { - -webkit-transform: translateY(-8px); - -moz-transform: translateY(-8px); - transform: translateY(-8px); } -.hint--always.hint--bottom:after, .hint--always.hint--bottom:before { - -webkit-transform: translateY(8px); - -moz-transform: translateY(8px); - transform: translateY(8px); } -.hint--always.hint--left:after, .hint--always.hint--left:before { - -webkit-transform: translateX(-8px); - -moz-transform: translateX(-8px); - transform: translateX(-8px); } -.hint--always.hint--right:after, .hint--always.hint--right:before { - -webkit-transform: translateX(8px); - -moz-transform: translateX(8px); - transform: translateX(8px); } - -/** - * source: hint-rounded.scss - * - * Defines rounded corner tooltips. - * - * Classes added: - * 1) hint--rounded - * - */ -.hint--rounded:after { - border-radius: 4px; } - -/** - * source: hint-effects.scss - * - * Defines various transition effects for the tooltips. - * - * Classes added: - * 1) hint--bounce - * - */ -.hint--bounce:before, .hint--bounce:after { - -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); - -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); - transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } +/* }}} */ \ No newline at end of file diff --git a/templates/paste.html b/templates/paste.html index 6e7876e..b7adaf4 100644 --- a/templates/paste.html +++ b/templates/paste.html @@ -1,40 +1,36 @@ {% extends "base.html" %} +{% block head %} + +{% endblock %} + {% block content %}
-
-
- . - -
- - - - +
+
+ . + +
+ + + + +
- +
+ +
- -
- -
- -
- - - - - {% endblock %}