crappyrules/notehub
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

theming moved to server side due to unreliability of less.js

Browse Source
This commit is contained in:
Christian Müller
2014-12-25 00:19:09 +01:00
parent 604b0e5698
commit 731f299efe
7 changed files with 296 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/notehub/css.clj
+271
View File
@@ -0,0 +1,271 @@
(ns notehub.css
(:require [garden.core :refer [css]]
[garden.stylesheet :refer [at-media]]
[garden.units :as u :refer [px pt em]]))
(def themes
{
"dark"
{
:background {
:normal "#333",
:halftone "#444"
},
:foreground {
:normal "#ccc",
:halftone "#bbb"
},
:link {
:fresh "#6b8",
:visited "#496",
:hover "#7c9"
}
},
"solarized-light"
{
:background {
:normal "#fdf6e3",
:halftone "#eee8d5"
},
:foreground {
:normal "#657b83",
:halftone "#839496"
},
:link {
:fresh "#b58900",
:visited "#cb4b16",
:hover "#dc322f"
}
},
"solarized-dark"
{
:background {
:normal "#073642",
:halftone "#002b36"
},
:foreground {
:normal "#93a1a1",
:halftone "#839191"
},
:link {
:fresh "#cb4b16",
:visited "#b58900",
:hover "#dc322f"
}
},
"default"
{
:background {
:normal "#fff",
:halftone "#efefef"
},
:foreground {
:normal "#333",
:halftone "#888"
},
:link {
:fresh "#097",
:visited "#054",
:hover "#0a8"
}
}
}
)
(defn generate [params]
(let [theme (themes (params "theme" "default"))
; VARIABLES
background (get-in theme [:background :normal])
foreground (get-in theme [:foreground :normal])
background-halftone (get-in theme [:background :halftone])
foreground-halftone (get-in theme [:foreground :halftone])
link-fresh (get-in theme [:link :fresh])
link-visited (get-in theme [:link :visited])
link-hover (get-in theme [:link :hover])
width (px 800)
header-font (str "'" (or (params "header-font") "Noticia Text") "'")
text-font (str "'" (or (params "text-font") "Georgia") "'")
header-size-factor (Float/parseFloat (or (params "header-size") "1"))
text-size-factor (Float/parseFloat (or (params "text-size") "1"))
; MIXINS
helvetica {
:font-weight 300
:font-family "'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif'"
}
central-element {
:margin-left "auto"
:margin-right "auto"
}
thin-border {
:border (print-str "1px solid" foreground)
}]
(css
[:.ui-border { :border-radius (px 3) } thin-border]
[:a {
:color link-fresh
:text-decoration "none"
:border-bottom "1px dotted"
}]
[:a:hover { :color link-hover }]
[:a:visited { :color link-visited }]
[:#draft {
:margin-bottom (em 3)
}]
[:.button {
:cursor "pointer"
}]
[:.ui-elem {
:border-radius (px 3)
:padding (em 0.3)
:opacity 0.8
:font-size (em 1)
:background background
}
helvetica
thin-border]
[:.landing-button, :textarea, :fieldset { :border "none" }]
[:.landing-button {
:box-shadow "0 2px 5px #aaa"
:text-decoration "none"
:font-size (em 1.5)
:background "#0a2"
:border-radius (px 10)
:padding (px 10)
}
helvetica]
[:.landing-button:hover { :background "#0b2" }]
[:.helvetica helvetica]
[:#footer {
:width "100%"
:font-size (em 0.8)
:padding-bottom (em 1)
:text-align "center"
}
helvetica]
(at-media {:screen true :max-width (px 767)} [:#footer {:font-size (em 0.4)}])
["#footer a" { :border "none" }]
[:html, :body {
:background background
:color foreground
:margin 0
:padding 0
}]
[:#hero {
:padding-top (em 5)
:padding-bottom (em 5)
:text-align "center"
}]
[:h1, :h2, :h3, :h4, :h5, :h6 {
:font-weight "bold"
:font-family (str header-font ",'Noticia Text','PT Serif','Georgia'")
}]
[:h1 { :font-size (em (* 1.8 header-size-factor)) }]
[:h2 { :font-size (em (* 1.6 header-size-factor)) }]
[:h3 { :font-size (em (* 1.4 header-size-factor)) }]
[:h4 { :font-size (em (* 1.2 header-size-factor)) }]
[:h5 { :font-size (em (* 1.1 header-size-factor)) }]
[:h6 { :font-size (em (* 1 header-size-factor)) }]
["#hero h1" { :font-size (em 2.5) }]
["#hero h2" { :margin (em 2) } helvetica ]
[:article {
:font-family (str text-font ", 'Georgia'")
:margin-top (em 5)
:text-align "justify"
:flex 1
:-webkit-flex 1
}
central-element]
(at-media {:screen true :min-width (px 1024)} [:article {:width width}])
(at-media {:screen true :max-width (px 1023)} [:article {:width "90%"}])
[:.central-element central-element]
(at-media {:screen true :min-width (px 1024)} [:central-element {:width width}])
(at-media {:screen true :max-width (px 1023)} [:central-element {:width "90%"}])
["article p" {
:font-size (em (* 1.2 text-size-factor))
:line-height "140%"
}]
["article > h1:first-child" {
:text-align "center"
:font-size (em (* 2 header-size-factor))
:margin (em 2)
}]
[:.centered {
:text-align "center"
}]
[:.bottom-space {
:margin-bottom (em 7)
}]
[:code, :pre {
:font-family "monospace"
:background background-halftone
:font-size (em (* 1.2 text-size-factor))
}]
[:pre {
:border-radius (px 3)
:padding (em 0.5)
:border (str "1px dotted" foreground-halftone)
}]
["*:focus" {
:outline "0px none transparent"
}]
(at-media {:screen true :min-width (px 1024)} [:textarea {:width width}])
[:textarea {
:border-radius (px 5)
:font-family "Courier"
:font-size (em 1)
:height (px 500)
}]
[:.hidden {
:display "none"
}]
[:#dashed-line {
:border-bottom (str "1px dashed" foreground-halftone)
:margin-top (em 3)
:margin-bottom (em 3)
}]
[:table {
:width "100%"
:border-collapse "collapse"
}]
[:th {
:padding (em 0.3)
:background-color background-halftone
}]
[:td {
:border-top (str "1px dotted" foreground-halftone)
:padding (em 0.3)
:line-height (em 2.5)
}]
[:.middot {
:padding (em 0.5)
}]
[:body {
:display "-webkit-flex"
}]
[:body {
:display "flex"
:min-height "100vh"
:flex-direction "column"
:-webkit-flex-direction "column"
}]
))
)
src/notehub/handler.clj
+4 -3
View File
@@ -28,7 +28,7 @@
[code]
{:status code
:body (let [message (get-message (keyword (str "status-" code)))]
(layout :no-js message
(layout :no-js {} message
[:article [:h1 message]]))})
(defn redirect [url]
@@ -51,7 +51,7 @@
(generate-string (api/version-manager api/update-note params))))
(defroutes app-routes
(GET "/api" [] (layout :no-js (get-message :api-title)
(GET "/api" [] (layout :no-js {} (get-message :api-title)
[:article (md-to-html (slurp "API.md"))]))
(context "/api" []
@@ -92,7 +92,8 @@
(storage/increment-note-view note-id))
(swap! page-cache cache/miss short-url
(note-page (api/get-note {:noteID note-id})
(api/url short-url))))
(api/url short-url)
params)))
(cache/lookup @page-cache short-url))))
(GET "/:short-url" [short-url]
src/notehub/views.clj
+19 -13
View File
@@ -7,6 +7,7 @@
[hiccup.element]
[hiccup.util :only [escape-html]]
[hiccup.page :only [include-js html5]])
(:require [notehub.css :as css])
(:import (org.pegdown PegDownProcessor Extensions)))
(def get-message (get-map "messages"))
@@ -19,22 +20,27 @@
; Creates the main html layout
(defn layout
[js? title & content]
[js? style title & content]
(html5
[:head
[:title (print-str (get-message :name) "—" title)]
[:meta {:charset "UTF-8"}]
[:meta {:name "viewport" :content "width=device-width, initial-scale=1.0"}]
[:link {:rel "stylesheet/less" :type "text/css" :href "/styles/main.less"}]
(html
(include-js "//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.2/less.min.js")
(include-js "/js/themes.js"))
(when (= :js js?)
[:link {:rel "stylesheet" :type "text/css"
:href
(format "https://fonts.googleapis.com/css?family=PT+Serif:700|Noticia+Text:700%s&subset=latin,cyrillic"
(reduce (fn [acc e]
(if-let [font (style e)]
(str acc "|" (sreplace font #" " "+"))
"")) "" ["text-font" "header-font"]))}]
[:style (css/generate style)]
(if (= :js js?)
(html
(include-js "//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js")
(include-js "/js/md5.js")
(include-js "/js/main.js")))]
[:body {:onload "onLoad()"} content]))
(include-js "/js/publishing.js")
[:body {:onload "onLoad()"} content])
[:body content])]))
(defn- sanitize
"Breakes all usages of <script> & <iframe>"
@@ -44,7 +50,7 @@
; input form for the markdown text with a preview area
(defn- input-form [form-url command fields content passwd-msg]
(let [css-class (when (= :publish command) :hidden)]
(layout :js (get-message :new-page)
(layout :js {} (get-message :new-page)
[:article#preview ""]
[:div#dashed-line {:class css-class}]
[:div.central-element.helvetica {:style "margin-bottom: 3em"}
@@ -60,7 +66,7 @@
:id :publish-button} (get-message command))])])))
(def landing-page
(layout :no-js (get-message :page-title)
(layout :no-js {} (get-message :page-title)
[:div#hero
[:h1 (get-message :name)]
[:h2 (get-message :title)]
@@ -76,7 +82,7 @@
(defn statistics-page [note-title stats publisher]
(let [page-title (get-message :statistics)
info (assoc stats :publisher publisher)]
(layout :no-js page-title
(layout :no-js {} page-title
[:h2.central-element note-title]
[:h3.central-element.helvetica page-title]
[:table#stats.helvetica.central-element
@@ -101,8 +107,8 @@
(hidden-field {:id :signature} :signature))
(get-message :loading) :set-passwd))
(defn note-page [note short-url]
(layout :no-js (:title note)
(defn note-page [note short-url css-params]
(layout :no-js css-params (:title note)
[:article.bottom-space (md-to-html (sanitize (:note note)))]
(let [urls {:short-url short-url
:notehub "/"}