auto commit

.vscode/extensions.json

@@ -7,6 +7,7 @@
     "biomejs.biome",
     "dexxiez.shadcn-color-preview",
     "aaron-bond.better-comments",
+    "davidanson.vscode-markdownlint",
     "unifiedjs.vscode-mdx",
     "github.vscode-github-actions"
   ]

@modules/mdx/block.config.json

@@ -0,0 +1,42 @@
+{
+  "name": "mdx",
+  "type": "registry:block",
+  "description": "MDX components including Card, CardGroup, and a Secret Generator.",
+  "registryDependencies": ["button", "input", "fontawesome"],
+  "dependencies": [
+    "@fortawesome/fontawesome-svg-core",
+    "@fortawesome/react-fontawesome",
+    "lucide-react",
+    "mdx/types",
+    "sonner"
+  ],
+  "categories": ["shipkit", "mdx", "ui"],
+  "style": "default",
+  "files": [
+    {
+      "source": "src/config/nextjs/with-mdx.ts",
+      "type": "registry:config",
+      "target": "src/config/nextjs/with-mdx.ts"
+    },
+    {
+      "source": "src/mdx-components.tsx",
+      "type": "registry:page",
+      "target": "src/mdx-components.tsx"
+    },
+    {
+      "source": "src/_components/card.tsx",
+      "type": "registry:page",
+      "target": "src/components/mdx/card.tsx"
+    },
+    {
+      "source": "src/_components/card-group.tsx",
+      "type": "registry:page",
+      "target": "src/components/mdx/card-group.tsx"
+    },
+    {
+      "source": "src/_components/secret-generator.tsx",
+      "type": "registry:page",
+      "target": "src/components/mdx/secret-generator.tsx"
+    }
+  ]
+}

package.json

@@ -30,7 +30,9 @@
     "lint:fix:eslint": "next lint --fix",
     "lint:fix:prettier": "prettier --write \"**/*.{ts,tsx,md,mdx,json}\"",
     "start": "next start",
-    "pull": "node --experimental-strip-types ./scripts/sync-upstream.ts",
+    "upstream:add": "tsx scripts/git-add-upstream.ts",
+    "upstream:pull": "tsx scripts/git-sync-upstream.ts",
+    "pull": "tsx scripts/git-sync-upstream.ts",
     "workers:build": "tsc -p ./tsconfig.workers.json",
     "workers:dev": "concurrently \"npm run workers:build\" \"tsc -p ./tsconfig.workers.json --watch\"",
     "test": "vitest run",
@@ -50,9 +52,6 @@
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
     "@hookform/resolvers": "5.0.1",
-    "@mdx-js/loader": "3.1.0",
-    "@mdx-js/mdx": "^3.1.0",
-    "@mdx-js/react": "3.1.0",
     "@radix-ui/react-accordion": "1.2.4",
     "@radix-ui/react-alert-dialog": "1.1.7",
     "@radix-ui/react-aspect-ratio": "^1.1.3",

src/app/(app)/(authentication)/_components/auth-form.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, type ReactNode, Suspense } from "react";
+
+import { OAuthButtons } from "@/app/(app)/(authentication)/_components/oauth-buttons";
+import { SuspenseFallback } from "@/components/primitives/suspense-fallback";
+import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { routes } from "@/config/routes";
+import { siteConfig } from "@/config/site-config";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+interface AuthFormProps extends ComponentPropsWithoutRef<"div"> {
+	mode: "sign-in" | "sign-up";
+	children?: ReactNode;
+	title?: string;
+	description?: string;
+	withHeader?: boolean;
+	withFooter?: boolean;
+}
+
+export function AuthForm({
+	mode = "sign-in",
+	className,
+	children,
+	title,
+	description,
+	withHeader = true,
+	withFooter = true,
+	...props
+}: AuthFormProps) {
+	const isSignIn = mode === "sign-in";
+	const cardTitle = typeof title === "string" ? title : (isSignIn ? `Welcome to ${siteConfig.name}` : "Create an account");
+	const cardDescription = typeof description === "string" ? description : isSignIn
+		? "Login to get started"
+		: "Sign up to get started";
+	const alternateLink = isSignIn
+		? { text: "Don't have an account?", href: routes.auth.signUp, label: "Sign up" }
+		: { text: "Already have an account?", href: routes.auth.signIn, label: "Sign in" };
+
+	return (
+		<div className={cn("flex flex-col gap-6 overflow-y-auto", className)} {...props}>
+			{withHeader && (
+				<CardHeader className="text-center">
+					<CardTitle className="text-xl">{cardTitle}</CardTitle>
+					<CardDescription>{cardDescription}</CardDescription>
+				</CardHeader>
+			)}
+			<CardContent className="pb-0">
+				<div className="grid gap-6 relative">
+					<OAuthButtons
+						collapsible
+						variant="icons"
+					/>
+
+					<Suspense fallback={<SuspenseFallback />}>
+						{children}
+					</Suspense>
+					<div className="text-center text-sm">
+						{alternateLink.text}{" "}
+						<Link href={alternateLink.href} className="underline underline-offset-4">
+							{alternateLink.label}
+						</Link>
+					</div>
+				</div>
+			</CardContent>
+			<CardFooter>
+				{withFooter && (
+					<div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary">
+						By signing up, you agree to our <Link href={routes.terms}>Terms of Service</Link> and{" "}
+						<Link href={routes.privacy}>Privacy Policy</Link>.
+					</div>
+				)}
+			</CardFooter>
+		</div>
+	);
+}

src/app/(app)/(authentication)/layout.tsx

@@ -1,9 +1,14 @@
+import { Footer } from "@/components/footers/footer";
 import MainLayout from "@/components/layouts/main-layout";
+import { Section } from "@/components/primitives/section";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="container grid place-items-center py-header">
-      {children}
-    </div>
+    <>
+      <MainLayout className="min-h-screen flex flex-col" footer={null}>
+        <Section className="grow">{children}</Section>
+      </MainLayout>
+      <Footer />
+    </>
   );
 }

src/app/(app)/(authentication)/sign-in/_components/sign-in.tsx

@@ -0,0 +1,16 @@
+import { AuthForm } from "@/app/(app)/(authentication)/_components/auth-form";
+import { Divider } from "@/components/primitives/divider";
+import { env } from "@/env";
+
+export const SignIn = async () => {
+  return (
+    <AuthForm mode="sign-in" withFooter={false}>
+      {env.NEXT_PUBLIC_FEATURE_AUTH_CREDENTIALS_ENABLED && (
+        <>
+          <Divider text="Or continue with email" />
+          {/* <CredentialsForm /> */}
+        </>
+      )}
+    </AuthForm>
+  );
+};

src/app/(app)/(authentication)/sign-in/page.tsx

@@ -1,22 +1,25 @@
-import { Logo } from "@/components/assets/logo";
+import { AuthenticationCard } from "@/app/(app)/(authentication)/_components/authentication-card";
+import { SignIn } from "@/app/(app)/(authentication)/sign-in/_components/sign-in";
+import { Icon } from "@/components/assets/icon";
 import { routes } from "@/config/routes";
 import { siteConfig } from "@/config/site-config";
 import Link from "next/link";
-import { AuthForm } from "../_components/login-form";
-import { SignInForm } from "./_components/sign-in-form";
 
 export default function SignInPage() {
-	return (
-		<div className="flex w-full max-w-sm flex-col gap-6">
-			<Link href={routes.home} className="flex items-center gap-2 self-center font-medium">
-				<div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
-					<Logo />
-				</div>
-				{siteConfig.name}
-			</Link>
-			<AuthForm mode="sign-in">
-				<SignInForm />
-			</AuthForm>
-		</div>
-	);
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-6">
+      <Link
+        href={routes.home}
+        className="flex items-center gap-2 self-center font-medium"
+      >
+        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+          <Icon />
+        </div>
+        {siteConfig.name}
+      </Link>
+      <AuthenticationCard>
+        <SignIn />
+      </AuthenticationCard>
+    </div>
+  );
 }