Merge pull request #319 from bokub/feature/favicon

Add favicon to websites

components/common/Favicon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './Favicon.module.css';
+
+function getHostName(url) {
+  const match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?=]+)/im);
+  return match && match.length > 1 ? match[1] : null;
+}
+
+export default function Favicon({ domain, ...props }) {
+  const hostName = domain ? getHostName(domain) : null;
+
+  return hostName ? (
+    <img
+      className={styles.favicon}
+      src={`https://icons.duckduckgo.com/ip3/${hostName}.ico`}
+      height="16"
+      alt=""
+      {...props}
+    />
+  ) : null;
+}

components/common/Favicon.module.css

@@ -0,0 +1,3 @@
+.favicon {
+  margin-right: 8px;
+}

components/metrics/WebsiteChart.js

@@ -20,6 +20,7 @@ import { TOKEN_HEADER } from '../../lib/constants';
 export default function WebsiteChart({
   websiteId,
   title,
+  domain,
   stickyHeader = false,
   showLink = false,
   onDataLoad = () => {},
@@ -66,7 +67,7 @@ export default function WebsiteChart({
 
   return (
     <div className={styles.container}>
-      <WebsiteHeader websiteId={websiteId} title={title} showLink={showLink} />
+      <WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
       <div className={classNames(styles.header, 'row')}>
         <StickyHeader
           className={classNames(styles.metrics, 'col row')}

components/metrics/WebsiteHeader.js

@@ -4,14 +4,18 @@ import Link from 'components/common/Link';
 import PageHeader from 'components/layout/PageHeader';
 import RefreshButton from 'components/common/RefreshButton';
 import ButtonLayout from 'components/layout/ButtonLayout';
+import Favicon from 'components/common/Favicon';
 import ActiveUsers from './ActiveUsers';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
 
-export default function WebsiteHeader({ websiteId, title, showLink = false }) {
+export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
   return (
     <PageHeader>
-      <div className={styles.title}>{title}</div>
+      <div className={styles.title}>
+        <Favicon domain={domain} />
+        {title}
+      </div>
       <ActiveUsers className={styles.active} websiteId={websiteId} />
       <ButtonLayout align="right">
         <RefreshButton websiteId={websiteId} />

components/pages/TestConsole.js

@@ -82,7 +82,12 @@ export default function TestConsole() {
           </div>
           <div className="row">
             <div className="col-12">
-              <WebsiteChart websiteId={website.website_id} title={website.name} showLink />
+              <WebsiteChart
+                websiteId={website.website_id}
+                title={website.name}
+                domain={website.domain}
+                showLink
+              />
               <PageHeader>Events</PageHeader>
               <EventsChart websiteId={website.website_id} />
             </div>

components/pages/WebsiteDetails.js

@@ -120,6 +120,7 @@ export default function WebsiteDetails({ websiteId }) {
           <WebsiteChart
             websiteId={websiteId}
             title={data.name}
+            domain={data.domain}
             onDataLoad={handleDataLoad}
             showLink={false}
             stickyHeader

components/pages/WebsiteList.js

@@ -17,9 +17,9 @@ export default function WebsiteList({ userId }) {
 
   return (
     <Page>
-      {data.map(({ website_id, name }) => (
+      {data.map(({ website_id, name, domain }) => (
         <div key={website_id} className={styles.website}>
-          <WebsiteChart websiteId={website_id} title={name} showLink />
+          <WebsiteChart websiteId={website_id} title={name} domain={domain} showLink />
         </div>
       ))}
       {data.length === 0 && (

components/settings/WebsiteSettings.js

@@ -13,6 +13,7 @@ import ShareUrlForm from 'components/forms/ShareUrlForm';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import ButtonLayout from 'components/layout/ButtonLayout';
 import Toast from 'components/common/Toast';
+import Favicon from 'components/common/Favicon';
 import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
 import Plus from 'assets/plus.svg';
@@ -60,8 +61,9 @@ export default function WebsiteSettings() {
     </ButtonLayout>
   );
 
-  const DetailsLink = ({ website_id, name }) => (
+  const DetailsLink = ({ website_id, name, domain }) => (
     <Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
+      <Favicon domain={domain} />
       {name}
     </Link>
   );

lang/id-ID.json

@@ -3,8 +3,8 @@
   "label.add-account": "Tambah akun",
   "label.add-website": "Tambah situs web",
   "label.administrator": "Pengelola",
-  "label.all": "All",
-  "label.all-websites": "All websites",
+  "label.all": "Semua",
+  "label.all-websites": "Semua website",
   "label.back": "Kembali",
   "label.cancel": "Batal",
   "label.change-password": "Ganti kata sandi",
@@ -14,7 +14,7 @@
   "label.custom-range": "Rentang khusus",
   "label.dashboard": "Dasbor",
   "label.date-range": "Rentang tanggal",
-  "label.default-date-range": "Rentang tanggal default",
+  "label.default-date-range": "Rentang tanggal bawaan",
   "label.delete": "Hapus",
   "label.delete-account": "Hapus akun",
   "label.delete-website": "Hapus situs web",
@@ -37,8 +37,8 @@
   "label.password": "Kata sandi",
   "label.passwords-dont-match": "Kata sandi tidak cocok",
   "label.profile": "Profil",
-  "label.realtime": "Realtime",
-  "label.realtime-logs": "Realtime logs",
+  "label.realtime": "Waktu nyata",
+  "label.realtime-logs": "Log waktu nyata",
   "label.refresh": "Segarkan",
   "label.required": "Wajib",
   "label.reset": "Atur ulang",
@@ -65,7 +65,7 @@
   "message.get-tracking-code": "Dapatkan kode pelacakan",
   "message.go-to-settings": "Pergi ke pengaturan",
   "message.incorrect-username-password": "Nama pengguna/kata sandi salah.",
-  "message.log.visitor": "Visitor from {country} using {browser} on {os} {device}",
+  "message.log.visitor": "Pengunjung dari {country} dengan {browser} di {device} {os}",
   "message.new-version-available": "Versi terbaru umami {version} telah tersedia!",
   "message.no-data-available": "Tidak ada data.",
   "message.no-websites-configured": "Anda tidak memiliki situs web yang dikonfigurasi.",
@@ -77,8 +77,8 @@
   "message.type-delete": "Ketikkan {delete} pada kotak di bawah untuk konfirmasi.",
   "metrics.actions": "Aksi",
   "metrics.average-visit-time": "Waktu kunjungan rata-rata",
-  "metrics.bounce-rate": "Tingkat bouncing",
-  "metrics.browsers": "Browser",
+  "metrics.bounce-rate": "Rasio pentalan",
+  "metrics.browsers": "Peramban",
   "metrics.countries": "Negara",
   "metrics.device.desktop": "Desktop",
   "metrics.device.laptop": "Laptop",
@@ -88,7 +88,7 @@
   "metrics.events": "Perihal",
   "metrics.filter.combined": "Gabungan",
   "metrics.filter.domain-only": "Hanya domain",
-  "metrics.filter.raw": "Raw",
+  "metrics.filter.raw": "Mentah",
   "metrics.operating-systems": "Sistem Operasi",
   "metrics.page-views": "Tampilan halaman",
   "metrics.pages": "Halaman",

lang/zh-CN.json

@@ -3,8 +3,8 @@
     "label.add-account": "添加账户",
     "label.add-website": "添加网站",
     "label.administrator": "管理员",
-  "label.all": "All",
-  "label.all-websites": "All websites",
+    "label.all": "所有",
+    "label.all-websites": "全部网站",
     "label.back": "返回",
     "label.cancel": "取消",
     "label.change-password": "更新密码",
@@ -18,7 +18,7 @@
     "label.delete": "删除",
     "label.delete-account": "删除账户",
     "label.delete-website": "删除网站",
-  "label.dismiss": "Dismiss",
+    "label.dismiss": "关闭",
     "label.domain": "域名",
     "label.edit": "编辑",
     "label.edit-account": "编辑账户",
@@ -37,8 +37,8 @@
     "label.password": "密码",
     "label.passwords-dont-match": "密码不一致",
     "label.profile": "个人资料",
-  "label.realtime": "Realtime",
-  "label.realtime-logs": "Realtime logs",
+    "label.realtime": "实时",
+    "label.realtime-logs": "实时日志",
     "label.refresh": "刷新",
     "label.required": "必填",
     "label.reset": "重置",
@@ -65,8 +65,8 @@
     "message.get-tracking-code": "获得跟踪代码",
     "message.go-to-settings": "去设置",
     "message.incorrect-username-password": "用户名密码不正确.",
-  "message.log.visitor": "Visitor from {country} using {browser} on {os} {device}",
-  "message.new-version-available": "A new version of umami {version} is available!",
+    "message.log.visitor": "来自 {country} 的访客在搭载 {os} 的 {device} 上使用 {browser} 进行访问.",
+    "message.new-version-available": "umami 有新版本 {version} 发布啦！",
     "message.no-data-available": "无可用数据.",
     "message.no-websites-configured": "你还没有设置任何网站.",
     "message.page-not-found": "网页未找到.",