Render page lists for AoC
This commit is contained in:
parent
18ec1abed9
commit
979462fd97
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
import type { Dayjs } from "dayjs";
|
||||
import Base from "./Base.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
@ -10,12 +11,12 @@ interface Props {
|
|||
|
||||
const { title, date, tags = [], github } = Astro.props;
|
||||
---
|
||||
<header class="p-header">
|
||||
<h1 class="p-header__heading">{title}</h1>
|
||||
|
||||
<Base title={title}>
|
||||
<div class="p-header__meta">
|
||||
<span class="p_date">
|
||||
<img class="p_date__icon" width="120" height="123" src="/static/svg/calendar.svg" alt="">
|
||||
{date.format("MMM DD, YYYY")}
|
||||
<time datetime={date.toISOString()}>{date.format("MMM DD, YYYY")}</time>
|
||||
</span>
|
||||
|
||||
<!-- {%- include "partials/tags.html" -%} -->
|
||||
|
@ -39,5 +40,4 @@ const { title, date, tags = [], github } = Astro.props;
|
|||
</svg>
|
||||
</a>
|
||||
)}
|
||||
|
||||
</header>
|
||||
</Base>
|
||||
|
|
12
src/components/headers/Base.astro
Normal file
12
src/components/headers/Base.astro
Normal file
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<header class="p-header">
|
||||
<h1 class="p-header__heading">{title}</h1>
|
||||
<slot />
|
||||
</header>
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 1"
|
||||
date: 2021-12-01T23:25:56+01:00
|
||||
year: 2021
|
||||
day: 1
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 2"
|
||||
date: 2021-12-02T19:46:19+01:00
|
||||
year: 2021
|
||||
day: 2
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 3"
|
||||
date: 2021-12-03T16:51:41+01:00
|
||||
year: 2021
|
||||
day: 3
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 4"
|
||||
date: 2021-12-04T11:23:18+01:00
|
||||
year: 2021
|
||||
day: 4
|
||||
stars: 2
|
||||
math: true
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 5"
|
||||
date: 2021-12-05T13:51:01+01:00
|
||||
year: 2021
|
||||
day: 5
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 6"
|
||||
date: 2021-12-06T19:40:20+01:00
|
||||
year: 2021
|
||||
day: 6
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 7"
|
||||
date: 2021-12-07T22:07:00+01:00
|
||||
year: 2021
|
||||
math: true
|
||||
day: 7
|
||||
stars: 2
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 8"
|
||||
date: 2021-12-14T23:42:27+01:00
|
||||
year: 2021
|
||||
day: 8
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 9"
|
||||
date: 2021-12-14T23:42:35+01:00
|
||||
year: 2021
|
||||
day: 9
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 10"
|
||||
date: 2021-12-14T23:42:39+01:00
|
||||
year: 2021
|
||||
day: 10
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 11"
|
||||
date: 2021-12-11T09:09:14+01:00
|
||||
year: 2021
|
||||
math: true
|
||||
day: 11
|
||||
stars: 2
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 12"
|
||||
date: 2021-12-14T23:42:43+01:00
|
||||
year: 2021
|
||||
day: 12
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 13"
|
||||
date: 2021-12-14T23:42:45+01:00
|
||||
year: 2021
|
||||
day: 13
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 14"
|
||||
date: 2021-12-14T23:42:47+01:00
|
||||
year: 2021
|
||||
day: 14
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 15"
|
||||
date: 2021-12-17T00:28:20+01:00
|
||||
year: 2021
|
||||
day: 15
|
||||
stars: 2
|
||||
---
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: "Advent of Code 2021 - Day 16"
|
||||
date: 2021-12-18T01:44:09+01:00
|
||||
year: 2021
|
||||
day: 16
|
||||
stars: 0
|
||||
---
|
||||
|
|
|
@ -6,7 +6,6 @@ export const collections = {
|
|||
schema: z.object({
|
||||
title: z.string(),
|
||||
date: z.date(),
|
||||
year: z.number(),
|
||||
day: z.number(),
|
||||
stars: z.number(),
|
||||
math: z.boolean().optional()
|
||||
|
|
36
src/layouts/List.astro
Normal file
36
src/layouts/List.astro
Normal file
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
import type { Dayjs } from "dayjs";
|
||||
import Base from "./Base.astro";
|
||||
import Header from "../components/headers/Base.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
pages: Array<{
|
||||
title: string;
|
||||
slug: string;
|
||||
date?: Dayjs;
|
||||
}>;
|
||||
}
|
||||
|
||||
const { title, pages } = Astro.props;
|
||||
const dates = pages.every(page => page.date);
|
||||
---
|
||||
|
||||
<Base>
|
||||
<main class="l-pages">
|
||||
<article class="l-pages__list readable">
|
||||
<Header title={title} />
|
||||
<div class="p-pagelist" class:list={{dates}}>
|
||||
{pages.map(page => (<>
|
||||
{dates && (
|
||||
<time class="date" datetime={page.date!.toISOString()}>
|
||||
{page.date!.format("MMM DD, YYYY")}
|
||||
</time>
|
||||
)}
|
||||
<a href={page.slug}>{page.title}</a>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</Base>
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
import List from '../../layouts/List.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
|
||||
export async function getStaticPaths () {
|
||||
|
@ -9,13 +10,15 @@ export async function getStaticPaths () {
|
|||
}
|
||||
|
||||
const { year } = Astro.props;
|
||||
const pages = await getCollection('aoc', (entry) => entry.id.startsWith(year));
|
||||
const content = await getCollection('aoc', (entry) => entry.id.startsWith(year));
|
||||
|
||||
const pages = content
|
||||
.map(doc => ({
|
||||
title: `Day ${doc.data.day}`,
|
||||
slug: `/aoc/${doc.slug}/`,
|
||||
date: dayjs(doc.data.date),
|
||||
}));
|
||||
|
||||
---
|
||||
|
||||
<Base>
|
||||
{pages.map(entry => (
|
||||
<div>
|
||||
<a href={entry.slug.split('/')[1]}>{entry.id}</a>
|
||||
</div>
|
||||
))}
|
||||
</Base>
|
||||
<List title={year} pages={pages} />
|
||||
|
|
|
@ -1,19 +1,21 @@
|
|||
---
|
||||
import List from '../../layouts/List.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import Base from '../../layouts/Base.astro';
|
||||
|
||||
|
||||
const posts = await getCollection('aoc');
|
||||
const content = await getCollection('aoc');
|
||||
const occ: {[key: string]: number} = {}
|
||||
|
||||
const map = posts.reduce((acc, next) => {
|
||||
const year = next.slug.slice(0, 4);
|
||||
(year in acc) ? acc[year] += 1 : acc[year] = 1;
|
||||
return acc;
|
||||
}, {} as {[key: string]: number})
|
||||
for (const doc of content) {
|
||||
const year = doc.slug.slice(0, 4);
|
||||
(year in occ) ? occ[year] += 1 : occ[year] = 1;
|
||||
}
|
||||
|
||||
const pages = Object.entries(occ)
|
||||
.map(([year, occ]) => ({
|
||||
title: `${year} - ${occ} days`,
|
||||
slug: `/aoc/${year}/`,
|
||||
}));
|
||||
---
|
||||
|
||||
<Base>
|
||||
{Object.entries(map).map(([year, count]) => (
|
||||
<div><a href={year}>{year} - {count}</a></div>
|
||||
))}
|
||||
</Base>
|
||||
<List title="Advent of Code" pages={pages} />
|
||||
|
|
|
@ -1,39 +1,10 @@
|
|||
.p-pagelist {
|
||||
display: grid;
|
||||
grid-template-columns: 8em 1fr;
|
||||
column-gap: 0.3em;
|
||||
row-gap: 0.3em;
|
||||
margin-top: 1em;
|
||||
|
||||
&-tech {
|
||||
grid-template-columns: 8em 1fr auto;
|
||||
|
||||
.tech {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 0.3em;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-aoc {
|
||||
grid-template-columns: 3em 1fr auto;
|
||||
|
||||
.tech {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 0.3em;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
&.dates {
|
||||
grid-template-columns: 8em 1fr;
|
||||
column-gap: 0.3em;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue