From 40290aa24e0586829f2b4fba0965e5fc05c6bba2 Mon Sep 17 00:00:00 2001
From: Andros Fenollosa <hi@andros.dev>
Date: Fri, 26 Dec 2025 20:00:57 +0100
Subject: [PATCH] Add code example and improve design

- Add "See it in action" section with complete code example showing button click loading article
- Include HTML, Python handler, and result sections to demonstrate full workflow
- Change bold text color to brown for better visibility and design consistency
- Invert link underline behavior: underlined by default, removed on hover
---
 assets/css/main.css | 10 ++++++--
 one.org             | 61 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 3ad5a87..afa0f73 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -45,6 +45,12 @@ i {
     font-style: normal;
 }
 
+strong,
+b {
+    color: var(--color-brown);
+    font-weight: bold;
+}
+
 /* Components */
 
 .container {
@@ -65,13 +71,13 @@ a,
 .link {
     display: inline-block;
     color: var(--color-brown);
-    text-decoration: none;
+    text-decoration: underline;
     padding-block: .3rem;
 }
 
 a:hover,
 .link:hover {
-    text-decoration: underline;
+    text-decoration: none;
 }
 
 .title {
diff --git a/one.org b/one.org
index 5ae13ef..33b21d8 100644
--- a/one.org
+++ b/one.org
@@ -13,6 +13,67 @@ Django LiveView is a framework for creating real-time, interactive web applicati
 
 Build rich, dynamic user experiences with server-rendered HTML without writing a single line of JavaScript. Perfect for Django developers who want real-time features without the complexity of a separate frontend framework.
 
+** See it in action
+
+Here's a complete example: a button that loads the latest blog article with a single click.
+
+*HTML:*
+
+#+BEGIN_SRC html
+<button
+    data-liveview-function="load_latest_article"
+    data-action="click->page#run">
+    Load Latest Article
+</button>
+
+<div id="article-container"></div>
+#+END_SRC
+
+*Python:*
+
+#+BEGIN_SRC python
+from liveview import liveview_handler, send
+from django.template.loader import render_to_string
+
+@liveview_handler("load_latest_article")
+def load_latest_article(consumer, content):
+    # Get the latest article from database
+    article = Article.objects.latest('published_at')
+
+    # Render with Django templates
+    html = render_to_string('article.html', {
+        'article': article
+    })
+
+    # Send to frontend
+    send(consumer, {
+        "target": "#article-container",
+        "html": html
+    })
+#+END_SRC
+
+*Result (after clicking the button):*
+
+#+BEGIN_SRC html
+<button
+    data-liveview-function="load_latest_article"
+    data-action="click->page#run">
+    Load Latest Article
+</button>
+
+<div id="article-container">
+    <article>
+        <h2>Understanding Django Channels</h2>
+        <p class="meta">Published on Dec 15, 2024 by Jane Doe</p>
+        <p>Django Channels extends Django to handle WebSockets,
+           long-running connections, and background tasks...</p>
+        <a href="/blog/understanding-django-channels/">Read more</a>
+    </article>
+</div>
+#+END_SRC
+
+That's it! No page reload, no API endpoints, no REST, no GraphQL, no frontend framework. The article appears instantly via WebSocket. Just Python and Django templates working together in real-time.
+
 ** Key features
 
 - 🎯 **Create SPAs without using APIs**: No REST or GraphQL needed