handle page titles

app.json

@@ -1,5 +1,5 @@
 {
-  "name": "Umami",
+  "name": "analytics",
   "description": "Umami is a simple, fast, website analytics alternative to Google Analytics.",
   "keywords": ["analytics", "charts", "statistics", "web-analytics"],
   "website": "https://umami.is",

src/app/(main)/NavBar.tsx

@@ -10,6 +10,7 @@ import useMessages from 'components/hooks/useMessages';
 import HamburgerButton from 'components/common/HamburgerButton';
 import { usePathname } from 'next/navigation';
 import styles from './NavBar.module.css';
+import appMeta from '../../../app.json';
 
 export function NavBar() {
   const pathname = usePathname();
@@ -63,7 +64,7 @@ export function NavBar() {
         <Icon size="lg">
           <Icons.Logo />
         </Icon>
-        <Text>umami</Text>
+        <Text>{appMeta.name}</Text>
       </div>
       <div className={styles.links}>
         {links.map(({ url, label }) => {

src/app/(main)/dashboard/page.tsx

@@ -1,10 +1,11 @@
 import Dashboard from 'app/(main)/dashboard/Dashboard';
 import { Metadata } from 'next';
+import appMeta from '../../../../app.json';
 
 export default function () {
   return <Dashboard />;
 }
 
 export const metadata: Metadata = {
-  title: 'Dashboard | umami',
+  title: `Dashboard | ${appMeta.name}`,
 };

src/app/(main)/reports/[id]/page.tsx

@@ -1,5 +1,6 @@
 import ReportDetails from './ReportDetails';
 import { Metadata } from 'next';
+import appMeta from '../../../../../app.json';
 
 export default function ReportDetailsPage({ params: { id } }) {
   if (!id) {
@@ -10,5 +11,5 @@ export default function ReportDetailsPage({ params: { id } }) {
 }
 
 export const metadata: Metadata = {
-  title: 'Reports | umami',
+  title: `Reports | ${appMeta.name}`,
 };

src/app/(main)/reports/create/page.tsx

@@ -1,10 +1,11 @@
 import ReportTemplates from './ReportTemplates';
 import { Metadata } from 'next';
+import appMeta from '../../../../../app.json';
 
 export default function ReportsCreatePage() {
   return <ReportTemplates />;
 }
 
 export const metadata: Metadata = {
-  title: 'Create Report | umami',
+  title: `Create Report | ${appMeta.name}`,
 };

src/app/(main)/reports/page.tsx

@@ -1,5 +1,6 @@
 import ReportsHeader from './ReportsHeader';
 import ReportsDataTable from './ReportsDataTable';
+import appMeta from '../../../../app.json';
 
 export default function () {
   return (
@@ -10,5 +11,5 @@ export default function () {
   );
 }
 export const metadata = {
-  title: 'Reports | umami',
+  title: `Reports | ${appMeta.name}`,
 };

src/app/(main)/settings/profile/page.tsx

@@ -1,6 +1,7 @@
 import ProfileHeader from './ProfileHeader';
 import ProfileSettings from './ProfileSettings';
 import { Metadata } from 'next';
+import appMeta from '../../../../../app.json';
 
 export default function () {
   return (
@@ -12,5 +13,5 @@ export default function () {
 }
 
 export const metadata: Metadata = {
-  title: 'Profile Settings | umami',
+  title: `Profile Settings | ${appMeta.name}`,
 };

src/app/(main)/settings/teams/page.tsx

@@ -1,6 +1,7 @@
 import TeamsDataTable from './TeamsDataTable';
 import TeamsHeader from './TeamsHeader';
 import { Metadata } from 'next';
+import appMeta from '../../../../../app.json';
 
 export default function () {
   if (process.env.cloudMode) {
@@ -16,5 +17,5 @@ export default function () {
 }
 
 export const metadata: Metadata = {
-  title: 'Teams Settings | umami',
+  title: `Team Settings | ${appMeta.name}`,
 };

src/app/(main)/settings/users/page.tsx

@@ -1,9 +1,10 @@
 import UsersDataTable from './UsersDataTable';
 import { Metadata } from 'next';
+import appMeta from '../../../../../app.json';
 
 export default function () {
   return <UsersDataTable />;
 }
 export const metadata: Metadata = {
-  title: 'Users | umami',
+  title: `Users | ${appMeta.name}`,
 };

src/app/(main)/settings/websites/page.tsx

@@ -1,10 +1,11 @@
 import { Metadata } from 'next';
 import Websites from './Websites';
+import appMeta from '../../../../../app.json';
 
 export default function () {
   return <Websites />;
 }
 
 export const metadata: Metadata = {
-  title: 'Websites Settings | umami',
+  title: `Website Settings | ${appMeta.name}`,
 };

src/app/(main)/websites/page.tsx

@@ -1,6 +1,7 @@
 import WebsitesHeader from 'app/(main)/settings/websites/WebsitesHeader';
 import WebsitesBrowse from './WebsitesBrowse';
 import { Metadata } from 'next';
+import appMeta from '../../../../app.json';
 
 export default function WebsitesPage() {
   return (
@@ -12,5 +13,5 @@ export default function WebsitesPage() {
 }
 
 export const metadata: Metadata = {
-  title: 'Websites | umami',
+  title: `Websites | ${appMeta.name}`,
 };

src/app/layout.tsx

@@ -30,5 +30,5 @@ export default function ({ children }) {
 }
 
 export const metadata: Metadata = {
-  title: 'umami',
+  title: 'analytics',
 };

src/app/login/LoginForm.tsx

@@ -16,6 +16,7 @@ import { setClientAuthToken } from 'lib/client';
 import useMessages from 'components/hooks/useMessages';
 import Logo from 'assets/logo.svg';
 import styles from './LoginForm.module.css';
+import appMeta from '../../../app.json';
 
 export function LoginForm() {
   const { formatMessage, labels, getMessage } = useMessages();
@@ -41,7 +42,7 @@ export function LoginForm() {
       <Icon className={styles.icon} size="xl">
         <Logo />
       </Icon>
-      <div className={styles.title}>umami</div>
+      <div className={styles.title}>{appMeta.name}</div>
       <Form className={styles.form} onSubmit={handleSubmit} error={getMessage(error)}>
         <FormRow label={formatMessage(labels.username)}>
           <FormInput name="username" rules={{ required: formatMessage(labels.required) }}>

src/app/login/page.tsx

@@ -1,6 +1,7 @@
 import LoginForm from './LoginForm';
 import { Metadata } from 'next';
 import styles from './page.module.css';
+import appMeta from '../../../app.json';
 
 async function getDisabled() {
   return !!process.env.LOGIN_DISABLED;
@@ -21,5 +22,5 @@ export default async function LoginPage() {
 }
 
 export const metadata: Metadata = {
-  title: 'Login | umami',
+  title: `Login | ${appMeta.name}`,
 };

src/app/logout/page.tsx

@@ -1,10 +1,11 @@
 import Logout from './Logout';
 import { Metadata } from 'next';
+import appMeta from '../../../app.json';
 
 export default function () {
   return <Logout />;
 }
 
 export const metadata: Metadata = {
-  title: 'Logout | umami',
+  title: `Logout | ${appMeta.name}`,
 };

src/app/share/[...id]/page.tsx

@@ -1,10 +1,11 @@
 import Share from './Share';
 import { Metadata } from 'next';
+import appMeta from '../../../../app.json';
 
 export default function ({ params: { id } }) {
   return <Share shareId={id[0]} />;
 }
 
 export const metadata: Metadata = {
-  title: 'umami',
+  title: appMeta.name,
 };