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

* Added support for Right-To-Left languages

* Added language-direction partial
This commit is contained in:
Meir Kriheli 2022-04-21 21:17:49 +03:00 committed by GitHub
parent 5520ed119f
commit 19242fd2f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 24 additions and 14 deletions

View File

@ -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;

View File

@ -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

View File

@ -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">

View File

@ -47,7 +47,7 @@
<span class="f6 mv4 dib tracked"> - {{ 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">

View File

@ -5,13 +5,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 }}

View File

@ -36,7 +36,7 @@
<h1 class="f3">{{ 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">
<h2 class="f5 fw4 mb4 dib {{ cond (eq $.Site.Language.LanguageDirection "rtl") "ml3" "mr3" }}">
<a href="{{ .RelPermalink }}" class="link black dim">
{{ .Title }}
</a>

View File

@ -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}}

View File

@ -0,0 +1,3 @@
{{- if ge hugo.Version "0.67.1" -}}
dir="{{ $.Site.Language.LanguageDirection | default "ltr" }}"
{{- end -}}

View File

@ -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>

View File

@ -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>

View File

@ -8,13 +8,13 @@ More info here: https://github.com/theNewDynamic/gohugo-theme-ananke/releases/ta
{{ 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 }}

File diff suppressed because one or more lines are too long