diff --git a/components/common/Favicon.js b/components/common/Favicon.js index d72cd3c7..00376b05 100644 --- a/components/common/Favicon.js +++ b/components/common/Favicon.js @@ -2,27 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; 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; -} +function Favicon({ url, ...props }) { + const faviconUrl = url ? url : '/default-favicon.png'; -function Favicon({ domain, ...props }) { - const hostName = domain ? getHostName(domain) : null; - - return hostName ? ( - - ) : null; + return ; } Favicon.propTypes = { - domain: PropTypes.string, + url: PropTypes.string, }; export default Favicon; diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js index fd74538f..5e3c09e6 100644 --- a/components/metrics/WebsiteChart.js +++ b/components/metrics/WebsiteChart.js @@ -18,7 +18,7 @@ import styles from './WebsiteChart.module.css'; export default function WebsiteChart({ websiteId, title, - domain, + favicon, stickyHeader = false, showLink = false, showChart = true, @@ -81,7 +81,7 @@ export default function WebsiteChart({ return (
- +
- + ) : ( <> - + {title} ); diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js index efeb0264..1f36c0b5 100644 --- a/components/pages/TestConsole.js +++ b/components/pages/TestConsole.js @@ -106,7 +106,7 @@ export default function TestConsole() { Events diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js index 78c5f752..a35d02a0 100644 --- a/components/pages/WebsiteDetails.js +++ b/components/pages/WebsiteDetails.js @@ -141,7 +141,7 @@ export default function WebsiteDetails({ websiteId }) { - {ordered.map(({ website_id, name, domain }, index) => + {ordered.map(({ website_id, name, favicon }, index) => index < limit ? (
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js index 451be47f..22dfc1ad 100644 --- a/components/settings/WebsiteSettings.js +++ b/components/settings/WebsiteSettings.js @@ -83,13 +83,13 @@ export default function WebsiteSettings() { ); - const DetailsLink = ({ website_id, name, domain }) => ( + const DetailsLink = ({ website_id, name, favicon }) => ( - + {name} ); diff --git a/db/mysql/migrations/04_add_favicon_column/migration.sql b/db/mysql/migrations/04_add_favicon_column/migration.sql new file mode 100644 index 00000000..f344c8ff --- /dev/null +++ b/db/mysql/migrations/04_add_favicon_column/migration.sql @@ -0,0 +1,2 @@ +-- AlterTable +ALTER TABLE `website` ADD COLUMN `favicon` VARCHAR(500) NULL; diff --git a/db/mysql/schema.prisma b/db/mysql/schema.prisma index 9ad2620c..0daba55a 100644 --- a/db/mysql/schema.prisma +++ b/db/mysql/schema.prisma @@ -85,6 +85,7 @@ model website { domain String? @db.VarChar(500) share_id String? @unique() @db.VarChar(64) created_at DateTime? @default(now()) @db.Timestamp(0) + favicon String? @db.VarChar(500) account account @relation(fields: [user_id], references: [user_id]) event event[] pageview pageview[] diff --git a/db/postgresql/migrations/04_add_favicon_column/migration.sql b/db/postgresql/migrations/04_add_favicon_column/migration.sql new file mode 100644 index 00000000..a1f113ca --- /dev/null +++ b/db/postgresql/migrations/04_add_favicon_column/migration.sql @@ -0,0 +1,2 @@ +-- AlterTable +ALTER TABLE "website" ADD COLUMN "favicon" VARCHAR(500); diff --git a/db/postgresql/schema.prisma b/db/postgresql/schema.prisma index a76a3da4..7c661d2b 100644 --- a/db/postgresql/schema.prisma +++ b/db/postgresql/schema.prisma @@ -85,6 +85,7 @@ model website { domain String? @db.VarChar(500) share_id String? @unique @db.VarChar(64) created_at DateTime? @default(now()) @db.Timestamptz(6) + favicon String? @db.VarChar(500) account account @relation(fields: [user_id], references: [user_id]) event event[] pageview pageview[] diff --git a/lib/favicon.js b/lib/favicon.js new file mode 100644 index 00000000..9110aa58 --- /dev/null +++ b/lib/favicon.js @@ -0,0 +1,64 @@ +/** + * ISC License + * Copyright 2022 github.com/sudoaugustin/favecon + * Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. + * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. + * IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN + * AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. + */ +import fetch from 'node-fetch'; +import { parse } from 'node-html-parser'; +import { TimeoutController } from 'timeout-abort-controller'; + +const filterLinks = links => { + const attrs = ['rel', 'href', 'sizes']; + const filterAttrs = link => + attrs.reduce((total, attr) => ({ ...total, [attr]: link.getAttribute(attr) }), {}); + return [...links] + .filter(link => link.getAttribute('href') && link.getAttribute('rel').includes('icon')) + .map(filterAttrs); +}; + +const formatValues = (url, icons) => { + const getOrigin = url => new URL(url).origin; + return icons.map(({ sizes, href, rel }) => ({ + size: parseInt(sizes?.split('x')[0]) || undefined, + href: href[0] === '/' ? `${getOrigin(url)}${href}` : href, + rel, + })); +}; + +const fetchLinks = async url => { + // Time out the favicon request if it doesn't respond in a reasonable time. + const tc = new TimeoutController(3000); + + let links = []; + + try { + const html = await (await fetch(url, { signal: tc.signal })).text(); + links = parse(html).querySelectorAll('head link'); + } catch (e) { + // eslint-disable-next-line no-console + console.log(`Could not fetch favicon for url ${url}`, e); + } finally { + tc.clear(); + } + + return links; +}; + +const getIcons = async url => { + const links = await fetchLinks(url); + const icons = filterLinks(links); + return formatValues(url, icons); +}; + +export default async domain => { + const icons = await getIcons(`https://${domain}`); + + if (icons.length && icons.length > 0) { + return icons[0]?.href; + } + + return null; +}; diff --git a/package.json b/package.json index be7fd7d1..099e26d6 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "dependencies": { "@fontsource/inter": "4.5.7", "@prisma/client": "4.3.1", + "abort-controller": "^3.0.0", "chalk": "^4.1.1", "chart.js": "^2.9.4", "classnames": "^2.3.1", @@ -86,6 +87,7 @@ "next": "^12.2.5", "next-basics": "^0.7.0", "node-fetch": "^3.2.8", + "node-html-parser": "^6.1.1", "npm-run-all": "^4.1.5", "prop-types": "^15.7.2", "react": "^17.0.0", @@ -100,6 +102,7 @@ "request-ip": "^3.3.0", "semver": "^7.3.6", "thenby": "^1.3.4", + "timeout-abort-controller": "^3.0.0", "timezone-support": "^2.0.2", "uuid": "^8.3.2", "zustand": "^3.7.2" diff --git a/pages/api/website/index.js b/pages/api/website/index.js index ac02de85..527a6a43 100644 --- a/pages/api/website/index.js +++ b/pages/api/website/index.js @@ -2,6 +2,7 @@ import { ok, unauthorized, methodNotAllowed, getRandomChars } from 'next-basics' import { updateWebsite, createWebsite, getWebsiteById } from 'queries'; import { useAuth } from 'lib/middleware'; import { uuid } from 'lib/crypto'; +import getFavicon from 'lib/favicon'; export default async (req, res) => { await useAuth(req, res); @@ -13,6 +14,8 @@ export default async (req, res) => { const { name, domain, owner } = req.body; const website_owner = parseInt(owner); + const favicon = await getFavicon(domain); + if (website_id) { const website = await getWebsiteById(website_id); @@ -28,13 +31,19 @@ export default async (req, res) => { share_id = null; } - await updateWebsite(website_id, { name, domain, share_id, user_id: website_owner }); + await updateWebsite(website_id, { name, domain, share_id, user_id: website_owner, favicon }); return ok(res); } else { const website_uuid = uuid(); const share_id = enable_share_url ? getRandomChars(8) : null; - const website = await createWebsite(website_owner, { website_uuid, name, domain, share_id }); + const website = await createWebsite(website_owner, { + website_uuid, + name, + domain, + share_id, + favicon, + }); return ok(res, website); } diff --git a/public/default-favicon.png b/public/default-favicon.png new file mode 100644 index 00000000..b018b02c Binary files /dev/null and b/public/default-favicon.png differ diff --git a/yarn.lock b/yarn.lock index f4b49dc1..5d9a5203 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1978,6 +1978,13 @@ JSONStream@1.3.4: jsonparse "^1.2.0" through ">=2.2.7 <3" +abort-controller@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392" + integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg== + dependencies: + event-target-shim "^5.0.0" + acorn-dynamic-import@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz" @@ -2674,6 +2681,17 @@ css-select@^4.1.3: domutils "^2.8.0" nth-check "^2.0.1" +css-select@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6" + integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg== + dependencies: + boolbase "^1.0.0" + css-what "^6.1.0" + domhandler "^5.0.2" + domutils "^3.0.1" + nth-check "^2.0.1" + css-tree@^1.1.2, css-tree@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d" @@ -2682,7 +2700,7 @@ css-tree@^1.1.2, css-tree@^1.1.3: mdn-data "2.0.14" source-map "^0.6.1" -css-what@^6.0.1: +css-what@^6.0.1, css-what@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== @@ -2962,7 +2980,16 @@ dom-serializer@^1.0.1: domhandler "^4.2.0" entities "^2.0.0" -domelementtype@^2.0.1, domelementtype@^2.2.0: +dom-serializer@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" + integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg== + dependencies: + domelementtype "^2.3.0" + domhandler "^5.0.2" + entities "^4.2.0" + +domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== @@ -2974,6 +3001,13 @@ domhandler@^4.2.0, domhandler@^4.3.1: dependencies: domelementtype "^2.2.0" +domhandler@^5.0.1, domhandler@^5.0.2: + version "5.0.3" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31" + integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w== + dependencies: + domelementtype "^2.3.0" + domutils@^2.8.0: version "2.8.0" resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135" @@ -2983,6 +3017,15 @@ domutils@^2.8.0: domelementtype "^2.2.0" domhandler "^4.2.0" +domutils@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c" + integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q== + dependencies: + dom-serializer "^2.0.0" + domelementtype "^2.3.0" + domhandler "^5.0.1" + dotenv@^10.0.0: version "10.0.0" resolved "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz" @@ -3035,6 +3078,11 @@ entities@^2.0.0: resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A== +entities@^4.2.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174" + integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA== + entities@^4.3.0: version "4.3.1" resolved "https://registry.yarnpkg.com/entities/-/entities-4.3.1.tgz#c34062a94c865c322f9d67b4384e4169bcede6a4" @@ -3357,6 +3405,11 @@ esutils@^2.0.2: resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g== +event-target-shim@^5.0.0: + version "5.0.1" + resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789" + integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ== + execa@^5.1.1: version "5.1.1" resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz" @@ -3791,6 +3844,11 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +he@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" + integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== + hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz" @@ -4784,6 +4842,14 @@ node-fetch@^3.2.8: fetch-blob "^3.1.4" formdata-polyfill "^4.0.10" +node-html-parser@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-6.1.1.tgz#7f38f4427fafc242a22135d9db80c1455e837467" + integrity sha512-eYYblUeoMg0nR6cYGM4GRb1XncNa9FXEftuKAU1qyMIr6rXVtNyUKduvzZtkqFqSHVByq2lLjC7WO8tz7VDmnA== + dependencies: + css-select "^5.1.0" + he "1.2.0" + node-releases@^2.0.3: version "2.0.5" resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz" @@ -5838,6 +5904,11 @@ restore-cursor@^3.1.0: onetime "^5.1.0" signal-exit "^3.0.2" +retimer@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/retimer/-/retimer-3.0.0.tgz#98b751b1feaf1af13eb0228f8ea68b8f9da530df" + integrity sha512-WKE0j11Pa0ZJI5YIk0nflGI7SQsfl2ljihVy7ogh7DeQSeYAUi0ubZ/yEueGtDfUPk6GH5LRw1hBdLq4IwUBWA== + reusify@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" @@ -6426,6 +6497,13 @@ through@2.3.8, "through@>=2.2.7 <3", through@^2.3.8: resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg== +timeout-abort-controller@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/timeout-abort-controller/-/timeout-abort-controller-3.0.0.tgz#dd57ffca041652c03769904f8d95afd93fb95595" + integrity sha512-O3e+2B8BKrQxU2YRyEjC/2yFdb33slI22WRdUaDx6rvysfi9anloNZyR2q0l6LnePo5qH7gSM7uZtvvwZbc2yA== + dependencies: + retimer "^3.0.0" + timezone-support@^2.0.2: version "2.0.2" resolved "https://registry.npmjs.org/timezone-support/-/timezone-support-2.0.2.tgz"