npm - create-lx2-app - Versions diffs - 0.7.1 → 0.8.0 - Mend

create-lx2-app 0.7.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/template/packages/src/app/page/with-authjs-drizzle.tsx ADDED Viewed

@@ -0,0 +1,222 @@
+import { fileURLToPath } from "url"
+import { eq } from "drizzle-orm"
+import { revalidatePath } from "next/cache"
+import { auth, signIn, signOut } from "@/server/auth"
+import { db } from "@/server/db"
+import { post as postTable } from "@/server/db/schema"
+export default async function HomePage() {
+  const session = await auth()
+  const user = session?.user
+  const posts = await db.query.post.findMany()
+  const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
+  return (
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+      <header className="ml-auto">
+        {user ? (
+          <button
+            onClick={async () => {
+              "use server"
+              await signOut()
+            }}
+            className="cursor-pointer rounded-md bg-rose-400 px-4 py-2"
+          >
+            Sign Out
+          </button>
+        ) : (
+          <button
+            onClick={async () => {
+              "use server"
+              await signIn("discord")
+            }}
+            className="cursor-pointer rounded-md bg-purple-400 px-4 py-2"
+          >
+            Sign In
+          </button>
+        )}
+      </header>
+      <div className="flex grow flex-col items-center justify-center">
+        {/* Logo */}
+        <picture className="relative">
+          <div className="absolute inset-0 animate-pulse rounded-xl bg-gradient-to-r from-purple-500 to-cyan-500 opacity-20 blur-xl dark:from-purple-800 dark:to-cyan-800" />
+          <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true" />
+          <img
+            src="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true"
+            alt="Logo"
+            width={65}
+            height={65}
+            className="block h-auto max-w-full"
+          />
+        </picture>
+        {user ? (
+          <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
+            Welcome, <span className="capitalize">{user.name}</span>!
+          </h1>
+        ) : (
+          <>
+            <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
+              Lx2 Next.js App
+            </h1>
+            <p className="mt-4 text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
+              Build modern web applications with today&apos;s most popular tools
+            </p>
+          </>
+        )}
+        <div className="mt-12 flex items-center gap-3">
+          <a
+            href="https://create.lx2.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
+          >
+            Website
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+          <a
+            href="https://create.lx2.dev/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
+          >
+            Docs
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+          <a
+            href="https://github.com/SlickYeet/create-lx2-app"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
+          >
+            GitHub
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+        </div>
+        <div className="mt-12 flex flex-col items-center gap-3">
+          <div className="mb-4">
+            <h1 className="mb-4 text-center">
+              <span className="text-2xl text-neutral-700 dark:text-neutral-300">
+                Posts {posts.length}
+              </span>
+            </h1>
+            {user ? (
+              <form
+                action={async (formData: FormData) => {
+                  "use server"
+                  if (!user) throw new Error("Unauthorized")
+                  const name =
+                    formData.get("name")?.toString() ||
+                    `New Post ${posts.length + 1}`
+                  await db.insert(postTable).values({ name })
+                  revalidatePath("/")
+                }}
+              >
+                <input
+                  type="text"
+                  name="name"
+                  placeholder="New Post"
+                  className="h-8 rounded-md border border-neutral-300 px-2 outline-none dark:border-neutral-700 dark:bg-neutral-800"
+                />
+                <button
+                  type="submit"
+                  className="ml-2 size-8 cursor-pointer rounded-md bg-neutral-200 outline-none hover:opacity-80 focus:opacity-80 dark:bg-neutral-800"
+                >
+                  +
+                </button>
+              </form>
+            ) : (
+              <p className="text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
+                Sign in to create posts
+              </p>
+            )}
+          </div>
+          <div className="grid w-full grid-cols-1 gap-2 space-y-2 sm:grid-cols-2">
+            {posts.map((post) => (
+              <div
+                key={post.id}
+                className="flex h-10 max-w-40 items-center rounded-md bg-neutral-200 px-2 py-1 dark:bg-neutral-800"
+              >
+                <span className="truncate text-sm text-neutral-700 dark:text-neutral-300">
+                  {post.name}
+                </span>
+                {user && (
+                  <form
+                    action={async () => {
+                      "use server"
+                      if (!user) throw new Error("Unauthorized")
+                      await db
+                        .delete(postTable)
+                        .where(eq(postTable.id, post.id))
+                      revalidatePath("/")
+                    }}
+                    className="ml-auto"
+                  >
+                    <button
+                      type="submit"
+                      className="ml-2 cursor-pointer rounded-md text-rose-500 outline-none hover:opacity-80 focus:opacity-80"
+                    >
+                      x
+                    </button>
+                  </form>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-1 text-sm text-neutral-600 lg:flex-row lg:gap-2 dark:text-neutral-400">
+        <p className="m-0">Get started by editing </p>
+        <a
+          href={fileURL}
+          className="rounded-md bg-neutral-200 px-2 py-1 dark:bg-neutral-800"
+        >
+          <code>src/app/page.tsx</code>
+        </a>
+      </div>
+    </main>
+  )
+}

package/template/packages/src/app/page/with-authjs-prisma.tsx CHANGED Viewed

@@ -42,9 +42,9 @@ export default async function HomePage() {
         {/* Logo */}
         <picture className="relative">
           <div className="absolute inset-0 animate-pulse rounded-xl bg-gradient-to-r from-purple-500 to-cyan-500 opacity-20 blur-xl dark:from-purple-800 dark:to-cyan-800" />
-          <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/public/logo.light.png?raw=true" />
+          <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true" />
           <img
-            src="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/public/logo.light.png?raw=true"
+            src="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true"
             alt="Logo"
             width={65}
             height={65}
@@ -52,12 +52,20 @@ export default async function HomePage() {
           />
         </picture>
-        <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
-          Lx2 Next.js App
-        </h1>
-        <p className="mt-4 text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
-          Build modern web applications with today&apos;s most popular tools
-        </p>
+        {user ? (
+          <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
+            Welcome, <span className="capitalize">{user.name}</span>!
+          </h1>
+        ) : (
+          <>
+            <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
+              Lx2 Next.js App
+            </h1>
+            <p className="mt-4 text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
+              Build modern web applications with today&apos;s most popular tools
+            </p>
+          </>
+        )}
         <div className="mt-12 flex items-center gap-3">
           <a
@@ -124,7 +132,7 @@ export default async function HomePage() {
               </span>
             </h1>
-            {user && (
+            {user ? (
               <form
                 action={async (formData: FormData) => {
                   "use server"
@@ -163,6 +171,10 @@ export default async function HomePage() {
                   +
                 </button>
               </form>
+            ) : (
+              <p className="text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
+                Sign in to create posts
+              </p>
             )}
           </div>

package/template/packages/src/app/page/with-authjs.tsx CHANGED Viewed

@@ -38,9 +38,9 @@ export default async function HomePage() {
         {/* Logo */}
         <picture className="relative">
           <div className="absolute inset-0 animate-pulse rounded-xl bg-gradient-to-r from-purple-500 to-cyan-500 opacity-20 blur-xl dark:from-purple-800 dark:to-cyan-800" />
-          <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/public/logo.light.png?raw=true" />
+          <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true" />
           <img
-            src="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/public/logo.light.png?raw=true"
+            src="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true"
             alt="Logo"
             width={65}
             height={65}
@@ -48,12 +48,20 @@ export default async function HomePage() {
           />
         </picture>
-        <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
-          Lx2 Next.js App
-        </h1>
-        <p className="mt-4 text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
-          Build modern web applications with today&apos;s most popular tools
-        </p>
+        {user ? (
+          <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
+            Welcome, <span className="capitalize">{user.name}</span>!
+          </h1>
+        ) : (
+          <>
+            <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
+              Lx2 Next.js App
+            </h1>
+            <p className="mt-4 text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
+              Build modern web applications with today&apos;s most popular tools
+            </p>
+          </>
+        )}
         <div className="mt-12 flex items-center gap-3">
           <a

package/template/packages/src/app/page/with-better-auth-drizzle.tsx ADDED Viewed

@@ -0,0 +1,234 @@
+import { fileURLToPath } from "url"
+import { eq } from "drizzle-orm"
+import { revalidatePath } from "next/cache"
+import { headers } from "next/headers"
+import { redirect } from "next/navigation"
+import { auth } from "@/server/auth"
+import { db } from "@/server/db"
+import { post as postTable } from "@/server/db/schema"
+export default async function HomePage() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  })
+  const user = session?.user
+  const posts = await db.query.post.findMany()
+  const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
+  return (
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+      <header className="ml-auto">
+        {user ? (
+          <button
+            onClick={async () => {
+              "use server"
+              await auth.api.signOut({
+                headers: await headers(),
+              })
+            }}
+            className="cursor-pointer rounded-md bg-rose-400 px-4 py-2"
+          >
+            Sign Out
+          </button>
+        ) : (
+          <button
+            onClick={async () => {
+              "use server"
+              const response = await auth.api.signInSocial({
+                body: {
+                  provider: "discord",
+                },
+              })
+              if (!response) {
+                throw new Error("Failed to sign in")
+              }
+              if (response.url) {
+                redirect(response.url)
+              }
+            }}
+            className="cursor-pointer rounded-md bg-purple-400 px-4 py-2"
+          >
+            Sign In
+          </button>
+        )}
+      </header>
+      <div className="flex grow flex-col items-center justify-center">
+        {/* Logo */}
+        <picture className="relative">
+          <div className="absolute inset-0 animate-pulse rounded-xl bg-gradient-to-r from-purple-500 to-cyan-500 opacity-20 blur-xl dark:from-purple-800 dark:to-cyan-800" />
+          <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true" />
+          <img
+            src="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true"
+            alt="Logo"
+            width={65}
+            height={65}
+            className="block h-auto max-w-full"
+          />
+        </picture>
+        {user ? (
+          <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
+            Welcome, <span className="capitalize">{user.name}</span>!
+          </h1>
+        ) : (
+          <>
+            <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
+              Lx2 Next.js App
+            </h1>
+            <p className="mt-4 text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
+              Build modern web applications with today&apos;s most popular tools
+            </p>
+          </>
+        )}
+        <div className="mt-12 flex items-center gap-3">
+          <a
+            href="https://create.lx2.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
+          >
+            Website
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+          <a
+            href="https://create.lx2.dev/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
+          >
+            Docs
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+          <a
+            href="https://github.com/SlickYeet/create-lx2-app"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
+          >
+            GitHub
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+        </div>
+        <div className="mt-12 flex flex-col items-center gap-3">
+          <div className="mb-4">
+            <h1 className="mb-4 text-center">
+              <span className="text-2xl text-neutral-700 dark:text-neutral-300">
+                Posts {posts.length}
+              </span>
+            </h1>
+            {user ? (
+              <form
+                action={async (formData: FormData) => {
+                  "use server"
+                  const name =
+                    formData.get("name")?.toString() ||
+                    `New Post ${posts.length + 1}`
+                  await db.insert(postTable).values({ name })
+                  revalidatePath("/")
+                }}
+              >
+                <input
+                  type="text"
+                  name="name"
+                  placeholder="New Post"
+                  className="h-8 rounded-md border border-neutral-300 px-2 outline-none dark:border-neutral-700 dark:bg-neutral-800"
+                />
+                <button
+                  type="submit"
+                  className="ml-2 size-8 cursor-pointer rounded-md bg-neutral-200 outline-none hover:opacity-80 focus:opacity-80 dark:bg-neutral-800"
+                >
+                  +
+                </button>
+              </form>
+            ) : (
+              <p className="text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
+                Sign in to create posts
+              </p>
+            )}
+          </div>
+          <div className="grid w-full grid-cols-1 gap-2 space-y-2 sm:grid-cols-2">
+            {posts.map((post) => (
+              <div
+                key={post.id}
+                className="flex h-10 max-w-40 items-center rounded-md bg-neutral-200 px-2 py-1 dark:bg-neutral-800"
+              >
+                <span className="truncate text-sm text-neutral-700 dark:text-neutral-300">
+                  {post.name}
+                </span>
+                {user && (
+                  <form
+                    action={async () => {
+                      "use server"
+                      await db
+                        .delete(postTable)
+                        .where(eq(postTable.id, post.id))
+                      revalidatePath("/")
+                    }}
+                    className="ml-auto"
+                  >
+                    <button
+                      type="submit"
+                      className="ml-2 cursor-pointer rounded-md text-rose-500 outline-none hover:opacity-80 focus:opacity-80"
+                    >
+                      x
+                    </button>
+                  </form>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-1 text-sm text-neutral-600 lg:flex-row lg:gap-2 dark:text-neutral-400">
+        <p className="m-0">Get started by editing </p>
+        <a
+          href={fileURL}
+          className="rounded-md bg-neutral-200 px-2 py-1 dark:bg-neutral-800"
+        >
+          <code>src/app/page.tsx</code>
+        </a>
+      </div>
+    </main>
+  )
+}

package/template/packages/src/app/page/with-better-auth-prisma.tsx CHANGED Viewed

@@ -58,9 +58,9 @@ export default async function HomePage() {
         {/* Logo */}
         <picture className="relative">
           <div className="absolute inset-0 animate-pulse rounded-xl bg-gradient-to-r from-purple-500 to-cyan-500 opacity-20 blur-xl dark:from-purple-800 dark:to-cyan-800" />
-          <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/public/logo.light.png?raw=true" />
+          <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true" />
           <img
-            src="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/public/logo.light.png?raw=true"
+            src="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true"
             alt="Logo"
             width={65}
             height={65}
@@ -148,7 +148,7 @@ export default async function HomePage() {
               </span>
             </h1>
-            {user && (
+            {user ? (
               <form
                 action={async (formData: FormData) => {
                   "use server"
@@ -187,6 +187,10 @@ export default async function HomePage() {
                   +
                 </button>
               </form>
+            ) : (
+              <p className="text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
+                Sign in to create posts
+              </p>
             )}
           </div>

package/template/packages/src/app/page/with-better-auth.tsx CHANGED Viewed

@@ -54,9 +54,9 @@ export default async function HomePage() {
         {/* Logo */}
         <picture className="relative">
           <div className="absolute inset-0 animate-pulse rounded-xl bg-gradient-to-r from-purple-500 to-cyan-500 opacity-20 blur-xl dark:from-purple-800 dark:to-cyan-800" />
-          <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/public/logo.light.png?raw=true" />
+          <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true" />
           <img
-            src="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/public/logo.light.png?raw=true"
+            src="https://github.com/SlickYeet/create-lx2-app/blob/main/docs/v1/public/logo.light.png?raw=true"
             alt="Logo"
             width={65}
             height={65}