technoduck/hugo-theme-stack-stars
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add RTL Support and update demo site to Show Arabic/RTL content (#519)

Browse source 
* add LanguageDirection variable

* add .direction-rtl and .direction-ltr clases

* margin -right > margin-inline-end

* keep Codeblocks LTR

* switch to logical properties

* left -> inset-inline-start

* Add Arabic/RTL placeholder text

* Add arabic language

* remove space

* use Html Dir instead of class

* Move codeblock code to layout/article.css and fix 4 spaces codeblocks

* remove unused clases
This commit is contained in:
FarisZR 2022-03-04 02:25:34 +03:00 committed by GitHub
parent 86ad00cf8c
commit 0d0375a7fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 55 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/scss/partials/layout/article.scss
View file

@ -252,9 +252,9 @@
h4,
h5,
h6 {
margin-left: calc((var(--card-padding)) * -1);
padding-left: calc(var(--card-padding) - var(--heading-border-size));
border-left: var(--heading-border-size) solid var(--accent-color);
margin-inline-start: calc((var(--card-padding)) * -1);
padding-inline-start: calc(var(--card-padding) - var(--heading-border-size));
border-inline-start: var(--heading-border-size) solid var(--accent-color);
}
figure {
@ -269,7 +269,7 @@
blockquote {
position: relative;
margin: 1.5em 0;
border-left: var(--blockquote-border-size) solid var(--card-separator-color);
border-inline-start: var(--blockquote-border-size) solid var(--card-separator-color);
padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
background-color: var(--blockquote-background-color);
}
@ -313,7 +313,10 @@
line-height: 1.428571429;
word-break: break-all;
padding: var(--card-padding);
// keep Codeblocks LTR
[dir="rtl"] & {
direction: ltr;
}
code {
color: unset;
border: none;
@ -332,7 +335,10 @@
opacity: 1;
}
}
// keep Codeblocks LTR
[dir="rtl"] & {
direction: ltr;
}
pre {
margin: initial;
padding: 0;

5
assets/scss/partials/layout/search.scss
View file

@ -24,7 +24,7 @@
label {
position: absolute;
top: 15px;
left: 20px;
inset-inline-start: 20px;
font-size: 1.4rem;
color: var(--card-text-color-tertiary);
}
@ -51,7 +51,7 @@
button {
position: absolute;
right: 0;
inset-inline-end: 0;
top: 0;
height: 100%;
width: var(--button-size);
@ -78,4 +78,5 @@
height: 20px;
}
}
}

7
exampleSite/config.yaml
View file

@ -13,6 +13,11 @@ languages:
languageName: 中文
title: 演示站点
weight: 2
ar:
languageName: عربي
languagedirection: rtl
title: موقع تجريبي
weight: 3
# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack
@ -21,7 +26,7 @@ disqusShortname: hugo-theme-stack
googleAnalytics:
# Theme i18n support
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk, ar
DefaultContentLanguage: en
# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]

32
exampleSite/content/post/placeholder-text/index.ar.md Normal file
View file

@ -0,0 +1,32 @@
+++
author = "Hugo Authors"
title = "مثال نص"
date = "2019-03-09"
description = "هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة"
categories = [
"تجربة",
"تجربة مع فراغات"
]
tags = [
"ماركداون",
"نص",
"وسم مع فراغات"
]
image = "matt-le-SJSpo9hQf7s-unsplash.jpg"
+++
## فقرة 1
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من [مولد النص العربى](https://colorslab.com/textgator/)، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
## فقرة 2
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من [مولد النص العربى](https://colorslab.com/textgator/)، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
## تجربة RTL
كلمة 1 Text كلمة 2

2
layouts/_default/baseof.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<html lang="{{ .Site.LanguageCode }}" dir="{{ default `ltr` .Language.LanguageDirection }}">
<head>
{{- partial "head/head.html" . -}}
{{- block "head" . -}}{{ end }}