This commit is contained in:
Andros Fenollosa 2024-02-29 17:08:43 +01:00
parent 7e50167ab5
commit 825d642738
4 changed files with 498 additions and 94 deletions

View File

@ -17,6 +17,7 @@ body {
color: var(--color-white); color: var(--color-white);
line-height: 1.5; line-height: 1.5;
scroll-behavior: smooth; scroll-behavior: smooth;
margin-top: 6rem;
} }
/* Components */ /* Components */
@ -42,7 +43,7 @@ a, .link {
padding-block: .3rem; padding-block: .3rem;
} }
.link:hover { a:hover, .link:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -69,6 +70,10 @@ a, .link {
object-position: center; object-position: center;
} }
.block-center {
margin-inline: auto;
}
.button { .button {
display: inline-block; display: inline-block;
min-width: 4rem; min-width: 4rem;
@ -85,6 +90,28 @@ a, .link {
.button:hover { .button:hover {
border-color: var(--color-brown); border-color: var(--color-brown);
box-shadow: 0 5px 0 var(--color-brown); box-shadow: 0 5px 0 var(--color-brown);
text-decoration: none;
}
.header {
position: fixed;
inset-inline: 0;
top: 0;
border-bottom: 2px solid var(--color-brown);
background-color: var(--color-black);
overflow-x: auto;
}
.header .nav__list {
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
}
@media (width < 600px) {
.header .nav__list {
justify-content: flex-start;
}
} }
.nav__list { .nav__list {
@ -92,51 +119,52 @@ a, .link {
flex-wrap: wrap; flex-wrap: wrap;
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0;
} }
.code__block { .code__block {
background-color: var(--color-gray); background-color: var(--color-gray);
color: var(--color-black); color: var(--color-black);
padding: 1rem; padding: 1rem;
border-radius: .5rem; border-radius: .5rem;
font-family: 'Fira Code', monospace; font-family: 'Fira Code', monospace;
overflow-x: auto; overflow-x: auto;
} }
.code__line { .code__line {
color: var(--color-brown); color: var(--color-brown);
font-family: 'Fira Code', monospace; font-family: 'Fira Code', monospace;
} }
.details { .details {
margin-block: 1rem; margin-block: 1rem;
border: 2px solid var(--color-brown); border: 2px solid var(--color-brown);
} }
.details__title { .details__title {
border-bottom: 2px solid var(--color-brown); border-bottom: 2px solid var(--color-brown);
} }
.details__summary { .details__summary {
background-color: var(--color-brown); background-color: var(--color-brown);
color: var(--color-white); color: var(--color-white);
padding: 1rem; padding: 1rem;
list-style-type: "🐱 "; list-style-type: "🐱 ";
} }
.details[open] > .details__summary { .details[open] > .details__summary {
list-style-type: "😺 "; list-style-type: "😺 ";
} }
.details__content { .details__content {
padding: 1rem; padding: 1rem;
} }
/* Hero */ /* Hero */
.hero__hgroup { .hero__hgroup {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr;
@ -145,9 +173,9 @@ a, .link {
"subtitle image" "subtitle image"
"nav image"; "nav image";
grid-gap: 1rem; grid-gap: 1rem;
} }
@media (width < 600px) { @media (width < 600px) {
.hero__hgroup { .hero__hgroup {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto); grid-template-rows: repeat(3, auto);
@ -157,32 +185,120 @@ a, .link {
"subtitle" "subtitle"
"nav"; "nav";
} }
} }
.hero__logo { .hero__logo {
grid-area: image; grid-area: image;
} }
.hero__title { .hero__title {
grid-area: title; grid-area: title;
align-self: end; align-self: end;
} }
.hero__subtitle { .hero__subtitle {
grid-area: subtitle; grid-area: subtitle;
} }
.nav-docs { .nav-docs {
grid-area: nav; grid-area: nav;
} }
/* Home */ /* Home */
.nav-home__list { .nav-home__list {
justify-content: center; justify-content: center;
gap: var(--gap-l); gap: var(--gap-l);
} }
/* Footer */ /* Footer */
.footer { .footer {
text-align: center; text-align: center;
} }
/* ------- '.one' classes used by 'one-ox' org backend ------- */
.one-hl {
font-family: 'Fira Mono', monospace;
font-size: 80%;
border-radius: 6px;
}
.one-hl-inline {
background: #31424a;
padding: 0.2em 0.4em;
margin: 0;
white-space: break-spaces;
}
.one-hl-block {
background: #161f22;
color: #c5c5c5;
display: block;
overflow: auto;
padding: 16px;
line-height: 1.45;
}
.one-blockquote {
background: #202d31;
border-left: 0.3em solid #31424a;
margin: 0px auto 16px;
padding: 1em 1em;
width: 90%;
}
.one-blockquote > p:last-child {
margin-bottom: 0;
}
.one-hl-results {
background: #202d31 ;
border-left: 2px solid #c5c5c5;
display: block;
margin: auto;
padding: 0.5em 1em;
overflow: auto;
width: 98%;
}
.one-hl-negation-char { color: #ff6c60} /* font-lock-negation-char-face */
.one-hl-warning { color: #fd971f} /* font-lock-warning-face */
.one-hl-variable-name { color: #fd971f} /* font-lock-variable-name-face */
.one-hl-doc { color: #d3b2a1} /* font-lock-doc-face */
.one-hl-doc-string { color: #d3b2a1} /* font-lock-doc-string-face */
.one-hl-string { color: #d3b2a1} /* font-lock-string-face */
.one-hl-function-name { color: #02d2da} /* font-lock-function-name-face */
.one-hl-builtin { color: #b2a1d3} /* font-lock-builtin-face */
.one-hl-type { color: #457f8b} /* font-lock-type-face */
.one-hl-keyword { color: #f92672} /* font-lock-keyword-face */
.one-hl-preprocessor { color: #f92672} /* font-lock-preprocessor-face */
.one-hl-comment-delimiter { color: #8c8c8c} /* font-lock-comment-delimiter-face */
.one-hl-comment { color: #8c8c8c} /* font-lock-comment-face */
.one-hl-constant { color: #f5ebb6} /* font-lock-constant-face */
.one-hl-reference { color: #f5ebb6} /* font-lock-reference-face */
.one-hl-regexp-grouping-backslash { color: #966046} /* font-lock-regexp-grouping-backslash */
.one-hl-regexp-grouping-construct { color: #aa86ee} /* font-lock-regexp-grouping-construct */
.one-hl-number { color: #eedc82} /* font-lock-number-face */
.one-hl-sh-quoted-exec { color: #62bd9c} /* sh-quoted-exec */
.one-hl-ta-colon-keyword {color: #62b5e0;} /* ta-colon-keyword-face */
.one-hl-org-code { color: #dedede; background: #31424a; }
.one-hl-org-block { color: #c5c5c5 ; background: #31424a; }
.one-hl-org-block-begin-line { color: #c3957e; }
.one-hl-org-block-end-line { color: #c3957e; }
.one-hl-org-meta-line { color: #8c8c8c;}
.one-hl-org-quote { color: #c5c5c5}
.one-hl-org-drawer { color: #d3b2a1; font-size: 0.9em; }
.one-hl-org-special-keyword { color: #c3957e; font-size: 0.9em; }
.one-hl-org-property-value { color: #d2934a; font-size: 0.9em; }
.one-hl-org-level-1 { font-size: 1.7em; text-decoration: underline; }
.one-hl-org-level-2 { font-size: 1.4em; text-decoration: underline; }
.one-hl-org-level-3 { font-size: 1.2em; text-decoration: underline; }
.one-hl-org-level-4 { font-size: 1.1em; text-decoration: underline; }
.one-hl-org-level-5 { font-size: 1.0em; text-decoration: underline; }
.one-hl-org-level-6 { font-size: 1.0em; text-decoration: underline; }
.one-hl-org-level-8 { font-size: 1.0em; text-decoration: underline; }
.one-hl-org-level-8 { font-size: 1.0em; text-decoration: underline; }

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

285
one.org
View File

@ -34,6 +34,291 @@ Are you ready to create your first Realtime SPA? Let's go to the [[#/docs/quicks
:DESCRIPTION: Get started with Django LiveView the easy way. :DESCRIPTION: Get started with Django LiveView the easy way.
:END: :END:
All the steps are applied in a [[https://github.com/Django-LiveView/minimal-template][minimalist template]].
** 1. Install Django
Install Django, create a project and an app.
** 2. Install LiveView
Install django-liveview with ~pip~.
#+BEGIN_SRC sh
pip install django-liveview
#+END_SRC
** 3. Modify the configuration
Add ~liveview~ to your installed ~INSTALLED_APPS~.
#+BEGIN_SRC python
INSTALLED_APPS = [
"daphne",
"channels",
"liveview",
]
#+END_SRC
Then indicate in which previously created App you want to implement LiveView.
#+BEGIN_SRC python
LIVEVIEW_APPS = ["website"]
#+END_SRC
** 4. Migration
Execute the migrations so that the LiveView tables are generated.
#+BEGIN_SRC python
python manage.py migrate
#+END_SRC
** 5. ASGI
Modify the ASGI file, ~asgi.py~ to add the LiveView routing. In this example it is assumed that settings.py is inside core, in your case it may be different.
#+BEGIN_SRC python
import os
import django
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "core.settings")
django.setup()
from channels.auth import AuthMiddlewareStack
from django.core.asgi import get_asgi_application
from channels.security.websocket import AllowedHostsOriginValidator
from channels.routing import ProtocolTypeRouter, URLRouter
from django.urls import re_path
from liveview.consumers import LiveViewConsumer
application = ProtocolTypeRouter(
{
# Django's ASGI application to handle traditional HTTP requests
"http": get_asgi_application(),
# WebSocket handler
"websocket": AuthMiddlewareStack(
AllowedHostsOriginValidator(
URLRouter([re_path(r"^ws/liveview/$", LiveViewConsumer.as_asgi())])
)
),
}
)
#+END_SRC
** 6. Create your first Action
Place where the functions and logic of the business logic are stored. We will start by creating an action to generate a random number and print it.
Create inside your App a folder called ~actions~, here will go all the actions for each page. Now we will create inside the folder a file named ~home.py~.
#+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
from django.urls import reverse
from django.utils.translation import gettext as _
from random import randint
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
There are several points in the above code to keep in mind.
- ~template~ is the name of the template that will be rendered.
- ~get_context()~ is a function that returns a dictionary with the context of the page.
- ~send_page()~ is the function that will be executed when the page is loaded.
- ~random_number()~ is the function that will be executed when the button is clicked.
** 7. Create the base template
Now we will create the base template, which will be the one that will be rendered when the page is loaded.
Create a folder called ~templates~, or use your template folder, inside your App and inside it create another folder called ~layouts~. Now create a file called ~base.html~.
#+BEGIN_SRC html
{# my-app/templates/layouts/base.html #}
{% load static i18n %}
<!doctype html>{% get_current_language as CURRENT_LANGUAGE %}
<html lang="{{ CURRENT_LANGUAGE }}">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
>
<meta
name="description"
content="{{ meta.description }}"
>
<meta
property="og:image"
content="{{ meta.image }}"
>
<script type="module" src="{% static 'js/main.js' %}" defer></script>
</head>
<body
data-host="{{ request.get_host }}"
data-debug="{{ DEBUG }}"
>
<section id="loading"></section>
<section id="notifications" class="notifications"></section>
<section id="no_connection"></section>
<div class="container">
<header id="content-header">
{% include 'components/header.html' %}
</header>
<main id="main" class="main-container">{% include page %}</main>
<footer id="content-footer">
{% include 'components/footer.html' %}
</footer>
</div>
</body>
</html>
#+END_SRC
In the future we will define ~main.js~, a minimal JavaScript to connect the events and the WebSockets client.
** 8. Create the page template
We will create the home page template, which will be the one that will be rendered when the page is loaded.
Create a folder called ~pages~ in your template folder and inside it create a file called ~home.html~.
#+BEGIN_SRC html
{# my-app/templates/pages/home.html #}
{% load static %}
<main data-controller="home">
<p>
<button data-action="click->home#randomNumber">Random number</button>
</p>
<h2 id="output-random-number"></h2>
</main>
#+END_SRC
As you can see, we have defined a button to launch the action of generating the random number (~button~) and the place where we will print the result (~output-random-number~).
** 9. Create frontend
Now we are going to create the frontend, the part where we will manage the JavaScript events and invoke the actions.
Download [[https://github.com/Django-LiveView/assets/archive/refs/heads/main.zip][assets]] and unzip it in your static folder. You will be left with the following route: ~/static/js/~.
** 10. Create View
We will create the view that will render the page for the first time (like Server Side Rendering). The rest of the times will be rendered dynamically (like Single Page Application).
In a normal Django application we would create a view, ~views.py~, similar to the following:
#+BEGIN_SRC python
# my-app/views.py
from django.shortcuts import render
# Create your views here.
def home(request):
return render(request, "pages/home.html")
#+END_SRC
With LiveView, on the other hand, you will have the following structure.
#+BEGIN_SRC python
# my-app/views.py
from django.shortcuts import render
from .actions.home import get_context as get_home_context
from liveview.utils import get_html
async def home(request):
return render(request, "layouts/base.html", await get_home_context())
#+END_SRC
** 11. Create URL
Finally, we will create the URL that will render the page.
#+BEGIN_SRC python
# my-app/urls.py
from django.urls import path
from .views import home
urlpatterns = [
path("", home, name="home"),
]
#+END_SRC
** 12. Run the server
Run the server.
#+BEGIN_SRC sh
python manage.py runserver
#+END_SRC
And open the browser at ~http://localhost:8000/~. You should see the home page with a button that generates a random number.
#+ATTR_HTML: :class block-center
[[#/img/quickstart/minimal-template.webp][Random number]]
* Source code * Source code
:PROPERTIES: :PROPERTIES:
:ONE: one-custom-default-doc :ONE: one-custom-default-doc

View File

@ -24,6 +24,18 @@
(:link (@ :rel "stylesheet" :type "text/css" :href "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css")) (:link (@ :rel "stylesheet" :type "text/css" :href "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"))
(:link (@ :rel "stylesheet" :type "text/css" :href "/css/main.css"))) (:link (@ :rel "stylesheet" :type "text/css" :href "/css/main.css")))
(:body (:body
(:header.header
(:div.container
(:nav.nav-main
(:ul.nav__list.nav-main__list
(:li.nav-main__item
(:a.button.nav-main__link (@ :href "/docs/quickstart/") "Docs"))
(:li.nav-main__item
(:a.button.nav-main__link (@ :href "/tutorials/") "Tutorials"))
(:li.nav-main__item
(:a.button.nav-main__link (@ :href "https://github.com/Django-LiveView/" :target "_blank") "Source code"))
(:li.nav-main__item
(: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")) (:p "Created with ❤️ by " (:a.link (@ :href "https://andros.dev/" :target "_blank") "Andros Fenollosa"))
@ -49,15 +61,6 @@
(:h1.hero__title "Django LiveView") (:h1.hero__title "Django LiveView")
(:h2.hero__subtitle "Framework for creating Realtime SPAs using HTML over the Wire technology") (:h2.hero__subtitle "Framework for creating Realtime SPAs using HTML over the Wire technology")
(:img.image.hero__logo (@ :alt "pet" :src "img/pet.webp"))))) (:img.image.hero__logo (@ :alt "pet" :src "img/pet.webp")))))
(:nav.nav-home
(:div.container
(:ul.nav__list.nav-home__list
(:li.nav-home__item
(:a.button.nav-home__link (@ :href "/docs/quickstart/") "Docs"))
(:li.nav-home__item
(:a.button.nav-home__link (@ :href "/school/make-a-blog/") "Tutorials"))
(:li.nav-home__item
(:a.button.nav-home__link (@ :href "https://django-liveview-demo.andros.dev/" :target "_blank") "Demo")))))
(:section (:section
(:div.container ,content))))))) (:div.container ,content)))))))
@ -71,7 +74,7 @@
'one-ox nil)) 'one-ox nil))
(website-name (one-default-website-name pages)) (website-name (one-default-website-name pages))
(nav (one-default-nav path pages))) (nav (one-default-nav path pages)))
(render-layout-html (render-layout-html
title title
description description
(jack-html `(:main.main (jack-html `(:main.main