polish display code

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -189,8 +189,8 @@ declare module '@theme/Blog/Components/Author' {
   import type {Author} from '@docusaurus/plugin-content-blog';
 
   export interface Props {
+    readonly as?: 'h1' | 'h2';
     readonly author: Author;
-    readonly singleAuthor: boolean;
     readonly className?: string;
     readonly count?: number;
   }

packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx

@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import Link, {type Props as LinkProps} from '@docusaurus/Link';
 import AuthorSocials from '@theme/Blog/Components/Author/Socials';
 import type {Props} from '@theme/Blog/Components/Author';
+import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
 function MaybeLink(props: LinkProps): JSX.Element {
@@ -27,7 +28,20 @@ function AuthorTitle({title}: {title: string}) {
   );
 }
 
+function AuthorName({name, as}: {name: string; as: Props['as']}) {
+  if (!as) {
+    return <span className={styles.authorName}>{name}</span>;
+  } else {
+    return (
+      <Heading as={as} className={styles.authorName}>
+        {name}
+      </Heading>
+    );
+  }
+}
+
 export default function BlogAuthor({
+  as,
   author,
   className,
   count,
@@ -39,19 +53,30 @@ export default function BlogAuthor({
   const hasSocials = socials && Object.keys(socials).length > 0;
 
   return (
-    <div className={clsx('avatar margin-bottom--sm', className)}>
+    <div
+      className={clsx(
+        'avatar margin-bottom--sm',
+        className,
+        styles[`author-as-${as}`],
+      )}>
       {imageURL && (
         <MaybeLink href={link} className="avatar__photo-link">
-          <img className="avatar__photo" src={imageURL} alt={name} />
+          <img
+            className={clsx('avatar__photo', styles.avatarImage)}
+            src={imageURL}
+            alt={name}
+          />
         </MaybeLink>
       )}
 
       {(name || title) && (
         <div className="avatar__intro">
           <div className="avatar__name">
-            <MaybeLink href={link}>
-              <span className={styles.authorName}>{name}</span>
-            </MaybeLink>
+            {name && (
+              <MaybeLink href={link}>
+                <AuthorName name={name} as={as} />
+              </MaybeLink>
+            )}
             {count && <span className={clsx(styles.count)}>{count}</span>}
           </div>
           {!!title && <AuthorTitle title={title} />}

packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css

@@ -5,8 +5,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.avatarImage {
+  --ifm-avatar-photo-size: 3.2rem;
+}
+
+.author-as-h1 .avatarImage {
+  --ifm-avatar-photo-size: 6rem;
+}
+
+.author-as-h2 .avatarImage {
+  --ifm-avatar-photo-size: 5.2rem;
+}
+
 .authorName {
   font-size: 1.1rem;
+  display: flex;
+  flex-direction: row;
+}
+
+.author-as-h1 .authorName {
+  font-size: 2.4rem;
+  display: inline;
+}
+
+.author-as-h2 .authorName {
+  font-size: 1.4rem;
+  display: inline;
 }
 
 .authorTitle {
@@ -20,6 +44,20 @@
   -webkit-box-orient: vertical;
 }
 
+.author-as-h1 .authorTitle {
+  margin-top: 0.4rem;
+  margin-bottom: 0.2rem;
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+}
+
+.author-as-h2 .authorTitle {
+  margin-top: 0.3rem;
+  margin-bottom: 0.2rem;
+  font-size: 1rem;
+  line-height: 1rem;
+}
+
 .count {
   background: var(--ifm-color-secondary);
   color: var(--ifm-color-black);

packages/docusaurus-theme-classic/src/theme/Blog/Pages/BlogAuthorsListPage/index.tsx

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {
   PageMetadata,
@@ -17,27 +17,33 @@ import type {Props} from '@theme/Blog/Pages/BlogAuthorsListPage';
 import SearchMetadata from '@theme/SearchMetadata';
 import Heading from '@theme/Heading';
 import Author from '@theme/Blog/Components/Author';
+import type {AuthorItemProp} from '@docusaurus/plugin-content-blog';
 import styles from './styles.module.css';
 
-function AuthorsList({authors}: {authors: Props['authors']}): JSX.Element {
+function AuthorListItem({author}: {author: AuthorItemProp}) {
   return (
-    <section className={clsx('margin-vert--lg', styles.section)}>
-      {authors.map((author) => (
-        <Author
-          key={author.key}
-          author={author}
-          singleAuthor
-          count={author.count}
-        />
-      ))}
+    <li className={styles.authorListItem}>
+      <Author as="h2" author={author} count={author.count} />
+    </li>
+  );
+}
+
+function AuthorsList({authors}: {authors: Props['authors']}) {
+  return (
+    <section className={clsx('margin-vert--lg', styles.authorsListSection)}>
+      <ul>
+        {authors.map((author) => (
+          <AuthorListItem key={author.key} author={author} />
+        ))}
+      </ul>
     </section>
   );
 }
 
 export default function BlogAuthorsListPage({
   authors,
   sidebar,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const title: string = translateBlogAuthorsListPageTitle();
   return (
     <HtmlClassNameProvider

packages/docusaurus-theme-classic/src/theme/Blog/Pages/BlogAuthorsListPage/styles.module.css

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-section {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+.authorListItem {
+  list-style-type: none;
+  margin-bottom: 2rem;
 }

packages/docusaurus-theme-classic/src/theme/Blog/Pages/BlogAuthorsPostsPage/index.tsx

@@ -23,11 +23,8 @@ import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/Blog/Pages/BlogAuthorsPostsPage';
 import BlogPostItems from '@theme/BlogPostItems';
-import Heading from '@theme/Heading';
 import Author from '@theme/Blog/Components/Author';
 
-import styles from './styles.module.css';
-
 function Metadata({author}: Props): JSX.Element {
   const title = useBlogAuthorPageTitle(author);
   return (
@@ -48,19 +45,14 @@ function ViewAllAuthorsLink() {
 }
 
 function Content({author, items, sidebar, listMetadata}: Props): JSX.Element {
-  const title = useBlogAuthorPageTitle(author);
   return (
     <BlogLayout sidebar={sidebar}>
       <header className="margin-bottom--xl">
-        <Heading as="h1">{title}</Heading>
-        <Author
-          author={author}
-          singleAuthor
-          className={clsx(styles.postsPageAuthor)}
-        />
+        <Author as="h1" author={author} />
         {author.description && <p>{author.description}</p>}
         <ViewAllAuthorsLink />
       </header>
+      <hr />
       <BlogPostItems items={items} />
       <BlogListPaginator metadata={listMetadata} />
     </BlogLayout>

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Authors/index.tsx

@@ -41,7 +41,6 @@ export default function BlogPostItemHeaderAuthors({
           )}
           key={idx}>
           <BlogAuthor
-            singleAuthor={singleAuthor}
             author={{
               ...author,
               // Handle author images using relative paths