rtl direction support, mathjax config added

README.ko.md

@@ -40,6 +40,8 @@ Zzo theme을 이용할 시 가장 매력적인 포인트 한가지는, 한글로
 * 검색 (지원 예정)
 * 갤러리 지원
 * 코드 하이라이트
+* 토크 페이지
+* 쇼케이스 페이지
 
 ## Minimum Hugo version
 
@@ -226,6 +228,7 @@ description = "The Zzo theme for Hugo example site." # for SEO
 custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss
 custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js
 useFaviconGenerator = false # https://www.favicon-generator.org/
+languagedir = "ltr" # ltr / rtl
 
 themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"] # select options for site color theme
 notAllowedTypesInHome = ["contact", "talks", "about", "showcase"] # not allowed page types in home page. type can be set in front matter or default to folder name.

README.md

@@ -37,11 +37,12 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
 * Search Engine Optimization(SEO)
 * Multilingual (i18n)
 * Responsive design
-* RSS and JSON feeds with full content
+* RSS
 * Search
 * Gallery
 * Fast code highlighting
-* Talks page for external links
+* Talks page
+* Showcase page
 
 ## Minimum Hugo version
 
@@ -219,6 +220,7 @@ description = "The Zzo theme for Hugo example site." # for SEO
 custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss
 custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js
 useFaviconGenerator = false # https://www.favicon-generator.org/
+languagedir = "ltr" # ltr / rtl
 
 themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"] # select options for site color theme
 notAllowedTypesInHome = ["contact", "talks", "about", "showcase"] # not allowed page types in home page. type can be set in front matter or default to folder name.

assets/sass/components/_search.scss

@@ -156,6 +156,7 @@
     height: $grid_navbar_height;
     text-align: right;
     position: relative;
+    direction: rtl;
 
     @include flexbox();
     @include align-items(center);
@@ -170,7 +171,6 @@
       cursor: pointer;
       position: absolute;
       top: 0;
-      right: 0;
 
       @include flexbox();
       @include align-items(center);
@@ -181,6 +181,14 @@
           color: themed('link-hover');
         }
       }
+
+      &[data-dir="ltr"] {
+        right: 0;
+      }
+
+      &[data-dir="rtl"] {
+        left: 0;
+      }
     }
 
     &--input {      
@@ -191,6 +199,7 @@
       border-radius: 0.25rem;
       padding: 0 1rem;
       font-size: 1.1rem;
+      
       @include themify($themes) {
         color: themed('body-color');
         background-color: themed('navbar-background-color');
@@ -214,6 +223,14 @@
 
       @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
     }
+
+    &[data-dir="ltr"] {
+      direction: ltr;
+    }
+
+    &[data-dir="rtl"] {
+      direction: rtl;
+    }
   }
 
   &__btn {

assets/sass/components/_summary.scss

@@ -119,6 +119,7 @@
 
   &__content {
     width: 100%;
+    padding: 0 0.5rem;
     
     @include flexbox();
     @include flex-direction(column);

assets/sass/components/_toc.scss

@@ -18,6 +18,11 @@
     @include flexbox();
     @include align-items(center);
     position: fixed;
+
+    .toc__title {
+      margin-top: 0.75rem;
+      margin-left: 0.5rem;
+    }
   }
 
   &__flexbox[data-position="absolute"] {
@@ -39,11 +44,26 @@
     }
   }
 
+  &__flexbox--outer[data-dir="ltr"] {
+    top: 4.2rem;
+    left: 1rem;
+  }
+
+  &__flexbox--outer[data-dir="rtl"] {
+    top: 4.2rem;
+    right: 1rem;
+
+    .toc__title {
+      margin-top: 0.75rem;
+      margin-left: 0.5rem;
+    }
+  }
+
   &__title {
     font-size: 0.9rem;
     margin-top: 0.5rem;
-    @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
 
+    @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
     @include themify($themes) {
       color: themed('toc-label-color');
     }
@@ -55,6 +75,7 @@
     }
   }
 
+  &[data-dir="ltr"] {
     a {
       color: inherit;     
       position: relative;
@@ -74,6 +95,48 @@
       }
     }
     
+    .active {
+      @include themify($themes) {
+        color: themed('link-hover');
+        font-weight: 700;
+        &::before {        
+          background-color: themed('toc-vertical-line-active');
+        }
+      }
+    }
+  }
+
+  &[data-dir="rtl"] {
+    a {
+      color: inherit;     
+      position: relative;
+      &::before {
+        @include themify($themes) {        
+          background-color: themed('toc-vertical-line');
+        }      
+        content: '';
+        height: 100%;
+        right: -1rem;
+        margin-top: -1px;
+        position: absolute;
+        width: 2px;            
+        &:last-child {
+          background-color: transparent;
+        }
+      }
+    }
+
+    .active {
+      @include themify($themes) {
+        color: themed('link-hover');
+        font-weight: 700;
+        &::before {        
+          background-color: themed('toc-vertical-line-active');
+        }
+      }
+    }
+  }
+
   ul {
     @include themify($themes) {
       li {        
@@ -92,16 +155,6 @@
     }
   }
 
-  .active {
-    @include themify($themes) {
-      color: themed('link-hover');
-      font-weight: 700;
-      &::before {        
-        background-color: themed('toc-vertical-line-active');
-      }
-    }
-  }
-
   &__outer {
     padding-right: 1rem;
     padding-left: 2.5rem;

assets/sass/components/_whoami.scss

@@ -13,6 +13,7 @@
   &__contents {
     width: 100%;
     margin-top: 0.5rem;
+    padding: 0 1rem;
 
     @media only screen and (max-width: 769px) {
       @include flexbox();

assets/sass/layout/_navigation.scss

@@ -9,6 +9,20 @@
   right: 0;
   top: 0;
 
+  &[data-dir="rtl"] {
+    direction: rtl;  
+  }
+  
+  &[data-dir="ltr"] {
+    direction: ltr;
+  }
+
+  @media only screen and (max-width: 769px) {
+    &[data-dir="rtl"] {
+      direction: ltr;  
+    }
+  }
+
   @include transition(all, 0.2s, ease);  
   @include flexbox();
   @include justify-content(space-between);
@@ -170,6 +184,7 @@
     @include flexbox();
     @include align-items(center);
     @include justify-content(flex-end);
+
     height: $grid_navbar_height;
 
     @media only screen and (max-width: 769px) {
@@ -191,15 +206,16 @@
         color: themed('navbar-title-color');
         border-top: 1px solid transparent;
         border-bottom: 1px solid themed('navbar-border-bottom-color');
+        background-color: themed('navbar-background-color');
         @include on-event {
           color: themed('navbar-title-hover-color');
           background-color: themed('navbar-menu-hover-background-color');
           text-decoration: none;
           border-bottom: 1px solid themed('navbar-border-bottom-color');
+        }
         @media only screen and (max-width: 769px) {
           border-bottom: none;
         }
-        }
         &.active {
           color: themed('navbar-title-active-color') !important;
         }
@@ -278,6 +294,7 @@
       @include truncate(150px);
       @include themify($themes) {
         color: themed("dropdown-item-color");
+        background-color: themed("navbar-background-color");
         @include on-event {
           color: themed("navbar-dropdown-item-hover-color");
           background-color: themed("navbar-menu-hover-background-color");
@@ -291,7 +308,7 @@
       }
 
       @media only screen and (max-width: 769px) {
-        padding-left: 2.5rem;
+        padding: 0 2.5rem;
         min-width: 100%;
         max-width: 100%;
       }

assets/sass/pages/_archive.scss

@@ -17,10 +17,12 @@
 
   &__ul {
     position: relative;
+
+    &[data-dir="rtl"] {
       &::before {
         content: '';
         position: absolute;
-      left: 3rem;
+        right: 3rem;
         top: 0;
         width: 0.25rem;
         height: 100%;
@@ -34,22 +36,52 @@
           content: none;
         }
       }
+    }
+
+    &[data-dir="ltr"] {
+      &::before {
+        content: '';
+        position: absolute;
+        left: 3rem;
+        top: 0;
+        width: 0.25rem;
+        height: 100%;
+        @include themify($themes) {
+          background-color: themed('toc-vertical-line');
+        }
+      }
+      @media only screen and (max-width: 769px) {
+        &::before {
+          content: none;
+        }
+      }
+    }
 
   }
 
   &__li {
     margin-bottom: 0.5rem;
-    margin-left: 4rem;
     z-index: 0;
 
-    @include transition(margin-left, 0.1s, ease);
+    &[data-dir="rtl"] {
-    @include flexbox();
+      margin-right: 4rem;
-    @include align-items(flex-start);
+      @media only screen and (max-width: 769px) {
+        margin-right: 0;
+        position: relative;
+      }
+    }
 
+    &[data-dir="ltr"] {
+      margin-left: 4rem;
       @media only screen and (max-width: 769px) {
         margin-left: 0;
         position: relative;
       }
+    }
+
+    @include transition(margin-left, 0.1s, ease);
+    @include flexbox();
+    @include align-items(flex-start);
 
     @media only screen and (max-width: 600px) {
       @include flex-direction(column);
@@ -146,6 +178,7 @@
     }
     
     @include on-event {
+      &[data-dir="ltr"] {
         &::before {
           content: '';
           position: absolute;
@@ -169,5 +202,31 @@
           }
         }
       }
+
+      &[data-dir="rtl"] {
+        &::before {
+          content: '';
+          position: absolute;
+          right: 3rem;                
+          width: 0.25rem;
+          height: 30px;
+          
+          @include themify($themes) {
+            background-color: themed('archive-hover-line-color');
+            
+            @media only screen and (max-width:768px) {
+              top: 13px;
+              height: 24px;
+            }
+          }
+
+          @media only screen and (max-width: 769px) {
+            height: 24px;
+            top: 50%;
+            @include translateY(-50%);
+          }
+        }
+      }
+    }
   }
 }

assets/sass/pages/_list.scss

@@ -11,6 +11,11 @@
     &.r {
       margin-right: 1rem;
     }
+
+    &[data-dir="rtl"] {
+      margin-left: 1rem;
+      margin-right: 0;
+    }
   }
 
   &__header {

assets/sass/pages/_showcase.scss

@@ -72,6 +72,19 @@
     padding: 1rem;
     position: relative;
 
+    &[data-dir="rtl"] {
+      &:nth-child(odd) {
+        margin: 0.5rem;
+        margin-right: 0;
+      }
+
+      &:nth-child(even) {
+        margin: 0.5rem;
+        margin-left: 0;
+      }
+    }
+
+    &[data-dir="ltr"] {
       &:nth-child(odd) {
         margin: 0.5rem;
         margin-left: 0;
@@ -81,6 +94,7 @@
         margin: 0.5rem;
         margin-right: 0;
       }
+    }
 
     @include flexbox();
     @include flex-grow(1);

assets/sass/pages/_single.scss

@@ -132,6 +132,7 @@
       border-radius: 0.34rem;
       line-height: 1.5;
       font-size: 13.8px;
+      direction: ltr;
       
       @include themify($themes) {
         @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
@@ -427,6 +428,7 @@ pre:not(.chroma) {
   overflow-x: auto;
   position: relative;
   margin: 1rem 0;
+  direction: ltr;
 
   @include on-event {
     .copy-to-clipboard {
@@ -460,6 +462,7 @@ pre:not(.chroma) {
   box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
   z-index: z('content');
   overflow-x: auto;
+  direction: ltr;
 
   @include themify($codeblock) {
     color: themed('content-pre-color');

assets/sass/pages/_talk.scss

@@ -3,7 +3,6 @@
     border-radius: 0.25rem;
     min-width: 100px;
     max-width: 100px;
-    margin-right: 1rem;
     font-size: 16px;
     height: 26px;
     line-height: 26px;
@@ -16,6 +15,14 @@
       color: themed('archive-meta-color');
       background-color: themed('archive-type-background-color');
     }
+
+    &[data-dir="rtl"] {
+      margin-left: 1rem;
+    }
+
+    &[data-dir="ltr"] {
+      margin-right: 1rem;
+    }
   }
 
   &__title {
@@ -32,6 +39,7 @@
       margin-bottom: 0.5rem;
     }
     
+    &[data-dir="ltr"] {
       @include on-event {
         &::before {
           content: '';
@@ -58,4 +66,5 @@
         }
       }
     }
+  }
 }

assets/sass/themes/_dark.scss

@@ -15,7 +15,7 @@ $dark: (
     dropdown-item-hover-background-color: #727072,
     dropdown-item-hover-color: #FCFCFA,
     dropdown-item-color: #FCFCFA,    
-    navbar-border-bottom-color: #2D2A2E,
+    navbar-border-bottom-color: #4e4e4e,
     navbar-background-color: #403E41,
     navbar-mobile-background-color: #3a3a3a,
     navbar-title-color: #FCFCFA,

assets/sass/themes/_hacker.scss

@@ -14,8 +14,8 @@ $hacker: (
     dropdown-content-background-color: lighten(#151715, 5%),
     dropdown-item-hover-background-color: lighten(#151715, 20%),
     dropdown-item-hover-color: #E08C48,
-    dropdown-item-color: #CDF5CC,
+    dropdown-item-color: #FCFCFA,
-    navbar-border-bottom-color: #252526,
+    navbar-border-bottom-color: #424242,
     navbar-background-color: #252526,
     navbar-mobile-background-color: #323232,
     navbar-title-color: #E3CD26,

assets/sass/themes/_solarized.scss

@@ -15,7 +15,7 @@ $solarized: (
     dropdown-item-hover-background-color: darken(#FBF1D1, 5%),
     dropdown-item-hover-color: #B58900,
     dropdown-item-color: #424242,    
-    navbar-border-bottom-color: #B58900,
+    navbar-border-bottom-color: #eddc9f,
     navbar-background-color: #EEE8D5,
     navbar-mobile-background-color: darken(#EEE8D5, 2.5%),
     navbar-title-color: #586e75,

data/lib.toml

@@ -20,8 +20,7 @@
   url = "https://cdn.jsdelivr.net/npm/raphael@2.3.0/raphael.min.js"
 
 [js.mathjax]
-  sri = "sha256-3Fdoa5wQb+JYfEmTpQHx9sc/GuwpfC/0R9EpBki+mf8="
+  url = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js"
-  url = "https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-chtml.js"
 
 [js.webfont]
   sri = "" # no sri

layouts/_default/list.html

@@ -24,7 +24,7 @@
     </div>    
 
     {{ if $.Param "enableSidebar" }}
-        <aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
+        <aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
             {{ partial "sidebar/sidebar-list" . }}
         </aside>
     {{ end }}

layouts/_default/taxonomy.html

@@ -23,7 +23,7 @@
   </div>
 
   {{ if $.Param "enableSidebar" }}
-    <aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
+    <aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
       {{ partial "sidebar/sidebar-list" . }}
     </aside>
   {{ end }}

layouts/archive/list.html

@@ -20,14 +20,19 @@
     
     {{ range ($paginator).PageGroups }}
     <span class="archive__key">{{ .Key }}</span>
-    <ul class="archive__ul">
+    <ul class="archive__ul" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
       {{ range .Pages }}
-      <li class="archive__li">
+      <li class="archive__li" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
         <span class="archive__meta">
+          {{ if ne ($.Param "languagedir") "rtl" }}
             <span class="archive__type">{{ .Type }}</span>
             <span class="archive__date">{{ .Date.Format (i18n "archive-dateformat") }}</span>
+          {{ else }}
+            <span class="archive__date">{{ .Date.Format (i18n "archive-dateformat") }}</span>
+            <span class="archive__type">{{ .Type }}</span>
+          {{ end }}
         </span>
-        <a href="{{ .Permalink }}" class="archive__title" data-title-wrap="{{ $titleWrap | default "wrap"}}">{{ .Title }}</a>        
+        <a href="{{ .Permalink }}" class="archive__title" data-title-wrap="{{ $titleWrap | default "wrap"}}" data-dir="{{ $.Param "languagedir" | default "ltr" }}">{{ .Title }}</a>        
       </li>
       {{ end }}
     </ul>

layouts/index.html

@@ -22,7 +22,7 @@
     </div>
 
     {{ if $.Param "enableSidebar" }}
-        <aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
+        <aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
             {{ partial "sidebar/sidebar-home" . }}
         </aside>
     {{ end }}

layouts/partials/body/main-left.html

@@ -1 +1,22 @@
-<div class="wrapper__left"></div>
+{{ if eq ($.Param "languagedir") "rtl" }}
+<div class="wrapper__left" dir="rtl">
+  {{ if and (eq ($.Param "tocPosition") "outer") .IsPage }}
+    {{ if and (ne .Type "about") (ne .Type "contact") (ne .Type "gallery") }}
+      {{ if or ($.Param "enableToc") ($.Param "toc") }}
+        <div class="toc__flexbox--outer" data-position="fixed" data-dir="rtl">
+          <h6 class="toc__title toc__title--outer">{{ i18n "toc-label" }}</h6>
+          {{ if $.Param "enableTocSwitch" }}
+          <label class="switch">
+            <input id="visible-toc" aria-label="Visible TOC" type="checkbox" {{ if $.Param "hideToc" }}{{ else }}checked{{ end }}>
+            <span class="slider round"></span>
+          </label>
+          {{ end }}
+        </div>
+        <div class="toc toc__outer {{ if $.Param "hideToc" }}hide{{ end }}" data-dir="rtl">
+          {{ .TableOfContents }}
+        </div>
+      {{ end }}
+    {{ end }}
+  {{ end }}
+</div>
+{{ end }}

layouts/partials/body/main-right.html

@@ -1,8 +1,9 @@
-<div class="wrapper__right">
+{{ if ne ($.Param "languagedir") "rtl" }}
+<div class="wrapper__right" dir="ltr">
   {{ if and (eq ($.Param "tocPosition") "outer") .IsPage }}
     {{ if and (ne .Type "about") (ne .Type "contact") (ne .Type "gallery") }}
       {{ if or ($.Param "enableToc") ($.Param "toc") }}
-        <div class="toc__flexbox--outer" data-position="fixed">
+        <div class="toc__flexbox--outer" data-position="fixed" data-dir="ltr">
           <h6 class="toc__title toc__title--outer">{{ i18n "toc-label" }}</h6>
           {{ if $.Param "enableTocSwitch" }}
           <label class="switch">
@@ -11,10 +12,11 @@
           </label>
           {{ end }}
         </div>
-        <div class="toc toc__outer {{ if $.Param "hideToc" }}hide{{ end }}">
+        <div class="toc toc__outer {{ if $.Param "hideToc" }}hide{{ end }}" data-dir="ltr">
           {{ .TableOfContents }}
         </div>
       {{ end }}
     {{ end }}
   {{ end }}
 </div>
+{{ end }}

layouts/partials/navbar/site-nav.html

@@ -1,4 +1,4 @@
-<nav class="navbar" role="navigation" aria-label="main navigation">
+<nav class="navbar" role="navigation" aria-label="main navigation" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
   <div class="navbar__brand">
     {{ if $.Param "logo" | default true }}
     <a href="{{ "/" | relLangURL }}" title="{{ i18n "tooltip-home" }}" rel="home" class="{{ if eq ($.Param "logoType") "long" }}navbar__long-link{{ else }}navbar__logo-link{{ end }}">
@@ -33,7 +33,7 @@
       {{ $active = or $active (eq (lower .URL) (lower $current.Type)) }}
       {{ if .HasChildren }}
         <div class="navbar__dropdown navbar__slide-down">
-          <a href="{{ .URL | relLangURL }}" class="navbar__menu-item {{ if $active }}active{{ end }}">
+          <a href="{{ .URL | relLangURL }}" class="navbar__menu-item {{ if $active }}active{{ end }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
             {{ safeHTML .Name }}
             <span class="navbar__menu-icon">
               {{ partial "svgs/arrow/keyboard-arrow-down.svg" (dict "width" 18 "height" 18) }}
@@ -41,12 +41,12 @@
           </a>        
           <div class="navbar__dropdown--content">
             {{ range .Children }}
-            <a href="{{ .URL | relLangURL }}" class="navbar__dropdown--item">{{ safeHTML .Name }}</a>        
+            <a href="{{ .URL | relLangURL }}" class="navbar__dropdown--item" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">{{ safeHTML .Name }}</a>        
             {{ end }}
           </div>
         </div>
       {{ else }}
-        <a href="{{ .URL | relLangURL }}" class="navbar__menu-item navbar__slide-down {{ if $active }}active{{ end }}">{{ safeHTML .Name }}</a>
+        <a href="{{ .URL | relLangURL }}" class="navbar__menu-item navbar__slide-down {{ if $active }}active{{ end }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">{{ safeHTML .Name }}</a>
       {{ end }}
     {{ end }}
   </div>

layouts/partials/pagination/pagination-single.html

@@ -1,5 +1,6 @@
 <div class="grow"></div>
 <nav class="pagination-single">
+  {{ if eq ($.Param "languagedir") "ltr" }}
     {{ if .PrevPage }}
       <a href="{{ .PrevPage.Permalink }}" class="pagination-single__left">
         <div class="pagination-single__icon">
@@ -17,4 +18,23 @@
         </div>
       </a>
     {{ end }}
+  {{ else }}
+    {{ if .NextPage }}
+    <a href="{{ .NextPage.Permalink }}" class="pagination-single__right">
+      <div class="pagination-single__icon">
+        {{ partial "svgs/arrow/arrow-forward.svg" (dict "width" 25 "height" 25) }}
+      </div>
+      <div class="pagination-single__right-title">{{ .NextPage.Title }}</div>
+    </a>
+    {{ end }}
+    <div class="grow"></div>
+    {{ if .PrevPage }}
+    <a href="{{ .PrevPage.Permalink }}" class="pagination-single__left">
+      <div class="pagination-single__left-title">{{ .PrevPage.Title }}</div>
+      <div class="pagination-single__icon">
+        {{ partial "svgs/arrow/arrow-back.svg" (dict "width" 25 "height" 25) }}
+      </div>
+    </a>
+    {{ end }}
+  {{ end }}
 </nav>

layouts/partials/script/single-script.html

@@ -34,7 +34,35 @@
 {{ end }}
 
 {{ if in .Params.Libraries "mathjax" }}
-  <script defer src="{{ $js.mathjax.url }}" integrity="{{ $js.mathjax.sri }}" crossorigin="anonymous"></script>
+  <script type="text/javascript" async src="{{ $js.mathjax.url }}?config=TeX-AMS-MML_HTMLorMML">
+    MathJax.Hub.Config({
+      tex2jax: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$']],
+        processEscapes: true,
+        processEnvironments: true,
+        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
+        TeX: {
+          equationNumbers: { autoNumber: "AMS" },
+          extensions: ["AMSmath.js", "AMSsymbols.js"]
+        }
+      }
+    });
+    MathJax.Hub.Queue(function () {
+      // Fix <code> tags after MathJax finishes running. This is a
+      // hack to overcome a shortcoming of Markdown. Discussion at
+      // https://github.com/mojombo/jekyll/issues/199
+      var all = MathJax.Hub.getAllJax(), i;
+      for (i = 0; i < all.length; i += 1) {
+        all[i].SourceElement().parentNode.className += ' has-jax';
+      }
+    });
+
+    MathJax.Hub.Config({
+      // Autonumbering by mathjax
+      TeX: { equationNumbers: { autoNumber: "AMS" } }
+    });
+  </script>
 {{ end }}
 
 {{ if in .Params.Libraries "msc" }}
@@ -59,7 +87,6 @@
   <script defer src="{{ $js.viz_render.url }}" integrity="{{ $js.viz_render.sri }}" crossorigin="anonymous"></script>
 {{ end }}
 
-
 <script>
   'use strict';
 
@@ -451,19 +478,6 @@
 
 
     // ============================ mathjax ============================
-    if (lib && lib.includes('mathjax')) {
-      window.MathJax = {
-        tex: {
-          inlineMath: [['$', '$'], ['\\(', '\\)']],
-          displayMath: [['$$', '$$'], ['\\[', '\\]']],
-          processEscapes: false,
-          packages: { '[+]': ['noerrors'] }
-        },
-        loader: {
-          load: ['[tex]/noerrors']
-        },
-      };
-    }
     // =================================================================
 
 

layouts/partials/search/site-search-mobile.html

@@ -6,11 +6,11 @@
 <div id="search-mobile-container" class="mobile-search hide">
   <div class="mobile-search__top">
     <input id="search-mobile" type="text" aria-label="Mobile Search" placeholder="{{T "search-placeholder"}}" class="mobile-search__top--input"/>
-    <div id="search-mobile-close" class="mobile-search__top--icon">
+    <div id="search-mobile-close" class="mobile-search__top--icon" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
       {{ partial "svgs/etc/cancel.svg" (dict "width" 22 "height" 22) }}
     </div>
   </div>
-  <div id="search-mobile-results" class="mobile-search__body">
+  <div id="search-mobile-results" class="mobile-search__body" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
     
   </div>
 </div>

layouts/partials/showcase/show-pinned.html

@@ -11,7 +11,7 @@
       {{ range .Pages }}
         {{ $category := .Params.category }}
         {{ range where .Pages "Params.pinned" true }}
-          <li class="showcase__box">
+          <li class="showcase__box" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
             <a href="{{ .Params.Link }}" class="showcase__box--link" target="_blank" rel="noreferrer"></a>
             <span class="showcase__box--title">
               {{ .Title }}

layouts/partials/showcase/show-section.html

@@ -5,7 +5,7 @@
     <div class="showcase__box--wrapper">
       {{ $category := .Params.category }}
       {{ range .Pages }}
-        <div class="showcase__box">
+        <div class="showcase__box" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
           <a href="{{ .Params.Link }}" class="showcase__box--link" target="_blank" rel="noreferrer"></a>
           <a href="{{ .Params.Link }}" class="showcase__box--title" target="_blank" rel="noreferrer">
             {{ .Title }}

layouts/partials/sidebar/sidebar-single.html

@@ -11,7 +11,7 @@
       </label>
     {{ end }}
   </div>
-  <div class="toc {{ if $.Param "hideToc" }}hide{{ end }}">
+  <div class="toc {{ if $.Param "hideToc" }}hide{{ end }}" data-dir="{{ if eq ($.Param "languagedir") "rtl" }}rtl{{ else }}ltr{{ end }}">
     {{ .TableOfContents }}
   </div>
 </section>

layouts/talks/list.html

@@ -17,13 +17,13 @@
 
     {{ range ($paginator).PageGroups }}
     <span class="archive__key">{{ .Key }}</span>
-    <ul class="archive__ul">
+    <ul class="archive__ul" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
       {{ range .Pages }}
-      <li class="archive__li">
+      <li class="archive__li" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
-        <span class="talk__date">
+        <span class="talk__date" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
           {{ .PublishDate.Format (i18n "talks-dateformat") }}
         </span>
-        <a href="{{ .Permalink }}" class="talk__title" data-title-wrap="{{ $titleWrap | default "wrap"}}">{{ .Title }}</a>
+        <a href="{{ .Permalink }}" class="talk__title" data-title-wrap="{{ $titleWrap | default "wrap"}}" data-dir="{{ $.Param "languagedir" | default "ltr" }}">{{ .Title }}</a>
       </li>
       {{ end }}
     </ul>

theme.toml

@@ -4,7 +4,7 @@ homepage = "https://github.com/zzossig/hugo-theme-zzo.git"
 license = "MIT"
 licenselink = "https://github.com/zzossig/hugo-theme-zzo/blob/master/LICENSE.md"
 tags = ["accessible", "multilingual", "responsive", "blog", "search", "simple", "light", "dark", "mobile", "gallery", "technical", "fast", "presentation"]
-features = ["accessible", "multilingual", "responsive", "grid", "sass", "search", "jsonfeed", "subtheme", "gallery", "technical", "fast", "presentation"]
+features = ["accessible", "multilingual", "responsive", "grid", "sass", "search", "subtheme", "gallery", "technical", "fast", "presentation"]
 min_version = "0.60.0"
 
 [author]