# Metadata (#62)

## Summary
- Include  default og-image
- Include  default og-title / og-description 
- Include titles with non-dynamic data

app/components/Navbar/index.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@remix-run/react";
+import { Link, useNavigate } from "@remix-run/react";
 import { LogOut, Tickets, UserIcon, VenetianMaskIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 
@@ -18,6 +18,7 @@ import { ThemeSwitcher } from "./ThemeSwitcher";
 import type { NavbarMenuItem } from "./types";
 
 export const Navbar = () => {
+  const navigate = useNavigate();
   const isLogged = useIsLoggedIn();
   const isAuthReady = useIsAuthReady();
   const myProfile = useMyProfileQuery({
@@ -87,6 +88,7 @@ export const Navbar = () => {
               icon: <LogOut className="mr-2 size-4" />,
               onClick: () => {
                 logout().catch(console.error);
+                navigate(urls.home);
               },
             },
           ],
@@ -104,6 +106,7 @@ export const Navbar = () => {
       isLogged,
       myProfile?.data?.me?.isSuperAdmin,
       setImpersonation,
+      navigate,
     ],
   );
 

app/root.tsx

@@ -1,3 +1,4 @@
+import { LinksFunction, MetaFunction } from "@remix-run/cloudflare";
 import {
   Links,
   Meta,
@@ -8,7 +9,6 @@ import {
 } from "@remix-run/react";
 import { setDefaultOptions } from "date-fns";
 import { es } from "date-fns/locale";
-import "./tailwind.css";
 import { AnimatePresence, motion } from "framer-motion";
 
 import "cal-sans";
@@ -21,6 +21,8 @@ import { Toaster } from "~/components/ui/sonner";
 import { getDefaultThemeKey } from "~/rootHelpers";
 import { AuthProvider } from "~/utils/supabase/AuthProvider";
 
+import "./tailwind.css";
+
 setDefaultOptions({ locale: es });
 
 export function Layout({ children }: { children: React.ReactNode }) {
@@ -50,6 +52,41 @@ const variants = {
   exit: { opacity: 0, scale: 0.99 },
 };
 const transition = { duration: 0.3 };
+
+export const links: LinksFunction = () => {
+  return [
+    {
+      rel: "icon",
+      href: "light-mode-favicon.ico",
+      media: "(prefers-color-scheme: light)",
+    },
+    {
+      rel: "icon",
+      href: "dark-mode-favicon.ico",
+      media: "(prefers-color-scheme: dark)",
+    },
+  ];
+};
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "Tickets - Plataforma de Entradas Open-Source para Eventos." },
+    {
+      property: "og:title",
+      content: "Tickets - Plataforma de Entradas Open-Source para Eventos.",
+    },
+    {
+      name: "description",
+      content:
+        "Tickets - Descubre y compra entradas para eventos emocionantes, la solución open-source para la gestión de eventos. Ya sea que asistas o organices, nuestra plataforma te ayuda a descubrir, gestionar y vender entradas, todo impulsado por una comunidad colaborativa.",
+    },
+    {
+      property: "og:image",
+      content: "/og.jpg",
+    },
+  ];
+};
+
 export default function App() {
   return (
     <AuthProvider>

app/routes/_authenticated/my-events._index/index.tsx

@@ -1,3 +1,4 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { cx } from "class-variance-authority";
 import { Suspense, useMemo, useState } from "react";
 
@@ -6,6 +7,10 @@ import { MyTicketsLoadingSkeleton } from "~/components/MyEvents/MyTicketsLoading
 import { sharedLayoutStyle } from "~/components/sharedLayouts";
 import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Mi Eventos | Tickets" }];
+};
+
 export default function Layout() {
   const [tab, setTab] = useState<"future" | "past">("future");
   const now = useMemo(() => new Date().toISOString(), []);

app/routes/_authenticated/my-orders._index/index.tsx

@@ -1,10 +1,15 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
 
 import { MyPurchaseOrders } from "~/components/MyPurchaseOrders/MyPurchaseOrders";
 import { MyPurchaseOrdersLoadingSkeleton } from "~/components/MyPurchaseOrders/MyPurchaseOrdersLoadingSkeleton";
 import { sharedLayoutStyle } from "~/components/sharedLayouts";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Mis Ordenes de Compra | Tickets" }];
+};
+
 export default function Layout() {
   return (
     <div className={cx(sharedLayoutStyle, "flex flex-col gap-10")}>

app/routes/_authenticated/my-orders/callback/index.tsx

@@ -1,10 +1,15 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { useSearchParams } from "@remix-run/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Suspense } from "react";
 import { toast } from "sonner";
 
 import { PurchaseCallback } from "~/components/PurchaseOrder/Callback";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Mi Orden de Compra | Tickets" }];
+};
+
 export default function Index() {
   const [params] = useSearchParams();
   const purchaseOrderId = params.get("purchaseOrderId");

app/routes/_authenticated/profile._index/index.tsx

@@ -1,15 +1,20 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
 
 import { MyProfile } from "~/components/Profile/MyProfile";
 import { MyProfileLoadingSkeleton } from "~/components/Profile/MyProfileLoadingSkeleton";
 import { sharedLayoutStyle } from "~/components/sharedLayouts";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Perfil | Tickets" }];
+};
+
 export default function Layout() {
   return (
     <div className={cx(sharedLayoutStyle, "flex flex-col gap-10")}>
       <div className="flex w-full items-center justify-between">
-        <h1 className="text-3xl font-semibold">Tu Perfil</h1>
+        <h1 className="text-3xl font-semibold">Perfil</h1>
       </div>
       <Suspense fallback={<MyProfileLoadingSkeleton />}>
         <MyProfile />

app/routes/_authenticated/profile/info/index.tsx

@@ -1,15 +1,20 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
 
 import { MyProfileInfo } from "~/components/Profile/Info/MyProfileInfo";
 import { MyProfileInfoLoadingSkeleton } from "~/components/Profile/Info/MyProfileInfoLoadingSkeleton";
 import { sharedLayoutStyle } from "~/components/sharedLayouts";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Editar Perfil | Tickets" }];
+};
+
 export default function Layout() {
   return (
     <div className={cx(sharedLayoutStyle, "flex flex-col gap-10")}>
       <div className="flex w-full items-center justify-between">
-        <h1 className="text-3xl font-semibold">Tu Perfil</h1>
+        <h1 className="text-3xl font-semibold">Perfil</h1>
       </div>
       <Suspense fallback={<MyProfileInfoLoadingSkeleton />}>
         <MyProfileInfo />

app/routes/login/index.tsx

@@ -1,10 +1,26 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { useNavigate } from "@remix-run/react";
 import { useEffect } from "react";
 
 import { Login } from "~/components/Login/Login";
 import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider";
 import { urls } from "~/utils/urls";
 
+export const meta: MetaFunction = () => {
+  return [
+    { title: "Tickets - Entrar a mi cuenta" },
+    {
+      property: "og:title",
+      content: "Tickets - Entrar a mi cuenta",
+    },
+    {
+      name: "description",
+      content:
+        "Tickets - Entrar a mi cuenta de Tickets para asistir a eventos, o gestionarlos.",
+    },
+  ];
+};
+
 const Redirecting = () => {
   const navigate = useNavigate();