From 97cba372e6009639c5de84e4289a906c11b3b3b2 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 5 Nov 2024 13:51:18 +0100
Subject: [PATCH] A few more fixes

---
 _cms.ts                          | 13 +++++
 _components/AnimeTable.tsx       | 10 ++--
 _includes/index.tsx              | 89 ++++++++++++++++++++++++++++++++
 anime/neon-genesis-evangelion.md |  8 +++
 list-anime.md                    |  0
 5 files changed, 115 insertions(+), 5 deletions(-)
 create mode 100644 anime/neon-genesis-evangelion.md
 create mode 100644 list-anime.md

diff --git a/_cms.ts b/_cms.ts
index 9b12d0a..9b5ae5d 100644
--- a/_cms.ts
+++ b/_cms.ts
@@ -54,6 +54,19 @@ cms.document(
 	]
 )
 
+cms.document(
+	"list-anime",
+	"src:list-anime.md",
+	[
+		{
+			name: "content",
+			type: "markdown",
+			label: "Introduction",
+			description: "The text to display at the top of the page."
+		}
+	]
+)
+
 cms.collection(
 	"games",
 	"src:games/*.md",
diff --git a/_components/AnimeTable.tsx b/_components/AnimeTable.tsx
index 8dddf1e..3c59650 100644
--- a/_components/AnimeTable.tsx
+++ b/_components/AnimeTable.tsx
@@ -35,28 +35,28 @@ export function AnimeTable({id, anime, columns = animeRowColumnKindDefault, prio
         switch(column) {
             case "rating": return (
                 <th key={index} scope={"col"} className={`review-rating`}>
-                    <abbr title={"The rating of the game, from 1 to 100."}>
+                    <abbr title={"The rating of the anime, 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."}>
+                <th key={index} scope={"col"} className={`anime-progress`}>
+                    <abbr title={"The progress that has been made in the anime."}>
                         <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."}>
+                    <abbr title={"The title of the anime."}>
                         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."}>
+                    <abbr title={"The title to sort the anime as."}>
                         Sort by
                     </abbr>
                 </th>
diff --git a/_includes/index.tsx b/_includes/index.tsx
index 92c5b96..0c45ac3 100644
--- a/_includes/index.tsx
+++ b/_includes/index.tsx
@@ -3,6 +3,8 @@ import { GameData } from "../_utils/game.ts";
 import { GameTable } from "../_components/GameTable.tsx";
 import { compareGameProgress } from "../_utils/game.ts";
 import { GlobalData } from "../_utils/site.ts";
+import { AnimeTable } from "../_components/AnimeTable.tsx";
+import { AnimeData } from "../_utils/anime.ts";
 
 export const layout = "base.tsx";
 
@@ -143,6 +145,93 @@ export default function (data: GlobalData, helpers: Lume.Helpers) {
         )
         : null;
 
+    const anime: AnimeData[] = data.search.pages("anime");
+
+    const active_anime = anime
+        .filter((ani) => ani.active)
+        .sort(compareDate as any);
+
+    const active_anime_section = (
+        <section id={"index-section-anime-active"} className={"flex flex-v"}>
+            <h3>
+                Now playing
+            </h3>
+            <div>
+                <AnimeTable
+                    anime={active_anime}
+                    columns={["progress", "name", "date"]}
+                    priority={"progress"}
+                />
+            </div>
+        </section>
+    );
+
+    const top_anime = anime
+        .sort((a, b) => ((b.rating ?? 0) - (a.rating ?? 0)))
+        .slice(0, 10);
+
+    const top_anime_section = (
+        <section id={"index-section-anime-top"} className={"flex flex-v"}>
+            <h3>
+                Top anime
+            </h3>
+            <div>
+                <AnimeTable
+                    anime={top_anime}
+                    columns={["rating", "name", "hascontent"]}
+                    priority={"rating"}
+                />
+            </div>
+        </section>
+    );
+
+    const latest_anime = anime
+        .sort((a, b) => -compareDate(a, b))
+        .slice(0, 10);
+
+    const latest_anime_section = (
+        <section id={"index-section-anime-latest"} className={"flex flex-v"}>
+            <h3>
+                Latest updates
+            </h3>
+            <div>
+                <AnimeTable
+                    anime={latest_anime}
+                    columns={["hascontent", "name", "date"]}
+                />
+            </div>
+        </section>
+    );
+
+    const anime_cols = (
+            anime.length > 0
+        )
+        ? (
+            <section className={"flex flex-v"}>
+                <h2>
+                    Anime
+                    <small>
+                        <a href={helpers.url("~/list-anime.md")}>
+                            <i
+                                className={"fa-sharp fa-solid fa-magnifying-glass"}
+                            />{" "}
+                            View all
+                        </a>
+                    </small>
+                </h2>
+                {active_anime.length > 0 && (
+                    <div className={"flex flex-1"}>
+                        {active_anime_section}
+                    </div>
+                )}
+                <div className={"flex flex-2"}>
+                    {top_anime_section}
+                    {latest_anime_section}
+                </div>
+            </section>
+        )
+        : null;    
+
     return (
         <main id={"index-main"} className={"flex flex-v"}>
             {intro_section}
diff --git a/anime/neon-genesis-evangelion.md b/anime/neon-genesis-evangelion.md
new file mode 100644
index 0000000..7f65f1c
--- /dev/null
+++ b/anime/neon-genesis-evangelion.md
@@ -0,0 +1,8 @@
+---
+name: Neon Genesis Evangelion
+name_original: Shinseiki Evangelion
+active: false
+rating: 0
+progress: complete
+---
+
diff --git a/list-anime.md b/list-anime.md
new file mode 100644
index 0000000..e69de29