Improve searching for specs

RoyalIcing · RoyalIcing · commit 28e4ebb203a1 · 2021-03-03T09:45:40.000+11:00
diff --git a/apps/components_guide/lib/components_guide/research/static.ex b/apps/components_guide/lib/components_guide/research/static.ex
@@ -36,18 +36,31 @@ defmodule ComponentsGuide.Research.Static do
                      end)
 
   @rfc_list [
-    {"json", ["rfc8259", "rfc7159", "rfc4627"],
+    {"JSON", ["rfc8259", "rfc7159", "rfc4627"],
      [
-       url: "https://tools.ietf.org/html/rfc8259",
        media_type: "application/json"
      ]},
-    {"csv", ["rfc4180"],
+    {"CSV", ["rfc4180"],
      [
-       url: "https://tools.ietf.org/html/rfc4180",
        media_type: "text/csv"
-     ]}
+     ]},
+    {"URL", ["rfc1738"], []},
+    {"URI", ["rfc3986"], []},
+    {"TCP", ["rfc793"], []},
+    {"UDP", ["rfc768"], []},
+    {"DNS", ["rfc1034", "rfc1035"], []},
+    {"DNS TXT", ["rfc1464"], []},
+    {"HTTP", ["rfc2616", "rfc7230", "rfc7231", "rfc7232", "rfc7233", "rfc7234", "rfc7235"], []},
+    {"Timestamps", ["rfc3339", "ISO 8601"], []},
+    {"WebSockets", ["rfc6455"], []}
   ]
 
+  @aliases %{
+    "redirect" => ["301", "302"],
+    "invalid" => ["412", "422"],
+    "etag" => ["304"]
+  }
+
   def search_for(query) when is_binary(query) do
     [
       search_for(:http_status, query),
@@ -75,8 +88,10 @@ defmodule ComponentsGuide.Research.Static do
       {^query, _, _} ->
         true
 
-      {_, rfcs, metadata} ->
-        Enum.member?(rfcs, query) || Keyword.get(metadata, :media_type) == query
+      {name, rfcs, metadata} ->
+        String.downcase(name) == query ||
+          Enum.member?(rfcs, query) ||
+          Keyword.get(metadata, :media_type) == query
     end
 
     @rfc_list
diff --git a/apps/components_guide_web/assets/css/app.css b/apps/components_guide_web/assets/css/app.css
@@ -40,11 +40,11 @@
   border: 0;
 }
 
-article a:not(nav *) {
-  text-decoration: underline;
+article {
+  /* --link-decoration: underline; */
 }
 article a:hover {
-  text-decoration: underline;
+  --hover\:link-decoration: underline;
 }
 article figcaption {
   font-style: italic;
@@ -60,12 +60,11 @@ a:not([class]) {
   text-decoration: var(--link-decoration);
 }
 a:hover:not([class]) {
-  --hover\:links-decoration: var(--link-decoration);
-  text-decoration: var(--hover\:links-decoration);
+  text-decoration: var(--hover\:link-decoration);
 }
 
 nav {
-  --hover\:links-decoration: underline;
+  --hover\:link-decoration: underline;
 }
 nav a:only-of-type {
   --link-padding: 0.5rem;
diff --git a/apps/components_guide_web/lib/components_guide_web/controllers/research_controller.ex b/apps/components_guide_web/lib/components_guide_web/controllers/research_controller.ex
@@ -318,28 +318,62 @@ defmodule ComponentsGuideWeb.ResearchView do
           "mb-4 text-xl spacing-y-4 p-4 text-white bg-indigo-900 border border-indigo-800 rounded-lg shadow-lg"
       )
     end
-  end
 
-  def render_static({type, info}) do
-    render_static(type, info)
-  end
+    def unordered_list(items, attrs \\ []) do
+      children =
+        Enum.map(items, fn text ->
+          content_tag(:li, text)
+        end)
 
-  def render_static(:http_status, {name, description}) do
-    Section.card([
-      content_tag(:h3, "HTTP Status: #{name}", class: "text-2xl"),
-      content_tag(:p, description)
-    ])
+      content_tag(:ul, children, attrs)
+    end
+
+    def description_list(items) do
+      children =
+        items
+        |> Stream.filter(fn {_title, value} -> value != nil end)
+        |> Enum.map(fn {title, value} ->
+          content_tag(:div, [
+            content_tag(:dt, title, class: "font-bold"),
+            content_tag(:dd, value, class: "pl-4")
+          ])
+        end)
+
+      content_tag(:dl, children)
+    end
   end
 
-  def render_static(:rfc, {name, rfcs, metadata}) do
-    Section.card([
-      content_tag(:h3, "RFC: #{name}", class: "text-2xl"),
-      content_tag(:p, inspect(rfcs)),
-      content_tag(:p, inspect(metadata)),
-      content_tag(:dl, [
-        content_tag(:dt, "Media (MIME) Type"),
-        content_tag(:dd, Keyword.get(metadata, :media_type))
+  defmodule Static do
+    def render(:http_status, {name, description}) do
+      Section.card([
+        content_tag(:h3, "HTTP Status: #{name}", class: "text-2xl font-bold"),
+        content_tag(:p, description)
+      ])
+    end
+
+    def render(:rfc, {name, specs, metadata}) do
+      Section.card([
+        content_tag(:h3, "#{name} Spec", class: "text-2xl font-bold"),
+        Section.description_list([
+          {"Specs",
+           specs
+           |> Enum.map(&link_to_spec/1)
+           |> Section.unordered_list(class: "flex list-disc ml-4 space-x-8")},
+          {"Media (MIME) Type", Keyword.get(metadata, :media_type)}
+        ])
       ])
-    ])
+    end
+
+    def link_to_spec("rfc" <> _ = spec) do
+      link(spec, to: "https://tools.ietf.org/html/" <> spec)
+    end
+
+    def link_to_spec(spec) do
+      spec
+    end
+  end
+
+  def render_static({type, info}) do
+    Static.render(type, info)
   end
 end
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/research/_header.html.eex b/apps/components_guide_web/lib/components_guide_web/templates/research/_header.html.eex
@@ -1,6 +1,6 @@
 <%
 heading = "Research 🔍 specs and implementations"
-heading = "Search across Can I Use, BundlePhobia, W3 & WhatWG specs"
+heading = "Search across Can I Use, BundlePhobia, RFCs, W3 & WhatWG specs"
 %>
 
 <header class="text-white bg-gray-900">
@@ -30,7 +30,7 @@ heading = "Search across Can I Use, BundlePhobia, W3 & WhatWG specs"
           <li><%= link("menu", to: "?q=menu") %>
         </ul>
       </dd>
-      <dt>Third-party</dt>
+      <dt>Libraries</dt>
       <dd>
         <ul class="list-none flex flex-wrap italic" style="--link-padding: 0.75em">
           <li><%= link("react-dom", to: "?q=react-dom") %>
@@ -43,10 +43,12 @@ heading = "Search across Can I Use, BundlePhobia, W3 & WhatWG specs"
           <li><%= link("wonka", to: "?q=wonka") %>
         </ul>
       </dd>
-      <dt>Concepts</dt>
+      <dt>Specs</dt>
       <dd>
         <ul class="list-none flex flex-wrap italic" style="--link-padding: 0.75em">
-          <li><%= link("error", to: "?q=error") %>
+          <li><%= link("JSON", to: "?q=JSON") %>
+          <li><%= link("CSV", to: "?q=CSV") %>
+          <li><%= link("ISO 8601", to: "?q=ISO%208601") %>
         </ul>
       </dd>
     </dl>
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/research/index.html.eex b/apps/components_guide_web/lib/components_guide_web/templates/research/index.html.eex
@@ -1,56 +1,9 @@
 <%
   heading = "Research 🔍 specs and implementations"
-  heading = "Search across Can I Use, BundlePhobia, W3 & WhatWG specs"
+  heading = "Search across Can I Use, BundlePhobia, RFCs, W3 & WhatWG specs"
 %>
-<header class="text-white bg-gray-900">
-  <div class="bg-indigo-900">
-    <h2 class="mx-auto max-w-4xl py-4 text-2xl text-center italic leading-tight text-indigo-100">
-      <%= heading %>
-    </h2>
-  </div>
-  <section class="container px-6 pb-8">
-    <form role=search action="/research" class="flex h-full pt-8 items-center">
-      <input type=text name=q placeholder="Search" class="w-full py-1 px-6 text-3xl bg-white text-black border rounded-full" value="<%= @query %>">
-    </form>
-    <dl
-      class="text-xl grid gap-2 items-center pt-4 px-6"
-      style="
-      grid-template-columns: auto 1fr;
-      --link-color: #76a9fa;
-      --hover\:link-decoration: underline;"
-    >
-      <dt>HTML & Roles</dt>
-      <dd>
-        <ul class="list-none flex flex-wrap italic" style="--link-padding: 0.75em">
-          <li><%= link("form", to: "?q=form") %>
-          <li><%= link("button", to: "?q=button") %>
-          <li><%= link("contentinfo", to: "?q=contentinfo") %>
-          <li><%= link("dialog", to: "?q=dialog") %>
-          <li><%= link("menu", to: "?q=menu") %>
-        </ul>
-      </dd>
-      <dt>Third-party</dt>
-      <dd>
-        <ul class="list-none flex flex-wrap italic" style="--link-padding: 0.75em">
-          <li><%= link("react-dom", to: "?q=react-dom") %>
-          <li><%= link("preact", to: "?q=preact") %>
-          <li><%= link("vue", to: "?q=vue") %>
-          <li><%= link("lit-html", to: "?q=lit-html") %>
-          <li><%= link("xstate", to: "?q=xstate") %>
-          <li><%= link("mobx", to: "?q=mobx") %>
-          <li><%= link("lodash", to: "?q=lodash") %>
-          <li><%= link("wonka", to: "?q=wonka") %>
-        </ul>
-      </dd>
-      <dt>Concepts</dt>
-      <dd>
-        <ul class="list-none flex flex-wrap italic" style="--link-padding: 0.75em">
-          <li><%= link("error", to: "?q=error") %>
-        </ul>
-      </dd>
-    </dl>
-  </section>
-</header>
+
+<%= render @view_module, "_header.html", query: @query %>
 
 <div class="text-white bg-gray-900 py-8">
   <div class="container">

Original file line number	Diff line number	Diff line change
`@@ -40,11 +40,11 @@`
`40`	`40`	`border: 0;`
`41`	`41`	`}`
`42`	`42`
`43`		`-article a:not(nav *) {`
`44`		`- text-decoration: underline;`
	`43`	`+article {`
	`44`	`+ /* --link-decoration: underline; */`
`45`	`45`	`}`
`46`	`46`	`article a:hover {`
`47`		`- text-decoration: underline;`
	`47`	`+ --hover\:link-decoration: underline;`
`48`	`48`	`}`
`49`	`49`	`article figcaption {`
`50`	`50`	`font-style: italic;`
`@@ -60,12 +60,11 @@ a:not([class]) {`
`60`	`60`	`text-decoration: var(--link-decoration);`
`61`	`61`	`}`
`62`	`62`	`a:hover:not([class]) {`
`63`		`- --hover\:links-decoration: var(--link-decoration);`
`64`		`- text-decoration: var(--hover\:links-decoration);`
	`63`	`+ text-decoration: var(--hover\:link-decoration);`
`65`	`64`	`}`
`66`	`65`
`67`	`66`	`nav {`
`68`		`- --hover\:links-decoration: underline;`
	`67`	`+ --hover\:link-decoration: underline;`
`69`	`68`	`}`
`70`	`69`	`nav a:only-of-type {`
`71`	`70`	`--link-padding: 0.5rem;`