feat: vitrine language/theme switching, missing features, disabled-signups handling
Language switcher (flag toggle) and dark-mode toggle in the marketing header, both usable by logged-out visitors -- the marketing pages previously hardcoded English (getMessages(undefined)) regardless of any preference, and had no theme control since the authenticated Nav's toggle isn't rendered there. New cookie-based locale resolution (lib/marketing-locale.ts) separate from the authenticated app's useLocale/setLocale, which persists via an authenticated PATCH that would just 401 and revert for an anonymous visitor. Root layout now falls back to that cookie for <html lang> when there's no session. Features/Home now cover cook mode, recipe variations, personalized recommendations, and ingredient substitution -- all real, shipped features that were missing from the page copy. Signup CTAs check isSignupsDisabled() and swap to "Signups closed" instead of "Get started free" -- still linking to /signup, since that page already handles the invite-token exception correctly. Fixed along the way: importing the cookie-name constant from marketing-locale.ts in the client-side LanguageSwitcher pulled that file's server-only imports (lib/auth/server -> the DB client -> `postgres`) into the client bundle, breaking the build on Node built-ins. Split the constant into its own client-safe file (marketing-locale-cookie.ts). Caught by `pnpm build`, not typecheck. Verified with typecheck, lint, and a full production build (clean compile) -- no DB in this sandbox to click through a real dev server. v0.48.1
This commit is contained in:
Arnaud
@@ -1,13 +1,14 @@
|
||||
import type { Metadata } from "next";
|
||||
import { getMessages } from "@/lib/i18n/server";
|
||||
import { getEffectiveMarketingLocale } from "@/lib/marketing-locale";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "About — Epicure",
|
||||
description: "The story behind Epicure.",
|
||||
};
|
||||
|
||||
export default function AboutPage() {
|
||||
const m = getMessages(undefined);
|
||||
export default async function AboutPage() {
|
||||
const m = getMessages(await getEffectiveMarketingLocale());
|
||||
const t = m.marketing.about;
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Mail } from "lucide-react";
|
||||
import { getMessages } from "@/lib/i18n/server";
|
||||
import { getEffectiveMarketingLocale } from "@/lib/marketing-locale";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Contact — Epicure",
|
||||
@@ -9,8 +10,8 @@ export const metadata: Metadata = {
|
||||
|
||||
const SUPPORT_EMAIL = "support@epicure.app";
|
||||
|
||||
export default function ContactPage() {
|
||||
const m = getMessages(undefined);
|
||||
export default async function ContactPage() {
|
||||
const m = getMessages(await getEffectiveMarketingLocale());
|
||||
const t = m.marketing.contact;
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,19 +1,25 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Sparkles, Calendar, Package, MessageCircle, Users, ChefHat, Camera, ListChecks } from "lucide-react";
|
||||
import { Sparkles, Calendar, Package, MessageCircle, Users, ChefHat, Camera, ListChecks, Utensils, Wand2, Sparkle, Replace } from "lucide-react";
|
||||
import { getMessages } from "@/lib/i18n/server";
|
||||
import { getEffectiveMarketingLocale } from "@/lib/marketing-locale";
|
||||
import { isSignupsDisabled } from "@/lib/site-settings";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Features — Epicure",
|
||||
description: "AI recipe generation, meal planning, pantry tracking, and a cooking assistant that can act on your behalf.",
|
||||
description: "AI recipe generation, meal planning, pantry tracking, cook mode, and a cooking assistant that can act on your behalf.",
|
||||
};
|
||||
|
||||
const FEATURES = [
|
||||
{ icon: Sparkles, key: "ai" },
|
||||
{ icon: Camera, key: "photoImport" },
|
||||
{ icon: MessageCircle, key: "assistant" },
|
||||
{ icon: Utensils, key: "cookMode" },
|
||||
{ icon: Wand2, key: "variations" },
|
||||
{ icon: Sparkle, key: "recommendations" },
|
||||
{ icon: Replace, key: "substitution" },
|
||||
{ icon: Calendar, key: "mealPlan" },
|
||||
{ icon: Package, key: "pantry" },
|
||||
{ icon: ListChecks, key: "shoppingList" },
|
||||
@@ -21,8 +27,9 @@ const FEATURES = [
|
||||
{ icon: ChefHat, key: "batchCook" },
|
||||
] as const;
|
||||
|
||||
export default function FeaturesPage() {
|
||||
const m = getMessages(undefined);
|
||||
export default async function FeaturesPage() {
|
||||
const [locale, signupsDisabled] = await Promise.all([getEffectiveMarketingLocale(), isSignupsDisabled()]);
|
||||
const m = getMessages(locale);
|
||||
const t = m.marketing.features;
|
||||
|
||||
return (
|
||||
@@ -46,7 +53,7 @@ export default function FeaturesPage() {
|
||||
|
||||
<div className="text-center pt-4">
|
||||
<Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
|
||||
{t.cta}
|
||||
{signupsDisabled ? m.marketing.nav.signupClosed : t.cta}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import { headers } from "next/headers";
|
||||
import { auth } from "@/lib/auth/server";
|
||||
import { MarketingNav } from "@/components/marketing/marketing-nav";
|
||||
import { MarketingFooter } from "@/components/marketing/marketing-footer";
|
||||
import { getEffectiveMarketingLocale } from "@/lib/marketing-locale";
|
||||
|
||||
export default async function MarketingLayout({ children }: { children: React.ReactNode }) {
|
||||
const session = await auth.api.getSession({ headers: await headers() }).catch(() => null);
|
||||
const locale = (session?.user as { locale?: string } | undefined)?.locale;
|
||||
const locale = await getEffectiveMarketingLocale();
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
|
||||
@@ -3,15 +3,19 @@ import { headers } from "next/headers";
|
||||
import Link from "next/link";
|
||||
import { auth } from "@/lib/auth/server";
|
||||
import { getMessages } from "@/lib/i18n/server";
|
||||
import { getEffectiveMarketingLocale } from "@/lib/marketing-locale";
|
||||
import { isSignupsDisabled } from "@/lib/site-settings";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Sparkles, Calendar, Package, MessageCircle, Users, ChefHat } from "lucide-react";
|
||||
import { Sparkles, Calendar, Package, MessageCircle, Users, ChefHat, Utensils, Wand2 } from "lucide-react";
|
||||
|
||||
const HIGHLIGHTS = [
|
||||
{ icon: Sparkles, key: "ai" },
|
||||
{ icon: MessageCircle, key: "assistant" },
|
||||
{ icon: Calendar, key: "mealPlan" },
|
||||
{ icon: Package, key: "pantry" },
|
||||
{ icon: Utensils, key: "cookMode" },
|
||||
{ icon: Wand2, key: "variations" },
|
||||
{ icon: Users, key: "social" },
|
||||
{ icon: ChefHat, key: "batchCook" },
|
||||
] as const;
|
||||
@@ -20,8 +24,10 @@ export default async function MarketingHomePage() {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
if (session) redirect("/recipes");
|
||||
|
||||
const m = getMessages(undefined);
|
||||
const [locale, signupsDisabled] = await Promise.all([getEffectiveMarketingLocale(), isSignupsDisabled()]);
|
||||
const m = getMessages(locale);
|
||||
const t = m.marketing.home;
|
||||
const ctaLabel = signupsDisabled ? m.marketing.nav.signupClosed : t.ctaPrimary;
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -34,7 +40,7 @@ export default async function MarketingHomePage() {
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-3 pt-2">
|
||||
<Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
|
||||
{t.ctaPrimary}
|
||||
{ctaLabel}
|
||||
</Link>
|
||||
<Link href="/features" className={cn(buttonVariants({ variant: "outline", size: "lg" }))}>
|
||||
{t.ctaSecondary}
|
||||
@@ -60,7 +66,7 @@ export default async function MarketingHomePage() {
|
||||
<h2 className="text-2xl font-semibold">{t.bottomCtaTitle}</h2>
|
||||
<p className="text-muted-foreground max-w-lg mx-auto">{t.bottomCtaSubtitle}</p>
|
||||
<Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
|
||||
{t.ctaPrimary}
|
||||
{ctaLabel}
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Providers } from "@/components/providers";
|
||||
import { auth } from "@/lib/auth/server";
|
||||
import type { Locale } from "@/lib/i18n/provider";
|
||||
import { SwRegister } from "@/components/pwa/sw-register";
|
||||
import { getMarketingLocale } from "@/lib/marketing-locale";
|
||||
import "./globals.css";
|
||||
|
||||
const lora = Lora({
|
||||
@@ -32,7 +33,10 @@ export default async function RootLayout({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
const session = await auth.api.getSession({ headers: await headers() }).catch(() => null);
|
||||
const initialLocale = ((session?.user as { locale?: string })?.locale ?? "en") as Locale;
|
||||
// Signed-in users: their saved preference. Anonymous visitors (marketing
|
||||
// pages): the marketing-locale cookie instead, since there's no account to
|
||||
// read a preference from.
|
||||
const initialLocale = ((session?.user as { locale?: string })?.locale ?? await getMarketingLocale()) as Locale;
|
||||
|
||||
return (
|
||||
<html
|
||||
|
||||
Reference in New Issue
Block a user