docs, new html markup syntax

Author: pimbrouwers

docs/docs/cross-site-request-forgery.html

@@ -37,15 +37,15 @@ <h2 id="falco-xsrf-support">Falco XSRF Support</h2>
 open Falco.Security
 
 let formView token =
-    Elem.html [] [
-        Elem.body [] [
-            Elem.form [ Attr.methodPost ] [
+    _html [] [
+        _body [] [
+            _form [ _methodPost_ ] [
                 // using the CSRF HTML helper, recommended to include as first
                 // form element
                 Xsrf.antiforgeryInput token
-                Elem.control &quot;first_name&quot; [] [ Text.raw &quot;First Name&quot; ]
-                Elem.control &quot;first_name&quot; [] [ Text.raw &quot;First Name&quot; ]
-                Elem.input [ Attr.typeSubmit ]
+                _control &quot;first_name&quot; [] [ _text &quot;First Name&quot; ]
+                _control &quot;first_name&quot; [] [ _text &quot;First Name&quot; ]
+                _input [ _typeSubmit_ ]
             ]
         ]
     ]

docs/docs/example-hello-world-mvc.html

@@ -44,24 +44,24 @@ <h2 id="view">View</h2>
 
     let layout content =
         Templates.html5 &quot;en&quot;
-            [ Elem.link [ Attr.href &quot;/style.css&quot;; Attr.rel &quot;stylesheet&quot; ] ]
+            [ _link [ _href_ &quot;/style.css&quot;; _rel_ &quot;stylesheet&quot; ] ]
             content
 
     module GreetingView =
         /// HTML view for /greet/html
         let detail greeting =
             layout [
-                Text.h1 $&quot;Hello {greeting.Name} from /html&quot;
-                Elem.hr []
-                Text.p &quot;Greet other ways:&quot;
-                Elem.nav [] [
-                    Elem.a
-                        [ Attr.href (Url.greetPlainText greeting.Name) ]
-                        [ Text.raw &quot;Greet in text&quot;]
-                    Text.raw &quot; | &quot;
-                    Elem.a
-                        [ Attr.href (Url.greetJson greeting.Name) ]
-                        [ Text.raw &quot;Greet in JSON &quot; ]
+                _h1' $&quot;Hello {greeting.Name} from /html&quot;
+                _hr []
+                _p' &quot;Greet other ways:&quot;
+                _nav [] [
+                    _a
+                        [ _href_ (Url.greetPlainText greeting.Name) ]
+                        [ _text &quot;Greet in text&quot;]
+                    _text &quot; | &quot;
+                    _a
+                        [ _href_ (Url.greetJson greeting.Name) ]
+                        [ _text &quot;Greet in JSON &quot; ]
                 ]
             ]
 </code></pre>
@@ -81,11 +81,11 @@ <h2 id="errors">Errors</h2>
     module ErrorController =
         let notFound : HttpHandler =
             Response.withStatusCode 404 &gt;&gt;
-            Response.ofHtml (View.layout [ Text.h1 &quot;Not Found&quot; ])
+            Response.ofHtml (View.layout [ _h1' &quot;Not Found&quot; ])
 
         let serverException : HttpHandler =
             Response.withStatusCode 500 &gt;&gt;
-            Response.ofHtml (View.layout [ Text.h1 &quot;Server Error&quot; ])
+            Response.ofHtml (View.layout [ _h1' &quot;Server Error&quot; ])
 </code></pre>
 <p>Here we see the <a href="repsonse.html#response-modifiers"><code>HttpResponseModifier</code></a> at play, which set the status code before buffering out the HTML response. We'll reference these pages later when be <a href="#web-server">build the web server</a>.</p>
 <h2 id="controller">Controller</h2>

docs/docs/example-htmx.html

@@ -15,10 +15,10 @@ <h2 id="layout">Layout</h2>
 <p>First we'll define a simple layout and enable htmx by including the script. Notice the strongly typed reference, <code>HtmxScript.cdnSrc</code>, which is provided by Falco.Htmx and resolves to the official CDN URL.</p>
 <pre><code class="language-fsharp">module View =
     let template content =
-        Elem.html [ Attr.lang &quot;en&quot; ] [
-            Elem.head [] [
-                Elem.script [ Attr.src HtmxScript.cdnSrc ] [] ]
-            Elem.body []
+        _html [ _lang &quot;en&quot; ] [
+            _head [] [
+                _script [ _src HtmxScript.cdnSrc ] [] ]
+            _body []
                 content ]
 </code></pre>
 <h2 id="components">Components</h2>
@@ -29,20 +29,20 @@ <h2 id="components">Components</h2>
 
     module Components =
         let clicker =
-            Elem.button
+            _button
                 [ Hx.get &quot;/click&quot;
                   Hx.swapOuterHtml ]
-                [ Text.raw &quot;Click Me&quot; ]
+                [ _text &quot;Click Me&quot; ]
 
         let resetter =
-            Elem.div [ Attr.id &quot;wrapper&quot; ] [
-                Text.h2 &quot;Way to go! You clicked it!&quot;
-                Elem.br []
-                Elem.button
+            _div [ _id &quot;wrapper&quot; ] [
+                _h2' &quot;Way to go! You clicked it!&quot;
+                _br []
+                _button
                     [ Hx.get &quot;/reset&quot;
                       Hx.swapOuterHtml
                       Hx.targetCss &quot;#wrapper&quot; ]
-                    [ Text.raw &quot;Reset&quot; ] ]
+                    [ _text &quot;Reset&quot; ] ]
 </code></pre>
 <p>The <code>clicker</code> component is a simple button that will send a GET request to the server when clicked. The response will replace the button with the <code>resetter</code> component which will be rendered in the same location and can be used to restore the original state.</p>
 <h2 id="handlers">Handlers</h2>
@@ -51,7 +51,7 @@ <h2 id="handlers">Handlers</h2>
     let handleIndex : HttpHandler =
         let html =
             View.template [
-                Text.h1 &quot;Example: Click &amp; Swap&quot;
+                _h1' &quot;Example: Click &amp; Swap&quot;
                 View.Components.clicker ]
 
         Response.ofHtml html