diff --git a/components/common/Favicon.js b/components/common/Favicon.js
new file mode 100644
index 00000000..07ec696c
--- /dev/null
+++ b/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 ? (
+
+ ) : null;
+}
diff --git a/components/common/Favicon.module.css b/components/common/Favicon.module.css
new file mode 100644
index 00000000..82c85c42
--- /dev/null
+++ b/components/common/Favicon.module.css
@@ -0,0 +1,3 @@
+.favicon {
+ margin-right: 8px;
+}
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index fb8bdf8f..0f4b48c3 100644
--- a/components/metrics/WebsiteChart.js
+++ b/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 (
-
+
- {title}
+
+
+ {title}
+
diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js
index fef6c620..b715b4a8 100644
--- a/components/pages/TestConsole.js
+++ b/components/pages/TestConsole.js
@@ -82,7 +82,12 @@ export default function TestConsole() {
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 6c310909..81cde3ad 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -120,6 +120,7 @@ export default function WebsiteDetails({ websiteId }) {
- {data.map(({ website_id, name }) => (
+ {data.map(({ website_id, name, domain }) => (
-
+
))}
{data.length === 0 && (
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
index 0ff6246d..686605f2 100644
--- a/components/settings/WebsiteSettings.js
+++ b/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() {
);
- const DetailsLink = ({ website_id, name }) => (
+ const DetailsLink = ({ website_id, name, domain }) => (
+
{name}
);