From 7e50167ab564beb5c00e00b93937130dcffe28cb Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Thu, 29 Feb 2024 13:03:14 +0100 Subject: [PATCH] Fix layout --- assets/css/main.css | 2 +- one.org | 36 ++++++++++--- onerc.el | 121 +++++++++++++++++++++----------------------- 3 files changed, 89 insertions(+), 70 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index a89dd94..8c6d1d5 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -35,7 +35,7 @@ body { text-align: center; } -.link { +a, .link { display: inline-block; color: var(--color-brown); text-decoration: none; diff --git a/one.org b/one.org index d0bb86d..f55a923 100644 --- a/one.org +++ b/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]] diff --git a/onerc.el b/onerc.el index 7136310..00a231c 100644 --- a/onerc.el +++ b/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 + "" + `(: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 - "" - `(: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 - "" - `(: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)))))))