Personal Site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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 {