Right-to-Left support (addresses #51) (#73)

bitbrain · web-flow · commit d1e457a2e193 · 2021-10-06T22:23:33.000+01:00
* ♻️ move avatar source into dash namespace

* ✨ introduce RTL support

* add readme info

* ♻️ use boolean instead
diff --git a/README.md b/README.md
@@ -61,10 +61,24 @@ tag_page_layout: tag_page
 tag_page_dir: tag
 
 dash:
+  # the way how dates should be displayed
   date_format: "%b %-d, %Y"
 
+  # (optional) discqus comment configuration
   disqus:
-    shortname: <your-disqus-shortname>
+    shortname: <your-disqus-shortname>  
+
+  # the animation speed of the post scroll-in effect
+  animation_speed: 50
+
+  # wether to enable Right-to-Left support or not
+  rtl: false
+
+  # Replaces the default avatar provider (gravatar)
+  #avatar_source: github
+  #github_username: bitbrain
+  #avatar_source: local
+  #avatar_path: /assets/avatar.png
 
   # generate social links in footer
   # supported colors: green, red, orange, blue, cyan, pink, teal, yellow, indigo, purple
@@ -78,12 +92,9 @@ dash:
     - url: https://github.com/bitbrain
       icon: github-square
       color: purple
-      
+  
+  # wether the author box should be displayed or not
   show_author: true
-
-# Replaces the default avatar provider (gravatar)
-#avatar_source: github
-#github_username: bitbrain
 ```
 ## Using this theme directly on Github Pages
 
diff --git a/_config.yml b/_config.yml
@@ -17,8 +17,10 @@ tag_page_dir: tag
 # jekyll-dash date format
 # refer to http://shopify.github.io/liquid/filters/date/ if you want to customize this
 dash:
+  # the way how dates should be displayed
   date_format: "%b %-d, %Y"
 
+  # (optional) discqus comment configuration
   disqus:
     shortname: bitbrain-github-io
 
@@ -35,10 +37,21 @@ dash:
       icon: github-square
       color: purple
 
+  # wether the author box should be displayed
   show_author: true
 
+  # the animation speed of the scroll-in effect
   animation_speed: 50
 
+  # wether to enable Right-to-Left support or not
+  rtl: false
+
+  # Replaces the default avatar provider (gravatar)
+  #avatar_source: github
+  #github_username: bitbrain
+  #avatar_source: local
+  #avatar_path: /assets/avatar.png
+
 # Build settings
 theme: jekyll-dash
 
@@ -48,9 +61,3 @@ plugins:
  - jekyll-paginate
  - liquid-md5
  - jekyll/tagging
-
-# Replaces the default avatar provider (gravatar)
-#avatar_source: github
-#github_username: bitbrain
-#avatar_source: local
-#avatar_path: /assets/avatar.png
diff --git a/_includes/author.html b/_includes/author.html
@@ -1,19 +1,9 @@
 <div class="author-box">
-    {% if site.avatar_source == "github" and site.github_username %}
-        {% capture avatar_image %}
-            https://github.com/{{ site.github_username }}.png
-        {% endcapture %}
-    {% elsif site.avatar_source == "local" and site.avatar_path %}
-        {% capture avatar_image %}
-            {{site.avatar_path}}
-        {% endcapture %}
-    {% elsif site.plugins contains "liquid-md5" %}
-        {% capture avatar_image %}
-            https://gravatar.com/avatar/{{ site.email | downcase | md5 }}?s=256
-        {% endcapture %}
-    {% endif %}
-    {% if avatar_image %}
-        <img src="{{ avatar_image }}" class="author-avatar" alt="Avatar" />
-    {% endif %}
-{{ site.description }}
+{% if site.dash.rtl %}
+<div class="description">{{ site.description }}</div>
+{%- include avatar.html -%}
+{% else %}
+{%- include avatar.html -%}
+<div class="description">{{ site.description }}</div>
+{% endif %}
 </div>
diff --git a/_includes/avatar.html b/_includes/avatar.html
@@ -0,0 +1,16 @@
+{% if site.dash.avatar_source == "github" and site.dash.github_username %}
+{% capture avatar_image %}
+    https://github.com/{{ site.github_username }}.png
+{% endcapture %}
+{% elsif site.dash.avatar_source == "local" and site.dash.avatar_path %}
+{% capture avatar_image %}
+    {{site.dash.avatar_path}}
+{% endcapture %}
+{% elsif site.plugins contains "liquid-md5" %}
+{% capture avatar_image %}
+    https://gravatar.com/avatar/{{ site.email | downcase | md5 }}?s=256
+{% endcapture %}
+{% endif %}
+{% if avatar_image %}
+<img src="{{ avatar_image }}" class="author-avatar" alt="Avatar" />
+{% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+<html class="{% if site.dash.rtl %}direction--rtl{% else %}direction--ltr{% endif %}"lang="{{ page.lang | default: site.lang | default: "en" }}">
 
   {%- include head.html -%}
 
diff --git a/_sass/dash/_layout.scss b/_sass/dash/_layout.scss
@@ -52,21 +52,75 @@
 }
 
 /**
- * Author box
+ * Right-to-Left support
  */
 
+ html.direction--rtl {
+  .author-box {
+    text-align: right;
+    & > .description {
+      direction: rtl;
+    }
+    & > img {
+      margin-right: 0em;
+      margin-left: 1em;
+    }
+  }
+  ol > li, ul > li {
+    text-align: right;
+    direction: rtl;
+    &::before {
+      float: right;
+      margin-left: 0.5em;
+    }
+  }
+  h1, h2, h3, h4, h5, h6 {
+    direction: rtl;
+    text-align: right;
+  }
+  .post-link-wrapper {
+    direction: rtl;
+  }
+  .post {
+    direction: rtl;
+  }
+  .pagination {
+    text-align: right;
+  }
+  .tag-cloud {
+    direction: rtl;
+    text-align: right;
+  }
+  .related-posts {
+    direction: rtl;
+    text-align: right;
+
+    & > li::before {
+      margin-right: 0;
+      margin-left: 0.5em;
+    }
+  }
+  pre {
+    direction: ltr;
+    text-align: left;
+  }
+}
+
  .author-box {
    margin-bottom: 1em;
    text-align: left;
    min-height: 72px;
    font-style: italic;
+   display: inline-flex;
+   & > .description {
+     flex:8;
+   }
    & > .author-avatar {
-     float: left;
-     white-space: pre-line;
      margin-right: 1em;
      width: 72px;
-     height: 72px;
+     height: 100%;
      border-radius: 0.3em;
+     flex: 1;
    }
  }
 
