Add metadata to pages

apps/web-tss/public/manifest.json

@@ -1,21 +1,11 @@
 {
-  "short_name": "TanStack App",
-  "name": "Create TanStack App Sample",
+  "short_name": "Buster",
+  "name": "Buster",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

apps/web-tss/src/context/Query/QueryProvider.tsx

@@ -1,6 +1,6 @@
 import type { QueryClient } from '@tanstack/react-query';
 import { PersistQueryClientProvider as TanstackPersistQueryClientProvider } from '@tanstack/react-query-persist-client';
-import React from 'react';
+import type React from 'react';
 import { persistOptions } from '@/integrations/tanstack-query/create-persister';
 import { userQueryKeys } from '../../api/query_keys/users';
 
@@ -11,14 +11,11 @@ export const QueryPersister = ({
   children: React.ReactNode;
   queryClient: QueryClient;
 }) => {
-  const [mounted, setMounted] = React.useState(false);
-
   return (
     <TanstackPersistQueryClientProvider
       client={queryClient}
       persistOptions={persistOptions}
       onSuccess={() => {
-        setMounted(true);
         queryClient.resumePausedMutations();
         console.log('onSuccess', queryClient.getQueryData(userQueryKeys.favoritesGetList.queryKey));
       }}

apps/web-tss/src/routes/__root.tsx

@@ -1,5 +1,7 @@
 import { createRootRouteWithContext, HeadContent, Link, Scripts } from '@tanstack/react-router';
 import { RootProviders } from '@/context/Providers';
+import shareImage from '../assets/png/default_preview.png';
+import favicon from '../assets/png/favicon.ico';
 import { getSupabaseUser } from '../integrations/supabase/getSupabaseUserServer';
 import { TanstackDevtools } from '../integrations/tanstack-dev-tools/tanstack-devtools';
 import type { AppRouterContext } from '../router';
@@ -9,10 +11,23 @@ export const Route = createRootRouteWithContext<AppRouterContext>()({
   head: () => ({
     meta: [
       { charSet: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { title: 'Buster' },
+      { name: 'viewport', content: 'width=1024, initial-scale=1, user-scalable=no' },
+      { name: 'description', content: 'Buster.so is the open source, AI-native data platform.' },
+      { name: 'og:image', content: shareImage },
+      { name: 'og:title', content: 'Buster' },
+      { name: 'og:description', content: 'Buster.so is the open source, AI-native data platform.' },
+      { name: 'og:url', content: 'https://buster.so' },
+      { name: 'og:type', content: 'website' },
+      { name: 'og:locale', content: 'en_US' },
+      { name: 'og:site_name', content: 'Buster' },
+    ],
+    links: [
+      { rel: 'stylesheet', href: appCss },
+      { rel: 'icon', href: favicon },
+      { rel: 'apple-touch-icon', href: favicon },
+      { rel: 'manifest', href: '/manifest.json' },
     ],
-    links: [{ rel: 'stylesheet', href: appCss }],
   }),
   shellComponent: RootDocument,
   beforeLoad: async () => {

apps/web-tss/src/routes/auth.login.tsx

@@ -7,7 +7,13 @@ const searchParamsSchema = z.object({
 });
 
 export const Route = createFileRoute('/auth/login')({
-  // Validate and type the `next` search param if present
+  head: () => ({
+    meta: [
+      { title: 'Login' },
+      { name: 'og:title', content: 'Login' },
+      { name: 'og:description', content: 'Login to your Buster account' },
+    ],
+  }),
   validateSearch: searchParamsSchema,
   component: LoginComp,
 });

apps/web-tss/src/routes/auth.tsx

@@ -5,18 +5,7 @@ import { AuthLayout } from '@/components/features/auth/AuthLayout';
 // Wraps auth pages in a centered container with room for branding and future UI
 export const Route = createFileRoute('/auth')({
   head: () => ({
-    meta: [
-      {
-        charSet: 'utf-8',
-      },
-      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
-      },
-      {
-        title: 'Buster — Auth',
-      },
-    ],
+    meta: [{ title: 'Buster — Auth' }],
   }),
   component: () => <AuthLayout>{<Outlet />}</AuthLayout>,
 });