mirror of
https://github.com/starshardstudio/peafowl.git
synced 2024-11-21 20:44:19 +00:00
Create anime pages
This commit is contained in:
parent
ee9e527050
commit
a479d15993
GPG key ID:
5ADA3868646C3FC0
4 changed files with 274 additions and 0 deletions
107
_components/AnimeRow.tsx
Normal file
107
_components/AnimeRow.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
101
_components/AnimeTable.tsx
Normal file
101
_components/AnimeTable.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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)}`}
|
||||
|
|
|
|||
53
_includes/list-anime.tsx
Normal file
53
_includes/list-anime.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue