From 3ca61c2b7a7ae4719f386ff91f1430c73b4eecd3 Mon Sep 17 00:00:00 2001 From: Derrick Hammer Date: Wed, 27 Dec 2023 11:20:55 -0500 Subject: [PATCH] fix: ensure parent meta is merged properly --- app/lib/meta.ts | 30 +++++++++++++++++++++++++----- app/routes/__info.about.tsx | 11 +++++++++-- app/routes/__info.donate.tsx | 11 +++++++++-- app/routes/_index.tsx | 11 +++++++++-- app/routes/article.$cid.tsx | 13 +++++++++++-- app/routes/search.tsx | 11 +++++++++-- 6 files changed, 72 insertions(+), 15 deletions(-) diff --git a/app/lib/meta.ts b/app/lib/meta.ts index 60ac8dc..a82901e 100644 --- a/app/lib/meta.ts +++ b/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( - title: string, - description: string, +interface GenerateMetaTagsParams { + title: 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 }, diff --git a/app/routes/__info.about.tsx b/app/routes/__info.about.tsx index 71bf7c9..3c75289 100644 --- a/app/routes/__info.about.tsx +++ b/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 ( diff --git a/app/routes/__info.donate.tsx b/app/routes/__info.donate.tsx index 2e44359..787cf88 100644 --- a/app/routes/__info.donate.tsx +++ b/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 ( diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 4de2285..9223251 100644 --- a/app/routes/_index.tsx +++ b/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
; 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); diff --git a/app/routes/article.$cid.tsx b/app/routes/article.$cid.tsx index a2f04b5..d768772 100644 --- a/app/routes/article.$cid.tsx +++ b/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
) { + 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 }, diff --git a/app/routes/search.tsx b/app/routes/search.tsx index 2e32c43..fea95c7 100644 --- a/app/routes/search.tsx +++ b/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();