forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1---
2import FormattedDate from '@/components/widgets/FormattedDate.astro'
3import type { PostListProps } from '@/types'
4import { themeConfig } from '@/config'
5
6const { posts } = Astro.props as PostListProps
7---
8
9<ul>
10 {
11 posts.map((post) => (
12 <li>
13 <a href={`/${post.id}/`}>
14 <div class={`post-item ${!themeConfig.date.dateOnRight ? 'date-left' : ''}`}>
15 {!themeConfig.date.dateOnRight && (
16 <p class="date font-features">
17 <FormattedDate date={post.data.pubDate} context="list" />
18 </p>
19 )}
20 <p class="title">{post.data.title}</p>
21 {themeConfig.date.dateOnRight && (
22 <div
23 class={themeConfig.general.postListDottedDivider ? 'dotted-divider' : 'divider'}
24 />
25 )}
26 {themeConfig.date.dateOnRight && (
27 <p class="date font-features">
28 <FormattedDate date={post.data.pubDate} context="list" />
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 @media (hover: hover) and (pointer: fine) {
57 ul:hover a {
58 opacity: 0.4;
59 }
60
61 ul:hover a:hover {
62 opacity: 1;
63 }
64
65 ul:hover a:hover .divider {
66 background-color: var(--text-tertiary);
67 opacity: 0.75;
68 }
69 ul:hover a:hover .dotted-divider {
70 color: var(--text-secondary);
71 }
72 ul:hover a:hover .date {
73 color: var(--text-secondary);
74 opacity: 1;
75 }
76 }
77
78 .post-item {
79 height: 2.75rem;
80 display: flex;
81 justify-content: space-between;
82 align-items: center;
83 gap: 0.75rem;
84 }
85
86 .post-item.date-left {
87 justify-content: flex-start;
88 }
89
90 .post-item.date-left .title {
91 flex: 1 1 auto;
92 min-width: 0;
93 }
94
95 .post-item.date-left .date {
96 margin-right: 0.75rem;
97 }
98
99 .title {
100 margin: 0;
101 flex-shrink: 1;
102 min-width: 0;
103 white-space: nowrap;
104 overflow: hidden;
105 text-overflow: ellipsis;
106 }
107
108 .date {
109 margin: 0;
110 color: var(--text-secondary);
111 opacity: 0.75;
112 letter-spacing: var(--spacing-s);
113 flex-shrink: 0;
114 white-space: nowrap;
115 }
116
117 .divider {
118 flex: 1 1 auto;
119 min-width: 3rem;
120 margin: 0 0.25rem;
121 height: 0.5px;
122 background-color: var(--border);
123 }
124
125 .dotted-divider {
126 flex: 1 1 3rem;
127 min-width: 3rem;
128 max-width: 100%;
129 text-align: end;
130 letter-spacing: 5px;
131 height: 1.675rem;
132 overflow: hidden;
133 color: var(--text-tertiary);
134 opacity: 0.75;
135 }
136
137 .dotted-divider::after {
138 content: '·····························································································································································';
139 pointer-events: none;
140 }
141
142 .placeholder {
143 height: 3rem;
144 }
145</style>