RTL language support

README.md

@@ -58,6 +58,7 @@ To get the latest version please head over the [releases page](https://github.co
 * Slider for featured posts
 * Support for normal, wide and full images in posts
 * Reading progress indicator
+* RTL language support
 
 ## Localization
 

package.json

@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.3.1"
+  "version": "0.4.0"
 }

src/js/app.js

@@ -6,6 +6,12 @@ import GhostContentAPI from '@tryghost/content-api'
 import Fuse from 'fuse.js'
 
 $(document).ready(() => {
+  const isRTL = $('html').attr('lang') === 'ar'
+
+  if (isRTL) {
+    $('html').attr('dir', 'rtl').addClass('rtl')
+  }
+
   const $body = $('body')
   const $header = $('.js-header')
   const $openMenu = $('.js-open-menu')
@@ -98,7 +104,7 @@ $(document).ready(() => {
 
   function getAllPosts(host, key) {
     const api = new GhostContentAPI({
-      host,
+      url: host,
       key,
       version: 'v2'
     })
@@ -226,7 +232,8 @@ $(document).ready(() => {
       arrows: false,
       infinite: false,
       mobileFirst: true,
-      variableWidth: true
+      variableWidth: true,
+      rtl: isRTL
     })
   }
 

src/js/home.js

@@ -2,6 +2,7 @@ import $ from 'jquery'
 import slick from 'slick-carousel'
 
 $(document).ready(() => {
+  const isRTL = $('html').attr('lang') === 'ar'
   const $featuredArticles = $('.js-featured-articles')
 
   if ($featuredArticles.length > 0) {
@@ -10,7 +11,8 @@ $(document).ready(() => {
       infinite: true,
       prevArrow: '<button class="m-icon-button in-featured-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',
       nextArrow: '<button class="m-icon-button in-featured-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',
-      mobileFirst: true
+      mobileFirst: true,
+      rtl: isRTL
     })
     
     setTimeout(() => {

src/js/post.js

@@ -102,6 +102,8 @@ function prepareProgressCircle() {
 }
 
 $(document).ready(() => {
+  const isRTL = $('html').attr('lang') === 'ar'
+
   $aosWrapper = $('.js-aos-wrapper')
   const $scrollButton = $('.js-scrolltop')
   const $loadComments = $('.js-load-comments')
@@ -150,7 +152,8 @@ $(document).ready(() => {
             slidesToShow: 3
           }
         }
-      ]
+      ],
+      rtl: isRTL
     })
   }
 

src/sass/components/_footer.scss

@@ -59,3 +59,9 @@
     }
   }
 }
+
+.rtl {
+  .m-footer-social {
+    direction: ltr;
+  }
+}

src/sass/components/articles/_article-card.scss

@@ -116,6 +116,7 @@
 .m-article-card__name {
   position: absolute;
   left: $mobile-space;
+  right: $mobile-space;
   bottom: $mobile-space;
   color: $white;
   letter-spacing: 0.4px;
@@ -316,3 +317,9 @@
     }
   }
 }
+
+.rtl {
+  .m-article-card__social {
+    direction: ltr;
+  }
+}

src/sass/components/articles/_featured-article.scss

@@ -48,6 +48,18 @@
   }
 }
 
+.rtl {
+  .m-featured-article__meta {
+    left: auto;
+    right: $mobile-space;
+
+    @include respond-to('medium') {
+      left: auto;
+      right: 40px;
+    }
+  }
+}
+
 .m-featured-article__author {
   display: block;
   width: 35px;
@@ -121,6 +133,25 @@
   }
 }
 
+.rtl {
+  .m-featured-article__ribbon {
+    right: auto;
+    left: $mobile-space;
+
+    @include respond-to('medium') {
+      right: auto;
+      left: 40px;
+    }
+
+    span:first-of-type {
+      @include respond-to('medium') {
+        margin-right: 0;
+        margin-left: 4px;
+      }
+    }
+  }
+}
+
 .m-featured-article__content {
   display: flex;
   flex-direction: column;

src/sass/components/articles/_share.scss

@@ -45,6 +45,23 @@
   }
 }
 
+.rtl {
+  .m-share {
+    @include respond-to('large') {
+      right: auto;
+      left: -75px;
+    }
+
+    @include respond-to('extra-large') {
+      left: -175px;
+    }
+
+    @include respond-to('largest') {
+      left: -200px;
+    }
+  }
+}
+
 .m-share__content {
   display: flex;
   align-items: center;
@@ -57,3 +74,9 @@
     height: auto;
   }
 }
+
+.rtl {
+  .m-share__content {
+    direction: ltr;
+  }
+}

src/sass/components/author/_author.scss

@@ -39,6 +39,14 @@
   }
 }
 
+.rtl {
+  .m-author__picture {
+    @include respond-to('medium') {
+      margin: 0 0 0 30px;
+    }
+  }
+}
+
 .m-author__info {
   text-align: center;
 
@@ -48,6 +56,14 @@
   }
 }
 
+.rtl {
+  .m-author__info {
+    @include respond-to('medium') {
+      text-align: right;
+    }
+  }
+}
+
 .m-author__name {
   color: $dark-blue;
   letter-spacing: 0.2px;

src/sass/components/author/_links.scss

@@ -21,3 +21,10 @@
     }
   }
 }
+
+.rtl {
+  .m-author-links {
+    direction: ltr;
+    text-align: right;
+  }
+}

src/sass/components/header/_logo.scss

@@ -11,5 +11,6 @@
 
   &.in-mobile-topbar {
     height: 20px;
+    margin: 0 $mobile-space;
   }
 }

src/sass/components/header/_menu.scss

@@ -40,3 +40,13 @@
     padding: 0;
   }
 }
+
+.rtl {
+  .m-menu__main {
+    padding-top: 75px;
+
+    @include respond-to('medium') {
+      padding: 0;
+    }
+  }
+}

src/sass/components/header/_nav.scss

@@ -52,3 +52,18 @@
     }
   }
 }
+
+.rtl {
+  .m-nav__left ul li {
+    @include respond-to('medium') {
+      margin-right: 0;
+      margin-left: 35px;
+
+      &:last-of-type {
+        @include respond-to('medium') {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

src/sass/components/header/_recent-article.scss

@@ -16,6 +16,14 @@
   }
 }
 
+.rtl {
+  .m-recent-article {
+    @include respond-to('medium') {
+      margin: 0 0 0 60px;
+    }
+  }
+}
+
 .m-recent-article__picture {
   height: 130px;
   margin-bottom: 15px;

src/sass/components/header/_submenu-title.scss

@@ -13,3 +13,9 @@
     }
   }
 }
+
+.rtl {
+  .m-submenu-title {
+    direction: rtl;
+  }
+}

src/sass/components/hero/_hero.scss

@@ -70,3 +70,9 @@
     justify-content: center;
   }
 }
+
+.rtl {
+  .m-hero__meta {
+    direction: ltr;
+  }
+}

src/sass/components/hero/_social.scss

@@ -27,3 +27,9 @@
     }
   }
 }
+
+.rtl {
+  .m-hero-social {
+    direction: ltr;
+  }
+}

src/sass/components/subscribe/_subscribe-section.scss

@@ -27,6 +27,16 @@
   }
 }
 
+.rtl {
+  .m-subscribe-section__text {
+    @include respond-to('medium') {
+      text-align: right;
+      padding-right: 0;
+      padding-left: 75px;
+    }
+  }
+}
+
 .m-subscribe-section__title {
   color: $titles;
   letter-spacing: 0.3px;

src/sass/components/ui/_back.scss

@@ -23,6 +23,14 @@
   }
 }
 
+.rtl {
+  .m-back {
+    span:first-of-type {
+      order: 2;
+    }
+  }
+}
+
 .m-back__icon {
   font-size: 0.750rem;
   margin-right: 10px;
@@ -31,3 +39,9 @@
     font-size: 0.875rem;
   }
 }
+
+.rtl {
+  .m-back__icon {
+    order: 1;
+  }
+}

src/sass/components/ui/_icon-button.scss

@@ -75,7 +75,7 @@
 
     @include respond-to('medium') {
       display: flex;
-      width: 25px;
+      width: 26px;
       height: 25px;
     }
   }
@@ -215,3 +215,43 @@
     }
   }
 }
+
+.rtl {
+  .m-icon-button {
+    &.in-featured-articles {
+      &.slick-prev {
+        right: auto;
+        left: 16px;
+
+        @include respond-to('medium') {
+          right: auto;
+          left: 36px;
+        }
+      }
+
+      &.slick-next {
+        right: auto;
+        left: 52px;
+
+        @include respond-to('medium') {
+          right: auto;
+          left: 72px;
+        }
+      }
+    }
+
+    &.in-recommended-articles {
+      &.slick-prev {
+        left: auto;
+        right: 0;
+        @include transform(rotate(180deg));
+      }
+
+      &.slick-next {
+        right: auto;
+        left : 0;
+        @include transform(rotate(180deg));
+      }
+    }
+  }
+}

src/sass/layouts/_post-content.scss

@@ -521,3 +521,42 @@
     }
   }
 }
+
+.rtl {
+  .l-post-content {
+    ul, ol {
+      padding-left: 0;
+      padding-right: 20px;
+
+      @include respond-to('medium') {
+        padding-left: 0;
+        padding-right: 40px;
+      }
+    }
+
+    code {
+      direction: ltr;
+    }
+
+    blockquote {
+      &:before {
+        left: auto;
+        right: 0;
+      }
+    }
+
+    .kg-bookmark-icon {
+      margin-right: 0 !important;
+      margin-left: 8px !important;
+    }
+
+    figure.kg-width-full {
+      @include respond-to('medium') {
+        margin-left: 0;
+        margin-right: 50%;
+
+        @include transform(translateX(50%));
+      }
+    }
+  }
+}