Added support for Right-To-Left languages (theNewDynamic#532)

* Added support for Right-To-Left languages * Added language-direction partial
tstephen · Jun 9, 2022 · f95ce73 · f95ce73
1 parent 39c7061
commit f95ce73
Show file tree

Hide file tree

Showing 12 changed files with 26 additions and 16 deletions.
diff --git a/assets/ananke/css/_hugo-internal-templates.css b/assets/ananke/css/_hugo-internal-templates.css
@@ -9,6 +9,12 @@
   font-size: .875rem;
   margin-bottom: 2.5em;
 }
+
+[dir="rtl"] .pagination li {
+  margin-left: .375rem;
+  margin-right: 0;
+}
+
 .pagination li a {
   padding: .5rem .625rem;
   background-color: white;

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -15,6 +15,7 @@ enableRobotsTXT = true
     title = "Ananke"
     weight = 1
     contentDir = "content/en"
+    # languageDirection = 'rtl' for Right-To-Left languages
   [languages.fr]
     title = "Ananke Fr"
     weight = 2

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ $.Site.LanguageCode | default "en" }}">
+<html lang="{{ $.Site.LanguageCode | default "en" }}" {{ partial "language-direction.html" . | safeHTMLAttr }}>
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -47,7 +47,7 @@ <h1 class="f1 mt3 mb1 {{ $.Param "post_content_classes"  | default "serif"}} {{
         <span class="f6 mv2 dib tracked {{ $.Param "secondary_text_color" | default "near-black" }}"> - {{ i18n "wordCount" .WordCount }} </span>
       {{ end }}
     </header>
-    <div class="nested-copy-line-height lh-copy {{ $.Param "post_content_classes"  | default "serif"}} f4 nested-links {{ $.Param "text_color" | default "mid-gray" }} pr4-l w-two-thirds-l">
+    <div class="nested-copy-line-height lh-copy {{ $.Param "post_content_classes"  | default "serif"}} f4 nested-links {{ $.Param "text_color" | default "mid-gray" }} {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl4-l" "pr4-l" }} w-two-thirds-l">
       {{- .Content -}}
       {{- partial "tags.html" . -}}
       <div class="mt6 instapaper_ignoref">

diff --git a/layouts/_default/summary-with-image.html b/layouts/_default/summary-with-image.html
@@ -5,14 +5,14 @@
       {{ if $featured_image }}
           {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
         {{ $featured_image := (trim $featured_image "/") | absURL }}
-        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
+        <div class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3-ns" "pr3-ns" }} mb4 mb0-ns w-100 w-40-ns">
           <a href="{{.RelPermalink}}" class="db grow">
             <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
           </a>
         </div>
       {{ end }}
-      <div class="blah w-100{{ if $featured_image }} w-60-ns pl3-ns{{ end }}">
-        <h1 class="f3 fw1 mt0 lh-title {{ $.Param "body_classes"  | default "serif"}} {{ $.Param "text_color" | default "near-black" }}">
+      <div class="blah w-100{{ if $featured_image }} w-60-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr3-ns" "pl3-ns" }}{{ end }}">
+        <h1 class="f3 fw1 athelas mt0 lh-title">
           <a href="{{.RelPermalink}}" class="color-inherit dim link">
             {{ .Title }}
             </a>

diff --git a/layouts/index.html b/layouts/index.html
@@ -36,8 +36,8 @@ <h1 class="flex-none {{ $.Param "secondary_text_color" | default "near-black" }}
         <h1 class="f3 {{ $.Param "text_color" | default "near-black" }}">{{ i18n "more" }}</h1>
         {{/* Now, range through the next four after the initial $n_posts items. Nest the requirements, "after" then "first" on the outside */}}
         {{ range (first 4 (after $n_posts $section))  }}
-          <h2 class="f5 fw4 mb4 dib mr3">
-            <a href="{{ .RelPermalink }}" class="link dim {{ $.Param "secondary_text_color" | default "black" }}">
+          <h2 class="f5 fw4 mb4 dib {{ cond (eq $.Site.Language.LanguageDirection "rtl") "ml3" "mr3" }}">
+            <a href="{{ .RelPermalink }}" class="link black dim">
               {{ .Title }}
             </a>
           </h2>

diff --git a/layouts/partials/i18nlist.html b/layouts/partials/i18nlist.html
@@ -1,8 +1,8 @@
 {{ if .IsTranslated }}
 <h4>{{ i18n "translations" }}</h4>
-<ul class="pl0 mr3">
+<ul class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr0 ml3" "pl0 mr3" }}">
     {{ range .Translations }}
-    <li class="list f5 f4-ns fw4 dib pr3">
+    <li class="list f5 f4-ns fw4 dib {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
         <a class="hover-white no-underline white-90" href="{{ .RelPermalink }}">{{ .Lang }}</a>
     </li>
     {{ end}}

diff --git a/layouts/partials/language-direction.html b/layouts/partials/language-direction.html
@@ -0,0 +1,3 @@
+{{- if ge hugo.Version "0.67.1" -}}
+   dir="{{ $.Site.Language.LanguageDirection | default "ltr" }}"
+{{- end -}}
diff --git a/layouts/partials/site-navigation.html b/layouts/partials/site-navigation.html
@@ -10,9 +10,9 @@
     <div class="flex-l items-center">
       {{ partial "i18nlist.html" . }}
       {{ if .Site.Menus.main }}
-        <ul class="pl0 mr3">
+        <ul class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr0 ml3" "pl0 mr3" }}">
           {{ range .Site.Menus.main }}
-          <li class="list f5 f4-ns fw4 dib pr3">
+          <li class="list f5 f4-ns fw4 dib {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
             <a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ i18n "pageTitle" . }}">
               {{ .Name }}
             </a>

diff --git a/layouts/partials/social-follow.html b/layouts/partials/social-follow.html
@@ -1,7 +1,7 @@
 {{ $socials := partialCached "func/socials/Get" "socials/Get" }}
 <div class="ananke-socials">
   {{ range $socials }}
-    <a href="{{ .url }}" target="_blank" class="{{ .name }} ananke-social-link link-transition stackoverflow link dib z-999 pt3 pt0-l mr1" title="{{ .label }} link" rel="noopener" aria-label="follow on {{ .label }}——Opens in a new window">
+    <a href="{{ .url }}" target="_blank" class="{{ .name }} ananke-social-link link-transition stackoverflow link dib z-999 pt3 pt0-l {{ cond (eq $.Site.Language.LanguageDirection "rtl") "ml1" "mr1" }}" title="{{ .label }} link" rel="noopener" aria-label="follow on {{ .label }}——Opens in a new window">
       {{ with .icon }}
         <span class="icon">{{ . }}</span>
       {{ else }}
@@ -10,4 +10,4 @@
       {{- partial "new-window-icon.html" . -}}
     </a>
   {{ end }}
-</div>
+</div>
diff --git a/layouts/partials/summary-with-image.html b/layouts/partials/summary-with-image.html
@@ -8,13 +8,13 @@
       {{ if $featured_image }}
           {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
         {{ $featured_image := (trim $featured_image "/") | absURL }}
-        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
+        <div class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3-ns" "pr3-ns" }} mb4 mb0-ns w-100 w-40-ns">
           <a href="{{.RelPermalink}}" class="db grow">
             <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
           </a>
         </div>
       {{ end }}
-      <div class="blah w-100{{ if $featured_image }} w-60-ns pl3-ns{{ end }}">
+      <div class="blah w-100{{ if $featured_image }} w-60-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr3-ns" "pl3-ns" }}{{ end }}">
         <h1 class="f3 fw1 athelas mt0 lh-title">
           <a href="{{.RelPermalink}}" class="color-inherit dim link">
             {{ .Title }}

diff --git a/resources/_gen/assets/css/ananke/css/main.css_bb5467e0521bbea6b1e66429f6ec028e.content b/resources/_gen/assets/css/ananke/css/main.css_bb5467e0521bbea6b1e66429f6ec028e.content