White-label support.

.gitignore

@@ -30,6 +30,7 @@ package-lock.json
 *.log
 .vscode
 .tool-versions
+.claude
 
 # debug
 npm-debug.log*

package.json

@@ -11,7 +11,7 @@
   },
   "type": "module",
   "scripts": {
-    "dev": "next dev -p 3001 --turbo",
+    "dev": "next dev -p 3003 --turbo",
     "build": "npm-run-all check-env build-db check-db build-tracker build-geo build-app",
     "start": "next start",
     "build-docker": "npm-run-all build-db build-tracker build-geo build-app",

src/app/api/share/[shareId]/route.ts

@@ -1,8 +1,53 @@
+import { ROLES } from '@/lib/constants';
 import { secret } from '@/lib/crypto';
 import { createToken } from '@/lib/jwt';
+import prisma from '@/lib/prisma';
+import redis from '@/lib/redis';
 import { json, notFound } from '@/lib/response';
 import { getSharedWebsite } from '@/queries/prisma';
 
+export interface WhiteLabel {
+  name: string;
+  url: string;
+  image: string;
+}
+
+async function getAccountId(website: { userId?: string; teamId?: string }): Promise<string | null> {
+  if (website.userId) {
+    return website.userId;
+  }
+
+  if (website.teamId) {
+    const teamOwner = await prisma.client.teamUser.findFirst({
+      where: {
+        teamId: website.teamId,
+        role: ROLES.teamOwner,
+      },
+      select: {
+        userId: true,
+      },
+    });
+
+    return teamOwner?.userId || null;
+  }
+
+  return null;
+}
+
+async function getWhiteLabel(accountId: string): Promise<WhiteLabel | null> {
+  if (!redis.enabled) {
+    return null;
+  }
+
+  const data = await redis.client.get(`white-label:${accountId}`);
+
+  if (data) {
+    return data as WhiteLabel;
+  }
+
+  return null;
+}
+
 export async function GET(_request: Request, { params }: { params: Promise<{ shareId: string }> }) {
   const { shareId } = await params;
 
@@ -12,8 +57,20 @@ export async function GET(_request: Request, { params }: { params: Promise<{ sha
     return notFound();
   }
 
-  const data = { websiteId: website.id };
-  const token = createToken(data, secret());
+  const data: { websiteId: string; token: string; whiteLabel?: WhiteLabel } = {
+    websiteId: website.id,
+    token: createToken({ websiteId: website.id }, secret()),
+  };
 
-  return json({ ...data, token });
+  const accountId = await getAccountId(website);
+
+  if (accountId) {
+    const whiteLabel = await getWhiteLabel(accountId);
+
+    if (whiteLabel) {
+      data.whiteLabel = whiteLabel;
+    }
+  }
+
+  return json(data);
 }

src/app/share/[...shareId]/Footer.tsx

@@ -1,7 +1,18 @@
 import { Row, Text } from '@umami/react-zen';
+import type { WhiteLabel } from '@/app/api/share/[shareId]/route';
 import { CURRENT_VERSION, HOMEPAGE_URL } from '@/lib/constants';
 
-export function Footer() {
+export function Footer({ whiteLabel }: { whiteLabel?: WhiteLabel }) {
+  if (whiteLabel) {
+    return (
+      <Row as="footer" paddingY="6" justifyContent="flex-end">
+        <a href={whiteLabel.url} target="_blank">
+          <Text weight="bold">{whiteLabel.name}</Text>
+        </a>
+      </Row>
+    );
+  }
+
   return (
     <Row as="footer" paddingY="6" justifyContent="flex-end">
       <a href={HOMEPAGE_URL} target="_blank">

src/app/share/[...shareId]/Header.tsx

@@ -1,17 +1,26 @@
 import { Icon, Row, Text, ThemeButton } from '@umami/react-zen';
+import type { WhiteLabel } from '@/app/api/share/[shareId]/route';
 import { LanguageButton } from '@/components/input/LanguageButton';
 import { PreferencesButton } from '@/components/input/PreferencesButton';
 import { Logo } from '@/components/svg';
 
-export function Header() {
+export function Header({ whiteLabel }: { whiteLabel?: WhiteLabel }) {
+  const logoUrl = whiteLabel?.url || 'https://umami.is';
+  const logoName = whiteLabel?.name || 'umami';
+  const logoImage = whiteLabel?.image;
+
   return (
     <Row as="header" justifyContent="space-between" alignItems="center" paddingY="3">
-      <a href="https://umami.is" target="_blank" rel="noopener">
+      <a href={logoUrl} target="_blank" rel="noopener">
         <Row alignItems="center" gap>
+          {logoImage ? (
+            <img src={logoImage} alt={logoName} style={{ height: 24 }} />
+          ) : (
             <Icon>
               <Logo />
             </Icon>
-          <Text weight="bold">umami</Text>
+          )}
+          <Text weight="bold">{logoName}</Text>
         </Row>
       </a>
       <Row alignItems="center" gap>

src/app/share/[...shareId]/SharePage.tsx

@@ -26,15 +26,17 @@ export function SharePage({ shareId }) {
     return null;
   }
 
+  const { whiteLabel } = shareToken;
+
   return (
     <Column backgroundColor="2">
       <PageBody gap>
-        <Header />
+        <Header whiteLabel={whiteLabel} />
         <WebsiteProvider websiteId={shareToken.websiteId}>
           <WebsiteHeader showActions={false} />
           <WebsitePage websiteId={shareToken.websiteId} />
         </WebsiteProvider>
-        <Footer />
+        <Footer whiteLabel={whiteLabel} />
       </PageBody>
     </Column>
   );