|
2 | 2 | import Layout from '../layouts/Layout.astro';
|
3 | 3 | import { getCollection } from 'astro:content';
|
4 | 4 | import { calculateReadingTime } from '../utils/readingTime';
|
5 |
| -
|
6 | 5 | const posts = await getCollection('blog');
|
7 | 6 | const sortedPosts = posts.sort((a, b) =>
|
8 | 7 | new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
|
9 | 8 | );
|
10 | 9 | ---
|
11 |
| - |
12 | 10 | <Layout title="Blog">
|
13 | 11 | <div class="max-w-2xl mx-auto">
|
14 |
| - <section class="mb-12"> |
15 |
| - <h1 class="text-3xl font-normal mb-4">Writing</h1> |
16 |
| - <p class="text-gray-600 dark:text-gray-400 mb-8"> |
| 12 | + <section class="mb-8"> |
| 13 | + <h1 class="text-3xl font-normal mb-2">Writing</h1> |
| 14 | + <p class="text-gray-600 dark:text-gray-400"> |
17 | 15 | Hot takes and cool things.
|
18 | 16 | </p>
|
19 | 17 | </section>
|
20 |
| - |
21 | 18 | <section>
|
22 |
| - <h2 class="text-2xl font-normal mb-4">All Posts</h2> |
23 |
| - <div class="space-y-6"> |
| 19 | + <div class="space-y-4"> |
24 | 20 | {sortedPosts.map(post => (
|
25 |
| - <article class="border-b dark:border-gray-800 pb-6 last:border-0"> |
| 21 | + <article class="border-b dark:border-gray-800 pb-4 last:border-0"> |
26 | 22 | <a href={`/blog/${post.slug}`} class="block group">
|
27 |
| - <h3 class="text-lg group-hover:underline">{post.data.title}</h3> |
28 |
| - <div class="flex items-center text-sm text-gray-600 dark:text-gray-400 gap-4 mt-1"> |
29 |
| - <time datetime={post.data.date}> |
| 23 | + <div class="flex flex-col sm:flex-row sm:items-baseline gap-2"> |
| 24 | + <h3 class="text-lg group-hover:underline">{post.data.title}</h3> |
| 25 | + <time datetime={post.data.date} class="text-sm text-gray-600 dark:text-gray-400"> |
30 | 26 | {new Date(post.data.date).toLocaleDateString('en-US', {
|
31 | 27 | year: 'numeric',
|
32 |
| - month: 'long', |
| 28 | + month: 'short', |
33 | 29 | day: 'numeric'
|
34 | 30 | })}
|
35 | 31 | </time>
|
36 |
| - <span class="inline-flex items-center"> |
37 |
| - <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor"> |
38 |
| - <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/> |
39 |
| - </svg> |
40 |
| - {calculateReadingTime(post.body)} min read |
41 |
| - </span> |
42 | 32 | </div>
|
43 | 33 | {post.data.description && (
|
44 |
| - <p class="mt-2 text-gray-700 dark:text-gray-300 text-sm"> |
| 34 | + <p class="mt-1 text-gray-700 dark:text-gray-300 text-sm"> |
45 | 35 | {post.data.description}
|
46 | 36 | </p>
|
47 | 37 | )}
|
|
0 commit comments