upd install docs and adjust landing page

app/(protected)/dashboard/urls/url-list.tsx

@@ -46,7 +46,10 @@ import { UrlForm } from "@/components/forms/url-form";
 import { CopyButton } from "@/components/shared/copy-button";
 import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";
 import { Icons } from "@/components/shared/icons";
-import { LinkPreviewer } from "@/components/shared/link-previewer";
+import {
+  LinkInfoPreviewer,
+  LinkPreviewer,
+} from "@/components/shared/link-previewer";
 import { PaginationWrapper } from "@/components/shared/pagination";
 import QRCodeEditor from "@/components/shared/qr";
 
@@ -322,7 +325,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                         )}
                       </TableCell>
                       <TableCell className="col-span-1 flex items-center justify-start sm:col-span-2">
-                        <LinkPreviewer
+                        <LinkInfoPreviewer
                           apiKey={user.apiKey ?? ""}
                           url={short.target}
                           formatUrl={removeUrlSuffix(short.target)}

app/api/v1/scraping/meta/route.ts

@@ -47,9 +47,9 @@ export async function GET(req: Request) {
     const res = await fetch(link);
     if (!res.ok) {
       return Response.json(
-        { statusText: "Failed to fetch url" },
+        { statusText: `Failed to fetch url. ${res.statusText}` },
         {
-          status: 405,
+          status: res.status || 405,
         },
       );
     }

components/sections/hero-landing.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 import Image from "next/image";
 import Link from "next/link";
 
+import { siteConfig } from "@/config/site";
 import { getCurrentUser } from "@/lib/session";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
@@ -16,16 +17,16 @@ export default async function HeroLanding() {
     <section className="custom-bg relative space-y-6 py-12 sm:py-20 lg:py-24">
       <div className="container flex max-w-screen-lg flex-col items-center gap-5 text-center">
         <Link
-          href="/dashboard"
+          href={siteConfig.links.github}
           target="_blank"
           className={cn(
             buttonVariants({ variant: "outline", size: "sm", rounded: "xl" }),
             "px-4",
           )}
         >
-          <span className="mr-3">🎉</span>Email features are&nbsp;
+          <span className="mr-1">🚀</span>Deploy with&nbsp;
           <span className="font-bold" style={{ fontFamily: "Bahamas Bold" }}>
-            available
+            Vercel
           </span>
           &nbsp;now!
         </Link>

components/shared/link-previewer.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import Link from "next/link";
 
+import { MetaScrapingProps } from "@/app/(protected)/dashboard/scrape/scrapes";
+
 import { Skeleton } from "../ui/skeleton";
 import {
   Tooltip,
@@ -87,4 +89,98 @@ export function LinkPreviewer({
     </TooltipProvider>
   );
 }
-0;
+
+export function LinkInfoPreviewer({
+  apiKey,
+  url,
+  formatUrl,
+}: {
+  apiKey: string;
+  url: string;
+  formatUrl: string;
+}) {
+  const placeholdImage = "/_static/illustrations/rocket-crashed.svg";
+  const [metaInfo, setMetaInfo] = useState<MetaScrapingProps>({
+    title: "",
+    description: "",
+    image: "",
+    icon: "",
+    url: "",
+    lang: "",
+    author: "",
+    timestamp: "",
+    payload: "",
+  });
+
+  const handleScrapingInfo = async () => {
+    if (url) {
+      const res = await fetch(`/api/v1/scraping/meta?url=${url}&key=${apiKey}`);
+      if (!res.ok || res.status !== 200) {
+        setMetaInfo({
+          title: url,
+          description: "",
+          image: placeholdImage,
+          icon: "",
+          url: "",
+          lang: "",
+          author: "",
+          timestamp: "",
+          payload: "",
+        });
+      } else {
+        const data = await res.json();
+        setMetaInfo({ ...data, title: data.title || url });
+      }
+    }
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      handleScrapingInfo();
+    }
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={200} onOpenChange={handleOpenChange}>
+        <TooltipTrigger className="w-full hover:text-blue-400 hover:underline">
+          <Link
+            className="flex items-center"
+            target="_blank"
+            href={url}
+            title={url}
+          >
+            <span className="truncate">{formatUrl}</span>
+            <Icons.outLink className="ml-0.5 mt-0.5 size-3 shrink-0" />
+          </Link>
+        </TooltipTrigger>
+        <TooltipContent
+          align="start"
+          className="group flex h-[187px] w-[300px] flex-col items-center justify-center rounded-lg bg-gradient-to-br from-gray-500 to-gray-300 p-0 shadow-inner transition-all duration-200"
+        >
+          <TooltipArrow className="fill-gray-400" />
+          {metaInfo.title ? (
+            <>
+              <BlurImage
+                className="rounded-md border bg-primary-foreground group-hover:scale-95 group-hover:opacity-95"
+                src={metaInfo.image || placeholdImage}
+                alt={`Preview of ${url}`}
+                fill
+              />
+              <div className="absolute bottom-0 w-full rounded-b-md p-2 backdrop-blur">
+                <p className="mb-1 line-clamp-1 text-xs font-semibold text-neutral-600 dark:text-neutral-300">
+                  {metaInfo.title}
+                </p>
+                <p className="line-clamp-1 text-xs text-muted-foreground text-neutral-400 dark:text-neutral-400">
+                  {metaInfo.description}
+                </p>
+              </div>
+            </>
+          ) : (
+            <Skeleton className="h-[187px] w-[300px]" />
+          )}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

config/marketing.ts

@@ -4,10 +4,6 @@ import { siteConfig } from "./site";
 
 export const marketingConfig: MarketingConfig = {
   mainNav: [
-    // {
-    //   title: "OiChat",
-    //   href: siteConfig.links.oichat,
-    // },
     {
       title: "Docs",
       href: "/docs",
@@ -16,13 +12,5 @@ export const marketingConfig: MarketingConfig = {
       title: "Feedback",
       href: siteConfig.links.feedback,
     },
-    {
-      title: "Discord",
-      href: "https://discord.gg/AHPQYuZu3m",
-    },
-    {
-      title: "Pricing",
-      href: "/#pricing",
-    },
   ],
 };

content/docs/developer/quick-start.mdx

@@ -45,6 +45,13 @@ DATABASE_URL=
 
 ### Deploy Postgres
 
+#### Manually install (Recommended)
+
+Via [migration.sql](https://github.com/oiov/wr.do/prisma/migrations/20240705091917_init/migration.sql), 
+copy the sql code to the database to initialize the database schema.
+
+#### or
+
 ```bash
 pnpm postinstall
 pnpm db:push

next.config.js

@@ -8,6 +8,10 @@ const nextConfig = {
   swcMinify: true,
   images: {
     remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
       {
         protocol: "https",
         hostname: "avatars.githubusercontent.com",