Django-LiveView/docs
1
0
Fork 0
mirror of https://github.com/Django-LiveView/docs.git synced 2024-11-10 02:45:42 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add aside

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

354
assets/css/main.css
View File

@ -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,49 +165,54 @@ a:hover, .link:hover {
margin: 0;
}
.code__block {
.nav__list--docs {
display: initial;
flex-wrap: initial;
}
.code__block {
background-color: var(--color-gray);
color: var(--color-black);
padding: 1rem;
border-radius: .5rem;
font-family: 'Fira Code', monospace;
overflow-x: auto;
}
}
.code__line {
.code__line {
color: var(--color-brown);
font-family: 'Fira Code', monospace;
}
}
.details {
.details {
margin-block: 1rem;
border: 2px solid var(--color-brown);
}
}
.details__title {
.details__title {
border-bottom: 2px solid var(--color-brown);
}
}
.details__summary {
.details__summary {
background-color: var(--color-brown);
color: var(--color-white);
padding: 1rem;
list-style-type: "🐱 ";
}
}
.details[open] > .details__summary {
.details[open]>.details__summary {
list-style-type: "😺 ";
}
}
.details__content {
.details__content {
padding: 1rem;
}
}
/* Hero */
/* Hero */
.hero__hgroup {
.hero__hgroup {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr auto 1fr;
@ -209,9 +221,9 @@ a:hover, .link:hover {
"subtitle image"
"nav image";
grid-gap: 1rem;
}
}
@media (width < 600px) {
@media (width < 600px) {
.hero__hgroup {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto);
@ -221,120 +233,286 @@ a:hover, .link:hover {
"subtitle"
"nav";
}
}
}
.hero__logo {
.hero__logo {
grid-area: image;
}
}
.hero__title {
.hero__title {
grid-area: title;
align-self: end;
}
}
.hero__subtitle {
.hero__subtitle {
grid-area: subtitle;
}
}
.nav-docs {
grid-area: nav;
}
.nav-docs {
position: fixed;
}
/* Home */
.nav-home__list {
@media (width < 600px) {
.aside-docs {
display: none;
}
}
/* Home */
.nav-home__list {
justify-content: center;
gap: var(--gap-l);
}
}
/* Footer */
.footer {
/* 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 {
text-align: center;
}
}
/* ------- '.one' classes used by 'one-ox' org backend ------- */
/* ------- '.one' classes used by 'one-ox' org backend ------- */
.one-hl {
.one-hl {
font-family: 'Fira Mono', monospace;
font-size: 80%;
border-radius: 6px;
}
box-sizing: border-box;
}
.one-hl-inline {
.one-hl-inline {
background: #31424a;
padding: 0.2em 0.4em;
margin: 0;
white-space: break-spaces;
}
}
.one-hl-block {
.one-hl-block {
background: #161f22;
color: #c5c5c5;
display: block;
overflow: auto;
padding: 16px;
line-height: 1.45;
}
white-space: break-spaces;
}
.one-blockquote {
.one-blockquote {
background: #202d31;
border-left: 0.3em solid #31424a;
margin: 0px auto 16px;
padding: 1em 1em;
width: 90%;
}
}
.one-blockquote > p:last-child {
.one-blockquote>p:last-child {
margin-bottom: 0;
}
}
.one-hl-results {
background: #202d31 ;
.one-hl-results {
background: #202d31;
border-left: 2px solid #c5c5c5;
display: block;
margin: auto;
padding: 0.5em 1em;
overflow: auto;
width: 98%;
}
}
.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 */
.one-hl-negation-char {
color: #ff6c60
}
.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-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;
}

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.
: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.

38
onerc.el
View File

@ -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,6 +46,23 @@
(:p "Created with ❤️ by " (:a.link (@ :href "https://andros.dev/" :target "_blank") "Andros Fenollosa"))
(: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)
"Default render function by home page."
(let* ((title (org-element-property :TITLE page-tree))
@ -82,6 +99,19 @@
(render-layout-html
title
description
(jack-html `(:main.main
(:section
(:div.container ,content)))))))
(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))))))