docs: add links & metatags

website/app/globals.ts

@@ -0,0 +1,2 @@
+export const siteTitle = '@pheralb/toast';
+export const eslogan = 'An accessible and beautiful toast library for React';

website/app/root.tsx

@@ -1,4 +1,8 @@
-import type { LinksFunction, LoaderFunctionArgs } from '@vercel/remix';
+import type {
+  LinksFunction,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from '@vercel/remix';
 
 import {
   Links,
@@ -9,6 +13,7 @@ import {
   useLoaderData,
 } from '@remix-run/react';
 import { getLatestVersion } from 'fast-npm-meta';
+import { eslogan, siteTitle } from './globals';
 
 // Styles:
 import stylesheet from '@/styles/globals.css?url';
@@ -32,13 +37,41 @@ import { themeSessionResolver } from './sessions.server';
 import { MDXProvider } from '@mdx-js/react';
 import { mdxComponents } from './components/mdx';
 
-// Store:
+// Stores:
 import { useDocsStore } from './store';
 
+// Links:
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: stylesheet },
+  {
+    rel: 'apple-touch-icon',
+    sizes: '180x180',
+    href: '/images/logo.png',
+  },
+  {
+    rel: 'icon',
+    type: 'image/png',
+    sizes: '32x32',
+    href: '/images/logo.png',
+  },
+  {
+    rel: 'icon',
+    type: 'image/png',
+    sizes: '16x16',
+    href: '/images/logo.png',
+  },
+  { rel: 'manifest', href: '/manifest.webmanifest' },
+  { rel: 'icon', href: '/images/logo_ico.ico' },
 ];
 
+// Metadata:
+export const meta: MetaFunction = ({ matches }) => {
+  const parentMeta = matches
+    .flatMap((match) => match.meta ?? [])
+    .filter((meta) => !('title' in meta));
+  return [...parentMeta, { title: `${eslogan} | ${siteTitle}` }];
+};
+
 export async function loader({ request }: LoaderFunctionArgs) {
   const { getTheme } = await themeSessionResolver(request);
   const metadata = await getLatestVersion('@pheralb/toast');
@@ -79,7 +112,7 @@ function App() {
       >
         <ToastProvider
           position={toastPosition}
-          theme={toastTheme ? toastTheme : theme!}
+          theme={toastTheme ?? theme!}
           toastFont="font-sans"
         >
           <Header />

website/app/routes/_index.mdx

@@ -1,12 +1,6 @@
-export const meta = [
-  {
-    title: 'Getting Started',
-    description: 'How to use @pheralb/toast library with Next.js',
-  },
-];
-
 import Hero from '../components/hero';
 import Usage from '../components/usage';
+import { siteTitle } from '../globals.ts';
 
 <Hero />
 

website/app/routes/nextjs.mdx

@@ -1,6 +1,8 @@
+import { siteTitle } from '../globals.ts';
+
 export const meta = [
   {
-    title: 'Usage with Next.js',
+    title: `Usage with Next.js | ${siteTitle}`,
     description: 'How to use @pheralb/toast library with Next.js',
   },
 ];

website/app/routes/provider.mdx

@@ -1,12 +1,13 @@
+import { Positions, Theme } from '../components/examples/provider';
+import { siteTitle } from '../globals.ts';
+
 export const meta = [
   {
-    title: 'Toast Provider',
+    title: `Toast Provider | ${siteTitle}`,
     description: 'How to use the ToastProvider component in your application',
   },
 ];
 
-import { Positions, Theme } from '../components/examples/provider';
-
 # Toast Provider
 
 The `<ToastProvider />` component is used to wrap your application and provide the context for the toasts. It accepts the following props:

website/app/routes/useToast.mdx

@@ -1,16 +1,17 @@
+import {
+  UseToastVariantExamples,
+  UseToastActionsExamples,
+} from '../components/examples/useToast';
+import { siteTitle } from '../globals.ts';
+
 export const meta = [
   {
-    title: 'useToast',
+    title: `useToast | ${siteTitle}`,
     description:
       'How to use the useToast hook in your application to render toasts',
   },
 ];
 
-import {
-  UseToastVariantExamples,
-  UseToastActionsExamples,
-} from '../components/examples/useToast';
-
 # useToast
 
 Call `useToast` to create a toast from anywhere in your React application. Make sure you add the [`<ToastProvider />`](/provider) provider to your app first.