Article search (#16)

* Cleanup CSS file

* Add free text query to Directus client

* Add search form to article list view

* Search titles instead of contents

Will prevent DDOS slighty.

assets/app.css

@@ -31,6 +31,45 @@ h3 {
     font-family: serif;
 }
 
+main {
+    background-color: #000;
+    margin: 0 auto;
+    max-width: 40em;
+    box-sizing: border-box;
+    padding: 3em;
+}
+
+pre {
+    margin: 2em 0;
+    background-color: #022;
+    overflow-y: auto;
+    padding: 0.33em;
+    box-shadow: 4px 4px 0 #333;
+    position: relative;
+    line-height: 1.2;
+    font-size: 0.8em;
+
+    > button {
+        position: absolute;
+        top: 0.25em;
+        right: 0.25em;
+    }
+}
+
+code {
+    font-family: "JetBrains mono", monaco, menlo, meslo, "Courier New", Courier,
+        monospace;
+}
+
+section {
+    position: relative;
+
+    & > h2 {
+        background: #000;
+        padding: 1em 0;
+    }
+}
+
 .skiplink {
     position: absolute;
     top: -5em;
@@ -42,14 +81,6 @@ h3 {
     }
 }
 
-main {
-    background-color: #000;
-    margin: 0 auto;
-    max-width: 40em;
-    box-sizing: border-box;
-    padding: 3em;
-}
-
 .flx {
     display: flex;
     justify-content: space-between;
@@ -125,52 +156,21 @@ main {
     }
 }
 
-pre {
-    margin: 2em 0;
-    background-color: #022;
-    overflow-y: auto;
-    padding: 0.33em;
-    box-shadow: 4px 4px 0 #333;
-    position: relative;
-    line-height: 1.2;
-    font-size: 0.8em;
-
-    > button {
-        position: absolute;
-        top: 0.25em;
-        right: 0.25em;
-    }
-}
-
-code {
-    font-family: "JetBrains mono", monaco, menlo, meslo, "Courier New", Courier,
-        monospace;
-}
-
 .sticky {
     position: sticky;
     top: 0;
 }
 
-section {
-    position: relative;
-}
-
 .months {
-    grid-auto-flow: column;
+    grid-auto-flow: rows;
     display: grid;
     list-style: none;
-    grid-template-rows: repeat(6, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 0.5em;
     padding-left: 0;
     margin: 3em 0;
 }
 
-section > h2 {
-    background: #000;
-    padding: 1em 0;
-}
-
 .articles {
     display: grid;
     grid-template-columns: 1fr 1fr;

lib/mse25/directus.ex

@@ -197,6 +197,7 @@ defmodule Mse25.Directus do
       params
       |> limit?(options)
       |> page?(options)
+      |> query?(options)
       |> Enum.join("&")
 
   defp limit?(params, opts) do
@@ -212,4 +213,12 @@ defmodule Mse25.Directus do
       pg -> ["page=" <> to_string(pg) | params]
     end
   end
+
+  defp query?(params, opts) do
+    case opts[:query] do
+      nil -> params
+      "" -> params
+      pg -> ["filter[title][_icontains]=" <> to_string(pg) | params]
+    end
+  end
 end

lib/mse25_web/controllers/page_controller.ex

@@ -21,11 +21,18 @@ defmodule Mse25Web.PageController do
   end
 
   def articles(conn, _params) do
-    articles = Directus.get_articles!(limit: 9999) |> group_annually
+    articles =
+      case conn.params do
+        %{"q" => query_string} -> Directus.get_articles!(limit: 9999, query: query_string)
+        _ -> Directus.get_articles!(limit: 9999)
+      end
+      |> group_annually
 
     render(conn, :articles,
       page_title: "Webblogg",
-      articles: articles
+      articles: articles,
+      q: conn.params["q"],
+      nosearch?: conn.params["q"] == nil or conn.params["q"] == ""
     )
   end
 

lib/mse25_web/controllers/page_html/articles.html.heex

@@ -9,7 +9,10 @@
   </ol>
   <h1>Webblogg</h1>
   <p>
-    Inlägg skrivna sedan 2006. Gå direkt till:
+    Inlägg skrivna sedan 2006.
+    <%= if @nosearch? do %>
+      Gå direkt till:
+    <% end %>
   </p>
   <ul class="months">
     <%= for {year, articles} <- @articles do %>
@@ -18,6 +21,16 @@
       </li>
     <% end %>
   </ul>
+  <form method="get" action="/webblogg">
+    <p>
+      <%= if @nosearch? do %>
+        Eller
+      <% end %>
+      <label for="q">sök innehåll</label>:
+      <input type="search" value={@q} name="q" id="q" size="7" />
+      <button>Sök</button>
+    </p>
+  </form>
   <%= for {year, articles} <- @articles do %>
     <section id={"y" <> year}>
       <h2 class="sticky"><%= year %></h2>