mirror of
https://github.com/Django-LiveView/docs.git
synced 2024-11-14 12:15:41 +01:00
Fix layout
This commit is contained in:
Andros Fenollosa
parent
15f4908c27
commit
7e50167ab5
@ -35,7 +35,7 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link {
|
||||
a, .link {
|
||||
display: inline-block;
|
||||
color: var(--color-brown);
|
||||
text-decoration: none;
|
||||
|
||||
36
one.org
36
one.org
@ -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]]
|
||||
|
||||
121
onerc.el
121
onerc.el
@ -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)
|
||||
"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
|
||||
@ -9,74 +39,41 @@
|
||||
'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 ,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
|
||||
(: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"))))))))))
|
||||
(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")))))
|
||||
(: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
|
||||
(: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)))))))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user