UI stuff. The search does not work on the server side ... oh my ...

project.clj

@@ -20,7 +20,6 @@
          :init luduverse.handler/init
          :destroy luduverse.handler/destroy
          :open-browser? false}
-  :repl-options {:timeout 12000}
   :aliases {"save-competition-30" ["run" "-m" "luduverse.scraper/save-competition" "30"]}
   :profiles {:production {:ring {:stacktrace? false}}
              :dev {:ring {:auto-reload? true

resources/public/css/main.css

@@ -0,0 +1,85 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, DejaVu Sans;
+}
+
+#logo {
+    margin: auto;
+    margin-top: 200px;
+    display: block;
+}
+
+form#search {
+    margin: auto;
+    width: 600px;
+}
+
+form#search > input, form#search-results > input {
+    width: 580px;
+    font-size: 40px;
+    font-weight: bold;
+    margin: 20px 0 10px 0;
+    padding: 10px;
+    border: 2px solid #ddd;
+    background-color: #fcfcfc;
+}
+
+form#search > p {
+    font-size: 12px;
+    color: #aaa;
+}
+
+form#search > p > strong {
+    background-color: #eee;
+    color: black;
+    padding: 1px 5px;
+    border-radius: 2px;
+}
+
+div#results-header {
+    margin: 10px 0 0 15px;
+}
+
+#logo-search-results, form#search-results {
+    float: left;
+}
+form#search-results > input {
+    margin: 5px 0 0 20px;
+}
+
+#results {
+    margin-top: 20px;
+}
+
+#results > div {
+    width: 200px;
+    height: 200px;
+    background-color: #ccc;
+    border: 1px solid black;
+    margin: 3px;
+    float: left;
+    position: relative;
+}
+#results > div p {
+    position: absolute;
+    left: -2;
+    top: 172px;
+    width: 196px;
+    height: 25px;
+    background-color: black;
+    padding: 2px;
+    color: white;
+    font-size: 9px;
+}
+#results > div p > span {
+    font-weight: bold;
+}
+
+a {
+    color: red;
+}
+
+a:hover {
+    color: orange;
+}

src/luduverse/handler.clj

@@ -3,11 +3,21 @@
             [compojure.route :as route]
             [noir.util.middleware :as middleware]
             [luduverse.pages :as pages]
-            [luduverse.images :as images]))
+            [luduverse.images :as images]
+            [luduverse.search :as search]))
+
+(defn render [template & args]
+  (apply str (apply template args)))
 
 (defroutes core-routes
   (route/resources "/")
-  (GET "/" [] (pages/front-page))
+  (GET "/" [] (render pages/landingpage-template))
+  (POST "/search" {params :params}
+        (let [term (params "term")
+              s (search/search term)
+              hits (:hit-count s)
+              entries (:results s)]
+          (render pages/results-template term hits entries)))
   (route/not-found "404, sorry."))
 
 (defn init [])

src/luduverse/pages.clj

@@ -1,4 +1,16 @@
-(ns luduverse.pages)
+(ns luduverse.pages
+  (:require [net.cgrand.enlive-html :as html]))
 
-(defn front-page []
+(html/deftemplate landingpage-template "templates/landingpage.html" [])
-  "Wait for it ...")
+
+(html/defsnippet item-model "templates/results.html" [:div#results :> :div]
+  [id image-path username title]
+  [:img] (html/set-attr :src image-path)
+  [:p] (html/content username)
+  [:span] (html/content title))
+
+(html/deftemplate results-template "templates/results.html"
+  [search-term hits results]
+  [:form#search :> :input#term] (html/set-attr :value search-term)
+  ;[:div#results (html/content (map #(item-model %) results))]
+  )

src/luduverse/search.clj

@@ -4,8 +4,6 @@
             [clojurewerkz.elastisch.rest.document :as eld]
             [clojurewerkz.elastisch.rest.response :as elresp]
             [clojurewerkz.elastisch.query :as elq]
-
-            [clojure.pprint :as pp]
             [luduverse.models.entry :as entry]))
 
 (def connection (atom (el/connect "http://localhost:9200")))
@@ -40,7 +38,8 @@
          (store (:id e))))
 
 (defn search [term]
-  (let [res (eld/search @connection "luduverse" "entry"
+  (let [con (el/connect "http://localhost:9200")
+        res (eld/search con "luduverse" "entry"
                         :query (elq/query-string :query term)
                         :sort {:title "desc"}
                         :from 0

src/templates/landingpage.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>LuduVerse - ClojureCup 2014 by Aaron Fischer</title>
+    <meta name="description" content="A Ludum Dare entry search engine">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+  <body>
+
+    <img id="logo" src="images/logo.jpg">
+
+    <form id="search" action="/search" method="post">
+      <input type="text" name="term" value="">
+      <p>Search all the <a href="http://ludumdare.com/">Ludum Dare 30</a>
+	entries (2538 Entries) (more LDs to come in the future, I didn't want to stress the
+	server too much). You don't know what to search? Try <strong>html5</strong>,
+	<strong>notch</strong> or <strong>aliens and zombies</strong>. You can
+	search for usernames, game titles or even the whole description. Time
+	to find some hidden gems!</p>
+    </form>
+
+  </body>
+</html>

src/templates/results.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>LuduVerse results- ClojureCup 2014 by Aaron Fischer</title>
+    <meta name="description" content="A Ludum Dare entry search engine">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+  <body>
+
+    <div id="results-header">
+	<img id="logo-search-results" src="images/logo_small.jpg">
+	<form id="search-results" action="/search" method="post">
+	  <input type="text" name="term" value="">
+	</form>
+    </div>
+    <br style="clear: both;">
+
+    <div id="results">
+      <div class="item">
+	<a href="#">
+	  <img src="#">
+	  <p>This is the dungeon<br>
+	  <span>by Aaron</span></p>
+	</a>
+      </div>
+    </div>
+
+  </body>
+</html>