diff --git a/package.json b/package.json index 6478496..a820a13 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@astrojs/mdx": "^0.19.7", "@astrojs/solid-js": "^2.2.0", + "@js-temporal/polyfill": "^0.4.4", "astro": "^2.6.3", "astro-pagefind": "^1.2.0", "chart.js": "^4.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ab347c3..e4c0576 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: '@astrojs/solid-js': specifier: ^2.2.0 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: specifier: ^2.6.3 version: 2.6.3(sass@1.63.3) @@ -721,6 +724,14 @@ packages: '@jridgewell/sourcemap-codec': 1.4.14 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: resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==} dev: false @@ -2172,6 +2183,10 @@ packages: argparse: 2.0.1 dev: false + /jsbi@4.3.0: + resolution: {integrity: sha512-SnZNcinB4RIcnEyZqFPdGPVgrg2AcnykiBy0sHVJQKHYeaLUvi3Exj+iaPpLnFVkDPZIV4U0yvgC9/R4uEAZ9g==} + dev: false + /jsesc@2.5.2: resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==} engines: {node: '>=4'} diff --git a/src/layouts/BetterList.astro b/src/layouts/BetterList.astro new file mode 100644 index 0000000..a472e7a --- /dev/null +++ b/src/layouts/BetterList.astro @@ -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); +} +--- + + +
+
+
+

{title}

+
+ {Object.entries(yearly) + .sort(([a, _a], [b, _b]) => a > b ? -1 : 1) + .map(([year, pages]: [string, Page[]]) => ( +
+

{year}

+ {pages.sort(sorter).map(page => ( + +

{page.title}

+ + + ))} +
+ ))} +
+
+ diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro index 7ad6dbc..4be25f8 100644 --- a/src/pages/posts/index.astro +++ b/src/pages/posts/index.astro @@ -1,17 +1,17 @@ --- -import dayjs from "dayjs"; -import List from "../../layouts/List.astro"; +import BetterList from "@layouts/BetterList.astro"; import { getCollection } from 'astro:content'; +import { Temporal, toTemporalInstant } from "@js-temporal/polyfill"; const posts = (await getCollection('posts')) - .sort((a, b) => a.data.date < b.data.date ? 1 : -1) .map(entry => ({ title: entry.data.title, - slug: `/posts/${entry.slug}/`, - date: dayjs(entry.data.date), + path: `/posts/${entry.slug}/`, + date: toTemporalInstant.call(entry.data.date).toZonedDateTimeISO("Europe/Warsaw"), })) + .sort((a, b) => Temporal.ZonedDateTime.compare(a.date, b.date)) --- - + diff --git a/src/styles/layouts/_page-list.scss b/src/styles/layouts/_page-list.scss new file mode 100644 index 0000000..691b2d9 --- /dev/null +++ b/src/styles/layouts/_page-list.scss @@ -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); + + } +} diff --git a/src/styles/partials/_nav.scss b/src/styles/partials/_nav.scss index 0419c83..d2e5ac0 100644 --- a/src/styles/partials/_nav.scss +++ b/src/styles/partials/_nav.scss @@ -75,6 +75,8 @@ &-main { font-size: 2rem; line-height: 1em; + font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive; + margin-bottom: -0.15em; } &-sub { diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 757d1d4..a4a7973 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -38,4 +38,5 @@ @use 'layouts/article'; @use 'layouts/songs'; @use 'layouts/repos'; -@use 'layouts/wiki'; \ No newline at end of file +@use 'layouts/wiki'; +@use 'layouts/page-list'; \ No newline at end of file diff --git a/src/utils/splash.ts b/src/utils/splash.ts index 760bf1c..96adf25 100644 --- a/src/utils/splash.ts +++ b/src/utils/splash.ts @@ -40,6 +40,8 @@ const subtitles = [ "You're looking at it!", "a2Ftb3NoaS5vcmc=", ":: (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;