How to swizzle metadata for pages and blog posts in v3?

[KATT]

Hey - I wonder how I do dynamic metadata for posts and blog posts in V3

I managed to do this in v2 using useDoc() and useBlogPost(), but those hooks aren't available anymore (at least not in the same place)

I found #10467 (comment) but getting error "Module not found: Error: Can't resolve '@docusaurus/plugin-content-blog/client' in '~/dev/trpc/www/src/theme/BlogPostPage/Metadata'"

V2 reference

Below is how I did it in v2

Doc item

https://github.com/trpc/trpc/blob/6a3de59e0a45a48795e9e715933baca80ae30f06/www/src/theme/DocItem/Metadata/index.tsx

// www/src/theme/DocItem/Metadata/index.tsx
import { PageMetadata } from '@docusaurus/theme-common';
import { useDoc } from '@docusaurus/theme-common/internal';
import React from 'react';
import { docsParams } from '../../../../og-image/utils/zodParams';
import { useEnv } from '../../../utils/useEnv';

export default function DocItemMetadata(): React.JSX.Element {
  const { metadata } = useDoc();
  const { title, description } = metadata;

  const env = useEnv();

  const ogImg = `${env.OG_URL}/api/docs?${docsParams.toSearchString({
    title,
    description,
    permalink: metadata.permalink,
  })}`;

  return <PageMetadata title={title} description={description} image={ogImg} />;
}

Blog post

https://github.com/trpc/trpc/blob/6a3de59e0a45a48795e9e715933baca80ae30f06/www/src/theme/BlogPostPage/Metadata/index.tsx

// www/src/theme/BlogPostPage/Metadata/index.tsx
import { PageMetadata } from '@docusaurus/theme-common';
import { useBlogPost } from '@docusaurus/theme-common/internal';
import React from 'react';
import { blogParams } from '../../../../og-image/utils/zodParams';
import { useEnv } from '../../../utils/useEnv';

export default function BlogPostPageMetadata(): React.JSX.Element {
  const { metadata } = useBlogPost();
  const { title, description, date, tags, authors, frontMatter } = metadata;
  const { keywords } = frontMatter;
  const author = authors[0];
  const env = useEnv();

  const ogImg = `${env.OG_URL}/api/blog?${blogParams.toSearchString({
    title: metadata.title,
    description: metadata.description,
    /* eslint-disable @typescript-eslint/no-non-null-assertion */
    authorName: author.name!,
    authorTitle: author.title!,
    authorImg: author.imageURL!,
    /* eslint-enable @typescript-eslint/no-non-null-assertion */
    date,
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    readingTimeInMinutes: metadata.readingTime!,
  })}`;

  return (
    <PageMetadata
      title={title}
      description={description}
      keywords={keywords}
      image={ogImg}
    >
      <meta property="og:type" content="article" />
      <meta property="article:published_time" content={date} />
      {authors.some((author) => author.url) && (
        <meta
          property="article:author"
          content={authors
            .map((author) => author.url)
            .filter(Boolean)
            .join(',')}
        />
      )}
      {tags.length > 0 && (
        <meta
          property="article:tag"
          content={tags.map((tag) => tag.label).join(',')}
        />
      )}
    </PageMetadata>
  );
}

[KATT]

Actually, I reswizzled both of them with eject and installed @docusaurus/plugin-content-blog - seems to have fixed it for now with those as a reference! 👀

[slorber]

great 👍

These imports should work with v3.5: '@docusaurus/plugin-content-blog/client'

[KATT]

Here are the changes I made if anyone looks here in the future

https://github.com/trpc/trpc/pull/6053/files

[Isaac-Tait]

@KATT the link to your changes pointed me in the right direction! Thank you 😎.

I was getting a slew of errors in localhost and build.
Error: Can't render static file for pathname "/blog/pathname"
and TypeError: (0 , internal_namespaceObject.useBlogPost) is not a function

Once I changed the import in my theme from import { useBlogPost } from '@docusaurus/theme-common/internal'; to import { useBlogPost } from '@docusaurus/plugin-content-blog/client'; the errors went away.