arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: vitrine language/theme switching, missing features, disabled-signups handling

Browse Source 
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
2026-07-18 10:55:06 +02:00
parent e71c978e52
commit 8dccd8898b
17 changed files with 191 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(marketing)/about/page.tsx
+3 -2
View File
@@ -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 (
apps/web/app/(marketing)/contact/page.tsx
+3 -2
View File
@@ -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 (
apps/web/app/(marketing)/features/page.tsx
+12 -5
View File
@@ -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>
apps/web/app/(marketing)/layout.tsx
+2 -4
View File
@@ -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">
apps/web/app/(marketing)/page.tsx
+10 -4
View File
@@ -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>