Mirror of
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add text overflow handling to title style (#2)

* Add text overflow handling to title style

* fix: dots always visible

* feat: swap date and type

* fix: missing direction

* fix: styling

* Refactor archive list to use list items

authored by

Felix Schneider and committed by
GitHub
91270d43 7cd72338

+41 -29
+41 -29
src/pages/archive.astro
··· 14 14 <Layout title="Archive | npmx.digest"> 15 15 <h1 class="page-title">Archives</h1> 16 16 17 - <div class="archive-list"> 17 + <ul class="archive-list"> 18 18 { 19 19 sortedPosts.map(({ data, id }) => { 20 20 const displayDate = formatDate(data.date); 21 21 const postUrl = `/posts/${id}`; 22 22 23 23 return ( 24 - <a href={postUrl} class="archive-item"> 25 - <span class="date">{displayDate}</span> 26 - <span class="title">{data.title}</span> 27 - <span class="dot" /> 28 - <span class={`type ${data.type}`}>{data.type}</span> 29 - </a> 24 + <li class="archive-row"> 25 + <a href={postUrl} class="archive-item"> 26 + <span class={`type ${data.type}`} aria-label={`Post type: ${data.type}`}>{data.type}</span> 27 + <span class="title">{data.title}</span> 28 + <span class="dot" aria-hidden="true" /> 29 + <time datetime={data.date.toISOString()} class="date">{displayDate}</time> 30 + </a> 31 + </li> 30 32 ); 31 33 }) 32 34 } 33 - </div> 35 + </ul> 34 36 </Layout> 35 37 36 38 <style> ··· 43 45 .archive-list { 44 46 display: flex; 45 47 flex-direction: column; 48 + list-style: none; 49 + padding: 0; 50 + margin: 0; 51 + } 52 + 53 + .archive-row { 54 + width: 100%; 46 55 } 47 56 48 57 .archive-item { ··· 59 68 color: var(--accent); 60 69 } 61 70 62 - .date { 63 - font-family: monospace; 64 - width: 120px; 65 - flex-shrink: 0; 66 - font-size: 0.85rem; 67 - } 68 - 69 - .title { 70 - color: var(--text); 71 - } 72 - 73 71 .type { 72 + width: 65px; 73 + flex-shrink: 0; 74 74 font-size: 0.75rem; 75 75 text-transform: capitalize; 76 - margin-left: 1rem; 77 76 font-weight: 600; 77 + margin-right: 0.5rem; 78 78 } 79 79 80 - .daily { 81 - color: #fbbf24; 82 - } 83 - .midday { 84 - color: #f97316; 85 - } 86 - .nightly { 87 - color: #818cf8; 80 + .daily { color: #fbbf24; } 81 + .midday { color: #f97316; } 82 + .nightly { color: #818cf8; } 83 + 84 + .title { 85 + color: var(--text); 86 + white-space: nowrap; 87 + overflow: hidden; 88 + text-overflow: ellipsis; 89 + flex-shrink: 1; 90 + min-width: 0; 88 91 } 89 92 90 93 .dot { 91 94 align-self: center; 92 95 flex-grow: 1; 96 + min-width: 20px; 93 97 border-bottom: 1px dotted #333; 94 - margin: 0.2rem 1rem 0; 98 + margin: 0.2rem 0.5rem 0; 99 + } 100 + 101 + .date { 102 + font-family: monospace; 103 + width: 90px; 104 + text-align: right; 105 + flex-shrink: 0; 106 + font-size: 0.85rem; 95 107 } 96 108 </style>