From cdf56a1e11f842ffc29a0a4c4f3f82c3483da0d1 Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Tue, 11 Jan 2022 16:17:49 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20Add=20RTL=20language=20support?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 + README.md | 4 +- assets/css/compiled/main.css | 135 ++++++++++++++---- assets/css/main.css | 25 ++++ config/_default/languages.en.toml | 1 + exampleSite/config/_default/languages.en.toml | 1 + layouts/_default/baseof.html | 5 + layouts/_default/taxonomy.html | 4 +- layouts/partials/article-link.html | 2 +- layouts/partials/article-pagination.html | 6 +- layouts/partials/author.html | 2 +- layouts/partials/badge.html | 2 +- layouts/partials/header.html | 4 +- layouts/shortcodes/alert.html | 2 +- tailwind.config.js | 2 + 15 files changed, 161 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 33717a37..4e8a4418 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index 118f4e3f..f601bd72 100644 --- a/README.md +++ b/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 +- Fully responsive layout built with Tailwind CSS v3 - 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 diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 9f20c29c..7983effc 100644 --- a/assets/css/compiled/main.css +++ b/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) { diff --git a/assets/css/main.css b/assets/css/main.css index 5f586e6a..df1f6e1b 100644 --- a/assets/css/main.css +++ b/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 { diff --git a/config/_default/languages.en.toml b/config/_default/languages.en.toml index a0362a83..c3a596fa 100644 --- a/config/_default/languages.en.toml +++ b/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:" diff --git a/exampleSite/config/_default/languages.en.toml b/exampleSite/config/_default/languages.en.toml index f3e159b5..bb6b9d07 100644 --- a/exampleSite/config/_default/languages.en.toml +++ b/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:" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 46926391..54415aa9 100644 --- a/layouts/_default/baseof.html +++ b/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" . -}} diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html index c29fcd0a..c0661349 100644 --- a/layouts/_default/taxonomy.html +++ b/layouts/_default/taxonomy.html @@ -3,15 +3,15 @@
{{ range .Data.Terms }}
-

+

{{ .Page.Title }} {{ if $.Site.Params.taxonomy.showTermCount | default true }} + · - · {{ .Count }} {{ end }} diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html index 19be01d3..2d2f09e5 100644 --- a/layouts/partials/article-link.html +++ b/layouts/partials/article-link.html @@ -22,7 +22,7 @@ > {{ end }} {{ if and .Draft .Site.Params.article.showDraftLabel }} -
+
{{ partial "badge.html" (i18n "article.draft" | emojify) }}
{{ end }} diff --git a/layouts/partials/article-pagination.html b/layouts/partials/article-pagination.html index f4b323a5..5c73fe72 100644 --- a/layouts/partials/article-pagination.html +++ b/layouts/partials/article-pagination.html @@ -6,7 +6,8 @@ {{ if .NextInSection }} - ← + ← + → {{ .NextInSection.Title | emojify }} - → + → + ← {{ end }} diff --git a/layouts/partials/author.html b/layouts/partials/author.html index 8655e05b..95e7085d 100644 --- a/layouts/partials/author.html +++ b/layouts/partials/author.html @@ -5,7 +5,7 @@ {{ if $authorImage }} {{ $authorImage := $authorImage.Fill "192x192" }} Author {{ . }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index e1c045bc..0aa6f232 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -31,7 +31,9 @@