Skip to content

Commit 6a9e07e

Browse files
CopilotCopilot
authored
fix(blog): align post author card UI with production-ready layout
Agent-Logs-Url: https://github.com/recodehive/recode-website/sessions/4ba6f977-41d2-46cd-99e3-5ac21711336d
1 parent d928d5a commit 6a9e07e

2 files changed

Lines changed: 155 additions & 82 deletions

File tree

‎src/theme/BlogPostItem/Footer/index.tsx‎

Lines changed: 67 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
44
import BlogPostItemFooterOriginal from "@theme-original/BlogPostItem/Footer";
55
import type BlogPostItemFooterType from "@theme/BlogPostItem/Footer";
66
import type { WrapperProps } from "@docusaurus/types";
7-
import { getAuthorProfile } from "@site/src/utils/authors";
7+
import { getAuthorProfile } from "../../../utils/authors";
88

99
import styles from "./styles.module.css";
1010

@@ -26,6 +26,29 @@ function getGitHubUrl(author: {
2626
return undefined;
2727
}
2828

29+
function getGitHubHandle(author: {
30+
key?: string;
31+
url?: string;
32+
name?: string;
33+
}): string | undefined {
34+
if (author.url && /github\.com\//i.test(author.url)) {
35+
const matched = author.url.match(/github\.com\/([^/?#]+)/i);
36+
if (matched?.[1]) {
37+
return `@${matched[1]}`;
38+
}
39+
}
40+
41+
if (author.key) {
42+
return `@${author.key}`;
43+
}
44+
45+
if (author.name) {
46+
return `@${author.name.toLowerCase().replace(/\s+/g, "")}`;
47+
}
48+
49+
return undefined;
50+
}
51+
2952
export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
3053
const { metadata, isBlogPostPage } = useBlogPost();
3154
const primaryAuthor = metadata.authors?.[0];
@@ -46,20 +69,26 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
4669

4770
const roundedReadTime = Math.max(1, Math.ceil(metadata.readingTime || 0));
4871
const readTimeText = `${roundedReadTime} min read`;
72+
const authorHandle = primaryAuthor
73+
? getGitHubHandle({
74+
key: primaryAuthor.key,
75+
name: primaryAuthor.name,
76+
url: primaryAuthor.url,
77+
})
78+
: undefined;
4979
const authorSummary =
5080
primaryAuthor?.description ||
5181
profile?.description ||
5282
primaryAuthor?.title ||
5383
profile?.title;
5484
const blogDate =
55-
metadata.formattedDate ||
56-
(metadata.date
57-
? new Date(metadata.date).toLocaleDateString("en-US", {
58-
year: "numeric",
59-
month: "short",
60-
day: "numeric",
61-
})
62-
: "");
85+
metadata.date &&
86+
new Date(metadata.date).toLocaleDateString("en-US", {
87+
year: "numeric",
88+
month: "short",
89+
day: "numeric",
90+
});
91+
const metaItems = [authorHandle, blogDate, readTimeText].filter(Boolean).join(" • ");
6392

6493
const showAuthorCard = Boolean(isBlogPostPage && primaryAuthor && authorName);
6594

@@ -68,7 +97,8 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
6897
<BlogPostItemFooterOriginal {...props} />
6998
{showAuthorCard && (
7099
<section className={styles.authorCard} aria-label="Post author details">
71-
<div className={styles.authorLeft}>
100+
<div className={styles.authorBody}>
101+
<div className={styles.authorAvatarWrapper}>
72102
{authorAvatar ? (
73103
<img
74104
className={styles.authorAvatar}
@@ -81,28 +111,39 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
81111
{authorName?.charAt(0).toUpperCase()}
82112
</div>
83113
)}
114+
<span className={styles.verifiedBadge} aria-hidden="true">
115+
✓
116+
</span>
117+
</div>
84118
<div className={styles.authorIdentity}>
85-
<p className={styles.authorName}>{authorName}</p>
86-
{blogDate ? <p className={styles.authorDate}>{blogDate}</p> : null}
119+
<div className={styles.authorNameRow}>
120+
<p className={styles.authorName}>{authorName}</p>
121+
<span className={styles.authorBadge}>Author</span>
122+
</div>
123+
{metaItems ? <p className={styles.authorMeta}>{metaItems}</p> : null}
87124
{authorSummary ? (
88125
<p className={styles.authorSummary}>{authorSummary}</p>
89126
) : null}
127+
{githubUrl ? (
128+
<Link
129+
className={styles.githubButton}
130+
to={githubUrl}
131+
target="_blank"
132+
rel="noopener noreferrer"
133+
>
134+
<span className={styles.githubIcon} aria-hidden="true">
135+
<svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
136+
<path
137+
fill="currentColor"
138+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.5 7.5 0 0 1 8 3.8c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
139+
/>
140+
</svg>
141+
</span>
142+
GitHub
143+
</Link>
144+
) : null}
90145
</div>
91146
</div>
92-
93-
<div className={styles.authorRight}>
94-
<p className={styles.readTime}>{readTimeText}</p>
95-
{githubUrl ? (
96-
<Link
97-
className={styles.githubButton}
98-
to={githubUrl}
99-
target="_blank"
100-
rel="noopener noreferrer"
101-
>
102-
GitHub Profile
103-
</Link>
104-
) : null}
105-
</div>
106147
</section>
107148
)}
108149
</>

‎src/theme/BlogPostItem/Footer/styles.module.css‎

Lines changed: 88 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,50 @@
11
.authorCard {
2-
position: relative;
32
width: 100%;
4-
margin-top: 1.25rem;
5-
padding: 1rem;
6-
padding-bottom: 3.75rem;
3+
margin-top: 1.5rem;
4+
padding: 1.5rem;
75
border: 1px solid var(--ifm-color-emphasis-300);
8-
border-radius: 12px;
9-
display: flex;
10-
align-items: stretch;
11-
justify-content: space-between;
12-
gap: 1rem;
13-
background: var(--ifm-background-surface-color);
6+
border-radius: 16px;
7+
background: linear-gradient(
8+
90deg,
9+
color-mix(in srgb, var(--ifm-color-emphasis-100) 80%, transparent),
10+
color-mix(in srgb, var(--ifm-color-emphasis-200) 45%, transparent)
11+
);
1412
box-sizing: border-box;
1513
}
1614

17-
.authorLeft {
15+
.authorBody {
1816
display: flex;
19-
align-items: center;
20-
gap: 0.75rem;
21-
min-width: 0;
17+
align-items: flex-start;
18+
gap: 1rem;
19+
}
20+
21+
.authorAvatarWrapper {
22+
position: relative;
23+
flex-shrink: 0;
24+
}
25+
26+
.verifiedBadge {
27+
position: absolute;
28+
right: -1px;
29+
bottom: -1px;
30+
width: 18px;
31+
height: 18px;
32+
border-radius: 999px;
33+
border: 2px solid var(--ifm-background-color);
34+
background: #34c38f;
35+
color: #fff;
36+
display: grid;
37+
place-items: center;
38+
font-size: 11px;
39+
line-height: 1;
40+
font-weight: 700;
2241
}
2342

2443
.authorAvatar,
2544
.authorAvatarFallback {
26-
width: 52px;
27-
height: 52px;
45+
width: 84px;
46+
height: 84px;
2847
border-radius: 50%;
29-
flex-shrink: 0;
3048
}
3149

3250
.authorAvatar {
@@ -44,77 +62,91 @@
4462

4563
.authorIdentity {
4664
min-width: 0;
65+
flex: 1;
4766
}
4867

4968
.authorName {
5069
margin: 0;
51-
font-weight: 700;
70+
font-size: 1.75rem;
71+
font-weight: 800;
5272
line-height: 1.2;
5373
}
5474

55-
.authorDate {
56-
margin: 0.25rem 0 0;
57-
color: var(--ifm-color-emphasis-700);
58-
font-size: 0.9rem;
75+
.authorNameRow {
76+
display: flex;
77+
align-items: center;
78+
gap: 0.75rem;
79+
flex-wrap: wrap;
5980
}
6081

61-
.authorSummary {
62-
margin: 0.45rem 0 0;
63-
color: var(--ifm-color-emphasis-800);
64-
font-size: 0.92rem;
65-
line-height: 1.4;
66-
max-width: 56ch;
82+
.authorBadge {
83+
padding: 0.2rem 0.55rem;
84+
border-radius: 999px;
85+
font-size: 0.75rem;
86+
font-weight: 600;
87+
color: #2563eb;
88+
background: #dbeafe;
6789
}
6890

69-
.authorRight {
70-
margin-left: auto;
71-
display: flex;
72-
flex-direction: column;
73-
align-items: flex-end;
74-
justify-content: flex-start;
75-
gap: 0.75rem;
76-
text-align: right;
91+
.authorMeta {
92+
margin: 0.35rem 0 0;
93+
color: var(--ifm-color-emphasis-700);
94+
font-size: 1rem;
7795
}
7896

79-
.readTime {
80-
margin: 0;
81-
color: var(--ifm-color-emphasis-700);
82-
font-weight: 600;
97+
.authorSummary {
98+
margin: 0.65rem 0 0;
99+
color: var(--ifm-color-emphasis-800);
100+
font-size: 1.1rem;
101+
line-height: 1.4;
102+
max-width: 68ch;
83103
}
84104

85105
.githubButton {
86-
position: absolute;
87-
right: 1rem;
88-
bottom: 1rem;
106+
margin-top: 1rem;
89107
display: inline-flex;
90108
align-items: center;
91-
justify-content: center;
92-
padding: 0.45rem 0.8rem;
93-
border-radius: 8px;
94-
border: 1px solid var(--ifm-color-primary);
109+
gap: 0.4rem;
110+
padding: 0.35rem 0.9rem;
111+
border-radius: 999px;
112+
border: 1px solid var(--ifm-color-emphasis-300);
113+
background: var(--ifm-background-color);
114+
color: var(--ifm-font-color-base);
115+
font-size: 0.95rem;
95116
font-weight: 600;
96117
text-decoration: none;
118+
width: fit-content;
119+
}
120+
121+
.githubIcon {
122+
display: inline-flex;
97123
}
98124

99125
.githubButton:hover {
100126
text-decoration: none;
101127
}
102128

129+
[data-theme="dark"] .authorBadge {
130+
color: #bfdbfe;
131+
background: color-mix(in srgb, #1d4ed8 35%, transparent);
132+
}
133+
103134
@media (max-width: 640px) {
104135
.authorCard {
105-
padding-bottom: 1rem;
136+
padding: 1rem;
137+
}
138+
139+
.authorBody {
106140
flex-direction: column;
107-
align-items: flex-start;
108141
}
109142

110-
.authorRight {
111-
width: 100%;
112-
margin-left: 0;
113-
align-items: flex-start;
114-
text-align: left;
143+
.authorAvatar,
144+
.authorAvatarFallback {
145+
width: 64px;
146+
height: 64px;
115147
}
116148

117-
.githubButton {
118-
position: static;
149+
.authorName {
150+
font-size: 1.25rem;
119151
}
120152
}

0 commit comments

Comments
 (0)