🌐 Add RTL language support

CHANGELOG.md

@@ -9,11 +9,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - Multilingual support
+- Right-to-left (RTL) language support
 
 ### Changed
 
 - Upgrade to Tailwind v3.0.12
 - Author images are now Hugo assets
+- Required Hugo version is now 0.87.0 or later
 
 ## [1.6.2] - 2022-01-07
 

README.md

@@ -11,13 +11,13 @@ Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io
 
 ## Features
 
-- Built with Tailwind CSS JIT for minified stylesheets without any excess code
+- Fully responsive layout built with Tailwind CSS v3
-- Fully responsive layout
 - Multiple colour schemes (or fully customise your own)
 - Dark mode (forced on/off or auto-switching with user toggle)
 - Highly customisable configuration
 - Multiple homepage layouts
 - Flexible with any content types, taxonomies and menus
+- Multilingual content support inlcuding support for RTL languages
 - Ability to link to posts on third-party websites
 - Diagrams and visualisations using Mermaid
 - Charts using Chart.js

assets/css/compiled/main.css

@@ -573,6 +573,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-top: 1.6em;
   margin-bottom: 1.6em;
   padding-left: 1em;
+  border-right-color: var(--color-primary-200);
 }
 
 .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
@@ -970,6 +971,33 @@ body a, body button {
   color: var(--color-primary-400);
 }
 
+/* RTL support */
+
+[dir="rtl"] .prose blockquote {
+  border-left-width: 0px;
+  border-right-width: 4px;
+  padding-right: 1rem;
+}
+
+[dir="rtl"] .prose ul > li, [dir="rtl"] .prose ol > li {
+  margin-right: 1.75rem;
+  padding-left: 0px;
+  padding-right: 0.5rem;
+}
+
+[dir="rtl"] .prose ol > li:before, [dir="rtl"] .prose ul > li:before {
+  left: auto;
+  right: 0.25rem;
+}
+
+[dir="rtl"] .prose thead td:first-child, [dir="rtl"] .prose thead th:first-child {
+  padding-right: 0px;
+}
+
+[dir="rtl"] .prose thead td:last-child, [dir="rtl"] .prose thead th:last-child {
+  padding-left: 0px;
+}
+
 /* -- Chroma Highlight -- */
 
 /* Background */
@@ -1830,22 +1858,18 @@ body a, body button {
   margin-top: -0.5rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
 .mr-3 {
   margin-right: 0.75rem;
 }
 
-.mt-\[0\.1rem\] {
-  margin-top: 0.1rem;
-}
-
 .ml-3 {
   margin-left: 0.75rem;
 }
 
+.mt-\[0\.1rem\] {
+  margin-top: 0.1rem;
+}
+
 .\!mt-0 {
   margin-top: 0px !important;
 }
@@ -1854,14 +1878,6 @@ body a, body button {
   margin-bottom: 0px !important;
 }
 
-.mr-4 {
-  margin-right: 1rem;
-}
-
-.ml-1 {
-  margin-left: 0.25rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -2103,16 +2119,16 @@ body a, body button {
   padding-right: 0.5rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .py-\[1px\] {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -2163,10 +2179,6 @@ body a, body button {
   padding-top: 1rem;
 }
 
-.pr-3 {
-  padding-right: 0.75rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -2363,6 +2375,62 @@ body a, body button {
   text-underline-offset: 2px;
 }
 
+[dir="ltr"] .ltr\:ml-2 {
+  margin-left: 0.5rem;
+}
+
+[dir="ltr"] .ltr\:mr-4 {
+  margin-right: 1rem;
+}
+
+[dir="ltr"] .ltr\:ml-1 {
+  margin-left: 0.25rem;
+}
+
+[dir="ltr"] .ltr\:inline {
+  display: inline;
+}
+
+[dir="ltr"] .ltr\:hidden {
+  display: none;
+}
+
+[dir="ltr"] .ltr\:pr-3 {
+  padding-right: 0.75rem;
+}
+
+[dir="ltr"] .ltr\:text-right {
+  text-align: right;
+}
+
+[dir="rtl"] .rtl\:mr-2 {
+  margin-right: 0.5rem;
+}
+
+[dir="rtl"] .rtl\:ml-4 {
+  margin-left: 1rem;
+}
+
+[dir="rtl"] .rtl\:mr-1 {
+  margin-right: 0.25rem;
+}
+
+[dir="rtl"] .rtl\:inline {
+  display: inline;
+}
+
+[dir="rtl"] .rtl\:hidden {
+  display: none;
+}
+
+[dir="rtl"] .rtl\:pl-3 {
+  padding-left: 0.75rem;
+}
+
+[dir="rtl"] .rtl\:text-left {
+  text-align: left;
+}
+
 .dark .dark\:prose-light {
   color: var(--color-neutral-300);
 }
@@ -2397,6 +2465,7 @@ body a, body button {
 .dark .dark\:prose-light :where(blockquote):not(:where([class~="not-prose"] *)) {
   color: var(--color-neutral-200);
   border-left-color: var(--color-primary-900);
+  border-right-color: var(--color-primary-900);
 }
 
 .dark .dark\:prose-light :where(h1):not(:where([class~="not-prose"] *)) {
@@ -2576,6 +2645,22 @@ body a, body button {
   .sm\:last\:mr-0:last-child {
     margin-right: 0px;
   }
+
+  [dir="ltr"] .ltr\:sm\:mr-7 {
+    margin-right: 1.75rem;
+  }
+
+  [dir="ltr"] .ltr\:sm\:last\:mr-0:last-child {
+    margin-right: 0px;
+  }
+
+  [dir="rtl"] .rtl\:sm\:ml-7 {
+    margin-left: 1.75rem;
+  }
+
+  [dir="rtl"] .rtl\:sm\:last\:ml-0:last-child {
+    margin-left: 0px;
+  }
 }
 
 @media (min-width: 768px) {

assets/css/main.css

@@ -40,6 +40,31 @@ body button {
   @apply text-primary-700 dark:text-primary-400;
 }
 
+/* RTL support */
+[dir="rtl"] .prose blockquote {
+  @apply pr-4 border-l-0 border-r-4;
+}
+
+[dir="rtl"] .prose ul > li,
+[dir="rtl"] .prose ol > li {
+  @apply pl-0 pr-2 mr-7;
+}
+
+[dir="rtl"] .prose ol > li:before,
+[dir="rtl"] .prose ul > li:before {
+  @apply left-auto right-1;
+}
+
+[dir="rtl"] .prose thead td:first-child,
+[dir="rtl"] .prose thead th:first-child {
+  @apply pr-0;
+}
+
+[dir="rtl"] .prose thead td:last-child,
+[dir="rtl"] .prose thead th:last-child {
+  @apply pl-0;
+}
+
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {

config/_default/languages.en.toml

@@ -3,6 +3,7 @@ languageName = "English"
 displayName = "EN"
 htmlCode = "en"
 weight = 1
+rtl = false
 
 title = "Congo"
 # copyright = "Copy, _right?_ :thinking_face:"

exampleSite/config/_default/languages.en.toml

@@ -3,6 +3,7 @@ languageName = "English (Australia)"
 displayName = ":flag-au:"
 htmlCode = "en-AU"
 weight = 1
+rtl = false
 
 title = "Congo"
 # copyright = "Copy, _right?_ :thinking_face:"

layouts/_default/baseof.html

@@ -3,6 +3,11 @@
   lang="{{ with .Site.Language.Params.htmlCode | default (.Site.LanguageCode | default "en") }}
     {{- . -}}
   {{ end }}"
+  dir="{{ if .Site.Language.Params.rtl | default false -}}
+    rtl
+  {{- else -}}
+    ltr
+  {{- end }}"
   {{ if .Site.Params.darkMode | default false }}class="dark"{{ end }}
 >
   {{- partial "head.html" . -}}

layouts/_default/taxonomy.html

@@ -3,15 +3,15 @@
   <section class="flex flex-wrap -mx-2 overflow-hidden">
     {{ range .Data.Terms }}
       <article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
-        <h2>
+        <h2 class="flex items-center">
           <a
             class="text-xl font-medium hover:underline hover:decoration-primary-500 hover:underline-offset-2"
             href="{{ .Page.RelPermalink }}"
             >{{ .Page.Title }}</a
           >
           {{ if $.Site.Params.taxonomy.showTermCount | default true }}
+            <span class="px-2 text-base text-primary-500">&middot;</span>
             <span class="text-base text-neutral-400">
-              <span class="px-1 text-primary-500">&middot;</span>
               {{ .Count }}
             </span>
           {{ end }}

layouts/partials/article-link.html

@@ -22,7 +22,7 @@
       >
     {{ end }}
     {{ if and .Draft .Site.Params.article.showDraftLabel }}
-      <div class="ml-2">
+      <div class="ltr:ml-2 rtl:mr-2">
         {{ partial "badge.html" (i18n "article.draft" | emojify) }}
       </div>
     {{ end }}

layouts/partials/article-pagination.html

@@ -6,7 +6,8 @@
         <span>
           {{ if .NextInSection }}
             <a class="flex" href="{{ .NextInSection.RelPermalink }}">
-              <span class="mr-3 article-pagination-direction">&larr;</span>
+              <span class="mr-3 ltr:inline rtl:hidden article-pagination-direction">&larr;</span>
+              <span class="ml-3 ltr:hidden rtl:inline article-pagination-direction">&rarr;</span>
               <span class="flex flex-col">
                 <span class="article-pagination-title mt-[0.1rem] leading-6"
                   >{{ .NextInSection.Title | emojify }}</span
@@ -33,7 +34,8 @@
                   {{ end }}
                 </span>
               </span>
-              <span class="ml-3 article-pagination-direction">&rarr;</span>
+              <span class="ml-3 ltr:inline rtl:hidden article-pagination-direction">&rarr;</span>
+              <span class="mr-3 ltr:hidden rtl:inline article-pagination-direction">&larr;</span>
             </a>
           {{ end }}
         </span>

layouts/partials/author.html

@@ -5,7 +5,7 @@
       {{ if $authorImage }}
         {{ $authorImage := $authorImage.Fill "192x192" }}
         <img
-          class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full"
+          class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full"
           width="96"
           height="96"
           alt="Author"

layouts/partials/badge.html

@@ -1,6 +1,6 @@
 <span class="flex">
   <span
-    class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600"
+    class="ltr:ml-1 rtl:mr-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600"
   >
     {{ . }}
   </span>

layouts/partials/header.html

@@ -31,7 +31,9 @@
     <nav>
       <ul class="flex flex-col list-none sm:flex-row">
         {{ range .Site.Menus.main }}
-          <li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
+          <li
+            class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
+          >
             <a
               class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2"
               href="{{ .URL }}"

layouts/shortcodes/alert.html

@@ -1,5 +1,5 @@
 <div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
-  <span class="pr-3 text-primary-400">
+  <span class="ltr:pr-3 rtl:pl-3 text-primary-400">
     {{ partial "icon.html" "exclamation-triangle" }}
   </span>
   <span class="not-prose dark:text-neutral-300">

tailwind.config.js

@@ -82,6 +82,7 @@ module.exports = {
               blockquote: {
                 color: theme("colors.neutral.800"),
                 borderLeftColor: theme("colors.primary.200"),
+                borderRightColor: theme("colors.primary.200"),
               },
               h1: {
                 color: theme("colors.neutral.900"),
@@ -166,6 +167,7 @@ module.exports = {
               blockquote: {
                 color: theme("colors.neutral.200"),
                 borderLeftColor: theme("colors.primary.900"),
+                borderRightColor: theme("colors.primary.900"),
               },
               h1: {
                 color: theme("colors.neutral.DEFAULT"),