mirror of
https://github.com/Django-LiveView/docs.git
synced 2025-12-30 21:22:23 +01:00
Add subsections to documentation navigation
- Add hierarchical subsections to Handlers (Basic, Intermediate, Advanced) - Add hierarchical subsections to Advanced Features (UI Features, System Features, Data Handling) - Add JavaScript to dynamically assign clean IDs to h3 headings for anchor links - Add CSS styling for navigation subsections with proper indentation - Fix parentheses balance issues in onerc.el functions
This commit is contained in:
@@ -338,6 +338,30 @@ a:hover,
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.nav-docs__sublist {
|
||||
list-style: "· ";
|
||||
list-style-position: inside;
|
||||
padding-left: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.nav-docs__subitem {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.nav-docs__sublink {
|
||||
color: var(--color-gray);
|
||||
text-decoration: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.nav-docs__sublink:hover {
|
||||
opacity: 1;
|
||||
color: var(--color-brown);
|
||||
}
|
||||
|
||||
/* Home */
|
||||
|
||||
.nav-home__list {
|
||||
|
||||
12
one.org
12
one.org
@@ -282,6 +282,8 @@ We strongly recommend that you follow the [[#/quick-start/][Quick start]] to see
|
||||
|
||||
Handlers are Python functions that respond to WebSocket messages from the client. They contain your business logic and can render HTML, update the database, broadcast to multiple users, and more.
|
||||
|
||||
*** Basic
|
||||
|
||||
** Your First Handler
|
||||
|
||||
Let's start with the simplest possible handler. This handler will be called when a button is clicked and will update a section of the page.
|
||||
@@ -426,6 +428,8 @@ def example(consumer, content):
|
||||
pass
|
||||
#+END_SRC
|
||||
|
||||
*** Intermediate
|
||||
|
||||
** Auto-discovery
|
||||
|
||||
Django LiveView automatically discovers handlers in ~liveview_components/~ directories within your installed apps:
|
||||
@@ -577,6 +581,8 @@ HTML code:
|
||||
</div>
|
||||
#+END_SRC
|
||||
|
||||
*** Advanced
|
||||
|
||||
** Updating the URL Without Page Reload
|
||||
|
||||
Create SPA-like navigation by updating both content and the browser URL.
|
||||
@@ -930,6 +936,8 @@ def send_notification(consumer, content):
|
||||
:NAVIGATOR-ACTIVE: docs
|
||||
:END:
|
||||
|
||||
*** UI Features
|
||||
|
||||
** Intersection Observer (Infinite Scroll)
|
||||
|
||||
Trigger functions when elements enter or exit the viewport:
|
||||
@@ -1051,6 +1059,8 @@ def search_articles(consumer, content):
|
||||
|
||||
Without debounce, typing "python" would send 6 requests (one per letter). With ~data-liveview-debounce="500"~, it sends only 1 request after the user stops typing for 500ms.
|
||||
|
||||
*** System Features
|
||||
|
||||
** Middleware System
|
||||
|
||||
Add middleware to run before handlers for authentication, logging, or rate limiting:
|
||||
@@ -1086,6 +1096,8 @@ liveview_registry.add_middleware(auth_middleware)
|
||||
liveview_registry.add_middleware(logging_middleware)
|
||||
#+END_SRC
|
||||
|
||||
*** Data Handling
|
||||
|
||||
** Script Execution
|
||||
|
||||
Execute JavaScript code directly from your Python handlers.
|
||||
|
||||
21
onerc.el
21
onerc.el
@@ -113,7 +113,8 @@
|
||||
(:li (:i (@ :aria-label "chat") "🐘") " Follow me: " (:a.link (@ :href "https://activity.andros.dev/@andros" :target "_blank") "ActivityPub/Fediverse "))
|
||||
(:li (:span (@ :aria-hidden "true") "💰 ") " Support the project: " (:a.link (@ :href "https://liberapay.com/androsfenollosa/" :target "_blank") "Liberapay")))
|
||||
(:p "Created with " (:i (@ :aria-label "love") "❤️") " by " (:a.link (@ :href "https://andros.dev/" :target "_blank") "Andros Fenollosa") " with " (:a.link (@ :href "https://one.tonyaldon.com/" :target "_blank") "one.el"))
|
||||
(:p "🐍 " ,(format-time-string "%Y")))))))))
|
||||
(:p "🐍 " ,(format-time-string "%Y")))))
|
||||
(:script (@ :type "text/javascript") "(function() {var headingMap = {'Basic': 'basic', 'Intermediate': 'intermediate', 'Advanced': 'advanced', 'UI Features': 'ui-features', 'System Features': 'system-features', 'Data Handling': 'data-handling'}; document.querySelectorAll('h3').forEach(function(h3) {var text = h3.textContent.trim(); if (headingMap[text]) {h3.id = headingMap[text];}});})();")))))
|
||||
|
||||
(defun one-custom-default-page (page-tree pages _global)
|
||||
"Default render function by home page."
|
||||
@@ -181,7 +182,14 @@
|
||||
(:li.nav-docs__item
|
||||
(:a.nav-docs__link (@ :href "/docs/install/") "Install"))
|
||||
(:li.nav-docs__item
|
||||
(:a.nav-docs__link (@ :href "/docs/handlers/") "Handlers"))
|
||||
(:a.nav-docs__link (@ :href "/docs/handlers/") "Handlers")
|
||||
(:ul.nav-docs__sublist
|
||||
(:li.nav-docs__subitem
|
||||
(:a.nav-docs__sublink (@ :href "/docs/handlers/#basic") "Basic"))
|
||||
(:li.nav-docs__subitem
|
||||
(:a.nav-docs__sublink (@ :href "/docs/handlers/#intermediate") "Intermediate"))
|
||||
(:li.nav-docs__subitem
|
||||
(:a.nav-docs__sublink (@ :href "/docs/handlers/#advanced") "Advanced"))))
|
||||
(:li.nav-docs__item
|
||||
(:a.nav-docs__link (@ :href "/docs/frontend/") "Frontend Integration"))
|
||||
(:li.nav-docs__item
|
||||
@@ -189,7 +197,14 @@
|
||||
(:li.nav-docs__item
|
||||
(:a.nav-docs__link (@ :href "/docs/broadcasting/") "Broadcasting"))
|
||||
(:li.nav-docs__item
|
||||
(:a.nav-docs__link (@ :href "/docs/advanced/") "Advanced Features"))
|
||||
(:a.nav-docs__link (@ :href "/docs/advanced/") "Advanced Features")
|
||||
(:ul.nav-docs__sublist
|
||||
(:li.nav-docs__subitem
|
||||
(:a.nav-docs__sublink (@ :href "/docs/advanced/#ui-features") "UI Features"))
|
||||
(:li.nav-docs__subitem
|
||||
(:a.nav-docs__sublink (@ :href "/docs/advanced/#system-features") "System Features"))
|
||||
(:li.nav-docs__subitem
|
||||
(:a.nav-docs__sublink (@ :href "/docs/advanced/#data-handling") "Data Handling"))))
|
||||
(:li.nav-docs__item
|
||||
(:a.nav-docs__link (@ :href "/docs/error-handling/") "Error Handling"))
|
||||
(:li.nav-docs__item
|
||||
|
||||
Reference in New Issue
Block a user