A few more fixes

_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",

_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>

_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}

anime/neon-genesis-evangelion.md

@@ -0,0 +1,8 @@
+---
+name: Neon Genesis Evangelion
+name_original: Shinseiki Evangelion
+active: false
+rating: 0
+progress: complete
+---
+