Polish CSS of blog authors pages

facebook · Aug 1, 2024 · 0b8b103 · 0b8b103
1 parent 8b97d27
commit 0b8b103
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 22 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/Socials/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/Socials/index.tsx
@@ -55,9 +55,10 @@ export default function BlogAuthorSocials({
 }: {
   author: Props['author'];
 }): JSX.Element {
+  const entries = Object.entries(author.socials ?? {});
   return (
     <div className={styles.authorSocials}>
-      {Object.entries(author.socials ?? {}).map(([platform, linkUrl]) => {
+      {entries.map(([platform, linkUrl]) => {
         return <SocialLink key={platform} platform={platform} link={linkUrl} />;
       })}
     </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/Socials/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/Socials/styles.module.css
@@ -10,7 +10,12 @@
 }
 
 .authorSocials {
-  margin-top: 0.2rem;
+  /*
+  This ensures that container takes height even if there's no social link
+  This keeps author names aligned even if only some have socials
+   */
+  height: var(--docusaurus-blog-social-icon-size);
+
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -25,7 +30,7 @@
   height: var(--docusaurus-blog-social-icon-size);
   width: var(--docusaurus-blog-social-icon-size);
   line-height: 0;
-  margin-right: 0.3rem;
+  margin-right: 0.4rem;
 }
 
 .authorSocialIcon {

diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx
@@ -40,6 +40,10 @@ function AuthorName({name, as}: {name: string; as: Props['as']}) {
   }
 }
 
+function AuthorBlogPostCount({count}: {count: number}) {
+  return <span className={clsx(styles.authorBlogPostCount)}>{count}</span>;
+}
+
 // Note: in the future we might want to have multiple "BlogAuthor" components
 // Creating different display modes with the "as" prop may not be the best idea
 // Explainer: https://kyleshevlin.com/prefer-multiple-compositions/
@@ -50,12 +54,10 @@ export default function BlogAuthor({
   className,
   count,
 }: Props): JSX.Element {
-  const {name, title, url, socials, imageURL, email, page} = author;
+  const {name, title, url, imageURL, email, page} = author;
   const link =
     page?.permalink || url || (email && `mailto:${email}`) || undefined;
 
-  const hasSocials = socials && Object.keys(socials).length > 0;
-
   return (
     <div
       className={clsx(
@@ -66,25 +68,30 @@ export default function BlogAuthor({
       {imageURL && (
         <MaybeLink href={link} className="avatar__photo-link">
           <img
-            className={clsx('avatar__photo', styles.avatarImage)}
+            className={clsx('avatar__photo', styles.authorImage)}
             src={imageURL}
             alt={name}
           />
         </MaybeLink>
       )}
 
       {(name || title) && (
-        <div className="avatar__intro">
+        <div className={clsx('avatar__intro', styles.authorDetails)}>
           <div className="avatar__name">
             {name && (
               <MaybeLink href={link}>
                 <AuthorName name={name} as={as} />
               </MaybeLink>
             )}
-            {count && <span className={clsx(styles.count)}>{count}</span>}
+            {count && <AuthorBlogPostCount count={count} />}
           </div>
           {!!title && <AuthorTitle title={title} />}
-          {hasSocials && <AuthorSocials author={author} />}
+
+          {/*
+            We always render AuthorSocials even if there's none
+            This keeps other things aligned with flexbox layout
+          */}
+          <AuthorSocials author={author} />
         </div>
       )}
     </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css
@@ -5,36 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.avatarImage {
-  --ifm-avatar-photo-size: 3.2rem;
+.authorImage {
+  --ifm-avatar-photo-size: 3.6rem;
 }
 
-.author-as-h1 .avatarImage {
-  --ifm-avatar-photo-size: 6rem;
+.author-as-h1 .authorImage {
+  --ifm-avatar-photo-size: 7rem;
 }
 
-.author-as-h2 .avatarImage {
-  --ifm-avatar-photo-size: 5.2rem;
+.author-as-h2 .authorImage {
+  --ifm-avatar-photo-size: 5.4rem;
+}
+
+.authorDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-around;
 }
 
 .authorName {
   font-size: 1.1rem;
+  line-height: 1.1rem;
   display: flex;
   flex-direction: row;
 }
 
 .author-as-h1 .authorName {
   font-size: 2.4rem;
+  line-height: 2.4rem;
   display: inline;
 }
 
 .author-as-h2 .authorName {
   font-size: 1.4rem;
+  line-height: 1.4rem;
   display: inline;
 }
 
 .authorTitle {
-  margin-top: 0.06rem;
   font-size: 0.8rem;
   line-height: 0.8rem;
   display: -webkit-box;
@@ -45,20 +54,16 @@
 }
 
 .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 {
+.authorBlogPostCount {
   background: var(--ifm-color-secondary);
   color: var(--ifm-color-black);
   font-size: 0.8rem;