claycow.com
+45
src/components/organisms/GalleryPreviewCard.astro
+45
src/components/organisms/GalleryPreviewCard.astro
···
1
+
---
2
+
import { formatDate } from "@/utils";
3
+
import formatBlogTitleUrl from "@/utils/formatBlogTitleUrl";
4
+
import { Image } from "astro:assets";
5
+
import type { CollectionEntry } from "astro:content";
6
+
7
+
type Props = CollectionEntry<"gallery">["data"];
8
+
9
+
const { title, alt, image, width, height } = Astro.props;
10
+
---
11
+
12
+
<a
13
+
class="gallery-preview-card"
14
+
href={`/gallery/${formatBlogTitleUrl(title)}/`}
15
+
title={title}
16
+
>
17
+
<Image
18
+
src={image}
19
+
alt={alt}
20
+
loading={"lazy"}
21
+
format={"webp"}
22
+
quality={"low"}
23
+
/>
24
+
</a>
25
+
26
+
<style>
27
+
a {
28
+
display: inline-block;
29
+
}
30
+
31
+
a:hover > img {
32
+
outline-color: var(--blue);
33
+
}
34
+
35
+
img {
36
+
height: auto;
37
+
object-fit: contain;
38
+
margin: 0;
39
+
transition: outline-color 200ms;
40
+
outline-color: #0000;
41
+
outline-offset: 2px;
42
+
outline-style: solid;
43
+
outline-width: 4px;
44
+
}
45
+
</style>
+13
-5
src/pages/gallery/index.astro
+13
-5
src/pages/gallery/index.astro
···
9
9
import { getCollection } from "astro:content";
10
10
import SpeedInsights from "@vercel/speed-insights/astro";
11
11
import Analytics from "@vercel/analytics/astro";
12
+
import GalleryPreviewCard from "@/components/organisms/GalleryPreviewCard.astro";
12
13
13
14
const gallery = await getCollection("gallery");
14
15
---
···
23
24
}
24
25
25
26
main > section > ul {
26
-
display: flex;
27
-
flex-direction: column;
28
-
gap: 2rem;
29
27
list-style: none;
30
28
padding: 0;
29
+
display: grid;
30
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
31
+
gap: 2rem;
32
+
}
33
+
34
+
main > section > ul > li {
35
+
display: flex;
36
+
align-items: center;
31
37
}
32
38
</style>
33
39
</head>
···
39
45
{
40
46
gallery.length !== 0 && (
41
47
<ul>
42
-
{gallery.map((image) => (
43
-
<li>{image}</li>
48
+
{gallery.map(({ data }) => (
49
+
<li>
50
+
<GalleryPreviewCard {...data} />
51
+
</li>
44
52
))}
45
53
</ul>
46
54
)