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,6 +165,11 @@ a:hover, .link:hover {
margin: 0; margin: 0;
} }
.nav__list--docs {
display: initial;
flex-wrap: initial;
}
.code__block { .code__block {
background-color: var(--color-gray); background-color: var(--color-gray);
color: var(--color-black); color: var(--color-black);
@ -237,7 +249,13 @@ a:hover, .link:hover {
} }
.nav-docs { .nav-docs {
grid-area: nav; position: fixed;
}
@media (width < 600px) {
.aside-docs {
display: none;
}
} }
/* Home */ /* Home */
@ -246,6 +264,21 @@ a:hover, .link:hover {
gap: var(--gap-l); 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;
}
}
/* Footer */ /* Footer */
.footer { .footer {
text-align: center; text-align: center;
@ -257,6 +290,7 @@ a:hover, .link:hover {
font-family: 'Fira Mono', monospace; font-family: 'Fira Mono', monospace;
font-size: 80%; font-size: 80%;
border-radius: 6px; border-radius: 6px;
box-sizing: border-box;
} }
.one-hl-inline { .one-hl-inline {
@ -273,6 +307,7 @@ a:hover, .link:hover {
overflow: auto; overflow: auto;
padding: 16px; padding: 16px;
line-height: 1.45; line-height: 1.45;
white-space: break-spaces;
} }
.one-blockquote { .one-blockquote {
@ -297,44 +332,187 @@ a:hover, .link:hover {
width: 98%; width: 98%;
} }
.one-hl-negation-char { color: #ff6c60} /* font-lock-negation-char-face */ .one-hl-negation-char {
.one-hl-warning { color: #fd971f} /* font-lock-warning-face */ color: #ff6c60
.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 */
.one-hl-sh-quoted-exec { color: #62bd9c} /* sh-quoted-exec */ /* font-lock-negation-char-face */
.one-hl-warning {
color: #fd971f
}
.one-hl-ta-colon-keyword {color: #62b5e0;} /* ta-colon-keyword-face */ /* 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 */
.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,6 +46,23 @@
(: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-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))
(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 `(:main.main
(:section
(:div.container ,content)))))))
(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))
@ -82,6 +99,19 @@
(render-layout-html (render-layout-html
title title
description description
(jack-html `(:main.main (jack-html `(:div.container.docs
(:section (:aside.aside-docs
(:div.container ,content))))))) (: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))))))