(page-list, temporal) initial page list template
This commit is contained in:
parent
0edf089791
commit
c9087da469
|
@ -12,6 +12,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/mdx": "^0.19.7",
|
"@astrojs/mdx": "^0.19.7",
|
||||||
"@astrojs/solid-js": "^2.2.0",
|
"@astrojs/solid-js": "^2.2.0",
|
||||||
|
"@js-temporal/polyfill": "^0.4.4",
|
||||||
"astro": "^2.6.3",
|
"astro": "^2.6.3",
|
||||||
"astro-pagefind": "^1.2.0",
|
"astro-pagefind": "^1.2.0",
|
||||||
"chart.js": "^4.3.0",
|
"chart.js": "^4.3.0",
|
||||||
|
|
|
@ -11,6 +11,9 @@ dependencies:
|
||||||
'@astrojs/solid-js':
|
'@astrojs/solid-js':
|
||||||
specifier: ^2.2.0
|
specifier: ^2.2.0
|
||||||
version: 2.2.0(@babel/core@7.22.5)(solid-js@1.7.6)
|
version: 2.2.0(@babel/core@7.22.5)(solid-js@1.7.6)
|
||||||
|
'@js-temporal/polyfill':
|
||||||
|
specifier: ^0.4.4
|
||||||
|
version: 0.4.4
|
||||||
astro:
|
astro:
|
||||||
specifier: ^2.6.3
|
specifier: ^2.6.3
|
||||||
version: 2.6.3(sass@1.63.3)
|
version: 2.6.3(sass@1.63.3)
|
||||||
|
@ -721,6 +724,14 @@ packages:
|
||||||
'@jridgewell/sourcemap-codec': 1.4.14
|
'@jridgewell/sourcemap-codec': 1.4.14
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/@js-temporal/polyfill@0.4.4:
|
||||||
|
resolution: {integrity: sha512-2X6bvghJ/JAoZO52lbgyAPFj8uCflhTo2g7nkFzEQdXd/D8rEeD4HtmTEpmtGCva260fcd66YNXBOYdnmHqSOg==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
dependencies:
|
||||||
|
jsbi: 4.3.0
|
||||||
|
tslib: 2.5.3
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@kurkle/color@0.3.2:
|
/@kurkle/color@0.3.2:
|
||||||
resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
|
resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
|
||||||
dev: false
|
dev: false
|
||||||
|
@ -2172,6 +2183,10 @@ packages:
|
||||||
argparse: 2.0.1
|
argparse: 2.0.1
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/jsbi@4.3.0:
|
||||||
|
resolution: {integrity: sha512-SnZNcinB4RIcnEyZqFPdGPVgrg2AcnykiBy0sHVJQKHYeaLUvi3Exj+iaPpLnFVkDPZIV4U0yvgC9/R4uEAZ9g==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/jsesc@2.5.2:
|
/jsesc@2.5.2:
|
||||||
resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
|
resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
|
||||||
engines: {node: '>=4'}
|
engines: {node: '>=4'}
|
||||||
|
|
64
src/layouts/BetterList.astro
Normal file
64
src/layouts/BetterList.astro
Normal file
|
@ -0,0 +1,64 @@
|
||||||
|
---
|
||||||
|
import Base from "./Base.astro";
|
||||||
|
import { Temporal } from "@js-temporal/polyfill";
|
||||||
|
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
pages: Page[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Page {
|
||||||
|
title: string;
|
||||||
|
path: string;
|
||||||
|
date: Temporal.ZonedDateTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface YearlyPosts {
|
||||||
|
[key: number]: Page[];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const { title, pages } = Astro.props;
|
||||||
|
|
||||||
|
const yearly = pages
|
||||||
|
.reduce((acc, next) => {
|
||||||
|
const year = next.date.year;
|
||||||
|
(year in acc)
|
||||||
|
? acc[year].push(next)
|
||||||
|
: acc[year] = [next];
|
||||||
|
return acc;
|
||||||
|
}, {} as YearlyPosts);
|
||||||
|
|
||||||
|
function sorter(
|
||||||
|
a: {date: Temporal.ZonedDateTime},
|
||||||
|
b: {date: Temporal.ZonedDateTime}
|
||||||
|
) {
|
||||||
|
return Temporal.ZonedDateTime.compare(b.date, a.date);
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<Base>
|
||||||
|
<main class="page-list-main">
|
||||||
|
<article class="page-list">
|
||||||
|
<header class="markdown">
|
||||||
|
<h1>{title}</h1>
|
||||||
|
</header>
|
||||||
|
{Object.entries(yearly)
|
||||||
|
.sort(([a, _a], [b, _b]) => a > b ? -1 : 1)
|
||||||
|
.map(([year, pages]: [string, Page[]]) => (
|
||||||
|
<section class="page-list-year">
|
||||||
|
<h2>{year}</h2>
|
||||||
|
{pages.sort(sorter).map(page => (
|
||||||
|
<a class="page-list-item" href={page.path}>
|
||||||
|
<h3 class="page-list-item__heading">{page.title}</h3>
|
||||||
|
<time class="page-list-item__date" datetime={page.date.toPlainDate().toString()}>
|
||||||
|
{page.date.toLocaleString("en", { month: "2-digit", day: "2-digit"})}
|
||||||
|
</time>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
))}
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</Base>
|
|
@ -1,17 +1,17 @@
|
||||||
---
|
---
|
||||||
import dayjs from "dayjs";
|
import BetterList from "@layouts/BetterList.astro";
|
||||||
import List from "../../layouts/List.astro";
|
|
||||||
import { getCollection } from 'astro:content';
|
import { getCollection } from 'astro:content';
|
||||||
|
import { Temporal, toTemporalInstant } from "@js-temporal/polyfill";
|
||||||
|
|
||||||
|
|
||||||
const posts = (await getCollection('posts'))
|
const posts = (await getCollection('posts'))
|
||||||
.sort((a, b) => a.data.date < b.data.date ? 1 : -1)
|
|
||||||
.map(entry => ({
|
.map(entry => ({
|
||||||
title: entry.data.title,
|
title: entry.data.title,
|
||||||
slug: `/posts/${entry.slug}/`,
|
path: `/posts/${entry.slug}/`,
|
||||||
date: dayjs(entry.data.date),
|
date: toTemporalInstant.call(entry.data.date).toZonedDateTimeISO("Europe/Warsaw"),
|
||||||
}))
|
}))
|
||||||
|
.sort((a, b) => Temporal.ZonedDateTime.compare(a.date, b.date))
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<List title="Posts" pages={posts} />
|
<BetterList title="Posts" pages={posts} />
|
||||||
|
|
31
src/styles/layouts/_page-list.scss
Normal file
31
src/styles/layouts/_page-list.scss
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
.page-list-main {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-list {
|
||||||
|
max-width: 48em;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-list-year {
|
||||||
|
margin-block: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-list-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
text-decoration: unset;
|
||||||
|
|
||||||
|
&__heading {
|
||||||
|
color: var(--c-primary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__date {
|
||||||
|
color: var(--c-text-muted);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -75,6 +75,8 @@
|
||||||
&-main {
|
&-main {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
|
font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
|
||||||
|
margin-bottom: -0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-sub {
|
&-sub {
|
||||||
|
|
|
@ -39,3 +39,4 @@
|
||||||
@use 'layouts/songs';
|
@use 'layouts/songs';
|
||||||
@use 'layouts/repos';
|
@use 'layouts/repos';
|
||||||
@use 'layouts/wiki';
|
@use 'layouts/wiki';
|
||||||
|
@use 'layouts/page-list';
|
|
@ -40,6 +40,8 @@ const subtitles = [
|
||||||
"You're looking at it!",
|
"You're looking at it!",
|
||||||
"a2Ftb3NoaS5vcmc=",
|
"a2Ftb3NoaS5vcmc=",
|
||||||
":: (Thought a) => a -> String",
|
":: (Thought a) => a -> String",
|
||||||
|
"Catch me if you can!",
|
||||||
|
"In the eye of the beholder",
|
||||||
];
|
];
|
||||||
|
|
||||||
const chance = Math.round(1 / (subtitles.length + 1) * 10000) / 100;
|
const chance = Math.round(1 / (subtitles.length + 1) * 10000) / 100;
|
||||||
|
|
Loading…
Reference in a new issue