add rtl support

lelas · May 13, 2021 · 0c13f8d · 0c13f8d
1 parent 0126154
commit 0c13f8d
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 7 deletions.
diff --git a/components/layout/Footer.js b/components/layout/Footer.js
@@ -1,14 +1,19 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 import useVersion from 'hooks/useVersion';
 
 export default function Footer() {
   const { current } = useVersion();
+  const intl = useIntl();
+
   return (
-    <footer className="container">
+    <footer
+      className="container"
+      dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}
+    >
       <div className={classNames(styles.footer, 'row')}>
         <div className="col-12 col-md-4" />
         <div className="col-12 col-md-4">

diff --git a/components/layout/Header.js b/components/layout/Header.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
@@ -14,13 +14,17 @@ import styles from './Header.module.css';
 export default function Header() {
   const user = useSelector(state => state.user);
   const [active, setActive] = useState(false);
+  const intl = useIntl();
 
   function handleClick() {
     setActive(state => !state);
   }
 
   return (
-    <nav className="container">
+    <nav
+      className="container"
+      dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}
+    >
       {user?.is_admin && <UpdateNotice />}
       <div className={classNames(styles.header, 'row align-items-center')}>
         <div className={styles.nav}>

diff --git a/components/layout/Layout.js b/components/layout/Layout.js
@@ -2,15 +2,24 @@ import React from 'react';
 import Head from 'next/head';
 import Header from 'components/layout/Header';
 import Footer from 'components/layout/Footer';
+import { useIntl } from 'react-intl';
 
 export default function Layout({ title, children, header = true, footer = true }) {
+  const intl = useIntl();
+
   return (
     <>
-      <Head>
+      <Head dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}>
         <title>umami{title && ` - ${title}`}</title>
       </Head>
+
       {header && <Header />}
-      <main className="container">{children}</main>
+      <main
+        className="container"
+        dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}
+      >
+        {children}
+      </main>
       {footer && <Footer />}
       <div id="__modals" />
     </>

diff --git a/lang/ar-SA.json b/lang/ar-SA.json
@@ -96,5 +96,6 @@
   "metrics.referrers": "التحويلات",
   "metrics.unique-visitors": "زائرون فريدون",
   "metrics.views": "مشاهدات",
-  "metrics.visitors": "زوار"
+  "metrics.visitors": "زوار",
+  "metrics.dir": "rtl"
 }
diff --git a/package.json b/package.json
@@ -119,6 +119,7 @@
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^13.0.0",
     "postcss-preset-env": "^6.7.0",
+    "postcss-rtlcss": "^3.3.2",
     "prettier": "^2.2.1",
     "prettier-eslint": "^12.0.0",
     "prisma": "2.21.2",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: [
+    'postcss-rtlcss',
     'postcss-flexbugs-fixes',
     [
       'postcss-preset-env',