forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
style: tweak Link Card appearance
+49
-19
+48
-18
src/components/ui/LinkCard.astro
+48
-18
src/components/ui/LinkCard.astro
···
75
75
return
76
76
}
77
77
78
-
// Add loading state
79
-
el.classList.add('loading')
80
-
81
78
try {
82
79
// Fetch and update metadata
83
80
const metadata = await fetchLinkMetadata(url)
···
118
115
imageElement.alt = metadata.imageAlt
119
116
imageContainer.style.display = 'block'
120
117
}
121
-
} finally {
122
-
// Remove loading state
123
-
el.classList.remove('loading')
118
+
} catch {
119
+
// Handle error silently
124
120
}
125
121
}
126
122
···
150
146
const domain = new URL(url).hostname.replace('www.', '')
151
147
const urlElement = card.querySelector('.link-card-url')
152
148
if (urlElement) {
153
-
urlElement.textContent = domain
149
+
// Keep the SVG icon and update only the text content
150
+
const textSpan = urlElement.querySelector('span')
151
+
if (textSpan) {
152
+
textSpan.textContent = domain
153
+
} else {
154
+
// Fallback if span doesn't exist
155
+
urlElement.innerHTML = `
156
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
157
+
<path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path>
158
+
</svg>
159
+
<span>${domain}</span>
160
+
`
161
+
}
154
162
}
155
163
} catch {
156
164
const urlElement = card.querySelector('.link-card-url')
157
165
if (urlElement) {
158
-
urlElement.textContent = 'invalid-url'
166
+
// Keep the SVG icon and update only the text content
167
+
const textSpan = urlElement.querySelector('span')
168
+
if (textSpan) {
169
+
textSpan.textContent = 'invalid-url'
170
+
} else {
171
+
// Fallback if span doesn't exist
172
+
urlElement.innerHTML = `
173
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
174
+
<path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path>
175
+
</svg>
176
+
<span>invalid-url</span>
177
+
`
178
+
}
159
179
}
160
180
}
161
181
}
···
196
216
text-decoration: none;
197
217
}
198
218
199
-
.prose .link-card.loading {
200
-
pointer-events: none;
201
-
}
202
-
203
219
.prose .link-card-content {
204
-
padding: 1rem 1.25rem 0.75rem 1.25rem;
220
+
padding: 0.75rem 1.25rem 0.75rem 1.25rem;
205
221
}
206
222
207
223
.prose .link-card-image-outer {
···
220
236
height: 0;
221
237
padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
222
238
overflow: hidden;
223
-
background: var(--border);
239
+
background: var(--astro-code-background);
224
240
position: relative;
225
241
margin: 0;
226
242
padding: 0;
227
-
border-radius: 8px;
243
+
border-radius: 6px;
228
244
}
229
245
230
246
/* Modern browsers with aspect-ratio support */
···
253
269
font-size: var(--font-size-m);
254
270
font-weight: var(--font-weight-bold);
255
271
color: var(--text-primary);
256
-
margin: 0 0 0.375rem 0;
272
+
margin: 0.375rem 0 0 0;
257
273
white-space: nowrap;
258
274
overflow: hidden;
259
275
text-overflow: ellipsis;
···
264
280
font-size: var(--font-size-m);
265
281
color: var(--text-primary);
266
282
opacity: 0.6;
267
-
margin: 0 0 0.1875rem 0;
283
+
margin: 0;
268
284
display: -webkit-box !important;
269
285
-webkit-line-clamp: 2 !important;
270
286
-webkit-box-orient: vertical !important;
···
291
307
}
292
308
293
309
.prose .link-card-url {
294
-
font-size: var(--font-size-s);
295
310
color: var(--text-secondary);
296
311
letter-spacing: 0.015em;
297
312
margin: 0;
313
+
display: flex;
314
+
align-items: center;
315
+
gap: 0.325rem;
316
+
}
317
+
318
+
.prose .link-card-url svg {
319
+
width: 0.875em;
320
+
height: 0.875em;
321
+
flex-shrink: 0;
322
+
vertical-align: middle;
323
+
}
324
+
325
+
.prose .link-card-url span {
326
+
font-size: var(--font-size-s);
327
+
vertical-align: baseline;
298
328
}
299
329
300
330
.prose .link-card:not(:has(.link-card-image[style*='display: block'])) {
+1
-1
src/plugins/remark-embedded-media.mjs
+1
-1
src/plugins/remark-embedded-media.mjs
···
17
17
<div class="link-card-wrapper">
18
18
<a href="${url}" class="link-card" target="_blank" rel="noopener noreferrer" data-url="${url}">
19
19
<div class="link-card-content">
20
+
<div class="link-card-url"></div>
20
21
<p class="link-card-title" style="display: none;"></p>
21
22
<p class="link-card-description" style="display: none;"></p>
22
-
<div class="link-card-url">Loading...</div>
23
23
</div>
24
24
<div class="link-card-image-outer">
25
25
<div class="link-card-image" style="display: none;">