fix: insights title/desc comes from yoast

gotripod · Jun 17, 2024 · c1b0729 · c1b0729
1 parent e314add
commit c1b0729
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 25 deletions.
diff --git a/app/api/index.ts b/app/api/index.ts
@@ -341,6 +341,10 @@ interface PostResponse {
       | false
   }
   yoast_head: string
+  yoast_head_json: {
+    title: string
+    description: string
+  }
   id: number
   title: {
     rendered: string
@@ -380,6 +384,10 @@ const postResponseToPost = async (post: PostResponse): Promise<Post> => {
     teamMemberJson = (await teamMemberResponse.json()) as any
   }
   return {
+    yoastHeadJson: {
+      title: post.yoast_head_json.title,
+      description: post.yoast_head_json.description
+    },
     yoastHtml: post.yoast_head,
     id: post.id,
     featuredMedia:
@@ -444,13 +452,13 @@ const getPostsPage = async (
 
 export {
   getCategoryBySlug,
-  getTagBySlug,
-  getTestimonial,
-  getTestimonialById,
   getMediaById,
-  getProjects,
-  getProjectBySlug,
+  getPageBySlug,
   getPostBySlug,
   getPostsPage,
-  getPageBySlug
+  getProjectBySlug,
+  getProjects,
+  getTagBySlug,
+  getTestimonial,
+  getTestimonialById
 }
diff --git a/app/helpers/seo.ts b/app/helpers/seo.ts
@@ -1,5 +1,5 @@
-import type { MetaMatches } from '@remix-run/react/dist/routeModules'
 import type { MetaDescriptor, MetaFunction } from '@remix-run/cloudflare'
+import type { MetaMatches } from '@remix-run/react/dist/routeModules'
 
 export const parentTitles = (matches: MetaMatches<Record<string, unknown>>) => {
   const meta = matches.map((x) => x.meta)

diff --git a/app/routes/insights_.$slug.tsx b/app/routes/insights_.$slug.tsx
@@ -12,16 +12,16 @@
  * /insights/topic/topic-name/page/2
  **/
 
-import Column from '../components/column'
-import Single from './insights/single'
-import { useLoaderData } from '@remix-run/react'
+import { invariant } from '@apollo/client/utilities/globals'
 import type { LoaderFunctionArgs } from '@remix-run/cloudflare'
 import { json } from '@remix-run/cloudflare'
-import { getPostBySlug, getPostPreview, getTestimonial } from '~/api'
-import { invariant } from '@apollo/client/utilities/globals'
-import { mergeMeta, parentTitles } from '~/helpers/seo'
+import type { MetaFunction } from '@remix-run/react'
+import { useLoaderData } from '@remix-run/react'
 import type { SitemapFunction } from 'remix-sitemap'
+import { getPostBySlug, getPostPreview, getTestimonial } from '~/api'
 import type { WPPost } from '~/types'
+import Column from '../components/column'
+import Single from './insights/single'
 
 export const sitemap: SitemapFunction = async ({ config }) => {
   const postsResponse = await fetch(
@@ -43,18 +43,15 @@ export const sitemap: SitemapFunction = async ({ config }) => {
   }))
 }
 
-export const meta = mergeMeta<typeof loader>(
-  () => [],
-  ({ data, matches }) => {
-    return [
-      {
-        name: 'description',
-        content: data?.post?.title
-      },
-      { title: (data?.post?.title || '') + ' | ' + parentTitles(matches) }
-    ]
-  }
-)
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return [
+    {
+      name: 'description',
+      content: data?.post?.yoastHeadJson.description
+    },
+    { title: data?.post?.yoastHeadJson.title }
+  ]
+}
 
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
   const url = new URL(request.url)

diff --git a/app/types.ts b/app/types.ts
@@ -82,6 +82,10 @@ export interface Taxonomy {
 
 export interface Post {
   yoastHtml: string
+  yoastHeadJson: {
+    title: string
+    description: string
+  }
   date: string
   slug: string
   link: string