standardized LinkPreview implementation, finalized changes

tonywhite11 · Sep 5, 2023 · 4b45041 · 4b45041
1 parent 41fcb59
commit 4b45041
Show file tree

Hide file tree

Showing 14 changed files with 292 additions and 321 deletions.
diff --git a/app/dub.co/tools/inspect/content.tsx b/app/dub.co/tools/inspect/content.tsx
diff --git a/app/dub.co/tools/inspect/launch.tsx b/app/dub.co/tools/inspect/launch.tsx
diff --git a/app/dub.co/tools/inspect/page.tsx b/app/dub.co/tools/inspect/page.tsx
diff --git a/app/dub.co/tools/inspector/form.tsx b/app/dub.co/tools/inspector/form.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Link2 } from "lucide-react";
+
+export default function LinkInspectorForm() {
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        window.open(`${e.currentTarget.url.value}+`, "_blank");
+      }}
+    >
+      <div className="relative flex items-center">
+        <Link2 className="absolute inset-y-0 left-0 my-2 ml-3 w-5 text-gray-400" />
+        <input
+          name="url"
+          type="url"
+          placeholder="https://dub.sh/github"
+          autoComplete="off"
+          required
+          className="peer block w-full rounded-md border-gray-300 pl-10 pr-12 text-sm text-gray-900 placeholder-gray-300 focus:border-gray-500 focus:outline-none focus:ring-gray-500"
+        />
+        <button className="absolute inset-y-0 right-0 my-1.5 mr-1.5 flex w-10 items-center justify-center rounded border border-gray-200 font-sans text-sm font-medium text-gray-400 hover:border-gray-700 hover:text-gray-700 peer-focus:text-gray-700">
+          ↗
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/app/dub.co/tools/inspector/page.tsx b/app/dub.co/tools/inspector/page.tsx
@@ -0,0 +1,63 @@
+import Background from "#/ui/home/background";
+import { constructMetadata } from "#/lib/utils";
+import LinkInspectorForm from "./form";
+import { Photo } from "@/components/shared/icons";
+import LinkPreview from "#/ui/home/link-preview";
+import Link from "next/link";
+import BlurImage from "#/ui/blur-image";
+
+export const metadata = constructMetadata({
+  title: "Link Inspector - Inspect a Short Link on Dub to Make Sure It's Safe",
+  description:
+    "Dub's Link Inspector is a simple tool for inspecting short links on Dub to make sure it's safe to click on. If you think this link is malicious, please report it.",
+});
+
+export default function LinkInspector() {
+  return (
+    <>
+      <div className="mx-2 my-10 flex max-w-md flex-col space-y-5 px-2.5 text-center sm:mx-auto sm:max-w-lg sm:px-0 lg:mb-16">
+        <h1 className="font-display text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl sm:leading-[1.15]">
+          Link Inspector
+        </h1>
+        <h2 className="text-lg text-gray-600 sm:text-xl">
+          Inspect a short link on Dub to make sure it's safe to click on. If you
+          think this link is malicious, please report it.
+        </h2>
+        <LinkInspectorForm />
+        <a
+          href="/changelog/link-inspector"
+          target="_blank"
+          className="relative overflow-hidden rounded-md border border-gray-300 bg-gray-50"
+        >
+          <BlurImage
+            src="https://d2vwwcvoksz7ty.cloudfront.net/changelog/link-inspector.png"
+            alt="Link Inspector OG image"
+            width={1071}
+            height={630}
+            className="h-[250px] w-full border-b border-gray-300 object-cover"
+          />
+
+          <div className="grid gap-1 bg-white p-3 text-left">
+            <p className="text-sm text-[#536471]">dub.co</p>
+            <h3 className="truncate text-sm font-medium text-[#0f1419]">
+              Link Inspector
+            </h3>
+            <p className="line-clamp-2 text-sm text-[#536471]">
+              You can now inspect short links on Dub by adding a '+' to the end
+              of the short link.
+            </p>
+          </div>
+        </a>
+        <a
+          href="/changelog/link-inspector"
+          rel="noreferrer"
+          target="_blank"
+          className="mx-auto mt-2 flex items-center justify-center space-x-2 text-sm text-gray-500 transition-all hover:text-black"
+        >
+          Read the changelog →
+        </a>
+      </div>
+      <Background />
+    </>
+  );
+}
diff --git a/app/dub.co/tools/metatags/content.tsx b/app/dub.co/tools/metatags/content.tsx
@@ -1,24 +1,19 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useState } from "react";
 import { useDebounce } from "use-debounce";
 import useSWR from "swr";
-import { Copy, Photo, Tick } from "@/components/shared/icons";
-import { LoadingCircle } from "#/ui/icons";
-import { fetcher, getDomainWithoutWWW, getUrlFromString } from "#/lib/utils";
+import { Copy, Tick } from "@/components/shared/icons";
+import { fetcher, getUrlFromString } from "#/lib/utils";
 import { toast } from "sonner";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 
 export default function MetatagsContent() {
-  const router = useRouter();
   const searchParams = useSearchParams();
   const url = searchParams?.get("url") || "https://github.com/steven-tey/dub";
   const [debouncedUrl] = useDebounce(getUrlFromString(url), 500);
-  const hostname = useMemo(() => {
-    return getDomainWithoutWWW(debouncedUrl || "");
-  }, [debouncedUrl]);
 
-  const { data, isValidating } = useSWR<{
+  const { data } = useSWR<{
     title: string | null;
     description: string | null;
     image: string | null;
@@ -30,78 +25,8 @@ export default function MetatagsContent() {
 
   const [copied, setCopied] = useState(false);
 
-  const inputRef = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    inputRef.current?.select();
-  }, []);
-
   return (
     <>
-      <div className="w-full rounded-md shadow-sm">
-        <input
-          ref={inputRef}
-          name="url"
-          id="url"
-          type="url"
-          autoFocus
-          className="block w-full rounded-md border-gray-300 text-sm text-gray-900 placeholder-gray-300 focus:border-gray-500 focus:outline-none focus:ring-gray-500"
-          placeholder="Enter your URL"
-          defaultValue={url}
-          onChange={(e) =>
-            router.replace(
-              `/tools/metatags${
-                e.target.value.length > 0 ? `?url=${e.target.value}` : ""
-              }`,
-            )
-          }
-          aria-invalid="true"
-        />
-      </div>
-
-      <div className="relative overflow-hidden rounded-md border border-gray-300 bg-gray-50">
-        {isValidating && (
-          <div className="absolute flex h-[250px] w-full flex-col items-center justify-center space-y-4 border-b border-gray-300 bg-gray-50">
-            <LoadingCircle />
-          </div>
-        )}
-        {image ? (
-          <img
-            src={image}
-            alt="Preview"
-            className="h-[250px] w-full border-b border-gray-300 object-cover"
-          />
-        ) : (
-          <div className="flex h-[250px] w-full flex-col items-center justify-center space-y-4 border-b border-gray-300">
-            <Photo className="h-8 w-8 text-gray-400" />
-            <p className="text-sm text-gray-400">
-              Enter a link to generate a preview.
-            </p>
-          </div>
-        )}
-        <div className="grid gap-1 bg-white p-3 text-left">
-          {hostname ? (
-            <p className="text-sm text-[#536471]">{hostname}</p>
-          ) : (
-            <div className="mb-1 h-4 w-24 rounded-md bg-gray-100" />
-          )}
-          {title ? (
-            <h3 className="truncate text-sm font-medium text-[#0f1419]">
-              {title}
-            </h3>
-          ) : (
-            <div className="mb-1 h-4 w-full rounded-md bg-gray-100" />
-          )}
-          {description ? (
-            <p className="line-clamp-2 text-sm text-[#536471]">{description}</p>
-          ) : (
-            <div className="grid gap-2">
-              <div className="h-4 w-full rounded-md bg-gray-100" />
-              <div className="h-4 w-48 rounded-md bg-gray-100" />
-            </div>
-          )}
-        </div>
-      </div>
-
       <button
         className="hover:bg/black-[0.08] group relative flex cursor-copy items-center space-x-5 rounded-full bg-black/5 py-2.5 pl-5 pr-3 transition-all"
         onClick={() => {

diff --git a/app/dub.co/tools/metatags/page.tsx b/app/dub.co/tools/metatags/page.tsx
@@ -4,6 +4,7 @@ import Background from "#/ui/home/background";
 import LaunchTweet from "./launch";
 import MetatagsContent from "./content";
 import { constructMetadata } from "#/lib/utils";
+import LinkPreview from "#/ui/home/link-preview";
 
 export const metadata = constructMetadata({
   title: "Metatags API - The Free API to Get Meta Tags from a URL",
@@ -14,7 +15,7 @@ export const metadata = constructMetadata({
 export default function Metatags() {
   return (
     <>
-      <div className="z-10 mx-2 my-10 flex max-w-md flex-col space-y-5 px-2.5 text-center sm:mx-auto sm:max-w-lg sm:px-0 lg:mb-28">
+      <div className="mx-2 my-10 flex max-w-md flex-col space-y-5 px-2.5 text-center sm:mx-auto sm:max-w-lg sm:px-0 lg:mb-28">
         <a
           href="https://twitter.com/dubdotco/status/1595459224498233347"
           target="_blank"
@@ -38,6 +39,7 @@ export default function Metatags() {
           and open-source.
         </h2>
 
+        <LinkPreview />
         <MetatagsContent />
 
         <a