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

@@ -1,99 +1,99 @@
 {
-  "label.accounts": "账户",
-  "label.add-account": "添加账户",
-  "label.add-website": "添加网站",
-  "label.administrator": "管理员",
-  "label.all": "All",
-  "label.all-websites": "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": "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": "Realtime",
-  "label.realtime-logs": "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} 人",
-  "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": "Visitor from {country} using {browser} on {os} {device}",
-  "message.new-version-available": "A new version of umami {version} is available!",
-  "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": "把以下代码放到你的网站的{head}部分来收集{target}的数据.",
-  "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": "独立访客"
-}
+    "label.accounts": "账户",
+    "label.add-account": "添加账户",
+    "label.add-website": "添加网站",
+    "label.administrator": "管理员",
+    "label.all": "所有",
+    "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} 人",
+    "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} 的访客在搭载 {os} 的 {device} 上使用 {browser} 进行访问.",
+    "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": "把以下代码放到你的网站的{head}部分来收集{target}的数据.",
+    "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": "独立访客"
+}