68 lines
No EOL
1.8 KiB
Text
68 lines
No EOL
1.8 KiB
Text
---
|
|
import { getEntry } from "astro:content";
|
|
|
|
const projects = await getEntry("projects", "projects");
|
|
|
|
let lastYear = 0;
|
|
---
|
|
|
|
<div>
|
|
{projects.data.sort((a, b) => b.date.getTime() - a.date.getTime()).map((project) => {
|
|
const isNewYear = project.date.getFullYear() !== lastYear;
|
|
lastYear = project.date.getFullYear();
|
|
|
|
return <>
|
|
{isNewYear && <div class="seperator"><span class="year">{project.date.getFullYear()}</span></div>}
|
|
<details>
|
|
<summary>
|
|
<span class="name">{project.name}</span>
|
|
<time class="date" datetime={project.date.toISOString().split("T")[0]}>{project.dateVisual || project.date.toLocaleString("default", { month: "long" })}</time>
|
|
</summary>
|
|
<div class="open">
|
|
<p>{project.description}</p>
|
|
<div class="links">
|
|
{project.links.map((link) => {
|
|
return <a target="_blank" rel="noopener" href={link}>{link}</a>;
|
|
})}
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</>;
|
|
})}
|
|
</div>
|
|
<style>
|
|
.seperator {
|
|
background: linear-gradient(transparent calc(50% - 1px), #888888 calc(50%), transparent calc(50% - 1px));
|
|
margin: .5em 0;
|
|
text-align: center;
|
|
|
|
& .year {
|
|
background: #eeeeee;
|
|
}
|
|
}
|
|
|
|
summary {
|
|
display: flex;
|
|
flex-direction: row;
|
|
cursor: pointer;
|
|
}
|
|
details .open {
|
|
background-color: #e2e2e2;
|
|
padding: .5em 1em;
|
|
margin: .5em 0;
|
|
}
|
|
|
|
.name {
|
|
flex: 1 1 0;
|
|
}
|
|
.date {
|
|
flex: 0 0 auto;
|
|
color: #888888;
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
</style> |