-
-
Notifications
You must be signed in to change notification settings - Fork 511
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add archives page with configurable menu (#386)
* feat: add archives page with configurable menu * optimize: compat mobile layout * fix: update archive menu layout * fix: hide archives page from URL if showArchives is false * docs: add `showArchives` option in docs Resolves #361 --------- Co-authored-by: satnaing <[email protected]>
- Loading branch information
1 parent
58a0d25
commit 7573617
Showing
7 changed files
with
146 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| --- | ||
| import { getCollection } from "astro:content"; | ||
| import Card from "@components/Card"; | ||
| import Footer from "@components/Footer.astro"; | ||
| import Header from "@components/Header.astro"; | ||
| import { SITE } from "@config"; | ||
| import Layout from "@layouts/Layout.astro"; | ||
| import Main from "@layouts/Main.astro"; | ||
| import getPostsByGroupCondition from "@utils/getPostsByGroupCondition"; | ||
| // Redirect to 404 page if `showArchives` config is false | ||
| if (!SITE.showArchives) { | ||
| return Astro.redirect("/404"); | ||
| } | ||
| const posts = await getCollection("blog", ({ data }) => !data.draft); | ||
| const MonthMap: Record<string, string> = { | ||
| "1": "January", | ||
| "2": "February", | ||
| "3": "March", | ||
| "4": "April", | ||
| "5": "May", | ||
| "6": "June", | ||
| "7": "July", | ||
| "8": "August", | ||
| "9": "September", | ||
| "10": "October", | ||
| "11": "November", | ||
| "12": "December", | ||
| }; | ||
| --- | ||
|
|
||
| <Layout title={`Archives | ${SITE.title}`}> | ||
| <Header activeNav="archives" /> | ||
| <Main pageTitle="Archives" pageDesc="All the articles I've archived."> | ||
| { | ||
| Object.entries( | ||
| getPostsByGroupCondition(posts, post => | ||
| post.data.pubDatetime.getFullYear() | ||
| ) | ||
| ) | ||
| .sort(([yearA], [yearB]) => Number(yearB) - Number(yearA)) | ||
| .map(([year, yearGroup]) => ( | ||
| <div> | ||
| <span class="text-2xl font-bold">{year}</span> | ||
| <sup class="text-sm">{yearGroup.length}</sup> | ||
| {Object.entries( | ||
| getPostsByGroupCondition( | ||
| yearGroup, | ||
| post => post.data.pubDatetime.getMonth() + 1 | ||
| ) | ||
| ) | ||
| .sort(([monthA], [monthB]) => Number(monthB) - Number(monthA)) | ||
| .map(([month, monthGroup]) => ( | ||
| <div class="flex flex-col sm:flex-row"> | ||
| <div class="mt-6 min-w-36 text-lg sm:my-6"> | ||
| <span class="font-bold">{MonthMap[month]}</span> | ||
| <sup class="text-xs">{monthGroup.length}</sup> | ||
| </div> | ||
| <ul> | ||
| {monthGroup.map(({ data, slug }) => ( | ||
| <Card href={`/posts/${slug}`} frontmatter={data} /> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| )) | ||
| } | ||
| </Main> | ||
|
|
||
| <Footer /> | ||
| </Layout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import type { CollectionEntry } from "astro:content"; | ||
|
|
||
| type GroupKey = string | number | symbol; | ||
|
|
||
| interface GroupFunction<T> { | ||
| (item: T, index?: number): GroupKey; | ||
| } | ||
|
|
||
| const getPostsByGroupCondition = ( | ||
| posts: CollectionEntry<"blog">[], | ||
| groupFunction: GroupFunction<CollectionEntry<"blog">> | ||
| ) => { | ||
| const result: Record<GroupKey, CollectionEntry<"blog">[]> = {}; | ||
| for (let i = 0; i < posts.length; i++) { | ||
| const item = posts[i]; | ||
| const groupKey = groupFunction(item, i); | ||
| if (!result[groupKey]) { | ||
| result[groupKey] = []; | ||
| } | ||
| result[groupKey].push(item); | ||
| } | ||
| return result; | ||
| }; | ||
|
|
||
| export default getPostsByGroupCondition; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters