added report abuse button, upgraded next to canary

Author: steven-tey

app/[domain]/layout.tsx

@@ -2,7 +2,8 @@ import Image from "next/image";
 import Link from "next/link";
 import { ReactNode } from "react";
 import prisma from "@/lib/prisma";
-import CTA from "./cta";
+import CTA from "@/components/cta";
+import ReportAbuse from "@/components/report-abuse";
 import { notFound, redirect } from "next/navigation";
 import { getSiteData } from "@/lib/fetchers";
 import { fontMapper } from "@/styles/fonts";
@@ -125,8 +126,11 @@ export default async function SiteLayout({
 
       <div className="mt-20">{children}</div>
 
-      {params.domain == `demo.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}` && (
+      {params.domain == `demo.vercel.pub` ||
+      params.domain == `platformize.co` ? (
         <CTA />
+      ) : (
+        <ReportAbuse />
       )}
     </div>
   );

app/[domain]/cta.tsx components/cta.tsxapp/[domain]/cta.tsx renamed to components/cta.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import clsx from "clsx";
+import { AlertTriangle } from "lucide-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { experimental_useFormStatus as useFormStatus } from "react-dom";
+import LoadingDots from "./icons/loading-dots";
+import va from "@vercel/analytics";
+import { toast } from "sonner";
+
+export default function ReportAbuse() {
+  const [open, setOpen] = useState(false);
+  const { domain, slug } = useParams() as { domain: string; slug?: string };
+  const url = slug ? `https://${domain}/${slug}` : `https://${domain}`;
+
+  return (
+    <div className="fixed bottom-5 right-5">
+      <button
+        className="rounded-full bg-black p-4 text-white shadow-lg transition-all hover:-translate-y-1 hover:shadow-2xl active:translate-y-0 active:shadow-sm"
+        onClick={() => setOpen(!open)}
+      >
+        <AlertTriangle size={24} />
+      </button>
+      {open && (
+        <form
+          action={async (formData) => {
+            const url = formData.get("url") as string;
+            va.track("Reported Abuse", { url });
+            // artificial 1s delay
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            setOpen(false);
+            toast.success(
+              "Successfully reported abuse – thank you for helping us keep the internet safe!",
+            );
+          }}
+          className="absolute bottom-20 right-2 flex w-96 flex-col space-y-6 rounded-lg border border-stone-200 bg-white p-8 shadow-lg animate-in slide-in-from-bottom-5"
+        >
+          <div>
+            <h2 className="font-cal text-xl leading-7 text-stone-900">
+              Report Abuse
+            </h2>
+            <p className="mt-2 text-sm leading-6 text-stone-600">
+              Found a site with abusive content? Let us know!
+            </p>
+          </div>
+
+          <div>
+            <label
+              htmlFor="domain"
+              className="block text-sm font-medium leading-6 text-stone-900"
+            >
+              URL to report
+            </label>
+            <div className="mt-2">
+              <input
+                type="text"
+                name="url"
+                id="url"
+                readOnly
+                value={url}
+                className="block w-full cursor-not-allowed rounded-md border border-stone-200 bg-stone-100 py-1.5 text-stone-900 shadow-sm ring-0 focus:outline-none sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <SubmitButton />
+        </form>
+      )}
+    </div>
+  );
+}
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+  return (
+    <button
+      className={clsx(
+        "h flex h-8 w-full items-center justify-center space-x-2 rounded-md border text-sm transition-all focus:outline-none sm:h-10",
+        pending
+          ? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400"
+          : "border-black bg-black text-white hover:bg-white hover:text-black",
+      )}
+      disabled={pending}
+    >
+      {pending ? <LoadingDots color="#808080" /> : <p>Report Abuse</p>}
+    </button>
+  );
+}

components/report-abuse.tsx

@@ -159,7 +159,6 @@ export const updateSite = withSiteAuth(
             ...(blurhash && { imageBlurhash: blurhash }),
           },
         });
-        return url;
       } else {
         response = await prisma.site.update({
           where: {
@@ -328,7 +327,6 @@ export const updatePostMetadata = withPostAuth(
             imageBlurhash: blurhash,
           },
         });
-        return url;
       } else {
         response = await prisma.post.update({
           where: {

lib/actions.ts

@@ -39,7 +39,7 @@
     "js-cookie": "^3.0.1",
     "lucide-react": "^0.244.0",
     "nanoid": "^4.0.2",
-    "next": "https://files-qj8sttfe2-vtest314-ijjk-testing.vercel.app/next-v13.4.8-canary.13.tgz",
+    "next": "13.4.8-canary.14",
     "next-auth": "4.22.1",
     "next-mdx-remote": "^4.4.1",
     "openai-edge": "^1.1.0",