fix: Format apple platform names in metadata (#11130)

app/[[...path]]/page.tsx

@@ -19,7 +19,7 @@ import {isDeveloperDocs} from 'sentry-docs/isDeveloperDocs';
 import {getDevDocsFrontMatter, getDocsFrontMatter, getFileBySlug} from 'sentry-docs/mdx';
 import {mdxComponents} from 'sentry-docs/mdxComponents';
 import {setServerContext} from 'sentry-docs/serverContext';
-import {capitilize} from 'sentry-docs/utils';
+import {formatGuideOrPlatformTitle} from 'sentry-docs/utils';
 
 export async function generateStaticParams() {
   const docs = await (isDeveloperDocs ? getDevDocsFrontMatter() : getDocsFrontMatter());
@@ -141,7 +141,9 @@ export async function generateMetadata({params}: MetadataProps): Promise<Metadat
       const guideOrPlatform = getCurrentPlatformOrGuide(rootNode, params.path);
       title =
         pageNode.frontmatter.title +
-        (guideOrPlatform ? ` | Sentry for ${capitilize(guideOrPlatform.name)}` : '');
+        (guideOrPlatform
+          ? ` | Sentry for ${formatGuideOrPlatformTitle(guideOrPlatform.name)}`
+          : '');
       description = pageNode.frontmatter.description ?? '';
     }
   }

src/utils.ts

@@ -18,6 +18,31 @@ export const capitilize = (str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
 
+export const formatGuideOrPlatformTitle = (title: string) => {
+  const lowerCase = title.toLowerCase();
+  if (lowerCase === 'ios') {
+    return 'iOS';
+  }
+
+  if (lowerCase === 'macos') {
+    return 'macOS';
+  }
+
+  if (lowerCase === 'tvos') {
+    return 'tvOS';
+  }
+
+  if (lowerCase === 'visionos') {
+    return 'visionOS';
+  }
+
+  if (lowerCase === 'watchos') {
+    return 'watchOS';
+  }
+
+  return capitilize(title);
+};
+
 export const uniqByReference = <T>(arr: T[]): T[] => Array.from(new Set(arr));
 
 export const splitToChunks = <T>(numChunks: number, arr: T[]): T[][] => {