feat(i18n): add RTL support for article pages

Enhanced article rendering to support right-to-left (RTL) languages. Updated templates, styles, and HTML to conditionally apply RTL styling based on content direction. Improved readability and user experience for RTL language users.

Relates: #16

src/wikimore/app.py

@@ -127,13 +127,16 @@ def wiki_article(project, lang, title):
     try:
         article_html = next(iter(pages.values()))["revisions"][0]["*"]
     except KeyError:
-        return render_template(
+        return (
+            render_template(
                 "article.html",
                 title=title.replace("_", " "),
                 content="Article not found",
                 wikimedia_projects=app.wikimedia_projects,
                 languages=app.languages,
-        ), 404
+            ),
+            404,
+        )
 
     soup = BeautifulSoup(article_html, "html.parser")
 
@@ -166,7 +169,9 @@ def wiki_article(project, lang, title):
 
                 found = False
                 for language, language_projects in app.languages.items():
-                    for project_name, project_url in language_projects["projects"].items():
+                    for project_name, project_url in language_projects[
+                        "projects"
+                    ].items():
                         if project_url == target_domain:
                             a["href"] = url_for(
                                 "wiki_article",
@@ -205,6 +210,7 @@ def wiki_article(project, lang, title):
         content=processed_html,
         wikimedia_projects=app.wikimedia_projects,
         languages=app.languages,
+        rtl=bool(soup.find("div", class_="mw-parser-output", dir="rtl")),
     )
 
 

src/wikimore/static/css/style.css

@@ -53,6 +53,10 @@ a.new::after {
     color: #333;
 }
 
+.title-rtl {
+    direction: rtl;
+}
+
 /* Search styling */
 #search-form {
     margin: 0;
@@ -95,6 +99,11 @@ h1 {
 }
 
 /* General sidebar styling */
+.mw-content-rtl .sidebar {
+    float: left;
+    clear: left;
+}
+
 .sidebar {
     background-color: #f9f9f9;
     border: 1px solid #ddd;
@@ -325,6 +334,11 @@ h1 {
 }
 
 /* Sidebar styling */
+.mw-content-rtl .infobox {
+    float: left;
+    clear: left;
+}
+
 .infobox {
     float: right;
     margin: 1em;

src/wikimore/templates/article.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
 {% block content %}
-    <h1>{{ title }}</h1>
-    <p>{{ content|safe }}</p>
+    <h1 class="title{% if rtl %} title-rtl{% endif %}">{{ title }}</h1>
+    {{ content|safe }}
 {% endblock %}