From 6fc6d943e7e8f2de59211e00e820accb3f4efaac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexis=20M=C3=A9taireau?= <alexis@notmyidea.org>
Date: Fri, 5 Oct 2012 02:33:21 +0200
Subject: [PATCH] theme changes

---
 content/python/caching-elastic-search.rst | 72 +++++++++++++++++++++++
 theme/static/css/main.css                 |  5 +-
 theme/templates/index.html                |  5 +-
 3 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 content/python/caching-elastic-search.rst

diff --git a/content/python/caching-elastic-search.rst b/content/python/caching-elastic-search.rst
new file mode 100644
index 0000000..c95870c
--- /dev/null
+++ b/content/python/caching-elastic-search.rst
@@ -0,0 +1,72 @@
+How to cache Elastic Seach Queries?
+###################################
+
+:status: other
+
+The first thing to realize is what do we want to cache exactly? There is a fair
+bit of things we might want to cache. Let's start by the most queried pages:
+the home and the list of apps per category.
+
+Caching things
+==============
+
+Caching is easy, it's something like that, in term of python code::
+
+    if key in cache:
+        value = cache.get(key)
+    else:
+        value = do_the_request()
+        cache.set(key, value)
+    return value
+
+Back to business logic: I want to cache the request that are done on the
+homepage. The code currently looks like this::
+
+    popular = Webapp.popular(region=region, gaia=request.GAIA)[:10]
+    latest = Webapp.latest(region=region, gaia=request.GAIA)[:10]
+
+Nothing fancy going on here, we're displaying the list of popular and latest
+apps on the marketplace. I can cache the results for each region, and depending
+if `request.GAIA` is `True` or not. The key will look like `popular-{region}`,
+to which I will eventually append `-gaia` if it makes sense. More generally,
+I will turn a number of criterias into a single key, like this::
+
+    def cache(qs, *keys):
+        """Cache the given querystring"""
+        key = '-'.join(keys)
+        if key in cache:
+            result = cache.get(key)
+        else:
+            result = qs
+            cache.set(key, result)
+        return result
+
+Which I can use like this::
+
+    keys = [region.slug, ]
+    if request.GAIA:
+        keys.append('gaia')
+
+    popular = cache(Webapp.popular(region=region, gaia=request.GAIA)[:10],
+                    'popular', *keys)
+
+Caching is easy, invalidation is hard
+=====================================
+
+Right, we got this cached, good. But what happens when the data we cached
+changes? Currently, nothing, we return the same data over and over again.
+
+We need to tell our application when this cache isn't good anymore; we need to
+*invalidate* it.
+
+We can use different strategies for this:
+
+* Set a timeout for the cache.
+* Invalidate manually the cache when something changes, for instance using
+  signals.
+
+Here, obviously, we don't want to invalidate the cache each time we're adding
+a new rating; what we'll do is to invalidate the cache manually, when we
+compute the new popularity of the addons.
+
+In this case, this is done by a command.
diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index cbf93b1..64687cd 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -10,6 +10,7 @@
 /* Imports */
 @import url("reset.css");
 @import url("pygment.css");
+@import url("categories.css");
 @import url("typogrify.css");
 @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin);
 
@@ -68,6 +69,7 @@ h1 a:hover {
 	
 /* Paragraphs */
 p {margin-bottom: 1.143em; text-align: justify}
+article .category { font-size: 3em; float: right; display: block; color: rgba(200, 200, 200, .2); }
 
 strong, b {font-weight: bold;}
 em, i {font-style: italic;}
@@ -347,10 +349,9 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
 .hentry {
 	display: block;
 	clear: both;
-	border-bottom: 1px solid #eee;
 	padding: 1.5em 0;
 }
-li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
+li:last-child .hentry, #content > .hentry {margin: 0;}
 #content > .hentry {padding: 1em 0;}
 .hentry img{display : none ;}
 .entry-title {font-size: 3em; margin-bottom: 10px; margin-top: 0;}
diff --git a/theme/templates/index.html b/theme/templates/index.html
index 45f50c1..af1b0eb 100644
--- a/theme/templates/index.html
+++ b/theme/templates/index.html
@@ -5,10 +5,11 @@
     <section id="content" class="body">
     <ol id="posts-list" class="hfeed">
     {% for article in articles_page.object_list %}        
-        <li><article class="hentry">    
+        <li><article class="hentry {{ article.category }}">    
+        <span class='category'>{{ article.category }}</span>
         <h1>
             <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title}}"> {{ article.title }} </a>
-        </h1> {{ article.locale_date }}, in <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>.
+        </h1>
         </article></li>
     {% endfor %}
     </ol><!-- /#posts-list -->