Present slightly nicer

Author: RoyalIcing

apps/components_guide/lib/components_guide/research/spec.ex

@@ -5,11 +5,22 @@ defmodule ComponentsGuide.Research.Spec do
     url = "https://cdn.jsdelivr.net/npm/caniuse-db@1.0.30001042/data.json"
     {:ok, data} = Source.json_at(url)
     table = data["data"]
+
     if false do
       keys = Map.keys(table)
       inspect(keys)
     else
-      table["documenthead"] |> inspect()
+      matching_keywords =
+        table
+        |> Enum.flat_map(fn {key, value} ->
+          case value["keywords"] |> String.contains?(query) do
+            true -> [value["description"]]
+            false -> []
+          end
+        end)
+
+      # table["documenthead"] |> inspect()
+      matching_keywords
     end
   end
 
@@ -32,7 +43,7 @@ defmodule ComponentsGuide.Research.Spec do
 
     document
     |> Floki.find("body")
-    |> Floki.find("a:fl-contains('form')")
+    |> Floki.find("a:fl-contains('#{query}')")
     |> Floki.raw_html()
 
     # html

apps/components_guide_web/lib/components_guide_web/controllers/research_controller.ex

@@ -25,16 +25,27 @@ defmodule ComponentsGuideWeb.ResearchController do
     content_tag(:h2, text, class: "font-bold")
   end
 
+  defp present_results(results) when is_binary(results) do
+    results
+  end
+
+  defp present_results(results) when is_list(results) do
+    items = results
+    |> Enum.map(fn result -> content_tag(:li, result) end)
+
+    content_tag(:ul, items)
+  end
+
   defp load_results(query) when is_binary(query) do
     # Spec.clear_search_cache()
     [
       content_tag(:article, [
         h2("HTML spec"),
-        Spec.search_for(:whatwg_html_spec, query)
+        Spec.search_for(:whatwg_html_spec, query) |> present_results()
       ]),
       content_tag(:article, [
         h2("Can I Use"),
-        Spec.search_for(:caniuse, query)
+        Spec.search_for(:caniuse, query) |> present_results()
       ])
     ]
   end

apps/components_guide_web/lib/components_guide_web/templates/research/index.html.eex

@@ -3,6 +3,9 @@
     <h2 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
       <%= "Research 🔍 specs and implementations" %>
     </h2>
+    <form role=search action="/research" class="flex h-full pt-8 px-2 items-center">
+      <input type=text name=q placeholder="Search" class="w-full py-1 px-2 bg-white text-black text-xl" value="<%= @query %>">
+    </form>
   </section>
 </header>