Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Pretiffied code + queries are now retrieving only the specified language

This commit is contained in:
DrMint 2021-11-13 21:26:18 +01:00
parent 1ed8634b88
commit ee0fe7fdf3
6 changed files with 263 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages/_app.tsx
View File

@ -1,11 +1,9 @@
import type { AppProps } from 'next/app'
import Head from 'next/head'
import MainPanel from 'components/Panels/MainPanel'
import 'styles/globals.css'
import type { AppProps } from "next/app";
import Head from "next/head";
import MainPanel from "components/Panels/MainPanel";
import "styles/globals.css";
function AccordsLibraryApp({ Component, pageProps }: AppProps) {
/* [BIG HACK]
Yes this is probably terrible, I'm trying to apply a different style to my appContainer div
depending on if the page uses a subpanel or contentpanel, or both, or neither. This is because
@ -17,63 +15,65 @@ function AccordsLibraryApp({ Component, pageProps }: AppProps) {
Mint
*/
const componentProcessed = Component(pageProps)
let useSubPanel = false
let useContentPanel = false
const children = componentProcessed.props.children
const componentProcessed = Component(pageProps);
let useSubPanel = false;
let useContentPanel = false;
const children = componentProcessed.props.children;
if (Array.isArray(children)) {
children.forEach(child => {
children.forEach((child) => {
if (child.type.name === "SubPanel") {
useSubPanel = true
useSubPanel = true;
} else if (child.type.name === "ContentPanel") {
useContentPanel = true
useContentPanel = true;
}
});
} else {
if (children.type.name === "SubPanel") {
useSubPanel = true
useSubPanel = true;
} else if (children.type.name === "ContentPanel") {
useContentPanel = true
useContentPanel = true;
}
}
let additionalClasses = ""
if (useSubPanel) additionalClasses += " withSubPanel"
if (useContentPanel) additionalClasses += " withContentPanel"
let additionalClasses = "";
if (useSubPanel) additionalClasses += " withSubPanel";
if (useContentPanel) additionalClasses += " withContentPanel";
/* [End of BIG HACK] */
const siteTitle =
"Accord's Library - Discover • Analyse • Translate • Archive";
const siteDescription =
"Accord's Library aims at gathering and archiving all of Yoko Taro’s work. Yoko Taro is a Japanese video game director and scenario writer.";
const siteFavicon = "/favicon.png";
const thumbnailImage = "/default_og.jpg";
return (
<div className={"appContainer" + additionalClasses}>
<Head>
<title>Accord&rsquo;s Library - Discover • Analyse • Translate • Archive</title>
<meta name="description" content="Accord's Library aims at gathering and archiving all of Yoko Taro’s work. Yoko Taro is a Japanese video game director and scenario writer. He is best-known" />
<link rel="icon" href="/favicon.png" />
<meta property="og:image" content="/default_og.jpg"></meta>
<meta property="og:image:secure_url" content="/default_og.jpg"></meta>
<title>{siteTitle}</title>
<meta name="description" content={siteDescription} />
<link rel="icon" href={siteFavicon} />
<meta property="og:image" content={thumbnailImage}></meta>
<meta property="og:image:secure_url" content={thumbnailImage}></meta>
<meta property="og:image:width" content="1200"></meta>
<meta property="og:image:height" content="630"></meta>
<meta property="og:image:alt" content="Accord's Library"></meta>
<meta property="og:image:type" content="image/jpeg"></meta>
<meta name="twitter:card" content="summary_large_image"></meta>
<meta name="twitter:title" content="Accord's Library - Discover • Analyse • Translate • Archive"></meta>
<meta name="twitter:description" content="Accord's Library aims at gathering and archiving all of Yoko Taro’s work. Yoko Taro is a Japanese video game director and scenario writer. He is best-known"></meta>
<meta name="twitter:image" content="/default_og.jpg"></meta>
<meta name="twitter:title" content={siteTitle}></meta>
<meta name="twitter:description" content={siteDescription}></meta>
<meta name="twitter:image" content={thumbnailImage}></meta>
</Head>
<MainPanel/>
<MainPanel />
{componentProcessed}
</div>
)
);
}
export default AccordsLibraryApp
export default AccordsLibraryApp;

40
src/pages/chronology/index.tsx
View File

@ -1,41 +1,41 @@
import type { NextPage } from 'next'
import SubPanel from 'components/Panels/SubPanel'
import styles from 'styles/Panels/SubPanel.module.css'
import NavOption from 'components/Panels/NavOption'
import type { NextPage } from "next";
import SubPanel from "components/Panels/SubPanel";
import NavOption from "components/Panels/NavOption";
const Chronology: NextPage = () => {
return (
<>
<SubPanel>
<h2>Chronology</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate facilisis blandit. Aliquam blandit neque sem, ac pulvinar leo ultricies sit amet.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate
facilisis blandit. Aliquam blandit neque sem, ac pulvinar leo
ultricies sit amet.
</p>
<hr />
<NavOption
url="/chronology/timelines"
title="Timelines"
<NavOption
url="/chronology/timelines"
title="Timelines"
subtitle="Diagram of how the games connect to each other"
border={true}
/>
<NavOption
url="/chronology/overview"
title="Chronology Overview"
<NavOption
url="/chronology/overview"
title="Chronology Overview"
subtitle="List of all the events from the main timeline"
border={true}
/>
<NavOption
url="/chronology/walkthrough"
title="Chronology Walkthrough"
<NavOption
url="/chronology/walkthrough"
title="Chronology Walkthrough"
subtitle="Chronological exploration of the lore and stories"
border={true}
/>
</SubPanel>
</>
)
}
export default Chronology
);
};
export default Chronology;

68
src/pages/chronology/overview.tsx
View File

@ -1,54 +1,50 @@
import type { NextPage } from 'next'
import { useRouter } from 'next/router'
import { GetStaticProps } from 'next'
import ContentPanel from 'components/Panels/ContentPanel'
import SubPanel from 'components/Panels/SubPanel'
import ReturnButton from 'components/Panels/ReturnButton'
import NavOption from 'components/Panels/NavOption'
import { getChronologyItems } from 'queries/queries'
import type { NextPage } from "next";
import { GetStaticProps } from "next";
import ContentPanel from "components/Panels/ContentPanel";
import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/Panels/ReturnButton";
import NavOption from "components/Panels/NavOption";
import { getChronologyEras, getChronologyItems } from "queries/queries";
const ChronologyOverview: NextPage = ( props ) => {
const router = useRouter()
const ChronologyOverview: NextPage = (props) => {
return (
<>
<SubPanel>
<ReturnButton url="/chronology" title="Chronology"/>
<hr/>
<NavOption
url="#test"
title="Prior to the Cataclysm"
subtitle="0&ensp;→&ensp;856"
border={true}
/>
<ReturnButton url="/chronology" title="Chronology" />
<hr />
{props.chronologyEras.map((era: any) => (
<NavOption
key={era.id}
url={"#" + era.slug}
title={era.translations[0].title}
subtitle={era.starting_year + " → " + era.ending_year}
border={true}
/>
))}
</SubPanel>
<ContentPanel>
{props.chronologyItems.map((item: any) => (
<div key={item.id}>{item.year} -{' '}
{
item.translations.map((translation: any) => (
<>
{translation.languages_code.code === router.locale ? translation.title : ""}
</>
))}
<div key={item.id}>
{item.year} - {" "}
{item.translations[0].title}
</div>
))}
</ContentPanel>
</>
)
}
export default ChronologyOverview
);
};
export default ChronologyOverview;
export const getStaticProps: GetStaticProps = async (context) => {
return {
props: {
chronologyItems: await getChronologyItems(),
chronologyItems: await getChronologyItems(context.locale),
chronologyEras: await getChronologyEras(context.locale),
},
}
}
};
};

136
src/pages/index.tsx
View File

@ -1,6 +1,5 @@
import type { NextPage } from 'next'
import SubPanel from 'components/Panels/SubPanel'
import ContentPanel from 'components/Panels/ContentPanel'
import type { NextPage } from "next";
import ContentPanel from "components/Panels/ContentPanel";
const Home: NextPage = () => {
return (
@ -8,17 +7,128 @@ const Home: NextPage = () => {
<ContentPanel>
<h2>Discover • Analyse • Translate • Archive</h2>
<h2>What is this?</h2>
<p>Accord&rsquo;s Library aims at gathering and archiving all of Yoko Taro’s work. Yoko Taro is a Japanese video game director and scenario writer. He is best-known for his work on the NieR and Drakengard (Drag-on Dragoon) franchises. To complement his games, Yoko Taro likes to publish side materials in the form of books, novellas, artbooks, stage plays, manga, drama CDs, and comics. Those side materials can be very difficult to find. His work goes all the way back to 2003, and most of them are out of print after having been released solely in Japan, sometimes in limited quantities. Their prices on the second hand market have skyrocketed, ranging all the way to hundreds if not thousand of dollars for the rarest items.&nbsp;</p>
<p>This is where this library takes its meaning, in trying to help the community grow by providing translators, writers, and wiki’s contributors a simple way to access these records filled with stories, artworks, and knowledge.</p>
<p>We are a small group of Yoko Taro&rsquo;s fans that decided to join forces and create a website and a community. Our motto is <strong>Discover • Analyze • Translate • Archive</strong> (D.A.T.A. for short). We started with the goal of gathering and archiving as much side-materials/merch as possible. But since then, our ambition grew and we decided to create a full-fledged website that will also include news articles, lore, summaries, translations, and transcriptions. Hopefully one day, we will be up there in the list of notable resources for Drakengard and NieR fans.</p>
<p>
Accord&rsquo;s Library aims at gathering and archiving all of Yoko
Taro’s work. Yoko Taro is a Japanese video game director and scenario
writer. He is best-known for his work on the NieR and Drakengard
(Drag-on Dragoon) franchises. To complement his games, Yoko Taro likes
to publish side materials in the form of books, novellas, artbooks,
stage plays, manga, drama CDs, and comics. Those side materials can be
very difficult to find. His work goes all the way back to 2003, and
most of them are out of print after having been released solely in
Japan, sometimes in limited quantities. Their prices on the second
hand market have skyrocketed, ranging all the way to hundreds if not
thousand of dollars for the rarest items.&nbsp;
</p>
<p>
This is where this library takes its meaning, in trying to help the
community grow by providing translators, writers, and wiki’s
contributors a simple way to access these records filled with stories,
artworks, and knowledge.
</p>
<p>
We are a small group of Yoko Taro&rsquo;s fans that decided to join
forces and create a website and a community. Our motto is{" "}
<strong>Discover • Analyze • Translate • Archive</strong> (D.A.T.A.
for short). We started with the goal of gathering and archiving as
much side-materials/merch as possible. But since then, our ambition
grew and we decided to create a full-fledged website that will also
include news articles, lore, summaries, translations, and
transcriptions. Hopefully one day, we will be up there in the list of
notable resources for Drakengard and NieR fans.
</p>
<h2>What&rsquo;s on this website?</h2>
<p><strong><a href="https://accords-library.com/compendium/">The Compendium</a></strong>: This is where we will list every NieR/DOD/other Yoko Tato merch, games, books, novel, stage play, CD... well everything! For each, we will provide photos and/or scans of the content, information about what it is, when and how it was released, size, initial price...</p>
<p><strong><a href="https://accords-library.com/news/">News</a></strong>: Yes because we also want to create our own content! So there you will find translations, transcriptions, unboxing, news about future merch/game releases, maybe some guides. We don&rsquo;t see this website as being purely a showcase of our work, but also of the community, and as such, we will be accepting applications for becoming contributors on the website. For the applicant, there is no deadline or article quota, it merely means that we will have access to the website Post Writing tools and will be able to submit a draft that can be published once verified by an editor. Anyway, that&rsquo;s at least the plan, we will think more about this until the website&rsquo;s official launch.</p>
<p><strong><a href="https://accords-library.com/data/">Data</a></strong>: There we will publish lore/knowledge about the Yokoverse: Dictionary, Timeline, Weapons Stories, Game summaries... We have not yet decided how deep we want to go as they are already quite a few resources out there. </p>
<p><strong><a href="https://gallery.accords-library.com/posts" target="_blank" rel="noreferrer noopener">Gallery</a></strong>: A fully tagged Danbooru-styled gallery with currently more than a thousand unique artworks. If you are unfamiliar with this kind of gallery, it comes with a powerful search function that allows you to search for specific images: want to search for images with both Caim and Inuart, just type <kbd><a href="https://gallery.accords-library.com/posts/query=Caim%20Inuart" target="_blank" rel="noreferrer noopener">Caim Inuart</a></kbd>. If you want images of Devola OR Popola, you can use a comma <kbd><a href="https://gallery.accords-library.com/posts/query=Popola%2CDevola" data-type="URL" data-id="https://gallery.accords-library.com/posts/query=Popola%2CDevola" target="_blank" rel="noreferrer noopener">Popola,Devola</a></kbd>. You can also negate a tag: i.e. images of 9S without any pods around, search for <kbd><a href="https://gallery.accords-library.com/posts/query=9S%20-Pods" target="_blank" rel="noreferrer noopener">9S -Pods</a></kbd>. Anyway, there is a lot more to it, you can click on "Syntax help" next to the Search button for even neater functions. Btw, you can create an account to favorite, upvote/downvote posts, or if you want to help tagging them. There isn&rsquo;t currently a way for new users to upload images, you&rsquo;ll have to contact us first and we can decide to enable this function on your account.</p>
<p>
<strong>
<a href="https://accords-library.com/compendium/">The Compendium</a>
</strong>
: This is where we will list every NieR/DOD/other Yoko Tato merch,
games, books, novel, stage play, CD... well everything! For each, we
will provide photos and/or scans of the content, information about
what it is, when and how it was released, size, initial price...
</p>
<p>
<strong>
<a href="https://accords-library.com/news/">News</a>
</strong>
: Yes because we also want to create our own content! So there you
will find translations, transcriptions, unboxing, news about future
merch/game releases, maybe some guides. We don&rsquo;t see this
website as being purely a showcase of our work, but also of the
community, and as such, we will be accepting applications for becoming
contributors on the website. For the applicant, there is no deadline
or article quota, it merely means that we will have access to the
website Post Writing tools and will be able to submit a draft that can
be published once verified by an editor. Anyway, that&rsquo;s at least
the plan, we will think more about this until the website&rsquo;s
official launch.
</p>
<p>
<strong>
<a href="https://accords-library.com/data/">Data</a>
</strong>
: There we will publish lore/knowledge about the Yokoverse:
Dictionary, Timeline, Weapons Stories, Game summaries... We have not
yet decided how deep we want to go as they are already quite a few
resources out there.{" "}
</p>
<p>
<strong>
<a
href="https://gallery.accords-library.com/posts"
target="_blank"
rel="noreferrer noopener"
>
Gallery
</a>
</strong>
: A fully tagged Danbooru-styled gallery with currently more than a
thousand unique artworks. If you are unfamiliar with this kind of
gallery, it comes with a powerful search function that allows you to
search for specific images: want to search for images with both Caim
and Inuart, just type{" "}
<kbd>
<a
href="https://gallery.accords-library.com/posts/query=Caim%20Inuart"
target="_blank"
rel="noreferrer noopener"
>
Caim Inuart
</a>
</kbd>
. If you want images of Devola OR Popola, you can use a comma{" "}
<kbd>
<a
href="https://gallery.accords-library.com/posts/query=Popola%2CDevola"
data-type="URL"
data-id="https://gallery.accords-library.com/posts/query=Popola%2CDevola"
target="_blank"
rel="noreferrer noopener"
>
Popola,Devola
</a>
</kbd>
. You can also negate a tag: i.e. images of 9S without any pods
around, search for{" "}
<kbd>
<a
href="https://gallery.accords-library.com/posts/query=9S%20-Pods"
target="_blank"
rel="noreferrer noopener"
>
9S -Pods
</a>
</kbd>
. Anyway, there is a lot more to it, you can click on "Syntax help"
next to the Search button for even neater functions. Btw, you can
create an account to favorite, upvote/downvote posts, or if you want
to help tagging them. There isn&rsquo;t currently a way for new users
to upload images, you&rsquo;ll have to contact us first and we can
decide to enable this function on your account.
</p>
</ContentPanel>
</>
)
}
);
};
export default Home
export default Home;

11
src/pages/library.tsx
View File

@ -1,5 +1,5 @@
import type { NextPage } from 'next'
import Head from 'next/head'
import type { NextPage } from "next";
import Head from "next/head";
const Home: NextPage = () => {
return (
@ -9,9 +9,8 @@ const Home: NextPage = () => {
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.png" />
</Head>
</>
)
}
);
};
export default Home
export default Home;

63
src/queries/queries.ts
View File

@ -1,20 +1,49 @@
export const getChronologyItems = async () => {
const res = await fetch(
process.env.GRAPHQL + '?access_token=' + process.env.ACCESS_TOKEN + `&query={
chronology_items {
id,
year,
month,
day,
translations {
languages_code {
code
}
title
export async function getChronologyItems(languages_code: String | undefined) {
return (
await queryCMS(
`
{
chronology_items {
id
year
month
day
translations(filter: { languages_code: { code: { _eq: "` + languages_code + `" } } }) {
title
}
}
}
`
)
).chronology_items;
}
}`)
return (await res.json()).data.chronology_items
}
export async function getChronologyEras(languages_code: String | undefined) {
return (
await queryCMS(
`
{
chronology_eras(sort: "starting_year") {
id
starting_year
ending_year
translations(filter: { languages_code: { code: { _eq: "` + languages_code + `" } } }) {
title
}
}
}
`
)
).chronology_eras;
}
export const queryCMS = async (query: String) => {
const res = await fetch(
process.env.GRAPHQL +
"?access_token=" +
process.env.ACCESS_TOKEN +
"&query=" +
query
);
return (await res.json()).data;
};