1+ ---
2+ import authors from ' ../data/authors.json' ;
3+
4+ export interface Props {
5+ authorId: string ;
6+ showBio? : boolean ;
7+ showSocial? : boolean ;
8+ }
9+
10+ const { authorId, showBio = false , showSocial = false } = Astro .props ;
11+ const author = authors [authorId as keyof typeof authors ];
12+
13+ if (! author ) {
14+ console .warn (` Author not found: ${authorId } ` );
15+ return null ;
16+ }
17+ ---
18+
19+ <div class =" author-info" >
20+ <img
21+ src ={ author .avatar }
22+ alt ={ author .name }
23+ class =" author-avatar"
24+ width =" 48"
25+ height =" 48"
26+ />
27+ <div class =" author-details" >
28+ <div class =" author-name" >{ author .name } </div >
29+ { showBio && (
30+ <p class = " author-bio" >{ author .bio } </p >
31+ )}
32+ { showSocial && (
33+ <div class = " author-social" >
34+ { author .twitter && (
35+ <a
36+ href = { ` https://twitter.com/${author .twitter } ` }
37+ target = " _blank"
38+ rel = " noopener noreferrer"
39+ class = " social-link"
40+ aria-label = { ` ${author .name } on Twitter ` }
41+ >
42+ <svg width = " 16" height = " 16" viewBox = " 0 0 24 24" fill = " currentColor" >
43+ <path d = " M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z" />
44+ </svg >
45+ </a >
46+ )}
47+ { author .github && (
48+ <a
49+ href = { ` https://github.com/${author .github } ` }
50+ target = " _blank"
51+ rel = " noopener noreferrer"
52+ class = " social-link"
53+ aria-label = { ` ${author .name } on GitHub ` }
54+ >
55+ <svg width = " 16" height = " 16" viewBox = " 0 0 16 16" fill = " currentColor" >
56+ <path fill-rule = " evenodd" 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.51-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.82.64-.18 1.32-.27 2-.27.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.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
57+ </svg >
58+ </a >
59+ )}
60+ </div >
61+ )}
62+ </div >
63+ </div >
64+
65+ <style >
66+ .author-info {
67+ display: flex;
68+ align-items: center;
69+ gap: 1rem;
70+ }
71+
72+ .author-avatar {
73+ border-radius: 50%;
74+ border: 2px solid var(--color-border);
75+ background-color: var(--color-bg-secondary);
76+ }
77+
78+ .author-details {
79+ flex: 1;
80+ }
81+
82+ .author-name {
83+ font-weight: 600;
84+ color: var(--color-text);
85+ }
86+
87+ .author-bio {
88+ margin-top: 0.25rem;
89+ font-size: 0.875rem;
90+ color: var(--color-text-secondary);
91+ line-height: 1.4;
92+ }
93+
94+ .author-social {
95+ display: flex;
96+ gap: 0.75rem;
97+ margin-top: 0.5rem;
98+ }
99+
100+ .social-link {
101+ color: var(--color-text-secondary);
102+ transition: color var(--transition-base);
103+ }
104+
105+ .social-link:hover {
106+ color: var(--color-primary);
107+ }
108+ </style >
0 commit comments