Django-LiveView/docs
1
0
Fork 0
mirror of https://github.com/Django-LiveView/docs.git synced 2024-12-22 19:05:35 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix layout

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/main.css
View File

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

36
one.org
View File

@ -6,15 +6,8 @@
:DESCRIPTION: Framework for creating Realtime SPAs using HTML over the Wire technology. :DESCRIPTION: Framework for creating Realtime SPAs using HTML over the Wire technology.
:END: :END:
* Get started
:PROPERTIES:
:ONE: one-custom-default-doc
:CUSTOM_ID: /docs/get-started/
:END:
** What is Django LiveView? ** 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. 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. 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. - Everything is asynchronous by default.
- Don't learn anything new. If you know Python, you know how to use Django LiveView. - Don't learn anything new. If you know Python, you know how to use Django LiveView.
- All in real time. - 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]]

121
onerc.el
View File

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