Update

assets/css/main.css

@@ -261,6 +261,15 @@ a:hover,
 }
 
 /* Home */
+
+.home img {
+    display: block;
+    width: 100%;
+    max-width: 40rem;
+    padding-block: var(--gap-l);
+    margin-inline: auto;
+}
+
 .nav-home__list {
     justify-content: center;
     gap: var(--gap-l);

one.org

@@ -6,6 +6,24 @@
 :DESCRIPTION: Framework for creating Realtime SPAs using HTML over the Wire technology.
 :END:
 
+** What is HTML over the Wire?
+
+HTML over ther Wire, or HTML over the WebSockets, is a strategy for creating real-time SPAs by creating a WebSockets connection between a client and a server. It allows JavaScript to request actions, its only responsibility is to handle events, and the backend handles the business logic as well as rendering HTML. This means you can create pages without reloading the page, without AJAX, APIs or requests. One technology provides a secure, stable and low-delay connection for real-time web applications.
+
+[[#/img/example-scheme.png][Architecture]]
+
+Let's illustrate with an example. I want to render article number 2.
+
+[[#/img/example-blog.png][Blog example]]
+
+1. A WebSockets connection, a channel, is established between the client and the server.
+2. JavaScript sends a text, not a request, via WebSockets to the Server (in our case Django).
+3. Django interprets the text and renders the HTML of the article through the template system and the database.
+4. Django sends the HTML to JavaScript via the channel and tells it which selector to embed it in.
+5. JavaScript draws the received HTML in the indicated selector.
+
+The same process is repeated for each action, such as clicking a button, submitting a form, etc.
+
 ** What is Django LiveView?
 
 Django LiveView is a framework for creating Realtime SPAs using HTML over the Wire technology. It is inspired by Phoenix LiveView and it is built on top of Django Channels.

onerc.el

@@ -83,7 +83,7 @@
 		     (:h1.hero__title "Django LiveView")
 		     (:h2.hero__subtitle "Framework for creating Realtime SPAs using HTML over the Wire technology")
 		     (:img.image.hero__logo (@ :alt "pet" :src "img/pet.webp")))))
-		  (:section
+		  (:section.home
 		   (:div.container ,content)))))))
 
 (defun one-custom-default-doc (page-tree pages _global)