Skip to content

Commit f5f3f3e

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

File tree

4 files changed

+68
-64
lines changed

4 files changed

+68
-64
lines changed

‎src/components/Card.astro‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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-text/20 bg-background @lg:p-8 p-4 rounded-md">
7+
<div class="w-full @lg:w-1/2">
8+
<Image
9+
src={src}
10+
width={400}
11+
height={400}
12+
alt={alt}
13+
class="object-cover w-full h-auto rounded-md"
14+
/>
15+
</div>
16+
<div class="bg-background text-text @lg:w-1/2 grid gap-2" >
17+
<slot />
18+
</div>
19+
</div>

‎src/layouts/BlogPost.astro‎

Lines changed: 24 additions & 25 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,36 +34,34 @@ 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+
<article class="grid gap-8 @container">
38+
<div class="relative w-full @md:w-1/2 @3xl:w-1/4 rounded-md">
39+
{
40+
heroImage && (
41+
<Image
42+
alt={title}
43+
width={900}
44+
height={450}
45+
src={heroImage}
46+
class="object-cover w-full h-auto lg:h-[65vh] rounded-md"
47+
/>
48+
)
49+
}
50+
</div>
51+
<div class="w-full grid gap-8">
52+
<div class="flex gap-8 items-center rounded-md">
53+
<FormattedDate date={pubDate} />
3954
{
40-
heroImage && (
41-
<img
42-
width={1020}
43-
height={510}
44-
src={heroImage}
45-
alt=""
46-
class="object-cover w-full aspect-video mx-auto block shadow rounded-md"
47-
/>
55+
updatedDate && (
56+
<div class="last-updated-on">
57+
Last updated on <FormattedDate date={updatedDate} />
58+
</div>
4859
)
4960
}
50-
</div>
51-
<div class="w-full grid gap-10">
52-
<div class="flex gap-8 items-center py-10 border-b border-text/10">
53-
<FormattedDate date={pubDate} />
54-
{
55-
updatedDate && (
56-
<div class="last-updated-on">
57-
Last updated on <FormattedDate date={updatedDate} />
58-
</div>
59-
)
60-
}
6161

62-
<h1 class="font-bold">{title}</h1>
63-
</div>
64-
<slot />
62+
<h1 class="font-bold text-2xl @lg:text-4xl">{title}</h1>
6563
</div>
64+
<slot />
6665
</div>
6766
</article>
6867
</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: 23 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,26 @@ 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">
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+
style={{
22+
viewTransitionName: `blogs-${post.id}`,
23+
}}
24+
>
25+
<a href={`/blog/${post.slug}/`} class="w-full no-underline">
26+
<Card src={post.data.heroImage} alt={post.data.title}>
27+
<div class="flex justify-between items-center">
28+
<h4 class="title">{post.data.title}</h4>
2529
<FormattedDate date={post.data.pubDate} />
26-
</p>
27-
</a>
28-
</li>
29-
))
30-
}
31-
</ul>
32-
</section>
30+
</div>
31+
</Card>
32+
</a>
33+
</div>
34+
))
35+
}
36+
</div>
3337
</Layout>
34-
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)