Fix layout

This commit is contained in:
Andros Fenollosa 2024-02-29 13:03:14 +01:00
parent 15f4908c27
commit 7e50167ab5
3 changed files with 89 additions and 70 deletions

View File

@ -35,7 +35,7 @@ body {
text-align: center;
}
.link {
a, .link {
display: inline-block;
color: var(--color-brown);
text-decoration: none;

36
one.org
View File

@ -6,15 +6,8 @@
:DESCRIPTION: Framework for creating Realtime SPAs using HTML over the Wire technology.
:END:
* Get started
:PROPERTIES:
:ONE: one-custom-default-doc
:CUSTOM_ID: /docs/get-started/
:END:
** What is Django LiveView?
Django LiveView is a framework for creating Realtime SPAs using HTML over the Wire technology. It is inspired by Phoenix LiveView and it is built on top of Django Channels.
It allows you to create interactive web applications using only HTML, CSS and Python. JavaScript ONLY is used to capture events, send and receive strings over a WebSockets channel.
@ -28,3 +21,32 @@ It allows you to create interactive web applications using only HTML, CSS and Py
- Everything is asynchronous by default.
- Don't learn anything new. If you know Python, you know how to use Django LiveView.
- All in real time.
Now you can create SPAs without using APIs, without JavaScript, and without learning anything new. If you know Python, you know how to use Django LiveView.
Are you ready to create your first Realtime SPA? Let's go to the [[#/docs/quickstart/][Quickstart]].
* Quickstart
:PROPERTIES:
:ONE: one-custom-default-doc
:CUSTOM_ID: /docs/quickstart/
:TITLE: Quickstart
:DESCRIPTION: Get started with Django LiveView the easy way.
:END:
* Source code
:PROPERTIES:
:ONE: one-custom-default-doc
:CUSTOM_ID: /docs/source-code/
:TITLE: Source code
:DESCRIPTION: List of all related source code.
:END:
- [[https://github.com/Django-LiveView/liveview][LiveView]]: Source code of the Django framework and app published in pip.
- [[https://github.com/Django-LiveView/docs][Website and Docs]]: All documentation, including this same page.
- Templates
- [[https://github.com/Django-LiveView/starter-template][Starter]]
- [[https://github.com/Django-LiveView/minimal-template][Minimal]]
- [[https://github.com/Django-LiveView/assets][Assets]]
- Demos
- [[https://github.com/Django-LiveView/demo-snake][Snake]]

View File

@ -1,24 +1,17 @@
(defun one-custom-default-home (page-tree pages _global)
"Default render function by home page."
(let* ((title (org-element-property :TITLE page-tree))
(full-title (concat (when (not (string-empty-p title)) (concat title " | ")) "Django LiveView"))
(path (org-element-property :CUSTOM_ID page-tree))
(description (org-element-property :DESCRIPTION page-tree))
(content (org-export-data-with-backend
(org-element-contents page-tree)
'one-ox nil))
(website-name (one-default-website-name pages))
(nav (one-default-nav path pages)))
(defun make-title (title)
(concat (when (not (string-empty-p title)) (concat title " | ")) "Django LiveView"))
(jack-html
(defun render-layout-html (title description tree-content)
(let ((full-title (make-title title))) (jack-html
"<!DOCTYPE html>"
`(:html (@ :lang "en")
(:head
;; Generals
(:meta (@ :charset "utf-8"))
(:link (@ :rel "icon" :type "image/png" :href "img/favicon.png"))
(:link (@ :rel "icon" :type "image/png" :href "/img/favicon.png"))
(:meta (@ :name "viewport" :content "width=device-width,initial-scale=1.0, shrink-to-fit=no"))
(:meta (@ :name "author" :content "Andros Fenollosa"))
(:meta (@ :name "generator" :content "One.el"))
;; SEO
(:title ,full-title)
(:meta (@ :name "description" :content ,description))
@ -29,54 +22,58 @@
(:link (@ :rel "stylesheet" :href "https://fonts.googleapis.com/css2?family=Fira+Code&family=Open+Sans:wght@400;700&display=swap"))
;; 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
,tree-content
(:footer.footer
(:p "Created with ❤️ by " (:a.link (@ :href "https://andros.dev/" :target "_blank") "Andros Fenollosa"))
(:p "🐍 " ,(format-time-string "%Y"))))))))
(defun one-custom-default-home (page-tree pages _global)
"Default render function by home page."
(let* ((title (org-element-property :TITLE page-tree))
(path (org-element-property :CUSTOM_ID page-tree))
(description (org-element-property :DESCRIPTION page-tree))
(content (org-export-data-with-backend
(org-element-contents page-tree)
'one-ox nil))
(website-name (one-default-website-name pages))
(nav (one-default-nav path pages)))
(render-layout-html
title
description
(jack-html `(:main.main
(:section.hero
(:div.container
(:hgroup.hero__hgroup
(:h1.hero__title "Django LiveView")
(:h2.hero__subtitle "Framework for creating Realtime SPAs using HTML over the Wire technology")
(:img.image.hero__logo (@ :alt "pet" :src "img/pet.webp")))))
(:main.main
(:nav.nav-home
(:div.container
(:ul.nav__list.nav-home__list
(:li.nav-home__item
(:a.button.nav-home__link (@ :href "/docs/get-started/") "Get started"))
(:a.button.nav-home__link (@ :href "/docs/quickstart/") "Docs"))
(:li.nav-home__item
(:a.button.nav-home__link (@ :href "/docs/install/") "Install"))
(: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"))))))))))
(:a.button.nav-home__link (@ :href "https://django-liveview-demo.andros.dev/" :target "_blank") "Demo")))))
(:section
(:div.container ,content)))))))
(defun one-custom-default-doc (page-tree pages _global)
"Default render function by home page."
(let* ((title (org-element-property :raw-value page-tree))
(description (org-element-property :DESCRIPTION page-tree))
(path (org-element-property :CUSTOM_ID page-tree))
(content (org-export-data-with-backend
(org-element-contents page-tree)
'one-ox nil))
(website-name (one-default-website-name pages))
(nav (one-default-nav path pages)))
(jack-html
"<!DOCTYPE html>"
`(:html (@ :lang "en")
(:head
;; Generals
(:meta (@ :charset "utf-8"))
(:link (@ :rel "icon" :type "image/png" :href "img/favicon.png"))
(:meta (@ :name "viewport" :content "width=device-width,initial-scale=1.0, shrink-to-fit=no"))
(:meta (@ :name "author" :content "Andros Fenollosa"))
;; SEO
(:title (concat ,title " | Django LiveView"))
(:meta (@ :name "description" :content "Framework for creating Realtime SPAs using HTML over the Wire technology."))
(:meta (@ :name "og:image" :content "https://django-liveview.andros.dev/img/og-image.webp"))
;; Fonts
(:link (@ :rel "preconnect" :href "https://fonts.googleapis.com"))
(:link (@ :rel "preconnect" :href "https://fonts.gstatic.com" :crossorigin t))
(:link (@ :rel "stylesheet" :href "https://fonts.googleapis.com/css2?family=Fira+Code&family=Open+Sans:wght@400;700&display=swap"))
;; 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")))
(:body
(:main.main
(:div.container .content)))))))
(render-layout-html
title
description
(jack-html `(:main.main
(:section
(:div.container ,content)))))))