🔍 Add meta function to web route and update page title

apps/web/app/root.tsx

@@ -15,7 +15,7 @@ export const meta: MetaFunction = ({ error }) => {
     return [{ title: 'Oops, something went wrong!' }];
   }
 
-  const title = 'Generate gitmoji commit messages using AI | Genmoji.dev';
+  const title = 'Genmoji';
   const description =
     'Generate your gitmoji commit message using AI. Provide a git diff and let Genmoji do the work for you.';
 

apps/web/app/routes/web.tsx

@@ -1,6 +1,11 @@
 import { Button, buttonVariants } from 'components/ui/button';
 import { ArrowLeft, Clipboard } from 'lucide-react';
-import { ActionFunctionArgs, json } from '@remix-run/cloudflare';
+import {
+  ActionFunctionArgs,
+  MetaArgs,
+  MetaFunction,
+  json,
+} from '@remix-run/cloudflare';
 import { getGitmojis } from '.server/gitmoji';
 import {
   useLoaderData,
@@ -16,7 +21,7 @@ import { createChatCompletion, generateSystemMessage } from '.server/ai';
 import useEnterSubmit from 'hooks/use-enter-submit';
 import StyleSelect from 'components/style-select';
 import { Textarea } from 'components/ui/textarea';
-import { cn } from 'lib/utils';
+import { cn, extendMeta } from 'lib/utils';
 
 /**
  * Do some additional post processing on the received answer
@@ -75,6 +80,16 @@ export async function loader() {
   };
 }
 
+export function meta({ matches }: MetaArgs) {
+  const title = 'Try it out | Genmoji';
+
+  return extendMeta(matches, [
+    { title },
+    { name: 'og:title', content: title },
+    { name: 'twitter:title', content: title },
+  ]);
+}
+
 export default function Web() {
   const gitmojis = useLoaderData<typeof loader>().gitmojis;
   const response = useActionData<typeof action>()?.content;

apps/web/lib/utils.ts

@@ -1,6 +1,41 @@
+import { MetaArgs } from '@remix-run/cloudflare';
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { type ServerRuntimeMetaDescriptor } from '@remix-run/server-runtime';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Extends the metadata of a route by combining parent metadata with new metadata.
+ * This function merges metadata from parent routes with the current route's metadata,
+ * ensuring that new entries override existing ones with the same title, name, or property.
+ *
+ * @param matches - An array of route matches from Remix's MetaArgs
+ * @param meta - An array of new metadata descriptors to be added or updated
+ * @returns A combined array of metadata descriptors
+ */
+export function extendMeta(
+  matches: MetaArgs['matches'],
+  meta: ServerRuntimeMetaDescriptor[]
+): ServerRuntimeMetaDescriptor[] {
+  const parentMeta: ServerRuntimeMetaDescriptor[] = matches
+    .flatMap((match) => match.meta ?? [])
+    .filter(
+      (item) =>
+        !meta.some((metaItem) => {
+          const hasSameTitle = 'title' in item && 'title' in metaItem;
+          const hasSameName =
+            'name' in item && 'name' in metaItem && item.name === metaItem.name;
+          const hasSameProperty =
+            'property' in item &&
+            'property' in metaItem &&
+            item.property === metaItem.property;
+
+          return hasSameTitle || hasSameName || hasSameProperty;
+        })
+    );
+
+  return [...parentMeta, ...meta];
+}