diff options
| author | houston[bot] <astrobot-houston@users.noreply.github.com> | 2025-10-19 18:30:51 +0200 |
|---|---|---|
| committer | Matthieu Pignolet <matthieu@puffer.fish> | 2025-10-19 18:30:51 +0200 |
| commit | e435718c4dd6e956dc1748689a6156129650c250 (patch) | |
| tree | 575ab9929930553253b9cf0a8b8843d48d7e6867 /src/pages/blog/index.astro | |
Initial commit from Astro
Diffstat (limited to 'src/pages/blog/index.astro')
| -rw-r--r-- | src/pages/blog/index.astro | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro new file mode 100644 index 0000000..5b08c9f --- /dev/null +++ b/src/pages/blog/index.astro @@ -0,0 +1,114 @@ +--- +import { Image } from 'astro:assets'; +import { getCollection } from 'astro:content'; +import BaseHead from '../../components/BaseHead.astro'; +import Footer from '../../components/Footer.astro'; +import FormattedDate from '../../components/FormattedDate.astro'; +import Header from '../../components/Header.astro'; +import { SITE_DESCRIPTION, SITE_TITLE } from '../../consts'; + +const posts = (await getCollection('blog')).sort( + (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), +); +--- + +<!doctype html> +<html lang="en"> + <head> + <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> + <style> + main { + width: 960px; + } + ul { + display: flex; + flex-wrap: wrap; + gap: 2rem; + list-style-type: none; + margin: 0; + padding: 0; + } + ul li { + width: calc(50% - 1rem); + } + ul li * { + text-decoration: none; + transition: 0.2s ease; + } + ul li:first-child { + width: 100%; + margin-bottom: 1rem; + text-align: center; + } + ul li:first-child img { + width: 100%; + } + ul li:first-child .title { + font-size: 2.369rem; + } + ul li img { + margin-bottom: 0.5rem; + border-radius: 12px; + } + ul li a { + display: block; + } + .title { + margin: 0; + color: rgb(var(--black)); + line-height: 1; + } + .date { + margin: 0; + color: rgb(var(--gray)); + } + ul li a:hover h4, + ul li a:hover .date { + color: rgb(var(--accent)); + } + ul a:hover img { + box-shadow: var(--box-shadow); + } + @media (max-width: 720px) { + ul { + gap: 0.5em; + } + ul li { + width: 100%; + text-align: center; + } + ul li:first-child { + margin-bottom: 0; + } + ul li:first-child .title { + font-size: 1.563em; + } + } + </style> + </head> + <body> + <Header /> + <main> + <section> + <ul> + { + posts.map((post) => ( + <li> + <a href={`/blog/${post.id}/`}> + {post.data.heroImage && ( + <Image width={720} height={360} src={post.data.heroImage} alt="" /> + )} + <h4 class="title">{post.data.title}</h4> + <p class="date"> + <FormattedDate date={post.data.pubDate} /> + </p> + </a> + </li> + )) + } + </ul> + </section> + </main> + <Footer /> + </body> +</html> |