nicer example modulo css

quickstart.sh

@@ -2,5 +2,5 @@
 
 export port=$1
 lein uberjar
-java -cp target/pronouns-standalone.jar clojure.main -m pronouns.web
 open http://localhost:"$port"/ze/zir
+java -cp target/pronouns-standalone.jar clojure.main -m pronouns.web

src/pronouns/pages.clj

@@ -3,19 +3,95 @@
             [pronouns.util :as u]
             [hiccup.core :refer :all]))
 
+
+(defn wrap-pronoun
+  [pronoun]
+  [:b pronoun])
+
+(defn wrap-para
+  [whatever]
+  [:p whatever]
+  )
+
 (defn subject-example
   [subject]
-  [:span#blah [:b subject] " went to the park."])
+  (wrap-para
+  [:span#sentence (wrap-pronoun subject) " went to the park."]))
+
+(defn object-example
+  [object]
+  (wrap-para
+  [:span#sentence "I went with " (wrap-pronoun object) "."]
+  ))
+
+(defn posessive-determiner-example
+  [subject possessive-determiner]
+  (wrap-para
+  [:span#sentence (wrap-pronoun subject) " brought " (wrap-pronoun possessive-determiner) " frisbee."]
+  ))
+
+(defn possessive-pronoun-example
+  [possessive-pronoun]
+  (wrap-para
+  [:span#sentence "At least I think it was " (wrap-pronoun possessive-pronoun) "."]
+  ))
+
+(defn reflexive-example
+  [subject reflexive]
+  (wrap-para
+  [:span#sentence (wrap-pronoun subject) " threw it to " (wrap-pronoun reflexive)]
+  ))
+
+
+(defn twitter-name [name]
+  [:a {:href (str "https://www.twitter.com/" name)} (str "@" name)]
+)
+
+(defn contact-block []
+  [:div {:class "contact"}
+   [:p "Written by " (twitter-name "morganastra") " and " (twitter-name "thelseraphim") "."]
+   [:p "visit the project on " [:a {:href "https://github.com/witch-house/pronoun.is"} "github."]]]
+)
+
+
+(defn about-block []
+  [:div {:class "about"}
+   [:p "Full usage:"]
+   [:p
+    [:tt "http://pronoun.is/subject-pronoun/object-pronoun/possessive-determiner/possessive-pronoun/reflexive"]
+    " displays examples of your pronouns. If we have a good guess we'll let you use just the first one or two."]
+   [:p "Quick examples:"]
+   [:p "My name is Thel Seraphim, my " [:a {:href "http://pronoun.is/she"} "http://pronoun.is/she"] "."]
+   [:p "My name is Morgan Astra, my " [:a {:href "http://pronoun.is/ze/zir"} "http://pronoun.is/ze/zir"] "."]
+   ]
+)
+
+
+
+(defn examples-block
+  [subject object possessive-determiner possessive-pronoun reflexive]
+  [:div {:class "examples"}
+   [:p [:h1 "Usage examples:"]]
+   (subject-example subject)
+   (object-example object)
+   (posessive-determiner-example subject possessive-determiner)
+   (possessive-pronoun-example possessive-pronoun)
+   (reflexive-example subject reflexive)])
+
+
 
 (defn format-pronoun-examples
   [subject object possessive-determiner possessive-pronoun reflexive]
-  (s/join "\n"
-          [(str subject " went to the park")
-           (html (subject-example subject))
-           (str "I went with " object)
-           (str subject " brought " possessive-determiner " frisbee")
-           (str "at least I think it was " possessive-pronoun)
-           (str subject " threw it to " reflexive)]))
+  (html
+   [:html
+   [:head ""]
+   [:body
+    (examples-block subject object possessive-determiner possessive-pronoun reflexive)
+    (about-block)
+    (contact-block)]
+    ]
+   )
+ )
 
 
 (defn parse-pronouns-with-lookup [pronouns-string pronouns-table]

src/pronouns/web.clj

@@ -25,7 +25,7 @@
 
   (GET "/*" {params :params}
        {:status 200
-        :headers {"Content-Type" "text/plain"}
+        :headers {"Content-Type" "text/html"}
         :body (pages/pronouns (:* params) pronouns-table)})
 
   (ANY "*" []