feat(blog): authors page (#10216)

Co-authored-by: OzakIOne <OzakIOne@users.noreply.github.com>
Co-authored-by: sebastien <lorber.sebastien@gmail.com>
Co-authored-by: slorber <slorber@users.noreply.github.com>

packages/docusaurus-theme-common/src/internal.ts

@@ -90,3 +90,10 @@ export {useLockBodyScroll} from './hooks/useLockBodyScroll';
 export {useCodeWordWrap} from './hooks/useCodeWordWrap';
 export {getPrismCssVariables} from './utils/codeBlockUtils';
 export {useBackToTopButton} from './hooks/useBackToTopButton';
+
+export {
+  useBlogTagsPostsPageTitle,
+  useBlogAuthorPageTitle,
+  translateBlogAuthorsListPageTitle,
+  BlogAuthorsListViewAllLabel,
+} from './translations/blogTranslations';

packages/docusaurus-theme-common/src/translations/blogTranslations.tsx

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import Translate, {translate} from '@docusaurus/Translate';
+import {usePluralForm} from '../utils/usePluralForm';
+
+// Only used locally
+function useBlogPostsPlural(): (count: number) => string {
+  const {selectMessage} = usePluralForm();
+  return (count: number) =>
+    selectMessage(
+      count,
+      translate(
+        {
+          id: 'theme.blog.post.plurals',
+          description:
+            'Pluralized label for "{count} posts". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
+          message: 'One post|{count} posts',
+        },
+        {count},
+      ),
+    );
+}
+
+export function useBlogTagsPostsPageTitle(tag: {
+  label: string;
+  count: number;
+}): string {
+  const blogPostsPlural = useBlogPostsPlural();
+  return translate(
+    {
+      id: 'theme.blog.tagTitle',
+      description: 'The title of the page for a blog tag',
+      message: '{nPosts} tagged with "{tagName}"',
+    },
+    {nPosts: blogPostsPlural(tag.count), tagName: tag.label},
+  );
+}
+
+export function useBlogAuthorPageTitle(author: {
+  key: string;
+  name?: string;
+  count: number;
+}): string {
+  const blogPostsPlural = useBlogPostsPlural();
+  return translate(
+    {
+      id: 'theme.blog.author.pageTitle',
+      description: 'The title of the page for a blog author',
+      message: '{authorName} - {nPosts}',
+    },
+    {
+      nPosts: blogPostsPlural(author.count),
+      authorName: author.name || author.key,
+    },
+  );
+}
+
+export const translateBlogAuthorsListPageTitle = (): string =>
+  translate({
+    id: 'theme.blog.authorsList.pageTitle',
+    message: 'Authors',
+    description: 'The title of the authors page',
+  });
+
+export function BlogAuthorsListViewAllLabel(): ReactNode {
+  return (
+    <Translate
+      id="theme.blog.authorsList.viewAll"
+      description="The label of the link targeting the blog authors page">
+      View All Authors
+    </Translate>
+  );
+}

packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts

@@ -18,6 +18,8 @@ export const ThemeClassNames = {
     blogPostPage: 'blog-post-page',
     blogTagsListPage: 'blog-tags-list-page',
     blogTagPostListPage: 'blog-tags-post-list-page',
+    blogAuthorsListPage: 'blog-authors-list-page',
+    blogAuthorsPostsPage: 'blog-authors-posts-page',
 
     docsDocPage: 'docs-doc-page',
     docsTagsListPage: 'docs-tags-list-page',

packages/docusaurus-theme-common/src/utils/__tests__/tagsUtils.test.ts

@@ -7,42 +7,47 @@
 
 import _ from 'lodash';
 import {listTagsByLetters} from '../tagsUtils';
+import type {TagsListItem} from '@docusaurus/utils';
 
 describe('listTagsByLetters', () => {
-  type Param = Parameters<typeof listTagsByLetters>[0];
-  type Tag = Param[number];
   type Result = ReturnType<typeof listTagsByLetters>;
 
   it('creates letters list', () => {
-    const tag1: Tag = {
+    const tag1: TagsListItem = {
       label: 'tag1',
       permalink: '/tag1',
       count: 1,
+      description: '',
     };
-    const tag2: Tag = {
+    const tag2: TagsListItem = {
       label: 'Tag2',
       permalink: '/tag2',
       count: 11,
+      description: '',
     };
-    const tagZxy: Tag = {
+    const tagZxy: TagsListItem = {
       label: 'zxy',
       permalink: '/zxy',
       count: 987,
+      description: '',
     };
-    const tagAbc: Tag = {
+    const tagAbc: TagsListItem = {
       label: 'Abc',
       permalink: '/abc',
       count: 123,
+      description: '',
     };
-    const tagDef: Tag = {
+    const tagDef: TagsListItem = {
       label: 'def',
       permalink: '/def',
       count: 1,
+      description: '',
     };
-    const tagAaa: Tag = {
+    const tagAaa: TagsListItem = {
       label: 'aaa',
       permalink: '/aaa',
       count: 10,
+      description: '',
     };
 
     const expectedResult: Result = [