Add aside

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,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 {
+.nav-docs {
-	grid-area: nav;
+    position: fixed;
-    }
+}
 
-    /* Home */
+@media (width < 600px) {
-    .nav-home__list {
+    .aside-docs {
+	display: none;
+    }
+}
+
+/* Home */
+.nav-home__list {
     justify-content: center;
     gap: var(--gap-l);
-    }
+}
 
-    /* Footer */
+/* Docs */
-    .footer {
+.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 {
+.one-hl-results {
-	background: #202d31 ;
+    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-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;
+}

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
+:ONE: one-custom-default-page
-:CUSTOM_ID: /docs/source-code/
+: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/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
-    - [[https://github.com/Django-LiveView/demo-snake][Snake]]
+    - [[https://github.com/Django-LiveView/demo-snake][Snake]]: The classic game of Snake.

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,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
+     (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))))))