Add pages

This commit is contained in:
Andros Fenollosa 2024-03-08 09:36:13 +01:00
parent 60c1edd829
commit 8ac8bda34a
3 changed files with 103 additions and 1 deletions

View File

@ -37,6 +37,10 @@ h6 {
font-weight: normal; font-weight: normal;
} }
i {
font-style: normal;
}
/* Components */ /* Components */
.container { .container {

93
one.org
View File

@ -341,6 +341,82 @@ And open the browser at ~http://localhost:8000/~. You should see the home page w
#+ATTR_HTML: :class center-block image image--responsive #+ATTR_HTML: :class center-block image image--responsive
[[#/img/quickstart/minimal-template.webp][Random number]] [[#/img/quickstart/minimal-template.webp][Random number]]
* Actions
:PROPERTIES:
:ONE: one-custom-default-doc
:CUSTOM_ID: /docs/actions/
:TITLE: Actions
:DESCRIPTION: Actions of Django LiveView.
:END:
Actions are where business logic is stored. The place where you write the functions in Python instead of JavaScript. They are the ones that will be executed when the page is loaded, when a button is clicked, when a form is submitted, etc. They will render the HTML and send it to the client. They are the ones that will receive the data from the client and process it. They are the heart of Django LiveView.
In every app you can create a folder called ~actions~ and inside it a file for each page. For example, ~home.py~ for the home page. The file will have the following structure:
#+BEGIN_SRC python
# my-app/actions/home.py
from liveview.context_processors import get_global_context
from core import settings
from liveview.utils import (
get_html,
update_active_nav,
enable_lang,
loading,
)
from channels.db import database_sync_to_async
from django.templatetags.static import static
template = "pages/home.html"
# Database
# Functions
async def get_context(consumer=None):
context = get_global_context(consumer=consumer)
# Update context
context.update(
{
"url": settings.DOMAIN_URL + reverse("home"),
"title": _("Home") + " | Home",
"meta": {
"description": _("Home page of the website"),
"image": f"{settings.DOMAIN_URL}{static('img/seo/og-image.jpg')}",
},
"active_nav": "home",
"page": template,
}
)
return context
@enable_lang
@loading
async def send_page(consumer, client_data, lang=None):
# Nav
await update_active_nav(consumer, "home")
# Main
my_context = await get_context(consumer=consumer)
html = await get_html(template, my_context)
data = {
"action": client_data["action"],
"selector": "#main",
"html": html,
}
data.update(my_context)
await consumer.send_html(data)
async def random_number(consumer, client_data, lang=None):
my_context = await get_context(consumer=consumer)
data = {
"action": client_data["action"],
"selector": "#output-random-number",
"html": randint(0, 10),
}
data.update(my_context)
await consumer.send_html(data)
#+END_SRC
* Views * Views
:PROPERTIES: :PROPERTIES:
:ONE: one-custom-default-doc :ONE: one-custom-default-doc
@ -460,6 +536,23 @@ Here you can see a typical example of a single page of a blog.
await consumer.send_html(data) await consumer.send_html(data)
#+END_SRC #+END_SRC
* History
:PROPERTIES:
:ONE: one-custom-default-doc
:CUSTOM_ID: /docs/history/
:TITLE: History
:DESCRIPTION: History management of Django LiveView.
:END:
If you make a SPA you will have a problem with the history management system. When you go back in history, you will lose the data and the HTML of the previous page. This is because the data is removed from the DOM. It is not a problem with Django LiveView.
Django LiveView has a history management system that allows you go back in history without receive any data from the server. Every time you change the page, the data and HTML are stored in the Session Storage. You don't need to do anything, it is automatic! 😸
The only limitation is forward navigation. If you want to go forward, you need to receive the data from the server because the data is remove from the Session Storage when you go back.
You can customize the history management system by editing the ~history~ controller in ~assets/js/mixins/history.js~.
If you want to disable it, remove `startHistory();` from ~assets/js/main.js~.
* Deploy * Deploy
:PROPERTIES: :PROPERTIES:

View File

@ -91,7 +91,8 @@
(:a.button.nav-main__link (@ :href "https://django-liveview-demo.andros.dev/" :target "_blank") "Demo")))))) (:a.button.nav-main__link (@ :href "https://django-liveview-demo.andros.dev/" :target "_blank") "Demo"))))))
,tree-content ,tree-content
(:footer.footer (:footer.footer
(:p "Created with ❤️ 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 (:a.link (@ :href "https://github.com/Django-LiveView/docs/blob/main/one.org" :target "_blank") "I have seen a " (:i (@ :aria-label "bug") "🪲") " in the documentation"))
(:p "🐍 " ,(format-time-string "%Y")))))))) (:p "🐍 " ,(format-time-string "%Y"))))))))
(defun one-custom-default-page (page-tree pages _global) (defun one-custom-default-page (page-tree pages _global)
@ -153,10 +154,14 @@
(:ul.nav__list.nav__list--docs.nav-docs__list (:ul.nav__list.nav__list--docs.nav-docs__list
(:li.nav-docs__item (:li.nav-docs__item
(:a.nav-docs__link (@ :href "/docs/quickstart/") "Quickstart")) (:a.nav-docs__link (@ :href "/docs/quickstart/") "Quickstart"))
(:li.nav-docs__item
(:a.nav-docs__link (@ :href "/docs/actions/") "Actions"))
(:li.nav-docs__item (:li.nav-docs__item
(:a.nav-docs__link (@ :href "/docs/views/") "Views")) (:a.nav-docs__link (@ :href "/docs/views/") "Views"))
(:li.nav-docs__item (:li.nav-docs__item
(:a.nav-docs__link (@ :href "/docs/routing/") "Routing")) (:a.nav-docs__link (@ :href "/docs/routing/") "Routing"))
(:li.nav-docs__item
(:a.nav-docs__link (@ :href "/docs/history/") "History"))
(:li.nav-docs__item (:li.nav-docs__item
(:a.nav-docs__link (@ :href "/docs/deploy/") "Deploy")) (:a.nav-docs__link (@ :href "/docs/deploy/") "Deploy"))
(:li.nav-docs__item (:li.nav-docs__item