Add interactive live view to http caching section

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/template_engines/markdown_engine.ex

@@ -14,8 +14,19 @@ defmodule ComponentsGuideWeb.TemplateEngines.MarkdownEngine do
     # regex = ~r{<live-([\w-]+)>(.+)</live-([\w-]+)>}
     regex = ~r{<live-([\w-]+)>([^<]+)</live-([^>]+)>}
     # regex = ~r{<live-([\w-]+)>}
-
-    html = Regex.replace(regex, html, fn whole, name, content -> name end)
+    
+    html = Regex.replace(regex, html, fn whole, name, content ->
+      case name do
+        "render" ->
+          module = content |> String.trim #|> String.to_existing_atom
+          "<div><%= live_render(@conn, #{module}, session: %{}) %></div>"
+        _ ->
+          "!" <> name <> "!" <> content
+      end
+    end)
+    
+    # html = Regex.replace(regex, html, fn whole, name, content -> "!" <> name <> "!" <> content end)
+    
     # html = Regex.replace(regex, html, fn whole, name, content -> "<div><%= live_render(@conn, ComponentsGuideWeb.FakeSearchLive, session: %{}) %></div>" end)
 
     html |> EEx.compile_string(engine: Phoenix.HTML.Engine, file: path, line: 1)

apps/components_guide_web/lib/components_guide_web/templates/web_standards/http-caching.html.md

@@ -4,10 +4,6 @@
 ComponentsGuideWeb.WebStandards.Live.HttpCaching
 </live-render>
 
-<div>
-<%= live_render(@conn, ComponentsGuideWeb.WebStandards.Live.HttpCaching, session: %{}) %>
-</div>
-
 ## Resource that does not want to be cached
 
 ```http
@@ -33,7 +29,7 @@ Host: example.org
 ```http
 HTTP/1.1 200 OK
 ETag: "ABC"
-Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT 
+Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
 Cache-Control: public, max-age=31536000
 Date: Fri, 02 Oct 2020 09:28:50 GMT
 Content-Type: image/png
@@ -58,7 +54,7 @@ Date: Fri, 02 Oct 2020 09:28:50 GMT
 Content-Type: image/png
 Content-Length: 2348
 Cache-Control: public, max-age=31536000
-Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT 
+Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
 Vary: Accept-Encoding
 
 ```
@@ -68,7 +64,7 @@ Vary: Accept-Encoding
 ```http
 GET /assets/logo.png HTTP/1.1
 Host: example.org
-If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT 
+If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
 ```
 
 ```http
@@ -78,7 +74,7 @@ Content-Type: image/png
 Content-Length: 2348
 Cache-Control: public, max-age=31536000
 ETag: "ABC"
-Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT 
+Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
 Vary: Accept-Encoding
 
 ```
@@ -98,7 +94,7 @@ Date: Fri, 02 Oct 2020 09:28:50 GMT
 Content-Type: image/png
 Content-Length: 2348
 Cache-Control: public, max-age=31536000
-Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT 
+Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
 Vary: Accept-Encoding
 
 ```
@@ -108,7 +104,7 @@ Vary: Accept-Encoding
 ```http
 GET /assets/logo.png HTTP/1.1
 Host: example.org
-If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT 
+If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
 ```
 
 ```http
@@ -118,7 +114,7 @@ Date: Fri, 02 Oct 2020 09:28:50 GMT
 Content-Type: image/png
 Content-Length: 2348
 Cache-Control: public, max-age=31536000
-Last-Modified: Thu, 22 Oct 2015 07:28:00 GMT 
+Last-Modified: Thu, 22 Oct 2015 07:28:00 GMT
 Vary: Accept-Encoding
 
 ```

apps/components_guide_web/lib/components_guide_web/templates/web_standards/http_caching_live.ex

@@ -1,14 +1,51 @@
 defmodule ComponentsGuideWeb.WebStandards.Live.HttpCaching do
   use ComponentsGuideWeb, :live_view
   alias ComponentsGuideWeb.StylingHelpers
+  
+  defmodule State do
+    defstruct local: nil, remote: nil
+  end
 
   def mount(_params, _session, socket) do
-    {:ok, assign(socket, state: %{})}
+    {:ok, assign(socket, state: %State{})}
   end
 
   def render(assigns) do
     ~L"""
-    <p>Hello!</p>
+    <form phx-change=change>
+      <fieldset class="flex flex-row space-x-4">
+        <div class="font-bold">Local</div>
+        <label><input type=radio name=local value=0 class="form-radio"> Blank</label>
+        <label><input type=radio name=local value=1 class="form-radio"> Loaded previously</label>
+      </fieldset>
+      <fieldset class="flex flex-row space-x-4">
+        <div class="font-bold">Remote</div>
+        <label><input type=radio name=remote value=a class="form-radio"> ABC</label>
+        <label><input type=radio name=remote value=z class="form-radio"> XYZ</label>
+      </fieldset>
+    </form>
     """
   end
+  
+  def handle_event("change", %{"local" => local}, socket) do
+    state = socket.assigns.state
+    state = put_in(state.local, local)
+    
+    {
+      :noreply,
+      socket
+      |> assign(:state, state)
+    }
+  end
+  
+  def handle_event("change", %{"remote" => remote}, socket) do
+    state = socket.assigns.state
+    state = put_in(state.remote, remote)
+    
+    {
+      :noreply,
+      socket
+      |> assign(:state, state)
+    }
+  end
 end