finalized changes, used edge SSR route, added html-escaper (h/t to @c…

…ramforce for the protip)

components/app/add-link-modal.tsx

@@ -15,6 +15,7 @@ import {
   LoadingCircle,
   AlertCircleFill,
   ChevronRight,
+  UploadCloud,
 } from "@/components/shared/icons";
 import { useDebounce } from "use-debounce";
 import TextareaAutosize from "react-textarea-autosize";
@@ -311,14 +312,27 @@ function AdvancedSettings({ data, setData, debouncedUrl }) {
       fetch(`/api/edge/description?url=${debouncedUrl}`).then(async (res) => {
         if (res.status === 200) {
           const results = await res.json();
-          setData((prev) => ({ ...prev, title: results }));
+          setData((prev) => ({ ...prev, description: results }));
           setGeneratingDescription(false);
         }
       });
     },
     [debouncedUrl]
   );
 
+  const onChangePicture = useCallback(
+    (e) => {
+      const file = e.target.files[0];
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setData((prev) => ({ ...prev, image: e.target.result }));
+      };
+      reader.readAsDataURL(file);
+    },
+    [setData]
+  );
+  console.log(image);
+
   return (
     <div>
       <button
@@ -335,7 +349,7 @@ function AdvancedSettings({ data, setData, debouncedUrl }) {
       </button>
 
       {expanded && (
-        <div className="mt-4">
+        <div className="mt-4 grid gap-5">
           <div>
             <div className="flex justify-between items-center">
               <label
@@ -375,6 +389,39 @@ function AdvancedSettings({ data, setData, debouncedUrl }) {
               />
             </div>
           </div>
+
+          <div>
+            <p className="block text-sm font-medium text-gray-700">OG Image</p>
+            <label
+              htmlFor="image"
+              className="group flex flex-col justify-center items-center mt-1 h-[10.5rem] cursor-pointer rounded-md border border-gray-300 bg-white hover:bg-gray-50 shadow-sm transition-all"
+            >
+              {image ? (
+                <img
+                  src={image}
+                  alt="Preview"
+                  className="object-cover h-full w-full rounded-md hover:brightness-95 transition-all"
+                />
+              ) : (
+                <>
+                  <UploadCloud className="h-7 w-7 text-gray-500 group-hover:scale-110 group-active:scale-95 transition-all duration-75" />
+                  <p className="text-gray-500 text-sm mt-2">
+                    Recommended: 1200 x 627 pixels
+                  </p>
+                  <span className="sr-only">OG Image upload</span>
+                </>
+              )}
+            </label>
+            <div className="flex mt-1 rounded-md shadow-sm">
+              <input
+                id="image"
+                name="image"
+                type="file"
+                className="sr-only"
+                onChange={onChangePicture}
+              />
+            </div>
+          </div>
         </div>
       )}
     </div>

lib/constants.ts

@@ -29,6 +29,7 @@ export const RESERVED_KEYS = [
   "new",
   "info",
   "demo",
+  "proxy",
 ];
 
 export const COUNTRIES: { [key: string]: string } = {

lib/middleware/link.ts

@@ -7,7 +7,7 @@ import { Redis } from "@upstash/redis";
 
 const ratelimit = new Ratelimit({
   redis: Redis.fromEnv(),
-  limiter: Ratelimit.slidingWindow(10, "10 s"),
+  limiter: Ratelimit.slidingWindow(10, "60 s"),
 });
 
 export default async function LinkMiddleware(
@@ -34,11 +34,21 @@ export default async function LinkMiddleware(
       `${hostname}:links`,
       key
     );
-    const target = response?.url;
+    const { url: target, description, image } = response || {};
 
     if (target) {
+      const isBot =
+        url.searchParams.get("bot") ||
+        /bot/i.test(req.headers.get("user-agent"));
+
       ev.waitUntil(recordClick(hostname, req, key)); // increment click count
-      res = NextResponse.redirect(target);
+
+      if (image && description && isBot) {
+        url.pathname = `/proxy/${hostname}/${key}`;
+        res = NextResponse.rewrite(url);
+      } else {
+        res = NextResponse.redirect(target);
+      }
     } else {
       url.pathname = "/";
       res = NextResponse.redirect(url);

lib/upstash.ts

@@ -28,11 +28,15 @@ export async function setKey(
   hostname: string,
   key: string,
   url: string,
-  title?: string
+  title?: string,
+  description?: string, // only for Pro users: customize description
+  image?: string // only for Pro users: customize OG image
 ) {
   return await redis.hsetnx(`${hostname}:links`, key, {
     url,
     title: title || (await getTitleFromUrl(url)),
+    description,
+    image,
     timestamp: Date.now(),
   });
 }
@@ -147,16 +151,16 @@ export async function addLink(
   url: string,
   key?: string, // if key is provided, it will be used
   title?: string, // if title is provided, it will be used
-  description?: string,
-  image?: string,
+  description?: string, // only for Pro users: customize description
+  image?: string, // only for Pro users: customize OG image
   userId?: string // only applicable for dub.sh links
 ) {
   if (hostname === "dub.sh" && key && RESERVED_KEYS.includes(key)) {
     return null; // reserved keys for dub.sh
   }
   const response = key
-    ? await setKey(hostname, key, url, title)
-    : await setRandomKey(hostname, url, title);
+    ? await setKey(hostname, key, url, title, description, image)
+    : await setRandomKey(hostname, url, title); // not possible to add description and image for random keys (only for dub.sh landing page input)
 
   if (response === 1) {
     return await redis.zadd(

lib/utils.ts

@@ -86,6 +86,28 @@ export const getTitleFromUrl = async (url: string) => {
   return title;
 };
 
+export const getDescriptionFromUrl = async (url: string) => {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 2000); // timeout if it takes longer than 2 seconds
+  const description = await fetch(url, { signal: controller.signal })
+    .then((res) => {
+      clearTimeout(timeoutId);
+      return res.text();
+    })
+    .then((body: string) => {
+      let match = body.match(/<meta name="description" content="(.*?)"\/>/g); // regular expression to parse contents of the description meta tag
+      if (!match || typeof match[0] !== "string") return "No description found"; // if no title found, return "No title found"
+      let description = match[0].match(/content="(.*)"\/>/).pop();
+      if (!description) return "No description found";
+      return description;
+    })
+    .catch((err) => {
+      console.log(err);
+      return "No description found"; // if there's an error, return "No title found"
+    });
+  return description;
+};
+
 export const timeAgo = (timestamp: number): string => {
   if (!timestamp) return "never";
   return `${ms(Date.now() - timestamp)} ago`;

middleware.ts

@@ -22,7 +22,10 @@ export const config = {
 
 export default async function middleware(req: NextRequest, ev: NextFetchEvent) {
   const { hostname, key } = parse(req);
-  const home = hostname === "dub.sh" || hostname === "localhost:3000";
+  const home =
+    hostname === "dub.sh" ||
+    hostname === "preview.dub.sh" ||
+    hostname === "localhost:3000";
   const app = hostname === "app.dub.sh" || hostname === "app.localhost:3000";
 
   if (app) {

next.config.js

@@ -7,6 +7,7 @@ module.exports = {
       "avatar.tobi.sh",
       "faisalman.github.io",
       "avatars.dicebear.com",
+      "res.cloudinary.com",
     ],
   },
 };