Older/newer posts label in blog plugin should be configurable

[wgruszczyk]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Older/newer posts label in blog plugin should be configurable. If you want to use the blog engine to post other content (like release notes), the term 'post' becomes irrelevant in this context.

Reproducible demo

No response

Steps to reproduce

Expected behavior

Configuration option (as described in https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog) should be possible.

Actual behavior

Not configurable.

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Please either use swizzle or translations to do this. See https://docusaurus.io/docs/next/swizzling#do-i-need-to-swizzle

[wgruszczyk]

@Josh-Cena The actual problem is that I am using two blogs in parallel on one site. In the actual blog I want to keep it as it is, yet in the other I need to have it translated. Would it be possible to configure it this way ootb?

[Josh-Cena]

Errr... So, it's kinda complicated. We actually also have a blog purposed as release notes on our site: https://docusaurus.io/changelog However, it's heavily customized, and we've "swizzled" pretty much every component of the blog plugin.

The best way is to create a separate BlogPostPage component (you can use swizzle to eject the component, but don't put it in src/theme), and then use the blogPostComponent option to point to this custom component. This way, you can decouple the two plugins' theme components from each other. Then you can import BlogPostPaginator from a custom component instead of @theme/BlogPostPaginator.

I'm not sure if we necessarily want to offer another option just to customize the text label, provided this is a super niche use-case.

[wgruszczyk]

I get the point. Maybe making your own change-log a re-usable plugin would be a cool feature? To be honest this is the first thing I was looking for. Thank you for the quick feedback!

[Josh-Cena]

We've seen quite a few people re-purposing the blog plugin for other stuff, like wikis or digital gardens. We'd like to collect more use-cases, and maybe make dedicated content plugins for each. For now, anything outside of blogging itself is unlikely to get first-class support (which I think you can understand).

As for exposing our own changelog plugin—maybe not a bad idea! We can think about it after the v2 release. Right now, it's mostly a hack.

[slorber]

You can try this conditional logic after swizzling the component:

import useRouteContext from '@docusaurus/useRouteContext';

export default function BlogListPaginator(props: Props): JSX.Element {
  const isReleaseNotes = useRouteContext().plugin.id === "release-notes"

  return (
       isReleaseNotes ? 
            <Translate
                id="MY_ID">
                MY_CUSTOM_MESSAGE
            </Translate>
		       : 
            <Translate
                id="theme.blog.paginator.olderEntries"
                description="The label used to navigate to the older blog posts page (next page)">
                Older Entries
            </Translate>
     );
}

useRouteContext is experimental/undocumented for now but we'll likely keep this feature even if it's refactored.

You can also use useLocation().pathname.startsWith("/release-notes/") or whatever else makes sense for your use-case

[wgruszczyk]

Thank you for the hints! Probably at the moment the most sensible and safe solution will be to translate it permanently to something more general like Next/Previous.