rtl mode complete, auto generate list section page

assets/sass/components/_menu.scss

@@ -101,6 +101,11 @@
         @include transition(all, 0.15s, ease);
       }
 
+      &.downrtl {
+        @include rotate(-90);
+        @include transition(all, 0.15s, ease);
+      }
+
       &.right {
         @include rotate(0);
         @include transition(all, 0.15s, ease);

assets/sass/layout/_navbar.scss

@@ -5,7 +5,7 @@
   padding: 0 0.75rem;
   height: 100%;
   position: relative;
-
+  
   @include flexbox();
   @include align-items(center);
 
@@ -240,10 +240,17 @@
       font-family: $title-font;
       border: none;
       outline: none;
-      margin-left: 1rem;
       height: $grid-nav-height;
       cursor: pointer;
 
+      &[data-dir="rtl"] {
+        margin-right: 1rem;
+      }
+
+      &[data-dir="ltr"] {
+        margin-left: 1rem;
+      }
+
       @include flexbox();
       @include align-items(center);
       @include themify($themes) {

assets/sass/pages/_list.scss

@@ -10,12 +10,46 @@
 
 #list-menu {
   @include themify($themes) {
-    border-right: 1px solid themed('border-line-color');
+    &[data-dir="ltr"] {
+      border-right: 1px solid themed('border-line-color');
+    }
+
+    &[data-dir="rtl"] {
+      border-left: 1px solid themed('border-line-color');
+    }
   }
 }
 
 #list-side {
   @include themify($themes) {
-    border-left: 1px solid themed('border-line-color');
+    &[data-dir="ltr"] {
+      border-left: 1px solid themed('border-line-color');
+    }
+
+    &[data-dir="rtl"] {
+      border-right: 1px solid themed('border-line-color');
+    }
+  }
+}
+
+.list-section {
+  &__item {
+    margin: auto;
+    padding: 0.25rem 0;
+    width: 95%;
+    border-radius: 0.2rem;
+
+    &--link {
+      display: inline-block;
+      font-size: 1rem;
+      font-family: $title-font;
+      margin-top: 0.5rem;
+      margin-bottom: 0.125rem;
+    }
+
+    &--desc {
+      font-size: 1rem;
+      margin: 0.25rem 0;
+    }
   }
 }

assets/sass/pages/_single.scss

@@ -1,6 +1,12 @@
 #single-menu {
   @include themify($themes) {
-    border-right: 1px solid themed('border-line-color');
+    &[data-dir="ltr"] {
+      border-right: 1px solid themed('border-line-color');
+    }
+
+    &[data-dir="rtl"] {
+      border-left: 1px solid themed('border-line-color');
+    }
   }
 }
 
@@ -133,6 +139,7 @@
       margin-top: 1.6rem;
       overflow: auto;
       line-height: 1.5;
+      direction: ltr;
 
       @include themify($themes) {
         border-top: 1px solid themed('border-line-color');
@@ -223,9 +230,19 @@
       margin-bottom: 1rem;
     }
 
-    li {
-      margin-left: 2rem;
+    &[data-dir="ltr"] {
+      li {
+        margin-left: 2rem;
+      }
+    }
 
+    &[data-dir="rtl"] {
+      li {
+        margin-right: 2rem;
+      }
+    }
+
+    li {
       & > code {
         padding: 2px 7px;
       }
@@ -365,6 +382,7 @@ pre:not(.chroma) {
   overflow-x: auto;
   position: relative;
   margin: 1rem 0;
+  direction: ltr;
 
   @include on-event {
     .copy-to-clipboard {
@@ -395,7 +413,8 @@ pre:not(.chroma) {
 .highlight > .chroma {
   margin-bottom: 1.5rem;
   z-index: z('content');
-  overflow-x: auto;  
+  overflow-x: auto;
+  direction: ltr;
 
   @include themify($codeblock) {
     color: themed('content-pre-color');

layouts/_default/section.html

@@ -2,5 +2,6 @@
   {{ partial "main/header.html" . }}
 {{ end }}
 {{ define "main" }}
-  {{ partial "main/list.html" . }}
+  {{ $section_to_display :=  .Sections | default .Pages }}
+  {{ partial "main/list.html" (dict "context" . "section_to_display" $section_to_display) }}
 {{ end }}

layouts/blog/single.html

@@ -2,7 +2,7 @@
 <div class="mid">
   <div class="divider">
     
-    <nav id="single-menu" class="l">
+    <nav id="single-menu" class="l" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
     </nav>
 
     <article id="list-main" class="m">
@@ -13,7 +13,7 @@
       {{ partial "main/component/pagination-single.html" . }}
     </article>
     
-    <section id="list-side" class="r">
+    <section id="list-side" class="r" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
       {{ if $.Param "enableToc" }}
         {{ partial "main/component/toc.html" . }}
       {{ end }}

layouts/partials/drawer/drawer.html

@@ -1,4 +1,4 @@
-<div id="myDrawer" class="drawer">
+<div id="myDrawer" class="drawer" style="{{ if eq ($.Param "languagedir") "rtl" }}right: -100%{{ end }}">
   <div class="drawer__header">
     <div class="drawer__header--text">
       {{ .Site.Params.logoText }}
@@ -13,17 +13,26 @@
     {{ partial "main/sections/list-menu.html" . }}
   </div>
 </div>
-<div id="myModal" class="modal"></div>
+<div id="myModal" class="modal" style="{{ if eq ($.Param "languagedir") "rtl" }}opacity: 0; right: -100%{{ end }}"></div>
 
 <script>
   var isDrawerOpen = localStorage.getItem('isDrawerOpen');
   var modal = document.getElementById("myModal");
   var drawer = document.getElementById('myDrawer');
+  
+  {{ $languagedir := ($.Param "languagedir" | default "ltr") }}
+  var languagedir = JSON.parse({{ $languagedir | jsonify }});
 
   var openDrawer = function () {
-    modal.style.left = 0;
     modal.style.opacity = 1;
-    drawer.style.left = 0;
+    
+    if (languagedir === "rtl") {
+      modal.style.right = 0;
+      drawer.style.right = 0;
+    } else {
+      modal.style.left = 0;
+      drawer.style.left = 0;
+    }
   }
 
   if (isDrawerOpen && isDrawerOpen === 'true') {

layouts/partials/head/scripts.html

@@ -12,6 +12,9 @@
 <script>
   "use strict";
 
+  {{ $languagedir := ($.Param "languagedir" | default "ltr") }}
+  var languagedir = JSON.parse({{ $languagedir | jsonify }});
+
   window.onload = function() {
     // ===================== navbar collapse ======================
     var navCollapseBtn = document.getElementById('navCollapseBtn');
@@ -92,12 +95,22 @@
           content.style.maxHeight = null;
           content.classList.remove('active');
           menuTitleIcon.classList.add('right');
-          menuTitleIcon.classList.remove('down');
+          
+          if (languagedir === 'rtl') {
+            menuTitleIcon.classList.remove('downrtl');
+          } else {
+            menuTitleIcon.classList.remove('down');
+          }
         } else {
           content.style.maxHeight = content.scrollHeight + "px";
           content.classList.add('active');
           menuTitleIcon.classList.remove('right');
-          menuTitleIcon.classList.add('down');
+          
+          if (languagedir === 'rtl') {
+            menuTitleIcon.classList.add('downrtl');
+          } else {
+            menuTitleIcon.classList.add('down');
+          }
         }
       });
     });
@@ -111,16 +124,33 @@
     var drawerCloseBtn = document.querySelector('.drawer__close');
 
     var openDrawer = function() {
-      modal.style.left = 0;
       modal.style.opacity = 1;
-      drawer.style.left = 0;
+
+      if (languagedir === 'rtl') {
+        modal.style.right = 0;
+        drawer.style.right = 0;
+      } else {
+        modal.style.left = 0;
+        drawer.style.left = 0;
+      }
     }
 
     var closeDrawer = function() {
       modal.style.opacity = 0;
-      drawer.style.left = '-100%';
+
+      if (languagedir === 'rtl') {
+        drawer.style.right = '-100%';
+      } else {
+        drawer.style.left = '-100%';
+      }
+
+      
       setTimeout(function () {
-        modal.style.left = '-100%';
+        if (languagedir === 'rtl') {
+          modal.style.right = '-100%';
+        } else {
+          modal.style.left = '-100%';
+        }
       }, 250);
     }
 

layouts/partials/main/component/pagination-single.html

@@ -1,22 +1,42 @@
 {{ if or .PrevInSection .NextInSection }}
 <div class="grow"></div>
 <nav class="pagination-single">
-  {{ if .NextInSection }}
-    <a href="{{ .NextInSection.Permalink }}" title="{{ .NextInSection.Title }}" class="pagination-single__right">
-      <div class="pagination-single__icon">
-        {{ partial "svgs/arrow-back.svg" (dict "width" 22 "height" 22) }}
-      </div>
-      <div class="pagination-single__right-title">{{ .NextInSection.Title }}</div>
-    </a>
-  {{ end }}
-  <div class="grow"></div>
-  {{ if .PrevInSection }}
-    <a href="{{ .PrevInSection.Permalink }}" title="{{ .PrevInSection.Title }}" class="pagination-single__left">
-      <div class="pagination-single__left-title">{{ .PrevInSection.Title }}</div>
-      <div class="pagination-single__icon">
-        {{ partial "svgs/arrow-forward.svg" (dict "width" 22 "height" 22) }}
-      </div>
-    </a>
+  {{ if eq ($.Param "languagedir") "rtl" }}
+    {{ with .NextInSection }}
+      <a href="{{ .Permalink }}" title="{{ .Title }}" class="pagination-single__right">
+        <div class="pagination-single__icon">
+          {{ partial "svgs/arrow-forward.svg" (dict "width" 22 "height" 22) }}
+        </div>
+        <div class="pagination-single__right-title">{{ .Title }}</div>
+      </a>
+    {{ end }}
+    <div class="grow"></div>
+    {{ with .PrevInSection }}
+      <a href="{{ .Permalink }}" title="{{ .Title }}" class="pagination-single__left">
+        <div class="pagination-single__left-title">{{ .Title }}</div>
+        <div class="pagination-single__icon">
+          {{ partial "svgs/arrow-back.svg" (dict "width" 22 "height" 22) }}
+        </div>
+      </a>
+    {{ end }}
+  {{ else }}
+    {{ with .PrevInSection }}
+      <a href="{{ .Permalink }}" title="{{ .Title }}" class="pagination-single__left">
+        <div class="pagination-single__icon">
+          {{ partial "svgs/arrow-back.svg" (dict "width" 22 "height" 22) }}
+        </div>
+        <div class="pagination-single__left-title">{{ .Title }}</div>      
+      </a>
+    {{ end }}
+    <div class="grow"></div>
+    {{ with .NextInSection }}
+      <a href="{{ .Permalink }}" title="{{ .Title }}" class="pagination-single__right">      
+        <div class="pagination-single__right-title">{{ .Title }}</div>
+        <div class="pagination-single__icon">
+          {{ partial "svgs/arrow-forward.svg" (dict "width" 22 "height" 22) }}
+        </div>
+      </a>
+    {{ end }}
   {{ end }}
 </nav>
 {{ end }}

layouts/partials/main/list.html

@@ -1,18 +1,21 @@
 <div class="mid">
   <div class="divider">
 
-    <nav id="list-menu" class="l">
-      {{ if $.Param "enableMenu" }}
-        {{ partial "main/sections/list-menu.html" . }}
+    <nav id="list-menu" class="l" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
+      {{ if $.context.Param "enableMenu" }}
+        {{ partial "main/sections/list-menu.html" .context }}
       {{ end }}
     </nav>
 
     <article id="list-main" class="m">
-      {{ partial "main/sections/list-main.html" . }}
-      {{ partial "main/component/pagination-single.html" . }}
+      {{ partial "main/sections/list-main.html" .context }}
+      {{ if .section_to_display }}
+        {{ partial "main/sections/list-section.html" (dict "section_to_display" .section_to_display) }}
+      {{ end }}
+      {{ partial "main/component/pagination-single.html" .context }}
     </article>
 
-    <section id="list-side" class="r">
+    <section id="list-side" class="r" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
     </section>
 
   </div>

layouts/partials/main/sections/list-main.html

@@ -8,7 +8,7 @@
     </div>
   {{ end }}
 
-  <article class="single__contents">
+  <article class="single__contents" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
     {{ .Content }}
   </article>
 </div>

layouts/partials/main/sections/list-menu.html

@@ -14,8 +14,12 @@
       {{ if .Params.Collapsible }}
         <span class="menu__title--collapse {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}active{{ end }}">
           {{ .Title }}
-          <span class="menu__title--icon {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}down{{ else }}right{{ end }}">
-            {{ partial "svgs/arrow-right.svg" (dict "width" 22 "height" 22) }}
+          <span class="menu__title--icon {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}{{ if eq ($.Param "languagedir") "rtl" }}downrtl{{ else }}down{{ end }}{{ else }}right{{ end }}">
+            {{ if eq ($.Param "languagedir") "rtl" }}
+              {{ partial "svgs/arrow-left.svg" (dict "width" 22 "height" 22) }}
+            {{ else }}
+              {{ partial "svgs/arrow-right.svg" (dict "width" 22 "height" 22) }}
+            {{ end }}
           </span>
         </span>
         <ul class="menu__list {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}active{{ end }}">

layouts/partials/main/sections/list-section.html

@@ -0,0 +1,13 @@
+{{ $.context.Content }}
+<div class="list-section">
+  {{ range .section_to_display }}
+    <div class="list-section__item">
+      <a href="{{ .Permalink }}" class="list-section__item--link">
+        {{ .Title }}
+      </a>
+      <div class="list-section__item--desc">
+        {{ .Description }}
+      </div>
+    </div>
+  {{ end }}
+  </div>

layouts/partials/main/sections/single-menu.html

@@ -14,8 +14,12 @@
       {{ if .Params.Collapsible }}
         <span class="menu__title--collapse {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}active{{ end }}">
           {{ .Title }}
-          <span class="menu__title--icon {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}down{{ else }}right{{ end }}">
-            {{ partial "svgs/arrow-right.svg" (dict "width" 22 "height" 22) }}
+          <span class="menu__title--icon {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}{{ if eq ($.Param "languagedir") "rtl" }}downrtl{{ else }}down{{ end }}{{ else }}right{{ end }}">
+            {{ if eq ($.Param "languagedir") "rtl" }}
+              {{ partial "svgs/arrow-left.svg" (dict "width" 22 "height" 22) }}
+            {{ else }}
+              {{ partial "svgs/arrow-right.svg" (dict "width" 22 "height" 22) }}
+            {{ end }}
           </span>
         </span>
         <ul class="menu__list {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}active{{ end }}">

layouts/partials/main/single.html

@@ -1,7 +1,7 @@
 <div class="mid">
   <div class="divider">
     
-    <nav id="single-menu" class="l">
+    <nav id="single-menu" class="l" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
       {{ if $.Param "enableMenu" }}
         {{ partial "main/sections/single-menu.html" . }}
       {{ end }}
@@ -13,7 +13,7 @@
       {{ partial "comments/comments.html" . }}
     </article>
     
-    <section id="list-side" class="r">
+    <section id="list-side" class="r" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
       {{ if $.Param "enableToc" }}
         {{ partial "main/component/toc.html" . }}
       {{ end }}

layouts/partials/navbar/menu/navbar-menu-mobile.html

@@ -1,5 +1,5 @@
 <span id="navMenuMobile" class="hide">
-  <button id="navCollapseBtn" class="navbar__dropdown--title" aria-label="Section Menu">
+  <button id="navCollapseBtn" class="navbar__dropdown--title" aria-label="Section Menu" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
     {{ if .IsHome }}
       {{ .Site.Title }}
     {{ else }}