Once you’ve made a set of pages, Origami makes it easy to group those pages by tags or other data.
http://localhost:5000/
Anime
Frieren: Beyond Journey's End
Kaguya-sama: Love is War
Natsume's Book of Friends
Oshi no Ko
Spy x Family
The Apothecary Diaries
Violet Evergarden
Wolf Children
Call the groupby builtin function and tell it what data you want to your pages by.
site.ori
{
index.html = index.ori.html(anime.yaml)
// Group the anime by genre
(grouped) = Tree.groupBy(anime.yaml, (anime) => anime.genre)
}
anime.yaml
- name: "Frieren: Beyond Journey's End"
genre:
- Adventure
- Fantasy
image: frieren-beyond-journeys-end.webp
- name: "Kaguya-sama: Love is War"
genre:
- Comedy
- Romance
image: kaguya-sama-love-is-war.webp
- name: "Natsume's Book of Friends"
genre:
- Drama
- Supernatural
- Slice of Life
image: natsumes-book-of-friends.webp
- name: Oshi no Ko
genre:
- Drama
- Slice of Life
- Supernatural
image: oshi-no-ko.webp
- name: Spy x Family
genre:
- Action
- Comedy
image: spy-x-family.webp
- name: The Apothecary Diaries
genre:
- Drama
- Historical
- Mystery
image: the-apothecary-diaries.webp
- name: Violet Evergarden
genre:
- Drama
- War
image: violet-evergarden.webp
- name: Wolf Children
genre:
- Drama
- Fantasy
- Slice of Life
image: wolf-children.webp
Could also group by year, etc.
Create a page template to render a single group of items as HTML.
genre.ori.html
---
(animes, genre) => _template()
---
<link rel="stylesheet" href="/comics/assets/group-pages/styles.css">
<h1>${ genre }</h1>
<div class="animeGrid">
${ Tree.map(animes, animeCard.ori.html ) }
</div>
Then define a site area that transforms each group into a page using that template.
site.ori
{
index.html = index.ori.html(anime.yaml)
// Group the anime by genre
(grouped) = Tree.groupBy(anime.yaml, (anime) => anime.genre)
genre/ = Tree.map(grouped, genre.ori.html)
}
http://localhost:5000/genre/Drama.html
Drama
Natsume's Book of Friends
Oshi no Ko
The Apothecary Diaries
Violet Evergarden
Wolf Children
Read more: Tree.groupBy builtin function