@smbcloud / solanastockholmmeetup
Code Commits Issues Pulls Cloud Agent CI/CD
dependabot/npm_and_yarn/eslint-plugin-astro-1.5.0
dependabot/npm_and_yarn/eslint-9.39.1 dependabot/npm_and_yarn/eslint-plugin-astro-1.5.0 dependabot/npm_and_yarn/eslint/js-9.39.1 dependabot/npm_and_yarn/katex-0.16.25 dependabot/npm_and_yarn/sharp-0.34.5 dependabot/npm_and_yarn/tailwindcss/vite-4.1.17 dependabot/npm_and_yarn/tsx-4.20.6 dependabot/npm_and_yarn/typescript-eslint-8.46.4 dependabot/npm_and_yarn/typescript-eslint/eslint-plugin-8.36.0 dependabot/npm_and_yarn/typescript-eslint/parser-8.46.4 main
astro 105 lines 1.92 KB
Raw
1 ---
2 import FormattedDate from '@/components/features/FormattedDate.astro'
3 import type { CollectionEntry } from 'astro:content'
4 import { SITE } from '@/config'
5
6 interface Props {
7 posts: CollectionEntry<'posts'>[]
8 }
9
10 const { posts } = Astro.props
11 ---
12
13 <ul>
14 {
15 posts.map((post) => (
16 <li>
17 <a href={`/${post.id}/`}>
18 <div class={`post-item ${!SITE.dateOnRight ? 'date-left' : ''}`}>
19 {!SITE.dateOnRight && (
20 <p class="date font-features">
21 <FormattedDate date={post.data.pubDate} />
22 </p>
23 )}
24 <p class="title">{post.data.title}</p>
25 {SITE.dateOnRight && <div class="divider" />}
26 {SITE.dateOnRight && (
27 <p class="date font-features">
28 <FormattedDate date={post.data.pubDate} />
29 </p>
30 )}
31 </div>
32 </a>
33 </li>
34 ))
35 }
36 </ul>
37 <div class="placeholder"></div>
38
39 <style>
40 ul {
41 padding: 0;
42 margin: 0;
43 list-style-type: none;
44 display: flex;
45 flex-direction: column;
46 gap: 0;
47 }
48
49 a {
50 color: var(--text-primary);
51 display: block;
52 text-decoration: none;
53 transition: opacity 0.15s ease-out;
54 }
55
56 ul:hover a {
57 opacity: 0.4;
58 }
59
60 ul:hover a:hover {
61 opacity: 1;
62 }
63
64 .post-item {
65 height: 2.75rem;
66 display: flex;
67 justify-content: space-between;
68 align-items: center;
69 gap: 1rem;
70 }
71
72 .post-item.date-left {
73 justify-content: flex-start;
74 }
75
76 .post-item.date-left .title {
77 flex: 1 1 auto;
78 min-width: 0;
79 }
80
81 .title {
82 margin: 0;
83 white-space: nowrap;
84 overflow: hidden;
85 text-overflow: ellipsis;
86 }
87
88 .date {
89 margin: 0;
90 color: var(--text-secondary);
91 letter-spacing: var(--spacing-s);
92 flex-shrink: 0;
93 }
94
95 .divider {
96 flex: 1;
97 min-width: 24px;
98 height: 0.5px;
99 background-color: var(--border);
100 }
101
102 .placeholder {
103 height: 3rem;
104 }
105 </style>