Support i18n.

.gitignore

@@ -16,6 +16,7 @@
 # production
 /build
 /public/umami.js
+/lang-compiled
 
 # misc
 .DS_Store

assets/globe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm179.3 160h-67.2c-6.7-36.5-17.5-68.8-31.2-94.7 42.9 19 77.7 52.7 98.4 94.7zM248 56c18.6 0 48.6 41.2 63.2 112H184.8C199.4 97.2 229.4 56 248 56zM48 256c0-13.7 1.4-27.1 4-40h77.7c-1 13.1-1.7 26.3-1.7 40s.7 26.9 1.7 40H52c-2.6-12.9-4-26.3-4-40zm20.7 88h67.2c6.7 36.5 17.5 68.8 31.2 94.7-42.9-19-77.7-52.7-98.4-94.7zm67.2-176H68.7c20.7-42 55.5-75.7 98.4-94.7-13.7 25.9-24.5 58.2-31.2 94.7zM248 456c-18.6 0-48.6-41.2-63.2-112h126.5c-14.7 70.8-44.7 112-63.3 112zm70.1-160H177.9c-1.1-12.8-1.9-26-1.9-40s.8-27.2 1.9-40h140.3c1.1 12.8 1.9 26 1.9 40s-.9 27.2-2 40zm10.8 142.7c13.7-25.9 24.4-58.2 31.2-94.7h67.2c-20.7 42-55.5 75.7-98.4 94.7zM366.3 296c1-13.1 1.7-26.3 1.7-40s-.7-26.9-1.7-40H444c2.6 12.9 4 26.3 4 40s-1.4 27.1-4 40h-77.7z"/></svg>

components/common/LanguageButton.js

@@ -0,0 +1,42 @@
+import React, { useState, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Globe from 'assets/globe.svg';
+import useDocumentClick from 'hooks/useDocumentClick';
+import { updateApp } from 'redux/actions/app';
+import Menu from './Menu';
+import styles from './LanguageButton.module.css';
+import Button from './Button';
+
+const menuOptions = [
+  { label: 'English', value: 'en' },
+  { label: '中文 (Chinese)', value: 'zh-CN' },
+];
+
+export default function LanguageButton() {
+  const dispatch = useDispatch();
+  const [showMenu, setShowMenu] = useState(false);
+  const locale = useSelector(state => state.app.locale);
+  const ref = useRef();
+  const selectedLocale = menuOptions.find(e => e.value === locale)?.label.split(' ')[0];
+
+  function handleSelect(value) {
+    dispatch(updateApp({ locale: value }));
+    window.localStorage.setItem('locale', value);
+    setShowMenu(false);
+  }
+
+  useDocumentClick(e => {
+    if (!ref.current.contains(e.target)) {
+      setShowMenu(false);
+    }
+  });
+
+  return (
+    <div ref={ref} className={styles.container}>
+      <Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small">
+        <div>{selectedLocale}</div>
+      </Button>
+      {showMenu && <Menu options={menuOptions} onSelect={handleSelect} float="top" />}
+    </div>
+  );
+}

components/common/LanguageButton.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+}

components/common/UserButton.js

@@ -1,4 +1,5 @@
 import React, { useState, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
 import Menu from './Menu';
@@ -17,14 +18,16 @@ export default function UserButton() {
   const menuOptions = [
     {
       label: (
-        <>
-          Logged in as <b>{user.username}</b>
-        </>
+        <FormattedMessage
+          id="label.logged-in-as"
+          defaultMessage="Logged in as {username}"
+          values={{ username: <b>{user.username}</b> }}
+        />
       ),
       value: 'username',
       className: styles.username,
     },
-    { label: 'Logout', value: 'logout' },
+    { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
   ];
 
   function handleSelect(value) {

components/layout/Footer.js

@@ -3,23 +3,26 @@ import { FormattedMessage } from 'react-intl';
 import Link from 'next/link';
 import classNames from 'classnames';
 import Button from 'components/common/Button';
+import LanguageButton from 'components/common/LanguageButton';
 import Logo from 'assets/logo.svg';
 import styles from './Footer.module.css';
 
 export default function Footer() {
   return (
     <footer className="container">
-      <div className={classNames(styles.footer, 'row justify-content-center')}>
-        <div>
+      <div className={classNames(styles.footer, 'row')}>
+        <LanguageButton />
+        <div className={styles.center}>
           <FormattedMessage id="footer.powered-by" defaultMessage="powered by" />
+          <Link href="https://umami.is">
+            <a>
+              <Button icon={<Logo />} size="small">
+                <b>umami</b>
+              </Button>
+            </a>
+          </Link>
         </div>
-        <Link href="https://umami.is">
-          <a>
-            <Button icon={<Logo />} size="small">
-              <b>umami</b>
-            </Button>
-          </a>
-        </Link>
+        <div></div>
       </div>
     </footer>
   );

components/layout/Footer.module.css

@@ -1,14 +1,21 @@
 .footer {
   display: flex;
+  justify-content: space-between;
   align-items: center;
   font-size: var(--font-size-small);
   min-height: 100px;
 }
 
-.footer button {
+.footer .center button {
   margin-left: 10px;
 }
 
 .footer a {
   text-decoration: none;
 }
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

components/metrics/ActiveUsers.js

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { useSpring, animated } from 'react-spring';
 import classNames from 'classnames';
 import useFetch from 'hooks/useFetch';
 import styles from './ActiveUsers.module.css';
@@ -11,11 +10,6 @@ export default function ActiveUsers({ websiteId, className }) {
     return data?.[0]?.x || 0;
   }, [data]);
 
-  const props = useSpring({
-    x: count,
-    from: { x: 0 },
-  });
-
   if (count === 0) {
     return null;
   }
@@ -24,14 +18,11 @@ export default function ActiveUsers({ websiteId, className }) {
     <div className={classNames(styles.container, className)}>
       <div className={styles.dot} />
       <div className={styles.text}>
-        <animated.div className={styles.value}>
-          {props.x.interpolate(x => x.toFixed(0))}
-        </animated.div>
         <div>
           <FormattedMessage
             id="active-users.message"
-            defaultMessage="current {count, plural, one {visitor} other {visitors}}"
-            values={{ count }}
+            defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
+            values={{ x: count }}
           />
         </div>
       </div>

lang/en.json

@@ -1,6 +1,6 @@
 {
   "active-users.message": {
-    "defaultMessage": "current {count, plural, one {visitor} other {visitors}}"
+    "defaultMessage": "{x} current {x, plural, one {visitor} other {visitors}}"
   },
   "button.add-account": {
     "defaultMessage": "Add account"
@@ -74,6 +74,12 @@
   "label.last-hours": {
     "defaultMessage": "Last {x} hours"
   },
+  "label.logged-in-as": {
+    "defaultMessage": "Logged in as {username}"
+  },
+  "label.logout": {
+    "defaultMessage": "Logout"
+  },
   "label.name": {
     "defaultMessage": "Name"
   },

lang/zh-CN.json

@@ -0,0 +1,233 @@
+{
+  "active-users.message": {
+    "defaultMessage": "xx {x} current {x, plural, one {visitor} other {visitors}}"
+  },
+  "button.add-account": {
+    "defaultMessage": "xx Add account"
+  },
+  "button.add-website": {
+    "defaultMessage": "xx Add website"
+  },
+  "button.back": {
+    "defaultMessage": "xx Back"
+  },
+  "button.cancel": {
+    "defaultMessage": "xx Cancel"
+  },
+  "button.change-password": {
+    "defaultMessage": "xx Change password"
+  },
+  "button.copy-to-clipboard": {
+    "defaultMessage": "xx Copy to clipboard"
+  },
+  "button.delete": {
+    "defaultMessage": "xx Delete"
+  },
+  "button.edit": {
+    "defaultMessage": "xx Edit"
+  },
+  "button.login": {
+    "defaultMessage": "xx Login"
+  },
+  "button.more": {
+    "defaultMessage": "xx More"
+  },
+  "button.save": {
+    "defaultMessage": "xx Save"
+  },
+  "button.view-details": {
+    "defaultMessage": "xx View details"
+  },
+  "footer.powered-by": {
+    "defaultMessage": "xx powered by"
+  },
+  "header.nav.dashboard": {
+    "defaultMessage": "xx Dashboard"
+  },
+  "header.nav.settings": {
+    "defaultMessage": "xx Settings"
+  },
+  "label.adminsitrator": {
+    "defaultMessage": "xx Administrator"
+  },
+  "label.confirm-password": {
+    "defaultMessage": "xx Confirm password"
+  },
+  "label.current-password": {
+    "defaultMessage": "xx Current password"
+  },
+  "label.domain": {
+    "defaultMessage": "xx Domain"
+  },
+  "label.enable-share-url": {
+    "defaultMessage": "xx Enable share URL"
+  },
+  "label.invalid": {
+    "defaultMessage": "xx Invalid"
+  },
+  "label.invalid-domain": {
+    "defaultMessage": "xx Invalid domain"
+  },
+  "label.last-days": {
+    "defaultMessage": "xx Last {x} days"
+  },
+  "label.last-hours": {
+    "defaultMessage": "xx Last {x} hours"
+  },
+  "label.logged-in-as": {
+    "defaultMessage": "xx Logged in as {username}"
+  },
+  "label.logout": {
+    "defaultMessage": "xx Logout"
+  },
+  "label.name": {
+    "defaultMessage": "xx Name"
+  },
+  "label.new-password": {
+    "defaultMessage": "xx New password"
+  },
+  "label.password": {
+    "defaultMessage": "xx Password"
+  },
+  "label.passwords-dont-match": {
+    "defaultMessage": "xx Passwords don't match"
+  },
+  "label.required": {
+    "defaultMessage": "xx Required"
+  },
+  "label.this-month": {
+    "defaultMessage": "xx This month"
+  },
+  "label.this-week": {
+    "defaultMessage": "xx This week"
+  },
+  "label.this-year": {
+    "defaultMessage": "xx This year"
+  },
+  "label.today": {
+    "defaultMessage": "xx Today"
+  },
+  "label.username": {
+    "defaultMessage": "xx Username"
+  },
+  "message.confirm-delete": {
+    "defaultMessage": "xx Are your sure you want to delete {target}?"
+  },
+  "message.copied": {
+    "defaultMessage": "xx Copied!"
+  },
+  "message.delete-warning": {
+    "defaultMessage": "xx All associated data will be deleted as well."
+  },
+  "message.failure": {
+    "defaultMessage": "xx Something went wrong."
+  },
+  "message.save-success": {
+    "defaultMessage": "xx Saved successfully."
+  },
+  "message.share-url": {
+    "defaultMessage": "xx This is the publicly shared URL for {target}."
+  },
+  "message.track-stats": {
+    "defaultMessage": "xx To track stats for {target}, place the following code in the {head} section of your website."
+  },
+  "message.type-delete": {
+    "defaultMessage": "xx Type {delete} in the box below to confirm."
+  },
+  "metrics.actions": {
+    "defaultMessage": "xx Actions"
+  },
+  "metrics.average-visit-time": {
+    "defaultMessage": "xx Average visit time"
+  },
+  "metrics.bounce-rate": {
+    "defaultMessage": "xx Bounce rate"
+  },
+  "metrics.browsers": {
+    "defaultMessage": "xx Browsers"
+  },
+  "metrics.countries": {
+    "defaultMessage": "xx Countries"
+  },
+  "metrics.devices": {
+    "defaultMessage": "xx Devices"
+  },
+  "metrics.events": {
+    "defaultMessage": "xx Events"
+  },
+  "metrics.filter.combined": {
+    "defaultMessage": "xx Combined"
+  },
+  "metrics.filter.domain-only": {
+    "defaultMessage": "xx Domain only"
+  },
+  "metrics.filter.raw": {
+    "defaultMessage": "xx Raw"
+  },
+  "metrics.operating-system": {
+    "defaultMessage": "xx Operating System"
+  },
+  "metrics.page-views": {
+    "defaultMessage": "xx Page views"
+  },
+  "metrics.pages": {
+    "defaultMessage": "xx Pages"
+  },
+  "metrics.referrers": {
+    "defaultMessage": "xx Referrers"
+  },
+  "metrics.unique-visitors": {
+    "defaultMessage": "xx Unique visitors"
+  },
+  "metrics.views": {
+    "defaultMessage": "xx Views"
+  },
+  "metrics.visitors": {
+    "defaultMessage": "xx Visitors"
+  },
+  "placeholder.message.go-to-settings": {
+    "defaultMessage": "xx Go to settings"
+  },
+  "placeholder.message.no-websites-configured": {
+    "defaultMessage": "xx You don't have any websites configured."
+  },
+  "settings.accounts": {
+    "defaultMessage": "xx Accounts"
+  },
+  "settings.profile": {
+    "defaultMessage": "xx Profile"
+  },
+  "settings.websites": {
+    "defaultMessage": "xx Websites"
+  },
+  "title.add-account": {
+    "defaultMessage": "xx Add account"
+  },
+  "title.add-website": {
+    "defaultMessage": "xx Add website"
+  },
+  "title.delete-account": {
+    "defaultMessage": "xx Delete account"
+  },
+  "title.delete-website": {
+    "defaultMessage": "xx Delete website"
+  },
+  "title.edit-account": {
+    "defaultMessage": "xx Edit account"
+  },
+  "title.edit-website": {
+    "defaultMessage": "xx Edit website"
+  },
+  "title.share-url": {
+    "defaultMessage": "xx Share URL"
+  },
+  "title.tracking-code": {
+    "defaultMessage": "xx Tracking code"
+  },
+  "tooltip.get-share-url": {
+    "defaultMessage": "xx Get share URL"
+  },
+  "tooltip.get-tracking-code": {
+    "defaultMessage": "xx Get tracking code"
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "dev": "next dev",
-    "build": "npm-run-all build-tracker copy-db-schema build-db-client build-app",
+    "build": "npm-run-all build-tracker compile-lang copy-db-schema build-db-client build-app",
     "start": "next start",
     "build-app": "next build",
     "build-tracker": "rollup -c rollup.tracker.config.js",
@@ -22,7 +22,8 @@
     "build-mysql-client": "dotenv prisma generate -- --schema=./prisma/schema.mysql.prisma",
     "build-postgresql-schema": "dotenv prisma introspect -- --schema=./prisma/schema.postgresql.prisma",
     "build-postgresql-client": "dotenv prisma generate -- --schema=./prisma/schema.postgresql.prisma",
-    "extract": "formatjs extract --out-file lang/en.json components/**/*.js"
+    "extract-lang": "formatjs extract {pages,components}/**/*.js --out-file lang/en.json",
+    "compile-lang": "formatjs compile-folder --ast lang lang-compiled"
   },
   "lint-staged": {
     "**/*.js": [

pages/_app.js

@@ -1,19 +1,45 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
-import { Provider } from 'react-redux';
+import { Provider, useDispatch, useSelector } from 'react-redux';
 import { useStore } from 'redux/store';
 import 'styles/variables.css';
 import 'styles/bootstrap-grid.css';
 import 'styles/index.css';
+import en from 'lang-compiled/en.json';
+import cn from 'lang-compiled/zh-CN.json';
+import { updateApp } from '../redux/actions/app';
+
+const messages = {
+  en,
+  'zh-CN': cn,
+};
+
+const Intl = ({ children }) => {
+  const dispatch = useDispatch();
+  const locale = useSelector(state => state.app.locale);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('locale');
+    if (saved) {
+      dispatch(updateApp({ locale: saved }));
+    }
+  });
+
+  return (
+    <IntlProvider locale={locale} messages={messages[locale]}>
+      {children}
+    </IntlProvider>
+  );
+};
 
 export default function App({ Component, pageProps }) {
   const store = useStore();
 
   return (
-    <IntlProvider locale="en" defaultLocale="en">
-      <Provider store={store}>
+    <Provider store={store}>
+      <Intl>
         <Component {...pageProps} />
-      </Provider>
-    </IntlProvider>
+      </Intl>
+    </Provider>
   );
 }

redux/actions/app.js

@@ -0,0 +1,16 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const app = createSlice({
+  name: 'app',
+  initialState: { locale: 'en' },
+  reducers: {
+    updateApp(state, action) {
+      state = action.payload;
+      return state;
+    },
+  },
+});
+
+export const { updateApp } = app.actions;
+
+export default app.reducer;

redux/reducers.js

@@ -1,6 +1,7 @@
 import { combineReducers } from 'redux';
+import app from './actions/app';
 import user from './actions/user';
 import websites from './actions/websites';
 import queries from './actions/queries';
 
-export default combineReducers({ user, websites, queries });
+export default combineReducers({ app, user, websites, queries });