Use Turbo for search results page

Author: RoyalIcing

apps/components_guide_web/assets/js/app.js

@@ -13,6 +13,7 @@ import "phoenix_html";
 import { Socket } from "phoenix";
 import NProgress from "nprogress";
 import LiveSocket from "phoenix_live_view";
+import * as Turbo from "@hotwired/turbo";
 
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")

apps/components_guide_web/assets/package-lock.json

@@ -6,6 +6,7 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
+    "@hotwired/turbo": "^7.0.0-beta.4",
     "nprogress": "^0.2.0",
     "phoenix": "file:../../../deps/phoenix",
     "phoenix_html": "file:../../../deps/phoenix_html",

apps/components_guide_web/assets/package.json

@@ -5,7 +5,7 @@ defmodule ComponentsGuideWeb.ResearchController do
   alias ComponentsGuide.Research.Spec
   alias ComponentsGuideWeb.ResearchView, as: View
 
-  def index(conn, %{"q" => query}) do
+  def index(conn, %{"q" => query, "turbo" => _}) do
     query = query |> String.trim()
 
     case query do
@@ -14,10 +14,35 @@ defmodule ComponentsGuideWeb.ResearchController do
 
       query ->
         results = load_results(query)
-        render(conn, "index.html", %{query: query, results: results})
+        render(conn, "turbo-results.html", %{query: query, results: results})
     end
   end
 
+  def index(conn, %{"q" => query}) do
+    query = query |> String.trim()
+
+    case query do
+      "" ->
+        render(conn, "empty.html")
+
+      query ->
+        render(conn, "turbo-initial.html", %{query: query})
+    end
+  end
+
+  #   def index(conn, %{"q" => query}) do
+  #     query = query |> String.trim()
+  # 
+  #     case query do
+  #       "" ->
+  #         render(conn, "empty.html")
+  # 
+  #       query ->
+  #         results = load_results(query)
+  #         render(conn, "index.html", %{query: query, results: results})
+  #     end
+  #   end
+
   def index(conn, _params) do
     index(conn, %{"q" => ""})
   end
@@ -43,7 +68,8 @@ defmodule ComponentsGuideWeb.ResearchController do
       content_tag(
         :article,
         children,
-        class: "mb-4 text-xl spacing-y-4 p-4 text-white bg-blue-900 border border-blue-700 rounded shadow-lg"
+        class:
+          "mb-4 text-xl spacing-y-4 p-4 text-white bg-blue-900 border border-blue-700 rounded shadow-lg"
       )
     end
   end

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

@@ -2,6 +2,9 @@
   <div class="X pt-8 pb-12">
     <%= render ComponentsGuideWeb.IntegrationsView, "convertkit_form.html", [] %>
   </div>
+  
+  <turbo-frame id="footer" src="/random">
+  </turbo-frame>
 
   <ul class="list-none text-xs mt-4 leading-loose text-gray-500">
     <li>Copyright © 2020 Patrick Smith

apps/components_guide_web/lib/components_guide_web/templates/layout/_contentinfo.html.eex

@@ -0,0 +1,54 @@
+<%
+heading = "Research 🔍 specs and implementations"
+heading = "Search across Can I Use, BundlePhobia, 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>

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

@@ -0,0 +1,13 @@
+<turbo-frame id=search src="/research?q=<%= @query %>&turbo=1" target=_top>
+
+<%= render @view_module, "_header.html", query: @query %>
+
+<div class="text-white bg-gray-900 py-8">
+  <div class="container">
+    <div class="px-6">
+      <div>Loading…</div>
+    </div>
+  </div>
+</div>
+
+</turbo-frame>

apps/components_guide_web/lib/components_guide_web/templates/research/turbo-initial.html.eex

@@ -0,0 +1,13 @@
+<turbo-frame id=search target=_top>
+  
+<%= render @view_module, "_header.html", query: @query %>
+
+<div class="text-white bg-gray-900 py-8">
+  <div class="container">
+    <div class="px-6">
+      <%= @results %>
+    </div>
+  </div>
+</div>
+
+</turbo-frame>