Personal Site
Add links to author content and position the link to profile underneath the handle if no display name is given
TODO: style this to make them look less vibrantly colourful lol
+33
-4
+33
-4
src/components/home/feeds/Post.astro
+33
-4
src/components/home/feeds/Post.astro
···
71
71
<article class="post" style={`--box-tlbr-png: url(${BoxTlbr.src});`}>
72
72
<section class="author">
73
73
{author.avatar && <img src={author.avatar} alt="" class="avatar" />}
74
-
{author.displayName && <div class="name">{author.displayName}</div>}
75
-
<div class="handle">@{author.handle}</div>
74
+
{
75
+
author.displayName ? (
76
+
<a class="name" href={`https://deer.social/profile/${author.did}`}>
77
+
{author.displayName}
78
+
</a>
79
+
) : null
80
+
}
81
+
<div class="handle">
82
+
@<a href={`https://${author.handle}/`}>{author.handle}</a>
83
+
</div>
84
+
{
85
+
!author.displayName ? (
86
+
<a
87
+
class="name no-name"
88
+
href={`https://deer.social/profile/${author.did}`}
89
+
>
90
+
Profile on deer.social
91
+
</a>
92
+
) : null
93
+
}
76
94
</section>
77
95
<div class="link">
78
96
Open on
···
96
114
.author {
97
115
display: grid;
98
116
grid-template:
99
-
"avatar name" auto
100
-
"avatar handle" auto /
117
+
"avatar name" 1.5em
118
+
"avatar handle" 1.5em /
101
119
auto 1fr;
120
+
121
+
&:has(.no-name) {
122
+
grid-template-areas: "avatar handle" "avatar name";
123
+
}
124
+
125
+
gap: 0 5px;
102
126
align-items: center;
103
127
justify-content: start;
104
128
105
129
.avatar {
106
130
grid-area: avatar;
131
+
width: 3em;
107
132
height: 3em;
108
133
}
109
134
110
135
.name {
111
136
grid-area: name;
137
+
overflow: hidden;
138
+
white-space: nowrap;
139
+
/* use string instead of keyword so its longer */
140
+
text-overflow: "...";
112
141
}
113
142
114
143
.handle {