Merge pull request #524 from mfts/feat/geography

mfts · web-flow · commit c3a6891c40ec · 2024-07-19T19:33:03.000+02:00
feat: add user agent to views
diff --git a/app/(static)/blog/[slug]/page.tsx b/app/(static)/blog/[slug]/page.tsx
@@ -2,7 +2,7 @@ import { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
-import BlurImage from "@/components/blur-image";
+import { BlurImage } from "@/components/blur-image";
 import { ContentBody } from "@/components/mdx/post-body";
 import TableOfContents from "@/components/mdx/table-of-contents";
 
diff --git a/app/(static)/de/blog/[slug]/page.tsx b/app/(static)/de/blog/[slug]/page.tsx
@@ -2,7 +2,7 @@ import { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
-import BlurImage from "@/components/blur-image";
+import { BlurImage } from "@/components/blur-image";
 import { ContentBody } from "@/components/mdx/post-body";
 import TableOfContents from "@/components/mdx/table-of-contents";
 
diff --git a/app/(static)/help/article/[slug]/page.tsx b/app/(static)/help/article/[slug]/page.tsx
@@ -2,7 +2,7 @@ import { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
-import BlurImage from "@/components/blur-image";
+import { BlurImage } from "@/components/blur-image";
 import { ContentBody } from "@/components/mdx/post-body";
 import TableOfContents from "@/components/mdx/table-of-contents";
 import {
diff --git a/components/blur-image.tsx b/components/blur-image.tsx
@@ -4,23 +4,32 @@ import Image, { ImageProps } from "next/image";
 
 import { useEffect, useState } from "react";
 
-export default function BlurImage(props: ImageProps) {
+import { cn } from "@/lib/utils";
+
+export function BlurImage(props: ImageProps) {
   const [loading, setLoading] = useState(true);
   const [src, setSrc] = useState(props.src);
   useEffect(() => setSrc(props.src), [props.src]); // update the `src` value when the `prop.src` value changes
 
+  const handleLoad = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    setLoading(false);
+    const target = e.target as HTMLImageElement;
+    if (target.naturalWidth <= 16 && target.naturalHeight <= 16) {
+      setSrc(`https://avatar.vercel.sh/${encodeURIComponent(props.alt)}`);
+    }
+  };
+
   return (
     <Image
       {...props}
       src={src}
       alt={props.alt}
-      className={`${props.className} ${loading ? "blur-[2px]" : "blur-0"}`}
-      onLoad={async () => {
-        setLoading(false);
-      }}
+      className={cn(loading ? "blur-[2px]" : "blur-0", props.className)}
+      onLoad={handleLoad}
       onError={() => {
-        setSrc(`https://avatar.vercel.sh/${props.alt}`); // if the image fails to load, use the default avatar
+        setSrc(`https://avatar.vercel.sh/${encodeURIComponent(props.alt)}`); // if the image fails to load, use the default avatar
       }}
+      unoptimized
     />
   );
 }
diff --git a/components/shared/blur-image.tsx b/components/shared/blur-image.tsx
diff --git a/components/ui/devices.tsx b/components/ui/devices.tsx
@@ -0,0 +1,108 @@
+// Thanks to Steven Tey for the original code: https://github.com/dubinc/dub/blob/652f17677828c5a9d5d354841b0bfba5fe63c7a8/apps/web/ui/shared/icons/devices.tsx
+
+export function Chrome({ className }: { className: string }) {
+  return (
+    <svg viewBox="0 0 100 100" className={className}>
+      <linearGradient
+        id="b"
+        x1="55.41"
+        x2="12.11"
+        y1="96.87"
+        y2="21.87"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#1e8e3e" />
+        <stop offset="1" stopColor="#34a853" />
+      </linearGradient>
+      <linearGradient
+        id="c"
+        x1="42.7"
+        x2="86"
+        y1="100"
+        y2="25.13"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#fcc934" />
+        <stop offset="1" stopColor="#fbbc04" />
+      </linearGradient>
+      <linearGradient
+        id="a"
+        x1="6.7"
+        x2="93.29"
+        y1="31.25"
+        y2="31.25"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#d93025" />
+        <stop offset="1" stopColor="#ea4335" />
+      </linearGradient>
+      <path fill="url(#a)" d="M93.29 25a50 50 90 0 0-86.6 0l3 54z" />
+      <path fill="url(#b)" d="M28.35 62.5 6.7 25A50 50 90 0 0 50 100l49-50z" />
+      <path fill="url(#c)" d="M71.65 62.5 50 100a50 50 90 0 0 43.29-75H50z" />
+      <path fill="#fff" d="M50 75a25 25 90 1 0 0-50 25 25 90 0 0 0 50z" />
+      <path
+        fill="#1a73e8"
+        d="M50 69.8a19.8 19.8 90 1 0 0-39.6 19.8 19.8 90 0 0 0 39.6z"
+      />{" "}
+    </svg>
+  );
+}
+
+export function Safari({ className }: { className: string }) {
+  return (
+    <svg className={className} width="66" height="66" viewBox="0 0 66 66">
+      <path
+        fill="#C6C6C6"
+        stroke="#C6C6C6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="0.5"
+        d="M383.29373 211.97671a31.325188 31.325188 0 0 1-31.32519 31.32519 31.325188 31.325188 0 0 1-31.32518-31.32519 31.325188 31.325188 0 0 1 31.32518-31.32519 31.325188 31.325188 0 0 1 31.32519 31.32519z"
+        paintOrder="markers stroke fill"
+        transform="translate(-318.88562 -180.59501)"
+      />
+      <path
+        fill="#4A9DED"
+        d="M380.83911 211.97671a28.870571 28.870571 0 0 1-28.87057 28.87057 28.870571 28.870571 0 0 1-28.87057-28.87057 28.870571 28.870571 0 0 1 28.87057-28.87057 28.870571 28.870571 0 0 1 28.87057 28.87057z"
+        paintOrder="markers stroke fill"
+        transform="translate(-318.88562 -180.59501)"
+      />
+      <path
+        fill="#ff5150"
+        d="m36.3834003 34.83806178-6.60095092-6.91272438 23.41607429-15.75199774z"
+        paintOrder="markers stroke fill"
+      />
+      <path
+        fill="#f1f1f1"
+        d="m36.38339038 34.83805895-6.60095092-6.91272438-16.81512624 22.66471911z"
+        paintOrder="markers stroke fill"
+      />
+      <path
+        d="m12.96732 50.59006 23.41607-15.75201 16.81513-22.66472z"
+        opacity=".243"
+      />
+    </svg>
+  );
+}
+
+export function Apple({ className }: { className: string }) {
+  return (
+    <svg
+      viewBox="0 0 2048 2048"
+      width="2048px"
+      height="2048px"
+      className={className}
+    >
+      <path
+        fill="#424242"
+        fillRule="nonzero"
+        d="M1318.64 413.756c-14.426,44.2737 -37.767,85.3075 -65.8997,119.436l0 0.0625985c-28.3855,34.324 -66.3012,64.6713 -108.482,84.7926 -38.713,18.4665 -81.1489,28.4114 -123.377,25.1197l-12.9236 -1.00748 -1.70197 -12.8681c-5.48622,-41.4992 0.849213,-83.5099 14.1921,-122.387 15.5268,-45.241 40.6772,-86.5205 67.6642,-117.8l-0.00472441 -0.00472441c27.9272,-32.7142 65.3788,-61.1776 105.487,-81.8009 40.2437,-20.6941 83.465,-33.6343 122.803,-35.237l14.8701 -0.605906 1.62992 14.8559c4.76457,43.4481 -1.02992,86.8489 -14.2571,127.445z"
+      />
+      <path
+        fill="#424242"
+        fillRule="nonzero"
+        d="M1592.05 804.067c-14.2559,8.82048 -152.045,94.0808 -150.337,265.937 1.80236,207.182 177.474,279.003 187.171,282.966l0.0625985 0 0.419292 0.173622 13.7835 5.70709 -4.72087 14.1047c-0.279921,0.836221 0.0377953,-0.0531496 -0.370866,1.25906 -4.48229,14.361 -34.8685,111.708 -103.511,212.014 -31.1481,45.4985 -62.8831,90.9284 -100.352,125.971 -38.7957,36.2823 -83.1024,60.7737 -137.837,61.7906 -51.5894,0.968505 -85.3642,-13.6453 -120.474,-28.8366 -33.4784,-14.4862 -68.2949,-29.5524 -122.779,-29.5524 -57.2339,0 -93.8198,15.5858 -129.06,30.6 -33.1725,14.1319 -65.2548,27.7996 -111.474,29.6433l-0.0625985 0c-53.3693,1.98189 -99.6485,-24.0343 -140.778,-62.5678 -39.3496,-36.8646 -73.8249,-85.1398 -105.241,-130.579 -70.917,-102.399 -132.592,-251.392 -151.647,-402.892 -15.6732,-124.616 -2.57244,-251.206 57.6756,-355.753 33.6331,-58.4953 80.6398,-106.233 135.598,-139.543 54.7075,-33.1571 117.299,-52.0264 182.451,-53.0032l0 -0.0011811c57.0402,-1.03465 110.823,20.3091 157.884,38.9847 33.3059,13.2165 62.98,24.9933 85.226,24.9933 19.6536,0 48.6237,-11.4224 82.3949,-24.737 57.0367,-22.487 126.815,-49.9949 200.599,-42.6579 30.9862,1.34764 95.5265,8.76969 161.501,44.524 42.0284,22.7776 84.6579,56.9741 119.701,108.261l9.23977 13.5248 -13.8024 8.91261c-0.73819,0.477166 -0.0200788,-0.00944883 -1.25906,0.755906z"
+      />
+    </svg>
+  );
+}
diff --git a/components/user-agent-icon.tsx b/components/user-agent-icon.tsx
@@ -0,0 +1,80 @@
+import {
+  Gamepad2Icon,
+  MonitorIcon,
+  SmartphoneIcon,
+  TabletSmartphoneIcon,
+  TvIcon,
+  WatchIcon,
+} from "lucide-react";
+
+import { BlurImage } from "@/components/blur-image";
+import { Apple, Chrome, Safari } from "@/components/ui/devices";
+
+export default function UAIcon({
+  display,
+  type,
+  className,
+}: {
+  display: string;
+  type: "devices" | "browsers" | "os";
+  className: string;
+}) {
+  if (type === "devices") {
+    switch (display) {
+      case "Desktop":
+        return <MonitorIcon className={className} />;
+      case "Mobile":
+        return <SmartphoneIcon className={className} />;
+      case "Tablet":
+        return <TabletSmartphoneIcon className={className} />;
+      case "Wearable":
+        return <WatchIcon className={className} />;
+      case "Console":
+        return <Gamepad2Icon className={className} />;
+      case "Smarttv":
+        return <TvIcon className={className} />;
+      default:
+        return <MonitorIcon className={className} />;
+    }
+  } else if (type === "browsers") {
+    if (display === "Chrome") {
+      return <Chrome className={className} />;
+    } else if (display === "Safari" || display === "Mobile Safari") {
+      return <Safari className={className} />;
+    } else {
+      return (
+        <BlurImage
+          src={`https://faisalman.github.io/ua-parser-js/images/browsers/${display.toLowerCase()}.png`}
+          alt={display}
+          width={20}
+          height={20}
+          className={className}
+        />
+      );
+    }
+  } else if (type === "os") {
+    if (display === "Mac OS" || display === "iOS") {
+      return <Apple className="-mx-1 h-5 w-5" />;
+    } else {
+      return (
+        <BlurImage
+          src={`https://faisalman.github.io/ua-parser-js/images/os/${display.toLowerCase()}.png`}
+          alt={display}
+          width={30}
+          height={20}
+          className="h-4 w-5"
+        />
+      );
+    }
+  } else {
+    return (
+      <BlurImage
+        src={`https://faisalman.github.io/ua-parser-js/images/companies/default.png`}
+        alt={display}
+        width={20}
+        height={20}
+        className={className}
+      />
+    );
+  }
+}
diff --git a/components/visitors/visitor-useragent.tsx b/components/visitors/visitor-useragent.tsx
@@ -0,0 +1,37 @@
+import ErrorPage from "next/error";
+
+import { useVisitorUserAgent } from "@/lib/swr/use-stats";
+
+import UAIcon from "../user-agent-icon";
+
+export default function VisitorUserAgent({ viewId }: { viewId: string }) {
+  const { userAgent, error } = useVisitorUserAgent(viewId);
+
+  if (error && error.status === 404) {
+    return <ErrorPage statusCode={404} />;
+  }
+
+  if (!userAgent) {
+    return <div>Loading...</div>;
+  }
+
+  const { device, browser, os } = userAgent;
+
+  return (
+    <div className="pb-0.5 pl-0.5 md:pb-1 md:pl-1">
+      <div className="flex items-center">
+        <div className="flex items-center gap-x-1 px-1">
+          <UAIcon display={device} type="devices" className="size-4" /> {device}
+          ,
+        </div>
+        <div className="flex items-center gap-x-1 px-1">
+          <UAIcon display={browser} type="browsers" className="size-4" />{" "}
+          {browser},
+        </div>
+        <div className="flex items-center gap-x-1 px-1">
+          <UAIcon display={os} type="os" className="size-4" /> {os}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/visitors/visitors-table.tsx b/components/visitors/visitors-table.tsx
@@ -46,6 +46,7 @@ import {
 } from "../ui/pagination";
 import { VisitorAvatar } from "./visitor-avatar";
 import VisitorChart from "./visitor-chart";
+import VisitorUserAgent from "./visitor-useragent";
 
 export default function VisitorsTable({ numPages }: { numPages: number }) {
   const [currentPage, setCurrentPage] = useState<number>(1);
@@ -198,6 +199,9 @@ export default function VisitorsTable({ numPages }: { numPages: number }) {
                       <>
                         <TableRow className="hover:bg-transparent">
                           <TableCell colSpan={5}>
+                            {!isFreePlan ? (
+                              <VisitorUserAgent viewId={view.id} />
+                            ) : null}
                             <VisitorChart
                               documentId={view.documentId!}
                               viewId={view.id}
diff --git a/components/web/alternatives/digifytext.tsx b/components/web/alternatives/digifytext.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-import BlurImage from "@/components/blur-image";
+import { BlurImage } from "@/components/blur-image";
 import { Button } from "@/components/ui/button";
 
 const DigifyAlternatives = () => {
diff --git a/components/web/alternatives/docsendtext.tsx b/components/web/alternatives/docsendtext.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-import BlurImage from "@/components/blur-image";
+import { BlurImage } from "@/components/blur-image";
 import { Button } from "@/components/ui/button";
 
 const DocSendAlternatives = () => {
diff --git a/lib/swr/use-stats.ts b/lib/swr/use-stats.ts
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { useTeam } from "@/context/team-context";
 import { View } from "@prisma/client";
 import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
 
 import { fetcher } from "@/lib/utils";
 
@@ -80,3 +81,31 @@ export function useVisitorStats(viewId: string) {
     error,
   };
 }
+
+export function useVisitorUserAgent(viewId: string) {
+  const router = useRouter();
+  const teamInfo = useTeam();
+
+  const { id: documentId } = router.query as {
+    id: string;
+  };
+
+  const { data: userAgent, error } = useSWRImmutable<{
+    country: string;
+    city: string;
+    os: string;
+    browser: string;
+    device: string;
+  }>(
+    documentId &&
+      viewId &&
+      `/api/teams/${teamInfo?.currentTeam?.id}/documents/${documentId}/views/${viewId}/user-agent`,
+    fetcher,
+  );
+
+  return {
+    userAgent,
+    loading: !error && !userAgent,
+    error,
+  };
+}
diff --git a/lib/tinybird/README.md b/lib/tinybird/README.md
@@ -0,0 +1,7 @@
+## Add new pipes to Tinybird
+
+So you added a new pipe to Tinybird and want to push that to the server.
+
+```sh
+tb push lib/tinybird/endpoints/<PIPENAME>.pipe
+```
diff --git a/lib/tinybird/endpoints/get_useragent_per_view.pipe b/lib/tinybird/endpoints/get_useragent_per_view.pipe
diff --git a/lib/tinybird/pipes.ts b/lib/tinybird/pipes.ts
diff --git a/next.config.mjs b/next.config.mjs
diff --git a/pages/api/teams/[teamId]/documents/[id]/views/[viewId]/user-agent.ts b/pages/api/teams/[teamId]/documents/[id]/views/[viewId]/user-agent.ts
diff --git a/public/_static/macos.png b/public/_static/macos.png
