Skip to content

Commit b4871f9

Browse files
julhoangjulhoang
authored
Story: Add User Profile component (#2241)
1 parent 87fb23b commit b4871f9

15 files changed

+294
-318
lines changed

‎core/views.py‎

Lines changed: 94 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
from datetime import date
2+
13
import os
24
import re
35

@@ -1209,6 +1211,51 @@ def get_context_data(self, **kwargs):
12091211

12101212
context["demo_badges_few"] = context["demo_badges"][:3]
12111213

1214+
context["demo_posts"] = [
1215+
{
1216+
"title": "A talk by Richard Thomson at the Utah C++ Programmers Group",
1217+
"url": "#",
1218+
"date": date(2025, 3, 3),
1219+
"category": "Issues",
1220+
"tag": "beast",
1221+
"author": {
1222+
"name": "Richard Thomson",
1223+
"profile_url": "#",
1224+
"role": "Contributor",
1225+
"avatar_url": "https://ui-avatars.com/api/?name=Richard+Thomson&size=48",
1226+
"badge_url": f"{badge_img}/badge-first-place.png",
1227+
},
1228+
},
1229+
{
1230+
"title": "A talk by Richard Thomson at the Utah C++ Programmers Group",
1231+
"url": "#",
1232+
"date": date(2025, 3, 3),
1233+
"category": "Issues",
1234+
"tag": "beast",
1235+
"author": {
1236+
"name": "Peter Dimov",
1237+
"profile_url": "#",
1238+
"role": "Maintainer",
1239+
"avatar_url": "https://ui-avatars.com/api/?name=Peter+Dimov&size=48",
1240+
"badge_url": f"{badge_img}/badge-bronze.png",
1241+
},
1242+
},
1243+
{
1244+
"title": "Boost.Bind and modern C++: a quick overview",
1245+
"url": "#",
1246+
"date": date(2025, 2, 15),
1247+
"category": "Releases",
1248+
"tag": "bind",
1249+
"author": {
1250+
"name": "Alex Morgan",
1251+
"profile_url": "#",
1252+
"role": "Contributor",
1253+
"avatar_url": "https://thispersondoesnotexist.com/",
1254+
},
1255+
},
1256+
]
1257+
context["demo_post"] = context["demo_posts"][0]
1258+
12121259
context["create_account_card_preview_url"] = (
12131260
f"{settings.STATIC_URL}img/checker.png"
12141261
)
@@ -1342,36 +1389,40 @@ def get_context_data(self, **kwargs):
13421389
"quote": "I use Boost daily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
13431390
"author": {
13441391
"name": "Name Surname",
1392+
"profile_url": "#",
13451393
"avatar_url": "/static/img/v3/demo_page/Avatar.png",
13461394
"role": "Contributor",
1347-
"role_badge": "/static/img/v3/demo_page/Badge.svg",
1395+
"badge_url": "/static/img/v3/demo_page/Badge.svg",
13481396
},
13491397
},
13501398
{
13511399
"quote": "I use Boost daily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
13521400
"author": {
13531401
"name": "Name Surname",
1402+
"profile_url": "#",
13541403
"avatar_url": "/static/img/v3/demo_page/Avatar.png",
13551404
"role": "Contributor",
1356-
"role_badge": "/static/img/v3/demo_page/Badge.svg",
1405+
"badge_url": "/static/img/v3/demo_page/Badge.svg",
13571406
},
13581407
},
13591408
{
13601409
"quote": "I use Boost d1aily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
13611410
"author": {
13621411
"name": "Name Surname",
1412+
"profile_url": "#",
13631413
"avatar_url": "/static/img/v3/demo_page/Avatar.png",
13641414
"role": "Contributor",
1365-
"role_badge": "/static/img/v3/demo_page/Badge.svg",
1415+
"badge_url": "/static/img/v3/demo_page/Badge.svg",
13661416
},
13671417
},
13681418
{
13691419
"quote": "I use Boost daily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
13701420
"author": {
13711421
"name": "Name Surname",
1422+
"profile_url": "#",
13721423
"avatar_url": "/static/img/v3/demo_page/Avatar.png",
13731424
"role": "Contributor",
1374-
"role_badge": "/static/img/v3/demo_page/Badge.svg",
1425+
"badge_url": "/static/img/v3/demo_page/Badge.svg",
13751426
},
13761427
},
13771428
],
@@ -1467,6 +1518,45 @@ def get_context_data(self, **kwargs):
14671518
"button_style": "primary",
14681519
}
14691520

1521+
context["user_profile_data"] = [
1522+
{
1523+
"name": "John Doe",
1524+
"profile_url": "#",
1525+
"role": "Author",
1526+
"avatar_url": f"{settings.STATIC_URL}img/v3/demo_page/Avatar.png",
1527+
"badge_url": f"{settings.STATIC_URL}img/v3/badges/badge-first-place.png",
1528+
"badge": "",
1529+
"bio": "",
1530+
},
1531+
{
1532+
"name": "Richard Thomson",
1533+
"profile_url": "#",
1534+
"role": "Contributor",
1535+
"avatar_url": "",
1536+
"badge_url": "",
1537+
"badge": "",
1538+
"bio": "",
1539+
},
1540+
{
1541+
"name": "Richard Thomson",
1542+
"profile_url": "#",
1543+
"role": "Contributor",
1544+
"avatar_url": "",
1545+
"badge_url": f"{settings.STATIC_URL}img/v3/badges/badge-bronze.png",
1546+
"badge": "",
1547+
"bio": "Big C++ fan. Not quite kidney-donation level, but close.",
1548+
},
1549+
{
1550+
"name": "Richard Thomson",
1551+
"profile_url": "#",
1552+
"role": "Author",
1553+
"avatar_url": "",
1554+
"badge_url": "",
1555+
"badge": "",
1556+
"bio": "Big C++ fan. Not quite kidney-donation level, but close.",
1557+
},
1558+
]
1559+
14701560
latest = Version.objects.most_recent()
14711561
if latest:
14721562
lv = (

‎libraries/utils.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -513,6 +513,7 @@ def get_avatar(user):
513513
medals[len(author_dicts)] if len(author_dicts) < len(medals) else ""
514514
),
515515
"bio": "",
516+
"profile_url": "",
516517
}
517518
)
518519
for ca in top_contributors:
@@ -525,6 +526,7 @@ def get_avatar(user):
525526
medals[len(author_dicts)] if len(author_dicts) < len(medals) else ""
526527
),
527528
"bio": "",
529+
"profile_url": "",
528530
}
529531
)
530532

‎static/css/v3/components.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,4 @@
4040
@import "./inline-card.css";
4141
@import "./dependencies-card.css";
4242
@import "./markdown-card.css";
43+
@import "./user-profile.css";

‎static/css/v3/library-intro-card.css‎

Lines changed: 4 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* Library Intro Card Component */
22

33
.library-intro-card {
4-
font-family: var(--font-sans, 'Mona Sans VF'), sans-serif;
4+
font-family: var(--font-sans, "Mona Sans VF"), sans-serif;
55
display: flex;
66
flex-direction: column;
77
max-width: 458px;
@@ -33,7 +33,8 @@
3333
display: flex;
3434
align-items: center;
3535
gap: 4px;
36-
font-family: var(--font-display, 'Mona Sans Display SemiCondensed'), sans-serif;
36+
font-family:
37+
var(--font-display, "Mona Sans Display SemiCondensed"), sans-serif;
3738
font-size: var(--font-size-large, 24px);
3839
font-weight: var(--font-weight-medium, 500);
3940
line-height: var(--line-height-tight, 1);
@@ -51,24 +52,6 @@
5152
border-radius: var(--border-radius-m, 6px);
5253
}
5354

54-
.library-intro-card__description {
55-
margin: 0;
56-
font-size: var(--font-size-base, 16px);
57-
font-weight: var(--font-weight-regular, 400);
58-
line-height: var(--line-height-default, 1.2);
59-
letter-spacing: -0.16px;
60-
color: var(--color-text-secondary, #585a64);
61-
}
62-
63-
/* Divider */
64-
65-
.library-intro-card__divider {
66-
height: 0;
67-
border: none;
68-
border-top: 1px solid var(--color-stroke-weak, rgba(5, 8, 22, 0.1));
69-
margin: 0;
70-
}
71-
7255
/* Author row */
7356

7457
.library-intro-card__author {
@@ -78,64 +61,8 @@
7861
padding: var(--space-large, 16px);
7962
}
8063

81-
.library-intro-card__author-content {
82-
display: flex;
83-
flex-direction: column;
84-
gap: var(--space-s, 4px);
85-
min-width: 0;
86-
flex: 1;
87-
}
88-
89-
.library-intro-card__author-meta {
90-
display: flex;
91-
align-items: center;
92-
gap: var(--space-default, 8px);
93-
}
94-
95-
.library-intro-card__author-name {
96-
margin: 0;
97-
font-size: var(--font-size-xs, 12px);
98-
font-weight: var(--font-weight-regular, 400);
99-
line-height: var(--line-height-default, 1.2);
100-
letter-spacing: -0.12px;
101-
color: var(--color-text-primary, #050816);
102-
}
103-
104-
.library-intro-card__author-role {
105-
margin: 0;
106-
font-size: var(--font-size-xs, 12px);
107-
font-weight: var(--font-weight-regular, 400);
108-
line-height: var(--line-height-default, 1.2);
109-
letter-spacing: -0.12px;
110-
color: var(--color-text-secondary, #585a64);
111-
}
112-
113-
.library-intro-card__author-badge {
114-
flex-shrink: 0;
115-
font-size: 16px;
116-
line-height: 1;
117-
}
118-
119-
.library-intro-card__author-badge img {
120-
width: 16px;
121-
height: 16px;
122-
}
123-
124-
.library-intro-card__author-bio {
125-
margin: 0;
126-
font-size: var(--font-size-xs, 12px);
127-
font-weight: var(--font-weight-regular, 400);
128-
line-height: var(--line-height-default, 1.2);
129-
letter-spacing: -0.12px;
130-
color: var(--color-text-secondary, #585a64);
131-
}
132-
13364
/* CTA */
13465

13566
.library-intro-card__cta {
136-
padding: var(--space-large, 16px);
137-
}
138-
139-
.library-intro-card__cta .btn {
140-
width: 100%;
67+
padding: var(--space-large);
14168
}

‎static/css/v3/post-cards.css‎

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -180,59 +180,6 @@
180180
gap: var(--space-medium);
181181
}
182182

183-
.post-card__avatar {
184-
width: var(--space-avatar);
185-
height: var(--space-avatar);
186-
flex-shrink: 0;
187-
border-radius: var(--border-radius-m);
188-
object-fit: cover;
189-
overflow: hidden;
190-
}
191-
192-
.post-card__author-info {
193-
display: flex;
194-
flex-direction: column;
195-
gap: var(--space-s);
196-
justify-content: center;
197-
}
198-
199-
.post-card__author-name {
200-
margin: 0;
201-
padding: 0;
202-
font-family: var(--font-sans);
203-
font-size: var(--font-size-xs);
204-
font-weight: var(--font-weight-regular);
205-
line-height: var(--line-height-default);
206-
letter-spacing: -0.12px;
207-
color: var(--color-text-primary);
208-
}
209-
210-
.post-card__author-role-row {
211-
display: flex;
212-
align-items: center;
213-
gap: var(--space-default);
214-
}
215-
216-
.post-card__author-role {
217-
margin: 0;
218-
padding: 0;
219-
font-family: var(--font-sans);
220-
font-size: var(--font-size-xs);
221-
font-weight: var(--font-weight-regular);
222-
line-height: var(--line-height-default);
223-
letter-spacing: -0.12px;
224-
color: var(--color-text-secondary);
225-
}
226-
227-
.post-card__badge {
228-
width: 16px;
229-
height: 16px;
230-
flex-shrink: 0;
231-
display: inline-flex;
232-
align-items: center;
233-
justify-content: center;
234-
}
235-
236183
.post-cards--content .post-cards__list {
237184
gap: 0;
238185
}

0 commit comments

Comments
 (0)