feat: add landing page

2023-12-16 17:14:04 +08:00
parent 21a17cb753
commit ef050b5e55
17 changed files with 851 additions and 90 deletions
@@ -4,14 +4,27 @@ import { Button } from "@/components/ui/button";
 import { ClerkProvider, UserButton } from "@clerk/nextjs";
 import { Github } from "lucide-react";
 import type { Metadata } from "next";
+import PlausibleProvider from "next-plausible";
 import { Inter } from "next/font/google";
 import { Toaster } from "sonner";

 const inter = Inter({ subsets: ["latin"] });

+import meta from 'next-gen/config';
+
 export const metadata: Metadata = {
-  title: "Comfy Deploy",
-  description: "Generated by create next app",
+  title: meta['og:title'],
+  description: meta['og:description'],
+
+  category: 'technology',
+
+  openGraph: {
+    type: 'website',
+    title: meta['og:title'],
+    description: meta['og:description'],
+    locale: 'en_US',
+    images: '/og.jpg',
+  },
 };

 export default function RootLayout({
@@ -22,12 +35,17 @@ export default function RootLayout({
  return (
    <html lang="en">
      <ClerkProvider>
+        <head>
+          {process.env.PLAUSIBLE_DOMAIN && (
+            <PlausibleProvider domain={process.env.PLAUSIBLE_DOMAIN} />
+          )}
+        </head>
        <body className={inter.className}>
-          <main className="flex min-h-screen flex-col items-center justify-start">
+          <main className="w-full flex min-h-[100dvh] flex-col items-center justify-start">
            <div className="w-full h-18 flex items-center justify-between gap-4 p-4 border-b border-gray-200">
              <div className="flex flex-row items-center gap-4">
-                <a className="font-bold text-lg hover:underline" href="/">
-                  ComfyUI Deploy
+                <a className="font-bold text-md md:text-lg hover:underline" href="/">
+                  {meta.name}
                </a>
                <NavbarRight />
              </div>
@@ -38,14 +56,17 @@ export default function RootLayout({
                  variant={"outline"}
                  className="rounded-full aspect-square p-2"
                >
-                  <a target="_blank" href="https://github.com/BennyKok/comfyui-deploy">
+                  <a
+                    target="_blank"
+                    href="https://github.com/BennyKok/comfyui-deploy"
+                  >
                    <Github />
                  </a>
                </Button>
              </div>
              {/* <div></div> */}
            </div>
-            <div className="md:px-10 px-6 w-full flex items-start">
+            <div className="md:px-10 px-6 w-full h-full">
              {children}
            </div>
            <Toaster richColors />
@@ -1,77 +1,5 @@
-import { WorkflowList } from "@/components/WorkflowList";
-import { db } from "@/db/db";
-import { usersTable, workflowTable, workflowVersionTable } from "@/db/schema";
-import { auth, clerkClient } from "@clerk/nextjs";
-import { desc, eq } from "drizzle-orm";
+import Main from '@/components/Main';

 export default function Home() {
-  return <WorkflowServer />;
-}
-
-async function WorkflowServer() {
-  const { userId } = await auth();
-
-  if (!userId) {
-    return <div>No auth</div>;
-  }
-
-  const user = await db.query.usersTable.findFirst({
-    where: eq(usersTable.id, userId),
-  });
-
-  if (!user) {
-    await setInitialUserData(userId);
-  }
-
-  const workflow = await db.query.workflowTable.findMany({
-    // extras: {
-    //   count: sql<number>`(select count(*) from ${workflowVersionTable})`.as(
-    //     "count",
-    //   ),
-    // },
-    with: {
-      versions: {
-        limit: 1,
-        orderBy: desc(workflowVersionTable.version),
-      },
-    },
-    orderBy: desc(workflowTable.updated_at),
-    where: eq(workflowTable.user_id, userId),
-  });
-
-  return (
-    <WorkflowList
-      data={workflow.map((x) => {
-        return {
-          id: x.id,
-          email: x.name,
-          amount: x.versions[0]?.version ?? 0,
-          date: x.updated_at,
-        };
-      })}
-    />
-  );
-}
-
-async function setInitialUserData(userId: string) {
-  const user = await clerkClient.users.getUser(userId);
-
-  // incase we dont have username such as google login, fallback to first name + last name
-  const usernameFallback =
-    user.username ?? (user.firstName ?? "") + (user.lastName ?? "");
-
-  // For the display name, if it for some reason is empty, fallback to username
-  let nameFallback = (user.firstName ?? "") + (user.lastName ?? "");
-  if (nameFallback === "") {
-    nameFallback = usernameFallback;
-  }
-
-  const result = await db.insert(usersTable).values({
-    id: userId,
-    // this is used for path, make sure this is unique
-    username: usernameFallback,
-
-    // this is for display name, maybe different from username
-    name: nameFallback,
-  });
-}
+  return <Main />;
+}
@@ -0,0 +1,77 @@
+import { WorkflowList } from "@/components/WorkflowList";
+import { db } from "@/db/db";
+import { usersTable, workflowTable, workflowVersionTable } from "@/db/schema";
+import { auth, clerkClient } from "@clerk/nextjs";
+import { desc, eq } from "drizzle-orm";
+
+export default function Home() {
+  return <WorkflowServer />;
+}
+
+async function WorkflowServer() {
+  const { userId } = await auth();
+
+  if (!userId) {
+    return <div>No auth</div>;
+  }
+
+  const user = await db.query.usersTable.findFirst({
+    where: eq(usersTable.id, userId),
+  });
+
+  if (!user) {
+    await setInitialUserData(userId);
+  }
+
+  const workflow = await db.query.workflowTable.findMany({
+    // extras: {
+    //   count: sql<number>`(select count(*) from ${workflowVersionTable})`.as(
+    //     "count",
+    //   ),
+    // },
+    with: {
+      versions: {
+        limit: 1,
+        orderBy: desc(workflowVersionTable.version),
+      },
+    },
+    orderBy: desc(workflowTable.updated_at),
+    where: eq(workflowTable.user_id, userId),
+  });
+
+  return (
+    <WorkflowList
+      data={workflow.map((x) => {
+        return {
+          id: x.id,
+          email: x.name,
+          amount: x.versions[0]?.version ?? 0,
+          date: x.updated_at,
+        };
+      })}
+    />
+  );
+}
+
+async function setInitialUserData(userId: string) {
+  const user = await clerkClient.users.getUser(userId);
+
+  // incase we dont have username such as google login, fallback to first name + last name
+  const usernameFallback =
+    user.username ?? (user.firstName ?? "") + (user.lastName ?? "");
+
+  // For the display name, if it for some reason is empty, fallback to username
+  let nameFallback = (user.firstName ?? "") + (user.lastName ?? "");
+  if (nameFallback === "") {
+    nameFallback = usernameFallback;
+  }
+
+  const result = await db.insert(usersTable).values({
+    id: userId,
+    // this is used for path, make sure this is unique
+    username: usernameFallback,
+
+    // this is for display name, maybe different from username
+    name: nameFallback,
+  });
+}