Merge pull request #694 from mikecao/dev

v1.18.0

Dockerfile

@@ -1,6 +1,8 @@
 # Build image
 FROM node:12.18-alpine AS build
+ARG BASE_PATH
 ARG DATABASE_TYPE
+ENV BASE_PATH=$BASE_PATH
 ENV DATABASE_URL "postgresql://umami:umami@db:5432/umami" \
     DATABASE_TYPE=$DATABASE_TYPE
 WORKDIR /build

components/layout/Footer.js

@@ -4,11 +4,15 @@ import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 import useVersion from 'hooks/useVersion';
+import useLocale from 'hooks/useLocale';
+import { rtlLocales } from 'lib/lang';
 
 export default function Footer() {
   const { current } = useVersion();
+  const [locale] = useLocale();
+
   return (
-    <footer className="container">
+    <footer className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
       <div className={classNames(styles.footer, 'row')}>
         <div className="col-12 col-md-4" />
         <div className="col-12 col-md-4">

components/layout/Header.js

@@ -8,19 +8,25 @@ import LanguageButton from 'components/settings/LanguageButton';
 import ThemeButton from 'components/settings/ThemeButton';
 import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
+import Button from 'components/common/Button';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
+import useLocale from 'hooks/useLocale';
+import { rtlLocales } from 'lib/lang';
+import XMark from 'assets/xmark.svg';
+import Bars from 'assets/bars.svg';
 
 export default function Header() {
   const user = useSelector(state => state.user);
   const [active, setActive] = useState(false);
+  const [locale] = useLocale();
 
   function handleClick() {
     setActive(state => !state);
   }
 
   return (
-    <nav className="container">
+    <nav className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
       {user?.is_admin && <UpdateNotice />}
       <div className={classNames(styles.header, 'row align-items-center')}>
         <div className={styles.nav}>
@@ -30,23 +36,11 @@ export default function Header() {
               <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
             </div>
           </div>
-          <button
-            onClick={handleClick}
-            role="button"
+          <Button
             className={styles.burger}
-            aria-label="menu"
-            aria-expanded="false"
-          >
-            {active ? (
-              <div> X </div>
-            ) : (
-              <>
-                <span></span>
-                <span></span>
-                <span></span>
-              </>
-            )}
-          </button>
+            icon={active ? <XMark /> : <Bars />}
+            onClick={handleClick}
+          />
           {user && (
             <div className={styles.items}>
               <div className={active ? classNames(styles.active) : ''}>

components/layout/Header.module.css

@@ -86,7 +86,6 @@
   .items {
     display: flex;
     justify-content: unset;
-    align-items: left;
     font-size: var(--font-size-normal);
     font-weight: 600;
   }
@@ -106,34 +105,12 @@
 
   .burger {
     display: block;
-    /* color: #4a4a4a; */
     background: none;
     border: 1px solid var(--gray900);
     border-radius: 4px;
     cursor: pointer;
-    height: 3.25rem;
-    width: 3.25rem;
-    margin-left: auto;
     position: absolute;
-    right: 0;
     top: 0;
-  }
-
-  .burger span {
-    transform: translateX(25%);
-    padding: 1px 0px;
-    margin: 6px 0;
-    width: 65%;
-    display: block;
-    background-color: var(--gray900);
-  }
-
-  .burger div {
-    /* height: 100%; */
-    color: var(--gray900);
-    text-align: center;
-    margin: auto;
-    font-size: 1.5rem;
-    /* transform: translateX(-50%); */
+    right: 0;
   }
 }

components/layout/Layout.js

@@ -2,17 +2,25 @@ import React from 'react';
 import Head from 'next/head';
 import Header from 'components/layout/Header';
 import Footer from 'components/layout/Footer';
+import useLocale from 'hooks/useLocale';
+import { rtlLocales } from 'lib/lang';
 
 export default function Layout({ title, children, header = true, footer = true }) {
+  const [locale] = useLocale();
+  const dir = rtlLocales.includes(locale) ? 'rtl' : 'ltr';
+
   return (
     <>
       <Head>
         <title>umami{title && ` - ${title}`}</title>
       </Head>
+
       {header && <Header />}
-      <main className="container">{children}</main>
+      <main className="container" dir={dir}>
+        {children}
+      </main>
       {footer && <Footer />}
-      <div id="__modals" />
+      <div id="__modals" dir={dir} />
     </>
   );
 }

components/settings/LanguageButton.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import Head from 'next/head';
 import { menuOptions } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import MenuButton from 'components/common/MenuButton';
@@ -13,36 +12,32 @@ export default function LanguageButton() {
     setLocale(value);
   }
 
+  switch (locale) {
+    case 'zh-CN':
+      import(/* webpackMode: "eager" */ '@fontsource/noto-sans-sc/chinese-simplified-400.css');
+      import(/* webpackMode: "eager" */ '@fontsource/noto-sans-sc/chinese-simplified-500.css');
+      import(/* webpackMode: "eager" */ '@fontsource/noto-sans-sc/chinese-simplified-700.css');
+      break;
+    case 'zh-TW':
+      import(/* webpackMode: "eager" */ '@fontsource/noto-sans-tc/chinese-traditional-400.css');
+      import(/* webpackMode: "eager" */ '@fontsource/noto-sans-tc/chinese-traditional-500.css');
+      import(/* webpackMode: "eager" */ '@fontsource/noto-sans-tc/chinese-traditional-700.css');
+      break;
+    case 'ja-JP':
+      import(/* webpackMode: "eager" */ '@fontsource/noto-sans-jp/japanese-400.css');
+      import(/* webpackMode: "eager" */ '@fontsource/noto-sans-jp/japanese-500.css');
+      import(/* webpackMode: "eager" */ '@fontsource/noto-sans-jp/japanese-700.css');
+      break;
+  }
+
   return (
-    <>
-      <Head>
-        {locale === 'zh-CN' && (
-          <link
-            href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
-        )}
-        {locale === 'zh-TW' && (
-          <link
-            href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
-        )}
-        {locale === 'ja-JP' && (
-          <link
-            href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
-        )}
-      </Head>
-      <MenuButton
-        icon={<Globe />}
-        options={menuOptions}
-        value={locale}
-        menuClassName={styles.menu}
-        renderValue={option => option?.display}
-        onSelect={handleSelect}
-      />
-    </>
+    <MenuButton
+      icon={<Globe />}
+      options={menuOptions}
+      value={locale}
+      menuClassName={styles.menu}
+      renderValue={option => option?.display}
+      onSelect={handleSelect}
+    />
   );
 }

lang/ar-SA.json

@@ -0,0 +1,100 @@
+{
+  "label.accounts": "الحسابات",
+  "label.add-account": "إضافة حساب",
+  "label.add-website": "إضافة موقع",
+  "label.administrator": "مدير عام؟",
+  "label.all": "الكل",
+  "label.all-events": "كافة الأحداث",
+  "label.all-websites": "كافة المواقع",
+  "label.back": "للخلف",
+  "label.cancel": "إلغاء",
+  "label.change-password": "تغيير كلمة المرور",
+  "label.confirm-password": "تأكيد كلمة المرور",
+  "label.copy-to-clipboard": "نسخ للحافظة",
+  "label.current-password": "كلمة المرور الحالية",
+  "label.custom-range": "فترة مخصصة",
+  "label.dashboard": "الشاشة الرئيسية",
+  "label.date-range": "فترة مخصصة",
+  "label.default-date-range": "الفترة المخصصة الافتراضية",
+  "label.delete": "حذف",
+  "label.delete-account": "حذف الحساب",
+  "label.delete-website": "حذف الموقع",
+  "label.dismiss": "اخفاء",
+  "label.domain": "نطاق",
+  "label.edit": "تعديل",
+  "label.edit-account": "تعديل الحساب",
+  "label.edit-website": "تعديل الموقع",
+  "label.enable-share-url": "تفعيل مشاركة الرابط",
+  "label.invalid": "غير صحيح",
+  "label.invalid-domain": "النطاق غير صحيح",
+  "label.last-days": "اخر {x} يوم/ايام",
+  "label.last-hours": "اخر {x} ساعة/ساعات",
+  "label.logged-in-as": "تم تسجيل الدخول كـ {username}",
+  "label.login": "تسجيل الدخول",
+  "label.logout": "تسجيل الخروج",
+  "label.more": "المزيد",
+  "label.name": "الإسم",
+  "label.new-password": "كلمة مرور جديدة",
+  "label.password": "كلمة المرور",
+  "label.passwords-dont-match": "كلمة المرور غير متطابقة",
+  "label.profile": "الملف الشخصي",
+  "label.realtime": "الوقت الفعلي",
+  "label.realtime-logs": "سجلات الوقت الفعلي",
+  "label.refresh": "تحديث",
+  "label.required": "اجباري",
+  "label.reset": "اعادة تعيين",
+  "label.save": "حفظ",
+  "label.settings": "اعدادات",
+  "label.share-url": "مشاركة الرابط",
+  "label.single-day": "يوم واحد",
+  "label.this-month": "الشهر الحالي",
+  "label.this-week": "الاسبوع الحالي",
+  "label.this-year": "السنة الحالية",
+  "label.timezone": "المنطقة الزمنية",
+  "label.today": "اليوم",
+  "label.tracking-code": "كود التتبع",
+  "label.unknown": "غير معروف",
+  "label.username": "اسم المستخدم",
+  "label.view-details": "عرض التفاصيل",
+  "label.websites": "المواقع",
+  "message.active-users": "{x} حاليا {x, plural, one {زائر واحد} other {زوار}}",
+  "message.confirm-delete": "هل أنت متأكد من حذف {target}?",
+  "message.copied": "تم النسخ!",
+  "message.delete-warning": "كافة البيانات المرتبطة سيم حذفها ايضا.",
+  "message.failure": "حدث خطأ ما.",
+  "message.get-share-url": "احصل على رابط المشاركة",
+  "message.get-tracking-code": "احصل على كود التتبع",
+  "message.go-to-settings": "الذهاب إلى الإعدادات",
+  "message.incorrect-username-password": "اسم المستخدم او كلمة المرور غير صحيحة.",
+  "message.log.visitor": "زائر من {country} يستخدم {browser} على {os} {device}",
+  "message.new-version-available": "توجد نسخة جديدة من umami رقم {version} سارع بالتحديث!",
+  "message.no-data-available": "لا توجد بيانات متاحة.",
+  "message.no-websites-configured": "لم تقم بإعداد اي موقع.",
+  "message.page-not-found": "الصفحة غير موجودة.",
+  "message.powered-by": "مشغل بواسطة {name}",
+  "message.save-success": "تم الحفظ بنجاح.",
+  "message.share-url": "هذا الرابط الذي تم مشاركته بشكل عام لـ {target}.",
+  "message.track-stats": "لتتبع الاحصاىيات لـ {target}, ضع الكود التالي في منطقة {head} في موقعك.",
+  "message.type-delete": "اكتب {delete} في الحقل التالي لتأكيد الحذف.",
+  "metrics.actions": "اجراءات",
+  "metrics.average-visit-time": "متوسط وقت الزيارة",
+  "metrics.bounce-rate": "معدل الارتداد",
+  "metrics.browsers": "المتصفحات",
+  "metrics.countries": "الدول",
+  "metrics.device.desktop": "كمبيوتر",
+  "metrics.device.laptop": "لابتوب",
+  "metrics.device.mobile": "جوال",
+  "metrics.device.tablet": "تابلت",
+  "metrics.devices": "الأجهزة",
+  "metrics.events": "الأحداث",
+  "metrics.filter.combined": "مجمعة",
+  "metrics.filter.domain-only": "نطاق فقط",
+  "metrics.filter.raw": "مفصلة",
+  "metrics.operating-systems": "نظام التشغيل",
+  "metrics.page-views": "مشاهدات الصفحة",
+  "metrics.pages": "الصفحات",
+  "metrics.referrers": "التحويلات",
+  "metrics.unique-visitors": "زائرون فريدون",
+  "metrics.views": "مشاهدات",
+  "metrics.visitors": "زوار"
+}