Color our categories

.iex.exs

@@ -0,0 +1 @@
+alias FirestormData.{Repo, Category}

apps/firestorm_data/lib/firestorm_data/schema/category.ex

@@ -47,4 +47,19 @@ defmodule FirestormData.Category do
     |> changeset(%{title: title})
     |> Repo.insert
   end
+
+  def color(category) do
+    category
+    |> hash_number
+  end
+
+  def hash(category) do
+    :crypto.hash(:sha, category.slug)
+  end
+
+  def hash_number(category) do
+    (for <<num <- hash(category)>>, do: num)
+    |> Enum.sum
+    |> rem(360)
+  end
 end

apps/firestorm_web/web/controllers/thread_controller.ex

@@ -25,14 +25,17 @@ defmodule FirestormWeb.ThreadController do
     case GetThread.run(%GetThread{finder: finder, category: category}) do
       {:ok, thread} ->
         [first_post | posts] = thread.posts
+        category_breadcrumbs =
+          [ thread.category | Repo.all Category.ancestors(thread.category) ]
 
         conn
         |> render(
              "show.html",
              thread: thread,
              category: category,
-             first_post:
-             first_post, posts: posts
+             first_post: first_post,
+             posts: posts,
+             category_breadcrumbs: category_breadcrumbs
            )
 
       {:error, :not_found} ->

apps/firestorm_web/web/static/css/components/_category-pill.scss

@@ -1,7 +1,8 @@
 $purple: #673AB7;
 
 .category-pill {
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
   margin: 0;
   padding: 0;
   font-size: .75rem;
@@ -12,13 +13,30 @@ $purple: #673AB7;
       text-decoration: none;
       display: inline-block;
       padding: $padding-small $padding-medium;
-      // TODO: Don't put backround here, put it inline and put an attribute on
-      // categories to give them a color
-      background: $purple;
-      border-radius: $border-radius;
+      border-right: 1px solid white;
       &:hover {
         background: lighten($purple, 10%);
       }
     }
+    @for $n from 0 through 359 {
+      &.-color-#{$n} {
+        a {
+          background-color: hsla($n, 100%, 50%, 1);
+        }
+      }
+    }
+    &:first-child {
+      a {
+        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+      }
+    }
+    &:last-child {
+      a {
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+        border-right: 0;
+      }
+    }
   }
 }

apps/firestorm_web/web/templates/thread/show.html.haml

@@ -7,7 +7,8 @@
       = time_string
   .item-metadata
     %ul.category-pill
-      %li.category= link @thread.category.title, to: category_path(@conn, :show, @thread.category.slug)
+      - for category <- @category_breadcrumbs do
+        %li.category{class: "-color-#{Category.color(category)}"}= link category.title, to: category_path(@conn, :show, category.slug)
 
 %ol.post-list
   %li= render "_first_post.html", post: @first_post, conn: @conn, category: @category, thread: @thread