From a479d15993e208cc2127f580805ef33d55de8b60 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 5 Nov 2024 13:39:33 +0100
Subject: [PATCH] Create anime pages

---
 _components/AnimeRow.tsx   | 107 +++++++++++++++++++++++++++++++++++++
 _components/AnimeTable.tsx | 101 ++++++++++++++++++++++++++++++++++
 _includes/anime.tsx        |  13 +++++
 _includes/list-anime.tsx   |  53 ++++++++++++++++++
 4 files changed, 274 insertions(+)
 create mode 100644 _components/AnimeRow.tsx
 create mode 100644 _components/AnimeTable.tsx
 create mode 100644 _includes/list-anime.tsx

diff --git a/_components/AnimeRow.tsx b/_components/AnimeRow.tsx
new file mode 100644
index 0000000..64de0ec
--- /dev/null
+++ b/_components/AnimeRow.tsx
@@ -0,0 +1,107 @@
+import {formatDateIso} from "../_utils/date.ts"
+import {AnimeData, AnimeProgress, animeProgressToClassName, animeProgressToIconDef, animeProgressToTitle} from "../_utils/anime.ts"
+import {ratingToClassName} from "../_utils/rating.ts"
+
+
+export type AnimeRowColumnKind = "rating" | "progress" | "name" | "nameoriginal" | "namesort" | "hascontent" | "date"
+export type AnimeRowColumnPriority = undefined | "rating" | "progress" | "mixed"
+
+export const animeRowColumnKindDefault: AnimeRowColumnKind[] = ["rating", "name", "namesort", "hascontent", "date", "progress"]
+
+
+export type AnimeRowProps = {
+    anime: AnimeData,
+    columns?: AnimeRowColumnKind[]
+    priority?: AnimeRowColumnPriority
+}
+
+
+export function AnimeRow({anime, columns = animeRowColumnKindDefault, priority}: AnimeRowProps) {
+    const activeClass: string = anime.active ? "review-active" : ""
+    const activeClassFa: string = anime.active ? "fa-beat-fade" : ""
+
+    const ratingText: string = anime.rating ? `${anime.rating}` : ""
+
+    const ratingClass: string = ratingToClassName(anime.rating)
+
+    const progressClass: string = animeProgressToClassName(anime.progress)
+    const progressIcon: string = animeProgressToIconDef(anime.progress)
+    const progressTitle: string = animeProgressToTitle(anime.progress)
+
+    const priorityClass: string = priority ? `priority-${priority}` : ""
+
+    const columnsElements = columns.map((kind, index) => {
+        switch(kind) {
+            case "rating": {
+                return (
+                    <td key={index} className={`review-rating ${ratingClass}`}>
+                        <data value={ratingText}>
+                            {ratingText}
+                        </data>
+                    </td>
+                )
+            }
+            case "progress": {
+                return (
+                    <td key={index} className={`anime-progress ${progressClass}`}>
+                        <data value={anime.progress ?? AnimeProgress.Unset} title={progressTitle}>
+                            {progressIcon && <i className={`fa-sharp fa-regular ${progressIcon} ${activeClassFa}`}></i>}
+                        </data>
+                    </td>
+                )
+            }
+            case "name": {
+                return (
+                    <td key={index} className={`review-name`}>
+                        <a href={anime.url}>
+                            <data value={anime.name ?? ""}>
+                                {anime.name}
+                            </data>
+                        </a>
+                    </td>
+                )
+            }
+            case "nameoriginal": {
+                return (
+                    <td key={index} className={`review-nameoriginal`}>
+                        <data value={anime.name_original ?? ""}>
+                            {anime.name_original}
+                        </data>
+                    </td>
+                )
+            }
+            case "namesort": {
+                return (
+                    <td key={index} className={`review-namesort`} hidden={true}>
+                        <data value={anime.name ?? ""}/>
+                    </td>
+                )
+            }
+            case "hascontent": {
+                return (
+                    <td key={index} className={`review-hascontent`}>
+                        <data value={anime.content ? "true" : "false"}>
+                            {anime.content && <i className={"fa-sharp fa-regular fa-bars-sort"}/>}
+                        </data>
+                    </td>
+                )
+            }
+            case "date": {
+                const date = formatDateIso(anime.date)
+                return (
+                    <td key={index} className={`review-date`}>
+                        <time dateTime={date ?? ""}>
+                            {date}
+                        </time>
+                    </td>
+                )
+            }
+        }
+    })
+
+    return (
+        <tr className={`anime ${activeClass} ${ratingClass} ${progressClass} ${priorityClass}`}>
+            {columnsElements}
+        </tr>
+    )
+}
\ No newline at end of file
diff --git a/_components/AnimeTable.tsx b/_components/AnimeTable.tsx
new file mode 100644
index 0000000..8dddf1e
--- /dev/null
+++ b/_components/AnimeTable.tsx
@@ -0,0 +1,101 @@
+import {AnimeData} from "../_utils/anime.ts"
+import {AnimeRow, AnimeRowColumnKind, animeRowColumnKindDefault, AnimeRowColumnPriority} from "./AnimeRow.tsx"
+
+
+export type AnimeTableProps = {
+    id?: string,
+    anime: AnimeData[],
+    columns?: AnimeRowColumnKind[]
+    priority?: AnimeRowColumnPriority
+}
+
+
+export function AnimeTable({id, anime, columns = animeRowColumnKindDefault, priority}: AnimeTableProps) {
+    const colElements = columns.map((column, index) => {
+        switch(column) {
+            case "rating": return (
+                <col key={index} className={`review-rating`}/>
+            )
+            case "progress": return (
+                <col key={index} className={`anime-progress`}/>
+            )
+            case "name": return (
+                <col key={index} className={`review-name`}/>
+            )
+            case "hascontent": return (
+                <col key={index} className={`review-hascontent`}/>
+            )
+            case "date": return (
+                <col key={index} className={`review-date`}/>
+            )
+        }
+    })
+
+    const thElements = columns.map((column, index) => {
+        switch(column) {
+            case "rating": return (
+                <th key={index} scope={"col"} className={`review-rating`}>
+                    <abbr title={"The rating of the game, from 1 to 100."}>
+                        <i className={`fa-sharp fa-solid fa-thumbs-up`}/>
+                    </abbr>
+                </th>
+            )
+            case "progress": return (
+                <th key={index} scope={"col"} className={`game-progress`}>
+                    <abbr title={"The progress that has been made in the game."}>
+                        <i className={`fa-sharp fa-solid fa-bars-progress`}/>
+                    </abbr>
+                </th>
+            )
+            case "name": return (
+                <th key={index} scope={"col"} className={`review-name`}>
+                    <abbr title={"The title of the game."}>
+                        Title
+                    </abbr>
+                </th>
+            )
+            case "namesort": return (
+                <th key={index} scope={"col"} className={`review-namesort`} hidden={true}>
+                    <abbr title={"The title to sort the game as."}>
+                        Sort by
+                    </abbr>
+                </th>
+            )
+            case "hascontent":
+                return (
+                    <th key={index} scope={"col"} className={`review-hascontent`}>
+                        <abbr title={"Whether the review has textual content, or just metadata."}>
+                        <i className={`fa-sharp fa-regular fa-bars-sort`}/>
+                    </abbr>
+                </th>
+            )
+            case "date": return (
+                <th key={index} scope={"col"} className={`review-date`}>
+                    <abbr title={"The date of the last update of the review."}>
+                        Date
+                    </abbr>
+                </th>
+            )
+        }
+    })
+
+    const trTdElements = anime.map((ani: AnimeData) => (
+        <AnimeRow key={ani.url} anime={ani} columns={columns} priority={priority}/>
+    ))
+
+    return (
+        <table id={id}>
+            <colgroup>
+                {colElements}
+            </colgroup>
+            <thead>
+                <tr>
+                    {thElements}
+                </tr>
+            </thead>
+            <tbody>
+                {trTdElements}
+            </tbody>
+        </table>
+    )
+}
\ No newline at end of file
diff --git a/_includes/anime.tsx b/_includes/anime.tsx
index f51125e..f607670 100644
--- a/_includes/anime.tsx
+++ b/_includes/anime.tsx
@@ -17,6 +17,19 @@ export default function(data: AnimeData, helpers: Lume.Helpers) {
 
     const dateSeparator = (data.progress || data.hours_played) ? <hr/> : null
 
+    const nameOriginalRow = (
+        <ReviewInfo.MetadataRow
+            className={"anime-nameoriginal"}
+            label={"Original name"}
+        >
+            <data value={data.name_original}>
+                {data.name_original}
+            </data>
+        </ReviewInfo.MetadataRow>
+    )
+
+    const nameSeparator = (data.name_original) ? <hr/> : null
+
     const progressRow = data.progress ? (
         <ReviewInfo.MetadataRow
             className={`anime-progress ${animeProgressToClassName(data.progress)}`}
diff --git a/_includes/list-anime.tsx b/_includes/list-anime.tsx
new file mode 100644
index 0000000..611b0ab
--- /dev/null
+++ b/_includes/list-anime.tsx
@@ -0,0 +1,53 @@
+import { AnimeTable } from "../_components/AnimeTable.tsx";
+import { AnimeData } from "../_utils/anime.ts";
+
+export const layout = "base.tsx";
+export const url = "/anime.html";
+
+export default function (data: Lume.Data, helpers: Lume.Helpers) {
+    const introSection = data.content
+        ? (
+            <section id={"list-anime-section-intro"}>
+                {data.children}
+            </section>
+        )
+        : null;
+
+    const anime: AnimeData[] = data.search.pages("anime");
+
+    const animeSection = (
+        <section id={"list-anime-section-games"}>
+            <h2>
+                Anime list
+                <small>
+                    <a href={helpers.url("/anime/feed.rss")}>
+                        <i className={"fa-sharp fa-solid fa-rss"} /> Feed
+                    </a>
+                </small>
+                <small>
+                    <a href={helpers.url("/anime/index.json")}>
+                        <i className={"fa-sharp fa-solid fa-brackets-curly"} />
+                        {" "}
+                        JSON
+                    </a>
+                </small>
+            </h2>
+            <div>
+                <AnimeTable
+                    id={"list-anime-table"}
+                    anime={anime}
+                    priority={"mixed"}
+                />
+            </div>
+        </section>
+    );
+
+    return (
+        <main id={"list-anime-main"}>
+            {introSection}
+            {animeSection}
+            <script src={"/_static/scripting/sort.js"} />
+            <script src={"/_static/scripting/installSortOnLoad.js"} />
+        </main>
+    );
+}