fix: ensure parent meta is merged properly

app/lib/meta.ts

@@ -1,12 +1,32 @@
 import OGImage from "../images/og_default.png";
+import type {
+  ServerRuntimeMetaArgs,
+  ServerRuntimeMetaDescriptor,
+} from "@remix-run/server-runtime";
 
-export function generateMetaTags(
+interface GenerateMetaTagsParams {
-  title: string,
+  title: string;
-  description: string,
+  description: string;
+  imageUrl?: {};
+  ogType?: "website" | "article";
+  parentMeta?: ServerRuntimeMetaArgs;
+}
+
+export function generateMetaTags({
+  title,
+  description,
   imageUrl = OGImage,
-  ogType: "website" | "article" = "website"
+  ogType = "website",
-) {
+  parentMeta,
+}: GenerateMetaTagsParams) {
+  let parentMetaMerged: ServerRuntimeMetaDescriptor[] = [];
+
+  if (parentMeta?.matches) {
+    parentMetaMerged = parentMeta?.matches.flatMap((match) => match.meta ?? []);
+  }
+
   return [
+    ...parentMetaMerged,
     { title },
     { name: "title", content: title },
     { name: "description", content: description },

app/routes/__info.about.tsx

@@ -3,13 +3,20 @@ import * as GraphicSection from "@/components/GraphicSection";
 
 import Logo from "@/images/lume-logo-bg.png";
 import { generateMetaTags } from "@/lib/meta.js";
+import type { ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
 
-export function meta() {
+export function meta(meta: ServerRuntimeMetaArgs) {
   const title = "About - web3.news: Uniting Web3 Community";
   const description =
     "Explore web3.news's mission to unite the Web3, Crypto, and DeFi communities under shared values of free speech, financial freedom, and privacy. Join our collaborative journey towards a technology-driven future.";
 
-  return [...generateMetaTags(title, description)];
+  return [
+    ...generateMetaTags({
+      title: title,
+      description: description,
+      parentMeta: meta,
+    }),
+  ];
 }
 export default function Page() {
   return (

app/routes/__info.donate.tsx

@@ -1,12 +1,19 @@
 import { Link } from "@remix-run/react";
 import { generateMetaTags } from "@/lib/meta.js";
+import type { ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
 
-export function meta() {
+export function meta(meta: ServerRuntimeMetaArgs) {
   const title = "Support - web3.news: Empowering a User-Owned Web";
   const description =
     "Join the mission of web3.news to shape an open, decentralized web. Your support fuels our commitment to community-driven innovation, transparency, and education in the Web3 space. Help us maintain our ad-free, user-focused platform. Donate now to be a part of this transformative journey.";
 
-  return [...generateMetaTags(title, description)];
+  return [
+    ...generateMetaTags({
+      title: title,
+      description: description,
+      parentMeta: meta,
+    }),
+  ];
 }
 export default function Page() {
   return (

app/routes/_index.tsx

@@ -11,18 +11,25 @@ import { useLoaderData } from "@remix-run/react";
 import type { SiteList } from "@/types.js";
 import { getAvailableSites } from "@/utils";
 import { generateMetaTags } from "@/lib/meta.js";
+import type { ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
 
 type LoaderData = {
   data: ApiResponse<Article>;
   sites: SiteList;
 };
 
-export function meta() {
+export function meta(meta: ServerRuntimeMetaArgs) {
   const title = "web3.news - Your Community Hub for Web3 & Blockchain News";
   const description =
     "Explore the pulse of the Web3 and blockchain world on web3.news, a community-driven platform championing privacy, free speech, and informed collaboration. Dive into the latest in Crypto and DeFi with us.";
 
-  return [...generateMetaTags(title, description)];
+  return [
+    ...generateMetaTags({
+      title: title,
+      description: description,
+      parentMeta: meta,
+    }),
+  ];
 }
 export let loader: LoaderFunction = async ({ request }) => {
   const url = new URL(request.url);

app/routes/article.$cid.tsx

@@ -4,13 +4,22 @@ import { prisma } from "@/lib/prisma";
 import { LoaderFunctionArgs } from "@remix-run/node";
 import { Article } from "@prisma/client";
 import { generateMetaTags } from "@/lib/meta.js";
+import type { ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
+
+export function meta(meta: ServerRuntimeMetaArgs<Article>) {
+  const data = meta.data as Article;
 
-export function meta({ data }: { data: Article }) {
   const title = `${data.title} - web3.news`;
   const description = `Read "${data.title}" on web3.news. Dive into insightful Web3 and blockchain discussions and stay updated with the latest trends and developments.`;
 
   return [
-    ...generateMetaTags(title, description, undefined, "article"),
+    ...generateMetaTags({
+      title: title,
+      description: description,
+      imageUrl: undefined,
+      ogType: "article",
+      parentMeta: meta,
+    }),
     { name: "og:url", content: data.url },
     { name: "twitter:url", content: data.url },
     { name: "canonical", content: data.url },

app/routes/search.tsx

@@ -6,6 +6,7 @@ import { Link, useLoaderData, useSearchParams } from "@remix-run/react";
 import { json, LoaderFunction } from "@remix-run/node";
 import type { SearchResult, SiteList } from "@/types.js";
 import { generateMetaTags } from "@/lib/meta.js";
+import type { ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
 
 type LoaderData = {
   sites: SiteList;
@@ -13,12 +14,18 @@ type LoaderData = {
   query: string;
 };
 
-export function meta() {
+export function meta(meta: ServerRuntimeMetaArgs) {
   const title = "Search - web3.news: Discover Community Web3 News";
   const description =
     "Explore a vast array of Web3, Crypto, and DeFi news and insights. Use web3.news search to dive deep into community-driven content, uncovering the latest trends and developments in the decentralized world.";
 
-  return [...generateMetaTags(title, description)];
+  return [
+    ...generateMetaTags({
+      title: title,
+      description: description,
+      parentMeta: meta,
+    }),
+  ];
 }
 export let loader: LoaderFunction = async ({ request }) => {
   const sites = getAvailableSites();