|
1 | 1 | --- |
| 2 | +import { getCollection } from 'astro:content'; |
2 | 3 | import BaseHead from '../components/BaseHead.astro'; |
3 | 4 | import Footer from '../components/Footer.astro'; |
4 | 5 | import Header from '../components/Header.astro'; |
| 6 | +import FormattedDate from '../components/FormattedDate.astro'; |
5 | 7 | import { SITE_DESCRIPTION, SITE_TITLE } from '../consts'; |
| 8 | +
|
| 9 | +const posts = (await getCollection('blog')).sort( |
| 10 | + (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), |
| 11 | +); |
6 | 12 | --- |
7 | 13 |
|
8 | 14 | <!doctype html> |
9 | 15 | <html lang="en"> |
10 | 16 | <head> |
11 | 17 | <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> |
| 18 | + <style> |
| 19 | + main { |
| 20 | + width: 720px; |
| 21 | + max-width: calc(100% - 2em); |
| 22 | + margin: auto; |
| 23 | + padding: 3em 1em; |
| 24 | + } |
| 25 | + ul { |
| 26 | + list-style-type: none; |
| 27 | + margin: 0; |
| 28 | + padding: 0; |
| 29 | + } |
| 30 | + ul li { |
| 31 | + margin-bottom: 2rem; |
| 32 | + } |
| 33 | + ul li a { |
| 34 | + text-decoration: none; |
| 35 | + color: inherit; |
| 36 | + } |
| 37 | + ul li a:hover .title { |
| 38 | + text-decoration: underline; |
| 39 | + } |
| 40 | + .title { |
| 41 | + margin: 0 0 0.25rem 0; |
| 42 | + font-size: 1.5rem; |
| 43 | + font-weight: 700; |
| 44 | + color: rgb(var(--black)); |
| 45 | + line-height: 1.3; |
| 46 | + } |
| 47 | + .date { |
| 48 | + margin: 0; |
| 49 | + color: rgb(var(--gray)); |
| 50 | + font-size: 0.875rem; |
| 51 | + } |
| 52 | + .description { |
| 53 | + margin: 0.5rem 0 0 0; |
| 54 | + color: rgb(var(--gray-dark)); |
| 55 | + font-size: 1rem; |
| 56 | + } |
| 57 | + </style> |
12 | 58 | </head> |
13 | 59 | <body> |
14 | 60 | <Header /> |
15 | 61 | <main> |
16 | | - <h1>🧑🚀 Hello, Astronaut!</h1> |
17 | | - <p> |
18 | | - Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This template |
19 | | - serves as a lightweight, minimally-styled starting point for anyone looking to build a personal |
20 | | - website, blog, or portfolio with Astro. |
21 | | - </p> |
22 | | - <p> |
23 | | - This template comes with a few integrations already configured in your |
24 | | - <code>astro.config.mjs</code> file. You can customize your setup with |
25 | | - <a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind, |
26 | | - React, or Vue to your project. |
27 | | - </p> |
28 | | - <p>Here are a few ideas on how to get started with the template:</p> |
29 | 62 | <ul> |
30 | | - <li>Edit this page in <code>src/pages/index.astro</code></li> |
31 | | - <li>Edit the site header items in <code>src/components/Header.astro</code></li> |
32 | | - <li>Add your name to the footer in <code>src/components/Footer.astro</code></li> |
33 | | - <li>Check out the included blog posts in <code>src/content/blog/</code></li> |
34 | | - <li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li> |
| 63 | + { |
| 64 | + posts.map((post) => ( |
| 65 | + <li> |
| 66 | + <a href={`/blog/${post.id}/`}> |
| 67 | + <h2 class="title">{post.data.title}</h2> |
| 68 | + <p class="date"> |
| 69 | + <FormattedDate date={post.data.pubDate} /> |
| 70 | + </p> |
| 71 | + {post.data.description && ( |
| 72 | + <p class="description">{post.data.description}</p> |
| 73 | + )} |
| 74 | + </a> |
| 75 | + </li> |
| 76 | + )) |
| 77 | + } |
35 | 78 | </ul> |
36 | | - <p> |
37 | | - Have fun! If you get stuck, remember to |
38 | | - <a href="https://docs.astro.build/">read the docs</a> |
39 | | - or <a href="https://astro.build/chat">join us on Discord</a> to ask questions. |
40 | | - </p> |
41 | | - <p> |
42 | | - Looking for a blog template with a bit more personality? Check out |
43 | | - <a href="https://github.com/Charca/astro-blog-template">astro-blog-template</a> |
44 | | - by <a href="https://twitter.com/Charca">Maxi Ferreira</a>. |
45 | | - </p> |
46 | 79 | </main> |
47 | 80 | <Footer /> |
48 | 81 | </body> |
|
0 commit comments