caperren/caperren-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Component for PCBs, many visual tweaks, finished dechorionator content, added many many photos, started work on mars rover software lead, timeline to luxon and automatic date-based ordering
Some checks failed
Build and Test - Staging / test (pull_request) Failing after 4m56s
Details
Build and Test - Staging / build_and_push (pull_request) Has been skipped
Details
Build and Test - Staging / deploy_staging (pull_request) Has been skipped
Details

Browse Source
This commit is contained in:
Corwin Perren
2025-12-12 22:48:03 -08:00
parent adcbce68c8
commit 8fd744118f
67 changed files with 586 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Timeline/Timeline.astro
View File

@@ -1,7 +1,11 @@
---
import type { timelineEntry } from "@interfaces/timeline.ts";
const timeline: timelineEntry[] = Astro.props.timeline || [];
interface Props {
timeline: timelineEntry[];
}
const { timeline = [] } = Astro.props;
---
<custom-timeline>
@@ -11,21 +15,25 @@ const timeline: timelineEntry[] = Astro.props.timeline || [];
data-timeline
>
{
timeline.map((entry, index) => (
<div
class="border-caperren-green min-w-s max-w-s rounded-lg border bg-black px-2 pt-1 pb-2"
data-timeline-node-index={index}
>
<h3 class="text-lg font-bold">{entry.event}</h3>
<h4 class="leading-none font-semibold">{entry.eventDetail}</h4>
<time class="mt-1 mb-2 text-sm leading-none italic">
{entry.date}
</time>
{entry.description && (
<p class="text-sm font-normal">{entry.description}</p>
)}
</div>
))
timeline
.sort((a: timelineEntry, b: timelineEntry) =>
a.date.diff(b.date).toMillis(),
)
.map((entry, index) => (
<div
class="border-caperren-green min-w-s max-w-s rounded-lg border bg-black px-2 pt-1 pb-2"
data-timeline-node-index={index}
>
<h3 class="text-lg font-bold">{entry.event}</h3>
<h4 class="leading-none font-semibold">{entry.eventDetail}</h4>
<time class="mt-1 mb-2 text-sm leading-none italic">
{entry.date.toFormat("LLLL kkkk")}
</time>
{entry.description && (
<p class="text-sm font-normal">{entry.description}</p>
)}
</div>
))
}
</div>
<div