diff --git a/assets/css/main.css b/assets/css/main.css index 2b9cf34..887c0a0 100644 --- a/assets/css/main.css +++ b/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); diff --git a/assets/img/example-blog.png b/assets/img/example-blog.png new file mode 100644 index 0000000..0806574 Binary files /dev/null and b/assets/img/example-blog.png differ diff --git a/assets/img/example-scheme.png b/assets/img/example-scheme.png new file mode 100644 index 0000000..715a762 Binary files /dev/null and b/assets/img/example-scheme.png differ diff --git a/one.org b/one.org index 0efb267..de57304 100644 --- a/one.org +++ b/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. diff --git a/onerc.el b/onerc.el index f7bc485..f84cd41 100644 --- a/onerc.el +++ b/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)