Add aside

This commit is contained in:
Andros Fenollosa 2024-03-01 09:00:24 +01:00
parent 3daefee7dd
commit 8e80b95cea
3 changed files with 402 additions and 180 deletions

View File

@ -28,7 +28,12 @@ body {
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal; font-weight: normal;
} }
@ -48,14 +53,16 @@ h1, h2, h3, h4, h5, h6 {
text-align: center; text-align: center;
} }
a, .link { a,
.link {
display: inline-block; display: inline-block;
color: var(--color-brown); color: var(--color-brown);
text-decoration: none; text-decoration: none;
padding-block: .3rem; padding-block: .3rem;
} }
a:hover, .link:hover { a:hover,
.link:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -158,183 +165,354 @@ a:hover, .link:hover {
margin: 0; margin: 0;
} }
.code__block { .nav__list--docs {
background-color: var(--color-gray); display: initial;
color: var(--color-black); flex-wrap: initial;
padding: 1rem; }
border-radius: .5rem;
font-family: 'Fira Code', monospace;
overflow-x: auto;
}
.code__line { .code__block {
color: var(--color-brown); background-color: var(--color-gray);
font-family: 'Fira Code', monospace; color: var(--color-black);
} padding: 1rem;
border-radius: .5rem;
font-family: 'Fira Code', monospace;
overflow-x: auto;
}
.details { .code__line {
margin-block: 1rem; color: var(--color-brown);
border: 2px solid var(--color-brown); font-family: 'Fira Code', monospace;
} }
.details {
margin-block: 1rem;
border: 2px solid var(--color-brown);
}
.details__title { .details__title {
border-bottom: 2px solid var(--color-brown); border-bottom: 2px solid var(--color-brown);
} }
.details__summary { .details__summary {
background-color: var(--color-brown); background-color: var(--color-brown);
color: var(--color-white); color: var(--color-white);
padding: 1rem; padding: 1rem;
list-style-type: "🐱 "; list-style-type: "🐱 ";
} }
.details[open] > .details__summary { .details[open]>.details__summary {
list-style-type: "😺 "; list-style-type: "😺 ";
} }
.details__content { .details__content {
padding: 1rem; 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 { .hero__hgroup {
display: grid; grid-template-columns: 1fr;
grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto);
grid-template-rows: 1fr auto 1fr;
grid-template-areas: grid-template-areas:
"title image" "title"
"subtitle image" "image"
"nav image"; "subtitle"
grid-gap: 1rem; "nav";
} }
}
@media (width < 600px) { .hero__logo {
.hero__hgroup { grid-area: image;
grid-template-columns: 1fr; }
grid-template-rows: repeat(3, auto);
grid-template-areas: .hero__title {
"title" grid-area: title;
"image" align-self: end;
"subtitle" }
"nav";
} .hero__subtitle {
grid-area: subtitle;
}
.nav-docs {
position: fixed;
}
@media (width < 600px) {
.aside-docs {
display: none;
} }
}
.hero__logo { /* Home */
grid-area: image; .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 { /* Footer */
grid-area: title; .footer {
align-self: end; text-align: center;
} }
.hero__subtitle { /* ------- '.one' classes used by 'one-ox' org backend ------- */
grid-area: subtitle;
}
.nav-docs { .one-hl {
grid-area: nav; font-family: 'Fira Mono', monospace;
} font-size: 80%;
border-radius: 6px;
box-sizing: border-box;
}
/* Home */ .one-hl-inline {
.nav-home__list { background: #31424a;
justify-content: center; padding: 0.2em 0.4em;
gap: var(--gap-l); margin: 0;
} white-space: break-spaces;
}
/* Footer */ .one-hl-block {
.footer { background: #161f22;
text-align: center; 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 { .one-blockquote>p:last-child {
font-family: 'Fira Mono', monospace; margin-bottom: 0;
font-size: 80%; }
border-radius: 6px;
}
.one-hl-inline { .one-hl-results {
background: #31424a; background: #202d31;
padding: 0.2em 0.4em; border-left: 2px solid #c5c5c5;
margin: 0; display: block;
white-space: break-spaces; margin: auto;
} padding: 0.5em 1em;
overflow: auto;
width: 98%;
}
.one-hl-block { .one-hl-negation-char {
background: #161f22; color: #ff6c60
color: #c5c5c5; }
display: block;
overflow: auto;
padding: 16px;
line-height: 1.45;
}
.one-blockquote { /* font-lock-negation-char-face */
background: #202d31; .one-hl-warning {
border-left: 0.3em solid #31424a; color: #fd971f
margin: 0px auto 16px; }
padding: 1em 1em;
width: 90%;
}
.one-blockquote > p:last-child { /* font-lock-warning-face */
margin-bottom: 0; .one-hl-variable-name {
} color: #fd971f
}
.one-hl-results { /* font-lock-variable-name-face */
background: #202d31 ; .one-hl-doc {
border-left: 2px solid #c5c5c5; color: #d3b2a1
display: block; }
margin: auto;
padding: 0.5em 1em;
overflow: auto;
width: 98%;
}
.one-hl-negation-char { color: #ff6c60} /* font-lock-negation-char-face */ /* font-lock-doc-face */
.one-hl-warning { color: #fd971f} /* font-lock-warning-face */ .one-hl-doc-string {
.one-hl-variable-name { color: #fd971f} /* font-lock-variable-name-face */ color: #d3b2a1
.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 */
.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-code {
.one-hl-org-block { color: #c5c5c5 ; background: #31424a; } color: #dedede;
.one-hl-org-block-begin-line { color: #c3957e; } background: #31424a;
.one-hl-org-block-end-line { color: #c3957e; } }
.one-hl-org-meta-line { color: #8c8c8c;}
.one-hl-org-quote { color: #c5c5c5} .one-hl-org-block {
.one-hl-org-drawer { color: #d3b2a1; font-size: 0.9em; } color: #c5c5c5;
.one-hl-org-special-keyword { color: #c3957e; font-size: 0.9em; } background: #31424a;
.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-block-begin-line {
.one-hl-org-level-3 { font-size: 1.2em; text-decoration: underline; } color: #c3957e;
.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-block-end-line {
.one-hl-org-level-8 { font-size: 1.0em; text-decoration: underline; } color: #c3957e;
.one-hl-org-level-8 { font-size: 1.0em; text-decoration: underline; } }
.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;
}

26
one.org
View File

@ -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. :DESCRIPTION: Get started with Django LiveView the easy way.
:END: :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]]. All the steps are applied in a [[https://github.com/Django-LiveView/minimal-template][minimalist template]].
** 1. Install Django ** 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 #+ATTR_HTML: :class block-center
[[#/img/quickstart/minimal-template.webp][Random number]] [[#/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 * Source code
:PROPERTIES: :PROPERTIES:
:ONE: one-custom-default-doc :ONE: one-custom-default-page
:CUSTOM_ID: /docs/source-code/ :CUSTOM_ID: /source-code/
:TITLE: Source code :TITLE: Source code
:DESCRIPTION: List of all related source code. :DESCRIPTION: List of all related source code.
:END: :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/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. - [[https://github.com/Django-LiveView/docs][Website and Docs]]: All documentation, including this same page.
- Templates - Templates
- [[https://github.com/Django-LiveView/starter-template][Starter]] - [[https://github.com/Django-LiveView/starter-template][Starter]]: Check all the features of Django LiveView.
- [[https://github.com/Django-LiveView/minimal-template][Minimal]] - [[https://github.com/Django-LiveView/minimal-template][Minimal]]: The minimal template to get started.
- [[https://github.com/Django-LiveView/assets][Assets]] - [[https://github.com/Django-LiveView/assets][Assets]]: Frontend assets.
- Demos - Demos
- [[https://github.com/Django-LiveView/demo-snake][Snake]] - [[https://github.com/Django-LiveView/demo-snake][Snake]]: The classic game of Snake.

View File

@ -38,7 +38,7 @@
(:li.nav-main__item (:li.nav-main__item
(:a.button.nav-main__link (@ :href "/tutorials/") "Tutorials")) (:a.button.nav-main__link (@ :href "/tutorials/") "Tutorials"))
(:li.nav-main__item (: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 (:li.nav-main__item
(:a.button.nav-main__link (@ :href "https://django-liveview-demo.andros.dev/" :target "_blank") "Demo")))))) (:a.button.nav-main__link (@ :href "https://django-liveview-demo.andros.dev/" :target "_blank") "Demo"))))))
,tree-content ,tree-content
@ -46,30 +46,7 @@
(:p "Created with ❤️ by " (:a.link (@ :href "https://andros.dev/" :target "_blank") "Andros Fenollosa")) (:p "Created with ❤️ by " (:a.link (@ :href "https://andros.dev/" :target "_blank") "Andros Fenollosa"))
(:p "🐍 " ,(format-time-string "%Y")))))))) (:p "🐍 " ,(format-time-string "%Y"))))))))
(defun one-custom-default-home (page-tree pages _global) (defun one-custom-default-page (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." "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)) (description (org-element-property :DESCRIPTION page-tree))
@ -85,3 +62,56 @@
(jack-html `(:main.main (jack-html `(:main.main
(:section (:section
(:div.container ,content))))))) (: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))))))