Skip to content

Commit 40930bb

Browse files
author
Rodgers Gitau
committed
feat: blog container queries
1 parent 01f1ff1 commit 40930bb

File tree

4 files changed

+63
-48
lines changed

4 files changed

+63
-48
lines changed

‎src/components/Card.astro‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
import { Image } from "astro:assets";
3+
const { src, alt, active } = Astro.props;
4+
---
5+
6+
<div class="flex flex-col gap-4 @lg:flex-row shadow shadow-current @lg:p-8 p-4 rounded-b-2xl @lg:rounded-bl-none @lg:rounded-tr-2xl">
7+
<div class="@lg:w-1/2">
8+
<Image
9+
src={src}
10+
width={400}
11+
height={400}
12+
alt={alt}
13+
class="visible @lg:hidden object-cover w-full rounded-t-2xl"
14+
/>
15+
<Image
16+
width={900}
17+
height={900}
18+
src={src}
19+
alt={alt}
20+
class="hidden @lg:block object-cover w-full rounded-l-2xl"
21+
/>
22+
</div>
23+
<div class="bg-background text-text @lg:w-1/2 grid gap-2" >
24+
<slot />
25+
</div>
26+
</div>

‎src/layouts/BlogPost.astro‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import type { CollectionEntry } from "astro:content";
33
import FormattedDate from "../components/FormattedDate.astro";
44
import Layout from "./Layout.astro";
5+
import { Image } from "astro:assets";
56
67
type Props = CollectionEntry<"blog">["data"];
78
@@ -33,17 +34,17 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
3334
</style>
3435

3536
<Layout>
36-
<article>
37-
<div class="container mx-auto">
38-
<div class="relative w-full">
37+
<div class="container mx-auto @container">
38+
<article class="grid gap-8">
39+
<div class="relative w-full @md:w-1/2 @3xl:w-1/4">
3940
{
4041
heroImage && (
41-
<img
42-
width={1020}
42+
<Image
43+
alt={title}
44+
width={900}
4345
height={510}
4446
src={heroImage}
45-
alt=""
46-
class="object-cover w-full aspect-video mx-auto block shadow rounded-md"
47+
class="object-cover w-full mx-auto shadow rounded-md"
4748
/>
4849
)
4950
}
@@ -63,6 +64,6 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
6364
</div>
6465
<slot />
6566
</div>
66-
</div>
67-
</article>
67+
</article>
68+
</div>
6869
</Layout>

‎src/layouts/Layout.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import { Image } from "astro:assets";
2+
import { ViewTransitions } from "astro:transitions";
33
44
import BaseHead from "../components/BaseHead.astro";
55
import Footer from "../components/Footer.astro";
@@ -8,10 +8,10 @@ import Header from "../components/Header.astro";
88
import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
99
---
1010

11-
<!doctype html>
1211
<html lang="en">
1312
<head>
1413
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
14+
<ViewTransitions />
1515
</head>
1616
<body class="bg-background text-text">
1717
<div class="relative w-full min-h-screen h-full flex flex-col gap-0">

‎src/pages/blog/index.astro‎

Lines changed: 25 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
---
22
import { getCollection } from "astro:content";
33
4+
import Card from "../../components/Card.astro";
45
import FormattedDate from "../../components/FormattedDate.astro";
6+
57
import Layout from "../../layouts/Layout.astro";
68
79
const posts = (await getCollection("blog")).sort(
@@ -10,42 +12,28 @@ const posts = (await getCollection("blog")).sort(
1012
---
1113

1214
<Layout>
13-
<section class="mx-auto py-10">
14-
<ul class="grid grid-cols-1 lg:grid-cols-2 gap-10">
15-
{
16-
posts.map((post) => (
17-
<li class="w-full mx-auto">
18-
<a
19-
href={`/blog/${post.slug}/`}
20-
class="shadow shadow-text/10 p-2 aspect-video w-full"
21-
>
22-
<img width={720} height={360} src={post.data.heroImage} alt="" />
23-
<h4 class="title">{post.data.title}</h4>
24-
<p class="date">
25-
<FormattedDate date={post.data.pubDate} />
26-
</p>
27-
</a>
28-
</li>
29-
))
30-
}
31-
</ul>
32-
</section>
15+
<div class="grid grid-cols-1 lg:grid-cols-2 @container gap-8">
16+
{
17+
posts.map((post, idx) => (
18+
<div
19+
class={`@container w-full @md:w-1/2 @xl:w-1/3 @3xl:w-1/4
20+
${idx === 0 ?"lg:col-span-2": "col-span-1"}`
21+
}
22+
style={{
23+
viewTransitionName: `blogs-${post.id}`,
24+
}}
25+
>
26+
<a href={`/blog/${post.slug}/`} class="w-full no-underline">
27+
<Card src={post.data.heroImage} alt={post.data.title}>
28+
<div class="flex justify-between items-center">
29+
<h4 class="title">{post.data.title}</h4>
30+
<!-- <FormattedDate date={post.data.pubDate} /> -->
31+
</div>
32+
</Card>
33+
</a>
34+
</div>
35+
))
36+
}
37+
</div>
3338
</Layout>
3439

35-
<style>
36-
li:nth-of-type(1) {
37-
grid-column: span 2;
38-
width: 100%;
39-
margin: 0 auto;
40-
}
41-
a {
42-
display: grid;
43-
gap: 0.5rem;
44-
}
45-
46-
img {
47-
height: 100%;
48-
width: 100%;
49-
object-fit: cover;
50-
}
51-
</style>

0 commit comments

Comments
 (0)