Fix hook order exception and meta data usage

apps/web/app/components/render-pages-doc.tsx

@@ -1,5 +1,5 @@
 import { RenderBlocks } from '@codeware/shared/ui/payload-components';
-import type { NavigationDoc } from '@codeware/shared/util/payload-api';
+import type { NavigationDoc } from '@codeware/shared/util/payload-types';
 
 /**
  * Render a pages collection document.

apps/web/app/components/render-posts-doc.tsx

@@ -1,5 +1,5 @@
 import { RichText } from '@codeware/shared/ui/payload-components';
-import type { NavigationDoc } from '@codeware/shared/util/payload-api';
+import type { NavigationDoc } from '@codeware/shared/util/payload-types';
 
 /**
  * Render a posts collection document.

apps/web/app/root.tsx

@@ -9,11 +9,7 @@ import {
   getSiteSettings
 } from '@codeware/shared/util/payload-api';
 import type { SiteSetting } from '@codeware/shared/util/payload-types';
-import type {
-  LinksFunction,
-  LoaderFunctionArgs,
-  MetaFunction
-} from '@remix-run/node';
+import type { LinksFunction, LoaderFunctionArgs } from '@remix-run/node';
 import {
   Link,
   Links,
@@ -40,12 +36,6 @@ import { ClientHintCheck, getHints } from './utils/client-hints';
 import { getPayloadRequestOptions } from './utils/get-payload-request-options';
 import { type Theme, getTheme } from './utils/theme.server';
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => [
-  {
-    title: data?.siteSettings?.general?.appName ?? ''
-  }
-];
-
 export const links: LinksFunction = () => [
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
   {

apps/web/app/routes/($collection).$slug.tsx

@@ -1,27 +1,29 @@
 import { findNavigationDoc } from '@codeware/shared/util/payload-api';
+import { resolveMeta } from '@codeware/shared/util/payload-utils';
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
 import { json, useLoaderData, useRouteError } from '@remix-run/react';
 
 import { Container } from '../components/container';
 import { ErrorContainer } from '../components/error-container';
 import { RenderPagesDoc } from '../components/render-pages-doc';
 import { RenderPostsDoc } from '../components/render-posts-doc';
+import { defaultAppName } from '../utils/default-app-name';
 import { getPayloadRequestOptions } from '../utils/get-payload-request-options';
+import { getSiteSettingsFromRoot } from '../utils/get-site-settings-from-root';
 
 type LoaderError = {
   message: string;
   status: number;
 };
 
-// TODO: How to use it properly?
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-  if (data?.doc.collection === 'pages') {
-    return [{ title: data.doc.name }];
-  }
-  if (data?.doc.collection === 'posts') {
-    return [{ title: data.doc.title }];
-  }
-  return [{ title: 'Page Not Found' }];
+export const meta: MetaFunction<typeof loader> = ({ data, matches }) => {
+  // Get site settings from root loader data
+  const siteSettings = getSiteSettingsFromRoot(matches);
+  const appName = siteSettings?.general?.appName ?? defaultAppName;
+
+  const meta = resolveMeta(data?.doc);
+
+  return [{ title: `${appName} - ${meta?.title ?? 'Page'}` }];
 };
 
 /**

apps/web/app/routes/_index.tsx

@@ -1,19 +1,26 @@
 import { RenderBlocks } from '@codeware/shared/ui/payload-components';
+import { resolveMeta } from '@codeware/shared/util/payload-utils';
 import { type MetaFunction, useRouteError } from '@remix-run/react';
 
 import { Container } from '../components/container';
 import { ErrorContainer } from '../components/error-container';
+import { defaultAppName } from '../utils/default-app-name';
+import { getSiteSettingsFromRoot } from '../utils/get-site-settings-from-root';
 import { useSiteSettings } from '../utils/use-site-settings';
 
 type LoaderError = {
   message: string;
   status: number;
 };
 
-// TODO: How to use it properly?
-export const meta: MetaFunction = () => {
-  const { landingPage } = useSiteSettings();
-  return [{ title: landingPage?.name }];
+export const meta: MetaFunction = ({ matches }) => {
+  // Get site settings from root loader data
+  const siteSettings = getSiteSettingsFromRoot(matches);
+  const appName = siteSettings?.general?.appName ?? defaultAppName;
+
+  const meta = resolveMeta(siteSettings);
+
+  return [{ title: `${appName} - ${meta?.title ?? 'Home'}` }];
 };
 
 export default function Index() {

apps/web/app/utils/default-app-name.ts

@@ -0,0 +1,4 @@
+/**
+ * The default app name when the site settings are not found.
+ */
+export const defaultAppName = 'App' as const;

apps/web/app/utils/get-site-settings-from-root.ts

@@ -0,0 +1,18 @@
+import type { SiteSetting } from '@codeware/shared/util/payload-types';
+import type { MetaFunction } from '@remix-run/react';
+
+/**
+ * Server side utility to get the site settings from the root loader data.
+ *
+ * @param matches - The `matches` object from the root loader.
+ * @returns The site settings or `null` if not found.
+ */
+export const getSiteSettingsFromRoot = (
+  matches: Parameters<MetaFunction>[0]['matches']
+) => {
+  const rootData = matches.find((match) => match.id === 'root')?.data as
+    | Record<'siteSettings', SiteSetting>
+    | undefined;
+
+  return rootData?.siteSettings ?? null;
+};

libs/shared/util/payload-api/src/index.ts

@@ -1,7 +1,6 @@
 export { apiKeyPrefix, authorizationHeader } from './lib/utils/definitions';
 export type {
   MethodOptions,
-  NavigationDoc,
   NavigationItem,
   RequestBaseOptions,
   RequestMethod

libs/shared/util/payload-api/src/lib/find-navigation-doc.ts

@@ -1,11 +1,12 @@
 import type {
+  NavigationDoc,
   NavigationReferenceCollection,
   Page,
   Post
 } from '@codeware/shared/util/payload-types';
 
 import { invokeRequest } from './utils/invoke-request';
-import type { NavigationDoc, RequestBaseOptions } from './utils/types';
+import type { RequestBaseOptions } from './utils/types';
 
 /**
  * Find a navigation document by the URL collection and slug parameters.
@@ -45,6 +46,14 @@ export const findNavigationDoc = async (
       collection: lookupCollection,
       header: page.header,
       layout: page.layout,
+      meta: {
+        description: page.meta?.description ?? undefined,
+        image:
+          (typeof page.meta?.image === 'object'
+            ? page.meta?.image
+            : undefined) ?? undefined,
+        title: page.meta?.title ?? undefined
+      },
       name: page.name
     };
   }
@@ -56,6 +65,14 @@ export const findNavigationDoc = async (
       content: post.content,
       heroImage:
         typeof post.heroImage === 'object' ? post.heroImage : undefined,
+      meta: {
+        description: post.meta?.description ?? undefined,
+        image:
+          (typeof post.meta?.image === 'object'
+            ? post.meta?.image
+            : undefined) ?? undefined,
+        title: post.meta?.title ?? undefined
+      },
       title: post.title
     };
   }

libs/shared/util/payload-api/src/lib/utils/types.ts

@@ -1,9 +1,4 @@
-import type {
-  Media,
-  NavigationReferenceCollection,
-  Page,
-  Post
-} from '@codeware/shared/util/payload-types';
+import type { NavigationReferenceCollection } from '@codeware/shared/util/payload-types';
 
 /**
  * Available request options depending on the request method.
@@ -36,20 +31,6 @@ export type MethodOptions<T extends RequestMethod> = T extends 'GET'
       body: Record<string, unknown>;
     };
 
-/**
- * Document details for a navigation item.
- */
-export type NavigationDoc =
-  // limit what can be exposed client side
-  | ({
-      collection: 'pages';
-    } & Pick<Page, 'header' | 'layout' | 'name'>)
-  | ({
-      collection: 'posts';
-    } & Pick<Post, 'content' | 'title'> & {
-        heroImage?: Media | null | undefined;
-      });
-
 /**
  * Navigation tree item.
  */

libs/shared/util/payload-types/src/lib/custom-types.ts

@@ -1,3 +1,4 @@
+import type { StripTypes } from '@codeware/shared/util/typesafe';
 import type { ClientUser, User } from 'payload';
 
 import type {
@@ -6,7 +7,10 @@ import type {
   ContentBlock,
   Form,
   FormSubmission,
+  Media,
   Navigation,
+  Page,
+  Post,
   Tenant,
   TenantsArrayField
 } from './payload-types';
@@ -69,6 +73,36 @@ export type FormSubmissionData = NonNullable<
   NonNullable<FormSubmission['submissionData']>
 >;
 
+type PageMetaDefined = NonNullable<Page['meta']>;
+type PostMetaDefined = NonNullable<Post['meta']>;
+
+/** Page meta type */
+export type PageMeta = {
+  [K in keyof PageMetaDefined]: StripTypes<PageMetaDefined[K], number | null>;
+};
+
+/** Post meta type */
+export type PostMeta = {
+  [K in keyof PostMetaDefined]: StripTypes<PostMetaDefined[K], number | null>;
+};
+
+/**
+ * Document details for a navigation item.
+ */
+export type NavigationDoc =
+  // limit what can be exposed client side
+  | ({
+      collection: 'pages';
+    } & Pick<Page, 'header' | 'layout' | 'name'> & {
+        meta: PageMeta;
+      })
+  | ({
+      collection: 'posts';
+    } & Pick<Post, 'content' | 'title'> & {
+        heroImage?: Media | null | undefined;
+        meta: PostMeta;
+      });
+
 /** Navigation reference collection */
 export type NavigationReferenceCollection = NonNullable<
   NonNullable<Navigation['items']>[number]

libs/shared/util/payload-utils/eslint.config.mjs

@@ -0,0 +1,3 @@
+import baseConfig from '../../../../eslint.config.mjs';
+
+export default [...baseConfig];

libs/shared/util/payload-utils/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "shared-util-payload-utils",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shared/util/payload-utils/src",
+  "projectType": "library",
+  "tags": ["scope:shared", "type:util", "domain:payload"],
+  "targets": {}
+}

libs/shared/util/payload-utils/src/index.ts

@@ -0,0 +1 @@
+export { resolveMeta } from './lib/resolve-meta';

libs/shared/util/payload-utils/src/lib/resolve-meta.ts

@@ -0,0 +1,47 @@
+import type {
+  NavigationDoc,
+  PageMeta,
+  PostMeta,
+  SiteSetting
+} from '@codeware/shared/util/payload-types';
+
+/**
+ * Resolve the meta for a navigation document or the landing page from site settings.
+ *
+ * @param data - The navigation document or site settings to resolve the meta for.
+ * @returns Page or post meta or `null` if the meta data is not found.
+ */
+export const resolveMeta = (
+  data: NavigationDoc | SiteSetting | null | undefined
+): PageMeta | PostMeta | null => {
+  if (!data) {
+    return null;
+  }
+
+  // Resolve site settings landing page meta
+  if ('general' in data) {
+    const { landingPage } = data.general;
+    if (typeof landingPage === 'object') {
+      const { description, image, title } = landingPage.meta ?? {};
+      return {
+        description: description ?? undefined,
+        image: (typeof image === 'object' ? image : undefined) ?? undefined,
+        title: title ?? undefined
+      };
+    }
+  }
+
+  // Resolve collection page or post meta
+  if ('collection' in data) {
+    const { collection } = data;
+    switch (collection) {
+      case 'pages':
+      case 'posts':
+        return data.meta;
+      default:
+        return null;
+    }
+  }
+
+  return null;
+};

libs/shared/util/payload-utils/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "importHelpers": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/shared/util/payload-utils/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.tsx"
+  ]
+}

libs/shared/util/payload-utils/tsconfig.spec.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.d.ts"
+  ]
+}