external-software/github_gohugo_theme_anatole.git

parent: 02341d0b | patch | commit | ignore whitespace

Maryam Alhuthayfi

06.46.2021 8ad28e87167be8369f7b6ce2737a3cc6f5b9f9e3

feat: Improved Arabic support (#249)

* Loaded Arabic font
* Reduce letter spacing and use Capitalize for English words
* Markdown code is fixed to be LTR
* Enhance Arabic wording
* Inherit font family for contact form
* Nav_list underline for Arabic pages

Co-authored-by: Alexander Bilz <mail@alexbilz.com>

7 files modified

	assets/css/markupHighlight.css	1 ●●●●● patch \| view \| raw \| blame \| history
	assets/css/style.css	1 ●●●●● patch \| view \| raw \| blame \| history
	assets/css/style.rtl.css	18 ●●●●● patch \| view \| raw \| blame \| history
	exampleSite/config/_default/languages.toml	4 ●●●●● patch \| view \| raw \| blame \| history
	exampleSite/config/_default/menus.ar.toml	8 ●●●●● patch \| view \| raw \| blame \| history
	exampleSite/content/arabic/post/arabic_example.md	10 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/head.html	7 ●●●●● patch \| view \| raw \| blame \| history

 assets/css/markupHighlight.css

@@ -134,6 +134,7 @@

/* Background */
.chroma {
  direction: ltr;
  color: var(--chr-def-color);
  background-color: var(--chr-def-bg-color);
}

 assets/css/style.css

@@ -1213,6 +1213,7 @@
  background-color: var(--bg-color);
  border: 1px solid var(--form-border-color);
  color: var(--body-color);
  font-family: inherit;
}
.form-style ul li .field-style:focus {
  box-shadow: 0 0 5px;

 assets/css/style.rtl.css

@@ -1,5 +1,10 @@
@charset "UTF-8";

body {
  font-family: 'Tajawal', sans-serif;
  font-size: 1.5rem;
}

blockquote {
  border-right: 0.25em solid var(--blockquote-border-color);
  border-left: inherit;
@@ -26,6 +31,19 @@
  margin-right: inherit;
}

.sidebar .logo-title .title h3 {
  text-transform: capitalize;
  letter-spacing: 1.5px;
}

.post .post-title h1 {
  text-transform: capitalize;
}

.post .post-title h3 {
  text-transform: capitalize;
}

.post .post-footer .info .separator a {
  margin-left: 0.2em;
  margin-right: inherit;

 exampleSite/config/_default/languages.toml

@@ -5,8 +5,8 @@
contentDir = "content/english"

[ar]
title = "عربي"
description = "أنا أحمد"
title = "فلانة الفلانية"
description = "أنا أعمل كمطورة ويب في شركة س"
contentDir = "content/arabic" 
weight = 2
LanguageDirection = "rtl" 

 exampleSite/config/_default/menus.ar.toml

@@ -2,22 +2,22 @@
  name = "الرئيسية"
  identifier = "main"
  weight = 100
  url = "/ar"
  url = "/ar/"

  [[main]]
  name = "المنشورات"
  weight = 200
  identifier = "posts"
  url = "/ar/post"
  url = "/ar/post/"

  [[main]]
  name = "حول"
  weight = 300
  identifier = "about"
  url = "/ar/about"
  url = "/ar/about/"

  [[main]]
  name = "للتواصل"
  weight = 400
  identifier = "contact"
  url = "/ar/contact"
  url = "/ar/contact/"

 exampleSite/content/arabic/post/arabic_example.md

@@ -17,3 +17,13 @@
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.

```html
<!DOCTYPE html>
<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>
```

 layouts/partials/head.html

@@ -46,6 +46,11 @@
    type="text/css"
  />
  {{ if eq .Site.Language.LanguageDirection "rtl" }}
    <!-- Arabic font -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Tajawal:300,500,700&display=swap&subset=arabic"
    />
    {{ $templateStyle := resources.Get "css/style.rtl.css" }}
    {{ $style := $templateStyle  | resources.ExecuteAsTemplate "css/main.rtl.css" . | resources.Minify | resources.Fingerprint }}
    <link
@@ -94,6 +99,8 @@
    />

  {{- end -}}


  <!-- Favicons -->
  <link rel="shortcut icon" href="{{ .Site.Params.favicon | relURL }}favicon.ico" type="image/x-icon" />
  <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon | relURL }}apple-touch-icon.png" />

			@@ -134,6 +134,7 @@

			/* Background */
			.chroma {
			direction: ltr;
			color: var(--chr-def-color);
			background-color: var(--chr-def-bg-color);
			}

			@@ -1213,6 +1213,7 @@
			background-color: var(--bg-color);
			border: 1px solid var(--form-border-color);
			color: var(--body-color);
			font-family: inherit;
			}
			.form-style ul li .field-style:focus {
			box-shadow: 0 0 5px;

			@@ -1,5 +1,10 @@
			@charset "UTF-8";

			body {
			font-family: 'Tajawal', sans-serif;
			font-size: 1.5rem;
			}

			blockquote {
			border-right: 0.25em solid var(--blockquote-border-color);
			border-left: inherit;
			@@ -26,6 +31,19 @@
			margin-right: inherit;
			}

			.sidebar .logo-title .title h3 {
			text-transform: capitalize;
			letter-spacing: 1.5px;
			}

			.post .post-title h1 {
			text-transform: capitalize;
			}

			.post .post-title h3 {
			text-transform: capitalize;
			}

			.post .post-footer .info .separator a {
			margin-left: 0.2em;
			margin-right: inherit;

			@@ -5,8 +5,8 @@
			contentDir = "content/english"

			[ar]
			title = "عربي"
			description = "أنا أحمد"
			title = "فلانة الفلانية"
			description = "أنا أعمل كمطورة ويب في شركة س"
			contentDir = "content/arabic"
			weight = 2
			LanguageDirection = "rtl"

			@@ -2,22 +2,22 @@
			name = "الرئيسية"
			identifier = "main"
			weight = 100
			url = "/ar"
			url = "/ar/"

			[[main]]
			name = "المنشورات"
			weight = 200
			identifier = "posts"
			url = "/ar/post"
			url = "/ar/post/"

			[[main]]
			name = "حول"
			weight = 300
			identifier = "about"
			url = "/ar/about"
			url = "/ar/about/"

			[[main]]
			name = "للتواصل"
			weight = 400
			identifier = "contact"
			url = "/ar/contact"
			url = "/ar/contact/"

			@@ -17,3 +17,13 @@
			إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
			ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق.
			هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.

			```html
			<!DOCTYPE html>
			<html>
			<body>
			<h1>My First Heading</h1>
			<p>My first paragraph.</p>
			</body>
			</html>
			```

			@@ -46,6 +46,11 @@
			type="text/css"
			/>
			{{ if eq .Site.Language.LanguageDirection "rtl" }}
			<!-- Arabic font -->
			<link
			rel="stylesheet"
			href="https://fonts.googleapis.com/css?family=Tajawal:300,500,700&display=swap&subset=arabic"
			/>
			{{ $templateStyle := resources.Get "css/style.rtl.css" }}
			{{ $style := $templateStyle \| resources.ExecuteAsTemplate "css/main.rtl.css" . \| resources.Minify \| resources.Fingerprint }}
			<link
			@@ -94,6 +99,8 @@
			/>

			{{- end -}}


			<!-- Favicons -->
			<link rel="shortcut icon" href="{{ .Site.Params.favicon \| relURL }}favicon.ico" type="image/x-icon" />
			<link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon \| relURL }}apple-touch-icon.png" />