@postedin/cms-client 0.1.0

package/src/placeholder.ts

@@ -0,0 +1,9 @@
+export function getRandomPlaceholderUrl(width = 600, height = 400) {
+	const pastelColors = ['ebfaf5', 'c3c8cd', 'faf0e6', 'f5f5eb', 'f0ebfa'];
+
+	const randomIndex = Math.floor(Math.random() * pastelColors.length);
+
+	const randomColor = pastelColors[randomIndex];
+
+	return `https://placehold.co/${width}x${height}/${randomColor}/${randomColor}`;
+}

package/src/resolve-menu-items.ts

@@ -0,0 +1,184 @@
+import type { WiredCategory } from './collections/categories';
+import type {
+	CmsLink,
+	CmsMainMenu,
+	CmsMenuItem,
+} from './collections/header-footer';
+import type { WiredPage } from './collections/pages';
+import type { WiredTag } from './collections/tags';
+import type { WiredTeamMember } from './collections/team-members';
+import type { Page } from './payload-types';
+import type { Routes } from './routes';
+
+type SubmenuItem = NonNullable<CmsMenuItem['submenuItems']>[0];
+
+function customLink(label: string, url: string): CmsLink {
+	return { type: 'custom', label, url };
+}
+
+function sortByLabel(items: SubmenuItem[]): SubmenuItem[] {
+	return [...items].sort((a, b) => {
+		const labelA = a.link?.label ?? '';
+		const labelB = b.link?.label ?? '';
+		return labelA.localeCompare(labelB);
+	});
+}
+
+function pageToSubmenuItem(routes: Routes, page: WiredPage): SubmenuItem {
+	return {
+		type: 'link',
+		link: customLink(page.title, routes.page(page)),
+	};
+}
+
+function categoryToSubmenuItem(
+	routes: Routes,
+	category: WiredCategory,
+): SubmenuItem {
+	return {
+		type: 'link',
+		link: customLink(category.title, routes.blog('category', category.path)),
+	};
+}
+
+function tagToSubmenuItem(routes: Routes, tag: WiredTag): SubmenuItem {
+	return {
+		type: 'link',
+		link: customLink(tag.title, routes.blog('tag', tag.slug)),
+	};
+}
+
+function teamMemberToSubmenuItem(
+	routes: Routes,
+	member: WiredTeamMember,
+): SubmenuItem {
+	return {
+		type: 'link',
+		link: customLink(
+			`${member.firstName} ${member.lastName}`.trim(),
+			routes.team('member', member.slug),
+		),
+	};
+}
+
+export type MenuCollectionData = {
+	pages: WiredPage[];
+	categories: WiredCategory[];
+	tags: WiredTag[];
+	teamMembers: WiredTeamMember[];
+};
+
+type ResolvedNested = {
+	submenuItems: SubmenuItem[] | null | undefined;
+	mainLink?: CmsLink;
+	hasMainLink?: boolean;
+};
+
+/** The words the menu adds of its own. Site copy, so the site supplies it. */
+export type MenuLabels = {
+	/** Heads the team-members submenu: the site's `team.title`. */
+	team: string;
+};
+
+function resolveNested(
+	menuItem: CmsMenuItem,
+	data: MenuCollectionData,
+	routes: Routes,
+	labels: MenuLabels,
+): ResolvedNested {
+	const { nestedType } = menuItem;
+
+	if (nestedType === 'nested-pages') {
+		const parentPage = menuItem.parentPage;
+		if (!parentPage || typeof parentPage === 'string') {
+			return { submenuItems: menuItem.submenuItems };
+		}
+		const parentId = (parentPage as Page).id;
+		const wiredParent = data.pages.find((p) => p.id === parentId);
+		if (!wiredParent) {
+			return { submenuItems: menuItem.submenuItems };
+		}
+		const mainLink = customLink(wiredParent.title, routes.page(wiredParent));
+		return {
+			submenuItems: wiredParent.children.map((child) =>
+				pageToSubmenuItem(routes, child),
+			),
+			mainLink,
+			hasMainLink: true,
+		};
+	}
+
+	if (nestedType === 'collection') {
+		const slug = menuItem.collectionSlug;
+
+		if (slug === 'categories') {
+			return {
+				submenuItems: sortByLabel(
+					data.categories.map((c) => categoryToSubmenuItem(routes, c)),
+				),
+				hasMainLink: false,
+			};
+		}
+
+		if (slug === 'tags') {
+			return {
+				submenuItems: sortByLabel(
+					data.tags.map((t) => tagToSubmenuItem(routes, t)),
+				),
+				hasMainLink: false,
+			};
+		}
+
+		if (slug === 'team-members') {
+			return {
+				submenuItems: sortByLabel(
+					data.teamMembers.map((m) => teamMemberToSubmenuItem(routes, m)),
+				),
+				mainLink: customLink(labels.team, routes.team()),
+				hasMainLink: true,
+			};
+		}
+
+		return { submenuItems: menuItem.submenuItems };
+	}
+
+	return { submenuItems: menuItem.submenuItems };
+}
+
+export function resolveMenuItems(
+	mainMenu: CmsMainMenu,
+	data: MenuCollectionData,
+	// Menu entries become `type: 'custom'` links holding a finished URL, so
+	// `cmsToHref` never sees them — build `routes` with the homepage, so it
+	// collapses to `/` here.
+	routes: Routes,
+	labels: MenuLabels,
+): CmsMainMenu {
+	return mainMenu.map((entry) => {
+		const menuItem = entry.menuItem;
+		if (!menuItem || menuItem.type !== 'nested') {
+			return entry;
+		}
+
+		const { submenuItems, mainLink, hasMainLink } = resolveNested(
+			menuItem,
+			data,
+			routes,
+			labels,
+		);
+
+		const resolvedMainLink = mainLink ?? menuItem.mainLink;
+		const resolvedHasMainLink =
+			hasMainLink !== undefined ? hasMainLink : menuItem.hasMainLink;
+
+		return {
+			...entry,
+			menuItem: {
+				...menuItem,
+				submenuItems,
+				mainLink: resolvedMainLink,
+				hasMainLink: resolvedHasMainLink,
+			},
+		};
+	});
+}

package/src/routes.ts

@@ -0,0 +1,184 @@
+import type { Locale, Locales } from './locales';
+import type { Page } from './payload-types';
+
+function trimSlashes(str: string) {
+	return str.replace(/^\/+|\/+$/g, '');
+}
+
+type BasePath = `/${string}/` | '/';
+function page(base: BasePath, dynamic: string) {
+	// If dynamic is null we must have bad data, we only restrict things with types
+	if (!dynamic) {
+		return '/404'; // give a 500 error or somehting here in future
+	}
+
+	return base + trimSlashes(dynamic);
+}
+
+/**
+ * The page configured as the site homepage. It is served at `/` (or `/en/`) and
+ * is deliberately not published at its own slug, so every page URL this module
+ * builds for it has to collapse to the site root. Read it with `getHomePageRef`
+ * on the server, or take it as a prop inside a hydrated island.
+ */
+export type HomePageRef = { id: string; path: string } | null;
+
+type Type =
+	| 'blog'
+	| 'page'
+	| 'category'
+	| 'author'
+	| 'post'
+	| 'tag'
+	| 'team-member';
+
+export type CreateRoutes = (
+	locale: Locale,
+	homePage?: HomePageRef,
+) => ReturnType<typeof buildRoutes>;
+
+/**
+ * The site's route builder, bound to its locale configuration. Pure, so it is
+ * as usable inside a hydrated island as on the server.
+ */
+export function defineRoutes({ prefixPath }: Pick<Locales, 'prefixPath'>) {
+	return ((locale: Locale, homePage: HomePageRef = null) =>
+		buildRoutes(prefixPath, locale, homePage)) satisfies CreateRoutes;
+}
+
+function buildRoutes(
+	prefixPath: Locales['prefixPath'],
+	locale: Locale,
+	homePage: HomePageRef,
+) {
+	const p = (path: string) => {
+		const prefixed = prefixPath(path, locale);
+		return prefixed.endsWith('/') ? prefixed : `${prefixed}/`;
+	};
+
+	const rootRoutes = {
+		index: () => p('/'),
+		search: () => p(locale === 'en' ? '/search' : '/buscar'),
+	} as const;
+
+	const teamBase = locale === 'en' ? '/team' : '/equipo';
+	const teamRoutes = {
+		index: () => p(teamBase),
+		member: (slug: string) => p(page(`${teamBase}/`, slug)),
+		// File endpoint — no trailing slash before the extension.
+		vcard: (slug: string) =>
+			`${prefixPath(page(`${teamBase}/`, slug), locale)}.vcf`,
+	} as const;
+
+	const blogRoutes = {
+		index: () => p('/blog'),
+		more: () => p('/blog/2'),
+		page: (n: number) => p(`/blog/${n}`) as string,
+		category: (path: string) => p(page('/blog/category/', path)),
+		author: (slug: string) => p(page('/blog/author/', slug)),
+		post: (slug: string) => p(page('/blog/', slug)),
+		tag: (slug: string) => p(page('/blog/tag/', slug)),
+	} as const;
+
+	type RootRoutes = typeof rootRoutes;
+	const root = <T extends keyof RootRoutes = 'index'>(
+		name: T = 'index' as T,
+		...params: Parameters<RootRoutes[T]>
+	): ReturnType<RootRoutes[T]> => (rootRoutes[name] as any)(...params);
+
+	type BlogRoutes = typeof blogRoutes;
+	const blog = <T extends keyof BlogRoutes = 'index'>(
+		name: T = 'index' as T,
+		...params: Parameters<BlogRoutes[T]>
+	): ReturnType<BlogRoutes[T]> => (blogRoutes[name] as any)(...params);
+
+	type TeamRoutes = typeof teamRoutes;
+	const team = <T extends keyof TeamRoutes = 'index'>(
+		name: T = 'index' as T,
+		...params: Parameters<TeamRoutes[T]>
+	): ReturnType<TeamRoutes[T]> => (teamRoutes[name] as any)(...params);
+
+	// Callers hand us either a full document (match by id) or a bare path (match
+	// by path) — the homepage has to collapse to the root either way.
+	const isHomePage = (slugOrPage: string | Page) => {
+		if (!homePage) {
+			return false;
+		}
+
+		return typeof slugOrPage === 'string'
+			? trimSlashes(slugOrPage) === homePage.path
+			: slugOrPage.id === homePage.id;
+	};
+
+	const pageRoute = (slugOrPage: string | Page) => {
+		if (isHomePage(slugOrPage)) {
+			return rootRoutes.index();
+		}
+
+		if (typeof slugOrPage !== 'string') {
+			const url = slugOrPage.breadcrumbs?.at(-1)?.url;
+			if (url) {
+				return p(url);
+			}
+
+			return p(page('/', slugOrPage.slug));
+		}
+
+		return p(page('/', slugOrPage));
+	};
+
+	return {
+		locale,
+		root,
+		blog,
+		team,
+		page: pageRoute,
+		search: rootRoutes.search,
+		find(routeType: Type | string, slugOrPath: string | undefined) {
+			const type = routeType as Type;
+
+			if (type === 'blog') {
+				return blog();
+			}
+
+			if (!slugOrPath) {
+				return undefined;
+			}
+
+			if (type === 'page') {
+				return pageRoute(slugOrPath);
+			}
+
+			if (type === 'team-member') {
+				return team('member', slugOrPath);
+			}
+
+			if (['category', 'author', 'post', 'tag'].includes(type)) {
+				return blog(type, slugOrPath);
+			}
+		},
+		fromCMSCollection(
+			collectionSlug: string,
+			doc: { slug: string } & Partial<Page>,
+		) {
+			switch (collectionSlug) {
+				case 'posts':
+					return blog('post', doc.slug);
+				case 'pages':
+					return pageRoute(doc as Page);
+				case 'categories':
+					return blog('category', doc.slug);
+				case 'authors':
+					return blog('author', doc.slug);
+				case 'tags':
+					return blog('tag', doc.slug);
+				case 'team-members':
+					return team('member', doc.slug);
+			}
+
+			return undefined;
+		},
+	} as const;
+}
+
+export type Routes = ReturnType<typeof buildRoutes>;