Clean up the tutorial text..

spawnfest · Oct 29, 2023 · 432b9fe · 432b9fe
1 parent 62232a2
commit 432b9fe
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 51 deletions.
diff --git a/priv/chapter1.html b/priv/chapter1.html
@@ -77,7 +77,7 @@ <h1 class="text-black-600 text-5xl font-bold">
 
       <p>
       <p>
-        In the 'common' use scenario, button clicks trigger a javascript event.  
+        In the 'common' use scenario, button clicks trigger a javascript event.
 
         HTMX reduces this complexity to elements on any html element.  Check this out:
       </p>
@@ -91,14 +91,15 @@ <h1 class="text-black-600 text-5xl font-bold">
       </div>
 
       <p class="py-5">
+
         The hx-post and hx-swap attributes on this button tell htmx:
         <br>
         “When a user clicks on this button, issue an AJAX request to /clicked, and replace
         the entire button with the HTML response”
       </p>
 
       <p class="py-5">
-        So much power in so little, I've got this example hooked up right here:
+        So much power in so little code. I've got this example hooked up right here:
       </p>
 
       <div class="py-5">
@@ -108,66 +109,57 @@ <h1 class="text-black-600 text-5xl font-bold">
       </div>
 
       <p class="py-5">
-        This is only the most simplest of examples, as they say, you gotta start small.
+        As they say, you gotta start small. 
       </p>
 
       <b>The "Back end"</b>
 
       <p class="py-5">
         Of course this needs some server-side backend code to work correctly,  You'd need to
         run a simple web server that suits your needs.  If you check out the code for this project, you will
-        see that it is using "barista", a neat little HTTP server.
+        see that it is using "barista" with "lanes", a neat little HTTP server and routing utility.
       <p>
 
-      <p class="py-5">
-        The main guts of Barista's work is done via a a <a href="https://github.com/lfe-http/barista/tree/main#creating-custom-modules-"> Custom module </a>.   We're going to create a custom module that deals with the HTTP Post request.   Its really much simpler than you think.
+      <p>
+        If you want specific versions of these libraries that are known to work together check out the deps
+        used by this project in its
+        <a href="https://github.com/spawnfest/UntitledProject/blob/main/rebar.config">rebar.config</a> file.
       </p>
 
-      <p class="py-5">
-        In the example below, we're going to put all the functions below into a single function and
-        lean heavily on LFE's Pattern Matching to uniquely identify http requests to barista.
+      <p>
+        The main guts of Barista's work is done via a a <a href="https://github.com/lfe-http/barista/tree/main#creating-custom-modules-"> Custom module </a>.   We're going to create a custom module that hands routing off to "lanes"
+        to make things just that little bit easier to understand.
       </p>
 
-      <p class="py-5">
-        Here is the 'fallthrough' example.
+      <p>
+        In the example below, we're going to put all the functions below into a single function and
+        uses the "defroutes" macro supplied by the lanes library.  We're going to start here by defining a
+        single route that the app will use when the button is clicked on.
       </p>
 
       <br>
 
       <pre>
-(defun handle
-  ((method path (= `#m(body ,body) req))
-   (progn
-     (let* ((headers '("Content-Type: text/html", "\r\n"))
-            (body "Why Hello there !"))
-     (barista:response 200 headers body)))))
+        (defroutes
+         ('POST #"/chapter1-clicked"
+                 (progn
+                   (barista-response:ok "&lt;b&gt;Hello from Lisp Flavored erlang &lt;/b&gl;"))))
       </pre>
 
-      <p class="py-5 text-9xl">
-        In our example, we want to handle the HTTP POST verb, and return a HTML fragment.
-        The "method" is an erlang atom 'GET 'POST etc.
-        The "path" pattern is a binary list #"chapter1" #"nextpath", which doesnt include the "/" path
-        separators.
-      </p>
-
-      <p class="py-5">
-        Lets add a handler specifically for the "/chapter1-clicked"
+      <p>
+        In our example, we want to handle the HTTP POST verb, and return a HTML fragment.<br>
+        The "method" is an erlang atom 'GET 'POST etc.<br>
+        The "path" pattern is a binary list #"chapter1-clicked".  <br>
+        Lanes creates some additional functionality, that we will get into later.
       </p>
 
-      <pre>
-;; previous matches removed here.
-  (('POST (list (binary (&quot;chapter1-clicked&quot;)) )(= `#m(body ,body) req))
-   (progn
-     (let* ((headers (generate-headers))
-            (body (list (binary &quot;&lt;b&gt; This is just a html fragment &lt;/b&gt;&quot;))))
-       (lfe_io:format &quot;headers: ~p~n&quot; `(,headers))
-       (barista:response 200 headers body))))
-    </pre>
+      <p>
+        Keen readers who wonder how you add multiple routes to a single application can use the power
+        of Lisp Flavored Erlangs pattern matching in function headers.  This is discussed in
+        the <a href="http://docs.lfe.io/current/user-guide/diving/5.html"> LFE user guide section 2.5.3.3</a>.
+</p>
 
-      <p class="py-5">
-        For the full example check out the source in the demo repo <a href="https://github.com/spawnfest/UntitledProject"> here. </a>
-      </p>
-      <p class="py-5 text-9xl">
+<p class="py-5 text-9xl">
        <a href="/chapter1" hx-boost="true">← Previous Chapter</a> || <a href="/chapter2" hx-boost="true">Next Chapter →</a>
       </p>
 </div>

diff --git a/priv/index.html b/priv/index.html
@@ -35,6 +35,13 @@
           padding-left: 1.25rem; /* 20px */
           padding-right: 1.25rem; /* 20px */
       }
+
+      .center {
+          margin: auto;
+          width: 50%;
+          padding: 10px;
+      }
+
     </style>
 
 </head>
@@ -119,6 +126,12 @@ <h1 class="text-black-600 text-5xl font-bold">
       web client to the server are http verbs, previous locked up behind javascript and json.
       </p>
 
+      <p>
+        If you fire up your web browsers "Developer tools", we can see how this is immediately
+        useful.  The the link to the next chapter below is clicked, it will not do a full page refresh.
+        Instead the contents will be inserted into the page without a full refresh.  Give it a go.
+      </p>
+
       <p class="py-5 text-9xl">
         || <a href="/chapter1" hx-boost="true">Next Chapter →</a>
       </p>

diff --git a/spawnfest-manifest.md b/spawnfest-manifest.md
@@ -7,6 +7,7 @@ This is my first time in this competition, so I'm hoping that I dont' break the
 README - Based on [This](https://gist.githubusercontent.com/DomPizzie/7a5ff55ffa9081f2de27c315f5018afc/raw/d59043abbb123089ad6602aba571121b71d91d7f/README-Template.md)  Basically a full rewrite, i borrowed headings and layout from this.
 
 Barista - https://github.com/lfe-http/barista - I didn't write the webserver, this exits already.
+Lanes - https://github.com/lfe-http/lanes - I didn't write this.
 
 Build tests - based on [this](https://github.com/wmealing/CI-CD-TEST) which was modified.
 

diff --git a/src/barista-routes.lfe b/src/barista-routes.lfe
@@ -29,27 +29,24 @@
 
  ('GET #"/chapter1"
        (progn
-         (logger:info "This is getting old, why doesnt this match ")
          (barista-response:ok (erlang:binary_to_list (template:load "chapter1.html")))))
 
  ('POST #"/chapter1-clicked"
         (progn
-          (logger:emergency "This is an emergency!")
-          (barista-response:ok "<b> Hello from Lisp Flavored erlang </b>")))
+          (barista-response:ok "<div class=\"center\"> Hello from Lisp Flavored erlang </div>")))
 
  ('GET #"/chapter2"
        (progn
-         (logger:info "I kinda expected this to appear")
-         (barista-response:ok (erlang:binary_to_list (template:load "chapter1.html")))))
+         (barista-response:ok (erlang:binary_to_list (template:load "chapter2.html")))))
 
- ;; single order operations
- ('POST #"/order"
-        (progn
-          (barista-response:ok "ORDER PLACED")))
+ ('GET #"/chapter3"
+       (progn
+         (barista-response:ok (erlang:binary_to_list (template:load "chapter3.html")))))
+
+ ('GET #"/live-demo"
+       (progn
+         (barista-response:ok (erlang:binary_to_list (template:load "live.html")))))
 
- ('GET #"/test/"
-       (barista-response:ok "sure fine whatever"))
-
  ;; error conditions
  ('ALLOWONLY ('GET 'POST 'PUT 'DELETE)
              (barista-response:method-not-allowed))