From 8e80b95cead8ccc78a7efb6457c59c9a54d4ada9 Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Fri, 1 Mar 2024 09:00:24 +0100 Subject: [PATCH] Add aside --- assets/css/main.css | 476 ++++++++++++++++++++++++++++++-------------- one.org | 26 ++- onerc.el | 80 +++++--- 3 files changed, 402 insertions(+), 180 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index cd6e325..072aa17 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -28,7 +28,12 @@ body { } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-weight: normal; } @@ -48,14 +53,16 @@ h1, h2, h3, h4, h5, h6 { text-align: center; } -a, .link { +a, +.link { display: inline-block; color: var(--color-brown); text-decoration: none; padding-block: .3rem; } -a:hover, .link:hover { +a:hover, +.link:hover { text-decoration: underline; } @@ -158,183 +165,354 @@ a:hover, .link:hover { margin: 0; } - .code__block { - background-color: var(--color-gray); - color: var(--color-black); - padding: 1rem; - border-radius: .5rem; - font-family: 'Fira Code', monospace; - overflow-x: auto; - } +.nav__list--docs { + display: initial; + flex-wrap: initial; +} - .code__line { - color: var(--color-brown); - font-family: 'Fira Code', monospace; - } +.code__block { + background-color: var(--color-gray); + color: var(--color-black); + padding: 1rem; + border-radius: .5rem; + font-family: 'Fira Code', monospace; + overflow-x: auto; +} - .details { - margin-block: 1rem; - border: 2px solid var(--color-brown); - } +.code__line { + color: var(--color-brown); + font-family: 'Fira Code', monospace; +} + +.details { + margin-block: 1rem; + border: 2px solid var(--color-brown); +} - .details__title { - border-bottom: 2px solid var(--color-brown); - } +.details__title { + border-bottom: 2px solid var(--color-brown); +} - .details__summary { - background-color: var(--color-brown); - color: var(--color-white); - padding: 1rem; - list-style-type: "🐱 "; - } +.details__summary { + background-color: var(--color-brown); + color: var(--color-white); + padding: 1rem; + list-style-type: "🐱 "; +} - .details[open] > .details__summary { - list-style-type: "😺 "; - } +.details[open]>.details__summary { + list-style-type: "😺 "; +} - .details__content { - padding: 1rem; - } +.details__content { + padding: 1rem; +} - /* Hero */ +/* Hero */ +.hero__hgroup { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr auto 1fr; + grid-template-areas: + "title image" + "subtitle image" + "nav image"; + grid-gap: 1rem; +} + +@media (width < 600px) { .hero__hgroup { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: 1fr auto 1fr; + grid-template-columns: 1fr; + grid-template-rows: repeat(3, auto); grid-template-areas: - "title image" - "subtitle image" - "nav image"; - grid-gap: 1rem; + "title" + "image" + "subtitle" + "nav"; } +} - @media (width < 600px) { - .hero__hgroup { - grid-template-columns: 1fr; - grid-template-rows: repeat(3, auto); - grid-template-areas: - "title" - "image" - "subtitle" - "nav"; - } +.hero__logo { + grid-area: image; +} + +.hero__title { + grid-area: title; + align-self: end; +} + +.hero__subtitle { + grid-area: subtitle; +} + +.nav-docs { + position: fixed; +} + +@media (width < 600px) { + .aside-docs { + display: none; } +} - .hero__logo { - grid-area: image; +/* Home */ +.nav-home__list { + justify-content: center; + gap: var(--gap-l); +} + +/* Docs */ +.docs { + display: grid; + grid-template-columns: 8rem auto; + gap: var(--gap-l); +} + +@media (width < 600px) { + .docs { + display: initial; + grid-template-columns: initial; + gap: 0; } +} - .hero__title { - grid-area: title; - align-self: end; - } +/* Footer */ +.footer { + text-align: center; +} - .hero__subtitle { - grid-area: subtitle; - } +/* ------- '.one' classes used by 'one-ox' org backend ------- */ - .nav-docs { - grid-area: nav; - } +.one-hl { + font-family: 'Fira Mono', monospace; + font-size: 80%; + border-radius: 6px; + box-sizing: border-box; +} - /* Home */ - .nav-home__list { - justify-content: center; - gap: var(--gap-l); - } +.one-hl-inline { + background: #31424a; + padding: 0.2em 0.4em; + margin: 0; + white-space: break-spaces; +} - /* Footer */ - .footer { - text-align: center; - } +.one-hl-block { + background: #161f22; + color: #c5c5c5; + display: block; + overflow: auto; + padding: 16px; + line-height: 1.45; + white-space: break-spaces; +} - /* ------- '.one' classes used by 'one-ox' org backend ------- */ +.one-blockquote { + background: #202d31; + border-left: 0.3em solid #31424a; + margin: 0px auto 16px; + padding: 1em 1em; + width: 90%; +} - .one-hl { - font-family: 'Fira Mono', monospace; - font-size: 80%; - border-radius: 6px; - } +.one-blockquote>p:last-child { + margin-bottom: 0; +} - .one-hl-inline { - background: #31424a; - padding: 0.2em 0.4em; - margin: 0; - white-space: break-spaces; - } +.one-hl-results { + background: #202d31; + border-left: 2px solid #c5c5c5; + display: block; + margin: auto; + padding: 0.5em 1em; + overflow: auto; + width: 98%; +} - .one-hl-block { - background: #161f22; - color: #c5c5c5; - display: block; - overflow: auto; - padding: 16px; - line-height: 1.45; - } +.one-hl-negation-char { + color: #ff6c60 +} - .one-blockquote { - background: #202d31; - border-left: 0.3em solid #31424a; - margin: 0px auto 16px; - padding: 1em 1em; - width: 90%; - } +/* font-lock-negation-char-face */ +.one-hl-warning { + color: #fd971f +} - .one-blockquote > p:last-child { - margin-bottom: 0; - } +/* font-lock-warning-face */ +.one-hl-variable-name { + color: #fd971f +} - .one-hl-results { - background: #202d31 ; - border-left: 2px solid #c5c5c5; - display: block; - margin: auto; - padding: 0.5em 1em; - overflow: auto; - width: 98%; - } +/* font-lock-variable-name-face */ +.one-hl-doc { + color: #d3b2a1 +} - .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 */ +/* font-lock-doc-face */ +.one-hl-doc-string { + color: #d3b2a1 +} - .one-hl-sh-quoted-exec { color: #62bd9c} /* sh-quoted-exec */ +/* font-lock-doc-string-face */ +.one-hl-string { + color: #d3b2a1 +} - .one-hl-ta-colon-keyword {color: #62b5e0;} /* ta-colon-keyword-face */ +/* 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; } +.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; +} diff --git a/one.org b/one.org index 7faac1a..6344770 100644 --- a/one.org +++ b/one.org @@ -34,6 +34,8 @@ 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. :END: +Welcome to the Quickstart guide. Here you will learn how to create your first Realtime SPA using Django LiveView. I assume you have a basic understanding of Django and Python. + All the steps are applied in a [[https://github.com/Django-LiveView/minimal-template][minimalist template]]. ** 1. Install Django @@ -319,19 +321,31 @@ And open the browser at ~http://localhost:8000/~. You should see the home page w #+ATTR_HTML: :class block-center [[#/img/quickstart/minimal-template.webp][Random number]] +* Tutorials +:PROPERTIES: +:ONE: one-custom-default-page +:CUSTOM_ID: /tutorials/ +:TITLE: Tutorials +:DESCRIPTION: List of all tutorials. +:END: + +In progress + * Source code :PROPERTIES: -:ONE: one-custom-default-doc -:CUSTOM_ID: /docs/source-code/ +:ONE: one-custom-default-page +:CUSTOM_ID: /source-code/ :TITLE: Source code :DESCRIPTION: List of all related source code. :END: +You can find all the source code in the following repositories: + - [[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]] + - [[https://github.com/Django-LiveView/starter-template][Starter]]: Check all the features of Django LiveView. + - [[https://github.com/Django-LiveView/minimal-template][Minimal]]: The minimal template to get started. + - [[https://github.com/Django-LiveView/assets][Assets]]: Frontend assets. - Demos - - [[https://github.com/Django-LiveView/demo-snake][Snake]] + - [[https://github.com/Django-LiveView/demo-snake][Snake]]: The classic game of Snake. diff --git a/onerc.el b/onerc.el index 42e9cab..0239e29 100644 --- a/onerc.el +++ b/onerc.el @@ -38,7 +38,7 @@ (: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")) + (:a.button.nav-main__link (@ :href "/source-code/") "Source code")) (:li.nav-main__item (:a.button.nav-main__link (@ :href "https://django-liveview-demo.andros.dev/" :target "_blank") "Demo")))))) ,tree-content @@ -46,30 +46,7 @@ (: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"))))) - (:section - (:div.container ,content))))))) - -(defun one-custom-default-doc (page-tree pages _global) +(defun one-custom-default-page (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)) @@ -85,3 +62,56 @@ (jack-html `(:main.main (:section (:div.container ,content))))))) + +(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"))))) + (: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))) + (render-layout-html + title + description + (jack-html `(:div.container.docs + (:aside.aside-docs + (:nav.nav-docs + (:ul.nav__list.nav__list--docs.nav-docs__list + (:li.nav-docs__item + (:a.nav-docs__link (@ :href "/docs/quickstart/") "Quickstart")) + (:li.nav-docs__item + (:a.nav-docs__link (@ :href "/docs/installation/") "Installation")) + (:li.nav-docs__item + (:a.nav-docs__link (@ :href "/docs/usage/") "Usage")) + (:li.nav-docs__item + (:a.nav-docs__link (@ :href "/docs/faq/") "FAQ")) + (:li.nav-docs__item + (:a.nav-docs__link (@ :href "/docs/api/") "API"))))) + (:main.main + ,content))))))