JavaScript-optional public web frontend for Bluesky
anartia.kelinci.net
sveltekit
atcute
bluesky
typescript
svelte
feat: link to original image
+16
-2
+16
-2
src/lib/components/embeds/image-embed.svelte
+16
-2
src/lib/components/embeds/image-embed.svelte
···
91
91
{@const image = images[index]}
92
92
{@const alt = trimRichText(image.alt)}
93
93
94
-
<img loading="lazy" src={image.thumb} {alt} class={`image` + (blur ? ` is-blurred` : ``)} />
94
+
<a href={image.fullsize.replace('@jpeg', '@png')} target="_blank" rel="noopener" class="link">
95
+
<img loading="lazy" src={image.thumb} {alt} class={`image` + (blur ? ` is-blurred` : ``)} />
96
+
</a>
95
97
96
98
{#if standalone && alt}
97
99
<ImageAlt {alt} />
···
163
165
max-height: 320px;
164
166
}
165
167
166
-
.image {
168
+
.item,
169
+
.single-item {
170
+
&:has(.link:focus-visible) {
171
+
outline: 2px solid var(--accent);
172
+
outline-offset: -1px;
173
+
}
174
+
}
175
+
176
+
.link {
167
177
position: absolute;
168
178
inset: 0;
179
+
outline: none;
180
+
}
181
+
182
+
.image {
169
183
background: var(--bg-slate);
170
184
width: 100%;
171
185
height: 100%;