-
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #192 from NieR-Rein-Guide/feat-stories
Add stories
- Loading branch information
Showing
14 changed files
with
1,094 additions
and
92 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import Link from "next/link"; | ||
| import classNames from "classnames"; | ||
| import { useRouter } from "next/router"; | ||
|
|
||
| const ITEMS = [ | ||
| { | ||
| label: "Main story", | ||
| href: "/database/stories/main", | ||
| }, | ||
| { | ||
| label: "Characters", | ||
| href: "/database/stories/characters", | ||
| }, | ||
| { | ||
| label: "EX characters", | ||
| href: "/database/stories/ex-characters", | ||
| }, | ||
| { | ||
| label: "Recollections of Dusk", | ||
| href: "/database/stories/rod-characters", | ||
| }, | ||
| { | ||
| label: "Events", | ||
| href: "/database/stories/events", | ||
| }, | ||
| { | ||
| label: "Anecdotes", | ||
| href: "/database/stories/anecdotes", | ||
| }, | ||
| { | ||
| label: "Hidden stories", | ||
| href: "/database/stories/hidden-stories", | ||
| disabled: true, | ||
| }, | ||
| { | ||
| label: "Lost archives", | ||
| href: "/database/stories/lost-archives", | ||
| }, | ||
| { | ||
| label: "Costumes", | ||
| href: "/database/stories/costumes", | ||
| }, | ||
| { | ||
| label: "Weapons", | ||
| href: "/database/stories/weapons", | ||
| }, | ||
| { | ||
| label: "Companions", | ||
| href: "/database/stories/companions", | ||
| }, | ||
| { | ||
| label: "Memoirs", | ||
| href: "/database/stories/memoirs", | ||
| }, | ||
| ]; | ||
|
|
||
| export default function StoriesLayout({ children }): JSX.Element { | ||
| const router = useRouter(); | ||
|
|
||
| return ( | ||
| <div className="grid grid-cols-1 lg:grid-cols-12 gap-4"> | ||
| <aside className="col-span-1 flex flex-col mb-8 lg:col-span-3 lg:mb-0"> | ||
| {ITEMS.map((item) => ( | ||
| <Link | ||
| key={item.label} | ||
| href={item.href} | ||
| className={classNames( | ||
| "flex items-center justify-center text-center p-4 transition-colors ease-out-cubic relative bordered", | ||
| item.disabled ? "pointer-events-none opacity-40" : "", | ||
| router.asPath.includes(item.href) | ||
| ? "active bg-beige active" | ||
| : "bg-grey-lighter" | ||
| )} | ||
| > | ||
| <span | ||
| className={classNames( | ||
| "font-display font-bold text-xl tracking-wider transition-colors ease-out-cubic", | ||
| router.asPath.includes(item.href) | ||
| ? "text-grey-lighter" | ||
| : "text-beige" | ||
| )} | ||
| > | ||
| {item.label} | ||
| </span> | ||
| </Link> | ||
| ))} | ||
| </aside> | ||
|
|
||
| <div className="col-span-1 lg:col-span-9">{children}</div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import Layout from "@components/Layout"; | ||
| import Meta from "@components/Meta"; | ||
| import Link from "next/link"; | ||
| import SVG from "react-inlinesvg"; | ||
| import prisma from "@libs/prisma"; | ||
| import { card_story } from "@prisma/client"; | ||
| import { CDN_URL } from "@config/constants"; | ||
| import { useState } from "react"; | ||
| import { FormControl, InputLabel, MenuItem, Select } from "@mui/material"; | ||
| import Squares from "@components/decorations/Squares"; | ||
| import StoriesLayout from "@components/Layout/StoriesLayout"; | ||
|
|
||
| interface Props { | ||
| anecdotes: card_story[]; | ||
| } | ||
|
|
||
| export default function DatabaseStories({ anecdotes }: Props): JSX.Element { | ||
| const [anecdoteIndex, setAnecdoteIndex] = useState(anecdotes[0].id); | ||
|
|
||
| return ( | ||
| <Layout> | ||
| <Meta | ||
| title="Anecdotes stories - Database" | ||
| description="Anecdotes stories" | ||
| cover="https://nierrein.guide/cover-stories.jpg" | ||
| /> | ||
|
|
||
| <nav className="mb-16"> | ||
| <Link href="/database" passHref={true} className="btn"> | ||
| <SVG src="/decorations/arrow-left.svg" className="h-6" /> | ||
| <span>Return to Database</span> | ||
| </Link> | ||
| </nav> | ||
|
|
||
| <StoriesLayout> | ||
| <div className="relative"> | ||
| <div className="flex items-center gap-y-4 gap-x-4 bg-grey-dark border border-beige border-opacity-50 p-4 mb-8"> | ||
| <FormControl className="flex-1"> | ||
| <InputLabel id="season-index">Anecdote</InputLabel> | ||
| <Select | ||
| labelId="season-index" | ||
| value={anecdoteIndex} | ||
| label="Type" | ||
| onChange={(e) => { | ||
| setAnecdoteIndex(e.target.value); | ||
| }} | ||
| > | ||
| {anecdotes.map((anecdote) => ( | ||
| <MenuItem | ||
| className="flex items-center justify-between" | ||
| key={anecdote.id} | ||
| value={anecdote.id} | ||
| > | ||
| <span>{anecdote.name}</span> | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| </FormControl> | ||
| </div> | ||
|
|
||
| <article className="relative bordered bg-grey-dark p-4 rounded-lg"> | ||
| <Squares /> | ||
| {anecdotes | ||
| .filter((anecdote) => anecdote.id === anecdoteIndex) | ||
| .map((anecdote) => ( | ||
| <div key={anecdote.id}> | ||
| {anecdote.stories.map(({ story, image_path }, index) => ( | ||
| <div key={index} className="my-4"> | ||
| <img | ||
| className="mb-4" | ||
| src={`${CDN_URL}${image_path}`} | ||
| alt={`Story ${index + 1} image`} | ||
| loading="lazy" | ||
| /> | ||
| <p | ||
| className="whitespace-pre-wrap mb-4 pl-4" | ||
| dangerouslySetInnerHTML={{ | ||
| __html: story, | ||
| }} | ||
| ></p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| </article> | ||
| </div> | ||
| </StoriesLayout> | ||
| </Layout> | ||
| ); | ||
| } | ||
|
|
||
| export async function getStaticProps() { | ||
| const anecdotes = await prisma.dump.card_story.findMany(); | ||
|
|
||
| return { | ||
| props: JSON.parse( | ||
| JSON.stringify({ | ||
| anecdotes, | ||
| }) | ||
| ), | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import Layout from "@components/Layout"; | ||
| import Meta from "@components/Meta"; | ||
| import Link from "next/link"; | ||
| import SVG from "react-inlinesvg"; | ||
| import prisma from "@libs/prisma"; | ||
| import { character } from "@prisma/client"; | ||
| import { CDN_URL } from "@config/constants"; | ||
| import { useState } from "react"; | ||
| import { FormControl, InputLabel, MenuItem, Select } from "@mui/material"; | ||
| import Squares from "@components/decorations/Squares"; | ||
| import StoriesLayout from "@components/Layout/StoriesLayout"; | ||
|
|
||
| interface Props { | ||
| characters: character[]; | ||
| } | ||
|
|
||
| export default function DatabaseStories({ characters }: Props): JSX.Element { | ||
| const [characterIndex, setCharacterIndex] = useState( | ||
| characters[0].character_id | ||
| ); | ||
|
|
||
| return ( | ||
| <Layout> | ||
| <Meta | ||
| title="Characters stories - Database" | ||
| description="Characters stories" | ||
| cover="https://nierrein.guide/cover-stories.jpg" | ||
| /> | ||
|
|
||
| <nav className="mb-16"> | ||
| <Link href="/database" passHref={true} className="btn"> | ||
| <SVG src="/decorations/arrow-left.svg" className="h-6" /> | ||
| <span>Return to Database</span> | ||
| </Link> | ||
| </nav> | ||
|
|
||
| <StoriesLayout> | ||
| <div className="relative"> | ||
| <div className="flex items-center gap-y-4 gap-x-4 bg-grey-dark border border-beige border-opacity-50 p-4 mb-8"> | ||
| <FormControl className="flex-1"> | ||
| <InputLabel id="season-index">Character</InputLabel> | ||
| <Select | ||
| labelId="season-index" | ||
| value={characterIndex} | ||
| label="Type" | ||
| onChange={(e) => { | ||
| setCharacterIndex(e.target.value); | ||
| }} | ||
| > | ||
| {characters.map((character) => ( | ||
| <MenuItem | ||
| key={character.character_id} | ||
| value={character.character_id} | ||
| > | ||
| {character.name} | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| </FormControl> | ||
| </div> | ||
|
|
||
| <article className="relative bordered bg-grey-dark p-4 rounded-lg"> | ||
| <Squares /> | ||
| {characters | ||
| .filter((character) => character.character_id === characterIndex) | ||
| .map((character) => ( | ||
| <div key={character.character_id}> | ||
| {character.character_stories.map( | ||
| ({ story, image_path }, index) => ( | ||
| <div key={index} className="my-4"> | ||
| <img | ||
| className="mb-4" | ||
| src={`${CDN_URL}${image_path}`} | ||
| alt={`Story ${index + 1} image`} | ||
| loading="lazy" | ||
| /> | ||
| <p | ||
| className="whitespace-pre-wrap mb-4 pl-4" | ||
| dangerouslySetInnerHTML={{ | ||
| __html: story, | ||
| }} | ||
| ></p> | ||
| </div> | ||
| ) | ||
| )} | ||
| </div> | ||
| ))} | ||
| </article> | ||
| </div> | ||
| </StoriesLayout> | ||
| </Layout> | ||
| ); | ||
| } | ||
|
|
||
| export async function getStaticProps() { | ||
| const characters = await prisma.dump.character.findMany(); | ||
|
|
||
| return { | ||
| props: JSON.parse( | ||
| JSON.stringify({ | ||
| characters: characters.filter( | ||
| (character) => character.character_stories.length > 0 | ||
| ), | ||
| }) | ||
| ), | ||
| }; | ||
| } |
Oops, something went wrong.