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;
|
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 */
|
/* Home */
|
||||||
|
|
||||||
.nav-home__list {
|
.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.
|
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
|
** 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.
|
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
|
pass
|
||||||
#+END_SRC
|
#+END_SRC
|
||||||
|
|
||||||
|
*** Intermediate
|
||||||
|
|
||||||
** Auto-discovery
|
** Auto-discovery
|
||||||
|
|
||||||
Django LiveView automatically discovers handlers in ~liveview_components/~ directories within your installed apps:
|
Django LiveView automatically discovers handlers in ~liveview_components/~ directories within your installed apps:
|
||||||
@@ -577,6 +581,8 @@ HTML code:
|
|||||||
</div>
|
</div>
|
||||||
#+END_SRC
|
#+END_SRC
|
||||||
|
|
||||||
|
*** Advanced
|
||||||
|
|
||||||
** Updating the URL Without Page Reload
|
** Updating the URL Without Page Reload
|
||||||
|
|
||||||
Create SPA-like navigation by updating both content and the browser URL.
|
Create SPA-like navigation by updating both content and the browser URL.
|
||||||
@@ -930,6 +936,8 @@ def send_notification(consumer, content):
|
|||||||
:NAVIGATOR-ACTIVE: docs
|
:NAVIGATOR-ACTIVE: docs
|
||||||
:END:
|
:END:
|
||||||
|
|
||||||
|
*** UI Features
|
||||||
|
|
||||||
** Intersection Observer (Infinite Scroll)
|
** Intersection Observer (Infinite Scroll)
|
||||||
|
|
||||||
Trigger functions when elements enter or exit the viewport:
|
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.
|
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
|
** Middleware System
|
||||||
|
|
||||||
Add middleware to run before handlers for authentication, logging, or rate limiting:
|
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)
|
liveview_registry.add_middleware(logging_middleware)
|
||||||
#+END_SRC
|
#+END_SRC
|
||||||
|
|
||||||
|
*** Data Handling
|
||||||
|
|
||||||
** Script Execution
|
** Script Execution
|
||||||
|
|
||||||
Execute JavaScript code directly from your Python handlers.
|
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 (: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")))
|
(: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 "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)
|
(defun one-custom-default-page (page-tree pages _global)
|
||||||
"Default render function by home page."
|
"Default render function by home page."
|
||||||
@@ -181,7 +182,14 @@
|
|||||||
(:li.nav-docs__item
|
(:li.nav-docs__item
|
||||||
(:a.nav-docs__link (@ :href "/docs/install/") "Install"))
|
(:a.nav-docs__link (@ :href "/docs/install/") "Install"))
|
||||||
(:li.nav-docs__item
|
(: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
|
(:li.nav-docs__item
|
||||||
(:a.nav-docs__link (@ :href "/docs/frontend/") "Frontend Integration"))
|
(:a.nav-docs__link (@ :href "/docs/frontend/") "Frontend Integration"))
|
||||||
(:li.nav-docs__item
|
(:li.nav-docs__item
|
||||||
@@ -189,7 +197,14 @@
|
|||||||
(:li.nav-docs__item
|
(:li.nav-docs__item
|
||||||
(:a.nav-docs__link (@ :href "/docs/broadcasting/") "Broadcasting"))
|
(:a.nav-docs__link (@ :href "/docs/broadcasting/") "Broadcasting"))
|
||||||
(:li.nav-docs__item
|
(: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
|
(:li.nav-docs__item
|
||||||
(:a.nav-docs__link (@ :href "/docs/error-handling/") "Error Handling"))
|
(:a.nav-docs__link (@ :href "/docs/error-handling/") "Error Handling"))
|
||||||
(:li.nav-docs__item
|
(:li.nav-docs__item
|
||||||
|
|||||||
Reference in New Issue
Block a user