From ff360bc60524b5710f65c5fde8e98396457cf41a Mon Sep 17 00:00:00 2001
From: Mihai Parparita <mihai@persistent.info>
Date: Mon, 18 Aug 2014 23:10:41 -0700
Subject: [PATCH] Switch to inlining styles.

Unfortunately Gmail for iOS does not respect the <style> block that desktop
Gmail does. Styles are instead defined in a styles.json and can be referenced
via a custom template function. Not quite as nice as CSS (e.g. link style
invocation has to be repeated for every link), but still tolerable.
---
 app/app.yaml                     |  1 -
 app/config/styles.json           | 61 +++++++++++++++++++++++
 app/githop.go                    | 49 +++++++++++++++----
 app/static/digest.css            | 83 --------------------------------
 app/templates/base/page.html     |  1 -
 app/templates/digest-email.html  |  9 +---
 app/templates/shared/digest.html | 37 +++++++++-----
 7 files changed, 127 insertions(+), 114 deletions(-)
 create mode 100644 app/config/styles.json
 delete mode 100644 app/static/digest.css

diff --git a/app/app.yaml b/app/app.yaml
index c72cd72..0824bd5 100644
--- a/app/app.yaml
+++ b/app/app.yaml
@@ -6,7 +6,6 @@ api_version: go1
 handlers:
 - url: /static
   static_dir: static
-  application_readable: true
 - url: /digest/cron
   script: _go_app
   login: admin
diff --git a/app/config/styles.json b/app/config/styles.json
new file mode 100644
index 0000000..32d1a61
--- /dev/null
+++ b/app/config/styles.json
@@ -0,0 +1,61 @@
+{
+  "digest": {
+    "font-family": "Helvetica, Arial, sans-serif",
+    "font-size": "10pt",
+    "color": "#000",
+    "max-width": "800px",
+    "margin": "0"
+  },
+  "link": {
+    "text-decoration": "none",
+    "color": "#4183c4"
+  },
+  "intro-paragraph": {
+    "font-size": "12pt",
+    "user-link": {
+      "font-weight": "bold",
+      "color": "#000"
+    },
+    "user-avatar": {
+      "vertical-align": "bottom",
+      "padding-right": "3px"
+    }
+  },
+  "interval-header": {
+    "font-size": "24pt",
+    "font-weight": "bold",
+    "margin": ".75em 0 .5em 0",
+    "border-bottom": "solid 1px #ddd"
+  },
+  "repository-header": {
+    "font-size": "18pt",
+    "font-weight": "bold",
+    "margin": ".5em 0"
+  },
+  "commit": {
+    "background": "#fafafa",
+    "border": "solid 1px #ccc",
+    "border-radius": "3px",
+    "margin": "1em 0",
+    "title": {
+      "padding": "8px",
+      "margin": "0"
+    },
+    "message": {
+      "margin": "0",
+      "padding": "0 8px 8px"
+    },
+    "footer": {
+      "background": "#fff",
+      "border-top": "solid 1px #ddd",
+      "padding": "8px",
+      "date": {
+        "color": "#666"
+      },
+      "link": {
+        "font-family": "monospace",
+        "float": "right"
+      }
+    }
+  }
+}
diff --git a/app/githop.go b/app/githop.go
index 96778eb..dc1d23c 100644
--- a/app/githop.go
+++ b/app/githop.go
@@ -74,6 +74,7 @@ func initGithubOAuthConfig() {
 }
 
 func initTemplates() {
+	styles := loadStyles()
 	funcMap := template.FuncMap{
 		"routeUrl": func(name string) (string, error) {
 			url, err := router.Get(name).URL()
@@ -82,6 +83,12 @@ func initTemplates() {
 			}
 			return url.String(), nil
 		},
+		"style": func(names ...string) (result template.CSS) {
+			for _, name := range names {
+				result += styles[name]
+			}
+			return
+		},
 	}
 	sharedFileNames, err := filepath.Glob("templates/shared/*.html")
 	if err != nil {
@@ -111,6 +118,39 @@ func initTemplates() {
 	}
 }
 
+func loadStyles() (result map[string]template.CSS) {
+	stylesBytes, err := ioutil.ReadFile("config/styles.json")
+	if err != nil {
+		log.Panicf("Could not read styles JSON: %s", err.Error())
+	}
+	var stylesJson interface{}
+	err = json.Unmarshal(stylesBytes, &stylesJson)
+	if err != nil {
+		log.Panicf("Could not parse styles JSON %s: %s", stylesBytes, err.Error())
+	}
+	result = make(map[string]template.CSS)
+	var parse func(string, map[string]interface{}, *string)
+	parse = func(path string, stylesJson map[string]interface{}, currentStyle *string) {
+		if path != "" {
+			path += "."
+		}
+		for k, v := range stylesJson {
+			switch v.(type) {
+			case string:
+				*currentStyle += k + ":" + v.(string) + ";"
+			case map[string]interface{}:
+				nestedStyle := ""
+				parse(path+k, v.(map[string]interface{}), &nestedStyle)
+				result[path+k] = template.CSS(nestedStyle)
+			default:
+				log.Panicf("Unexpected type for %s in styles JSON", k)
+			}
+		}
+	}
+	parse("", stylesJson.(map[string]interface{}), nil)
+	return
+}
+
 func signInHandler(w http.ResponseWriter, r *http.Request) {
 	http.Redirect(w, r, githubOauthConfig.AuthCodeURL(""), http.StatusFound)
 }
@@ -231,7 +271,6 @@ func sendDigestForAccount(account *Account, c appengine.Context) (bool, error) {
 	}
 
 	var data = map[string]interface{}{
-		"Styles": getDigestStyles(),
 		"Digest": digest,
 	}
 	var digestHtml bytes.Buffer
@@ -265,14 +304,6 @@ func sendDigestForAccount(account *Account, c appengine.Context) (bool, error) {
 	return true, err
 }
 
-func getDigestStyles() template.CSS {
-	b, err := ioutil.ReadFile("static/digest.css")
-	if err != nil {
-		log.Panicf("Could not read digest CSS: %s", err.Error())
-	}
-	return template.CSS(string(b[:]))
-}
-
 func githubOAuthCallbackHandler(w http.ResponseWriter, r *http.Request) {
 	code := r.FormValue("code")
 	c := appengine.NewContext(r)
diff --git a/app/static/digest.css b/app/static/digest.css
deleted file mode 100644
index 8c04dbe..0000000
--- a/app/static/digest.css
+++ /dev/null
@@ -1,83 +0,0 @@
-/* The strange format of these selectors is due to Gmail's limited CSS support
--- only tag names may be used. Therefore the entire digest is in a mostly-
-harmless <dl> tag so that all selectors may be scoped. For more details, see:
-http://codeascraft.com/2014/03/13/responsive-emails-that-really-work/ */
-
-dl {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10pt;
-  color: #000;
-  max-width: 800px;
-  margin: 0;
-}
-
-dl a {
-  text-decoration: none;
-  color: #4183c4;
-}
-
-/* Digest intro paragraph */
-dl > p {
-  font-size: 12pt;
-}
-
-/* User link */
-dl > p > a {
-  font-weight: bold;
-  color: #000;
-}
-
-dl > p > a img {
-  vertical-align: bottom;
-  padding-right: 3px;
-}
-
-/* Interval header */
-dl > h1 {
-  font-size: 24pt;
-  font-weight: bold;
-  margin: .75em 0 .5em 0;
-  border-bottom: solid 1px #ddd;
-}
-
-/* Repository header */
-dl > h2 {
-  font-size: 18pt;
-  font-weight: bold;
-  margin: .5em 0;
-}
-
-/* Commit */
-dl > div > div {
-  background: #fafafa;
-  border: solid 1px #ccc;
-  border-radius: 3px;
-  margin: 1em 0;
-}
-
-/* Commit message */
-dl > div > div > h3 {
-  padding: 8px;
-  margin: 0;
-}
-
-dl > div > div > pre {
-  margin: 0;
-  padding: 0 8px 8px;
-}
-
-/* Commit footer */
-dl > div > div > div {
-  background: #fff;
-  border-top: solid 1px #ddd;
-  padding: 8px;
-}
-
-dl > div > div > div > i {
-  color: #666;
-}
-
-dl > div > div > div > a {
-  font-family: monospace;
-  float: right;
-}
diff --git a/app/templates/base/page.html b/app/templates/base/page.html
index 05ff2d9..b6a32f0 100644
--- a/app/templates/base/page.html
+++ b/app/templates/base/page.html
@@ -4,7 +4,6 @@
 	<meta charset="utf-8">
 	<title>{{template "title" .}}</title>
 	<link rel="stylesheet" href="/static/main.css">
-	<link rel="stylesheet" href="/static/digest.css">
 </head>
 <body>
 	<h1>{{template "title" .}}</h1>
diff --git a/app/templates/digest-email.html b/app/templates/digest-email.html
index 4dae7d1..cf405f9 100644
--- a/app/templates/digest-email.html
+++ b/app/templates/digest-email.html
@@ -1,8 +1 @@
-<html>
-	<head>
-		<style>{{.Styles}}</style>
-	</head>
-	<body>
-		{{template "digest" .Digest}}
-	</body>
-</html>
+{{template "digest" .Digest}}
diff --git a/app/templates/shared/digest.html b/app/templates/shared/digest.html
index 3be415b..81bd270 100644
--- a/app/templates/shared/digest.html
+++ b/app/templates/shared/digest.html
@@ -1,29 +1,42 @@
 {{define "digest"}}
 
-<dl>
+<div style="{{style "digest"}}">
 
-<p>GitHub activity time machine for <a href="https://github.com/{{.User.Login}}" title={{.User.Name}}><img src={{.User.AvatarURL}} width="20" height="20" border="0">{{.User.Login}}</a>.</p>
+<p style="{{style "intro-paragraph"}}">
+  GitHub activity time machine for
+  <a href="https://github.com/{{.User.Login}}"
+     title={{.User.Name}}
+     style="{{style "link" "intro-paragraph.user-link"}}">
+    <img src={{.User.AvatarURL}}
+         width="20"
+         height="20"
+         border="0"
+         style="{{style "intro-paragraph.user-avatar"}}">{{.User.Login}}
+  </a>.
+</p>
 
 {{range .IntervalDigests }}
-  <h1>{{.Header}}</h1>
+  <h1 style="{{style "interval-header"}}">{{.Header}}</h1>
 
   <p>{{.Description}}</p>
 
   {{range .RepoDigests}}
-    <h2>
-      <a href="{{.Repo.HTMLURL}}">{{.Repo.FullName}}</a>
+    <h2 style="{{style "repository-header"}}">
+      <a href="{{.Repo.HTMLURL}}" style="{{style "link"}}">{{.Repo.FullName}}</a>
     </h2>
 
     <div>
       {{range .Commits }}
-        <div>
-          <h3>{{.Title}}</h3>
+        <div style="{{style "commit"}}">
+          <h3 style="{{style "commit.title"}}">{{.Title}}</h3>
           {{if .Message}}
-            <pre>{{.Message}}</pre>
+            <pre  style="{{style "commit.message"}}">{{.Message}}</pre>
           {{end}}
-          <div>
-            <a href="{{.URL}}">{{.DisplaySHA}}</a>
-            <i title={{.DisplayDateTooltip}}>{{.DisplayDate}}</i>
+          <div style="{{style "commit.footer"}}">
+            <a href="{{.URL}}"
+               style="{{style "link" "commit.footer.link"}}">{{.DisplaySHA}}</a>
+            <i title={{.DisplayDateTooltip}}
+               style="{{style "commit.footer.date"}}">{{.DisplayDate}}</i>
           </div>
         </div>
       {{end}}
@@ -32,6 +45,6 @@
 
 {{end}}
 
-</dl>
+</div>
 
 {{end}}