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

Moved assets and files to src folder. Improved the page layout

This commit is contained in:
DrMint 2021-11-06 17:47:20 +01:00
parent 864c6cde32
commit f73cbd7b40
28 changed files with 372 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/menu.tsx
View File

@ -1,16 +0,0 @@
import MainMenu from './mainmenu'
import SubMenu from './submenu'
import styles from '../styles/menu.module.css'
export default function Menu() {
return (
<div className={styles.container}>
<MainMenu></MainMenu>
<SubMenu></SubMenu>
</div>
)
}

10
components/submenu.tsx
View File

@ -1,10 +0,0 @@
import Link from 'next/link'
import styles from '../styles/submenu.module.css'
export default function MainMenu() {
return (
<div className={styles.menu}>
</div>
)
}

4
next.config.js
View File

@ -1,4 +1,8 @@
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
module.exports = { module.exports = {
reactStrictMode: true, reactStrictMode: true,
i18n: {
locales: ['en', 'fr', 'jp', 'pt-br', 'pt-pt'],
defaultLocale: 'en',
}
} }

8
pages/_app.tsx
View File

@ -1,8 +0,0 @@
import '../styles/globals.css'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp

20
pages/chronology/index.tsx
View File

@ -1,20 +0,0 @@
import type { NextPage } from 'next'
import Head from 'next/head'
import Menu from '../../components/menu'
const Chronology: NextPage = () => {
return (
<>
<Head>
<title>Library</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.png" />
</Head>
<Menu></Menu>
</>
)
}
export default Chronology

20
pages/index.tsx
View File

@ -1,20 +0,0 @@
import type { NextPage } from 'next'
import Head from 'next/head'
import Menu from '../components/menu'
const Home: NextPage = () => {
return (
<>
<Head>
<title>Accord&rsquo;s Library - Discover • Analyse • Translate • Archive</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.png" />
</Head>
<Menu></Menu>
</>
)
}
export default Home

BIN
public/default_og.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

4
public/vercel.svg
View File

@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

12
src/components/Panels/ContentPanel.tsx Normal file
View File

@ -0,0 +1,12 @@
import styles from 'styles/Panels/ContentPanel.module.css'
import panelStyles from 'styles/Panels/Panels.module.css'
export default function ContentPanel({children}) {
return (
<div className={[panelStyles.panel, styles.panel].join(' ')}>
<main className={styles.panelInside}>
{children}
</main>
</div>
)
}

14
components/mainmenu.tsx → src/components/Panels/MainPanel.tsx
View File

@ -1,16 +1,18 @@
import Link from 'next/link' import Link from 'next/link'
import styles from '../styles/mainmenu.module.css'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import styles from 'styles/Panels/MainPanel.module.css'
import panelStyles from 'styles/Panels/Panels.module.css'
export default function MainMenu() { export default function MainPanel() {
const router = useRouter(); const router = useRouter();
function generateMenuOption(url: string, icon: string, title: string, subtitle?: string) { function generateMenuOption(url: string, icon: string, title: string, subtitle?: string) {
const classActive = router.asPath === url ? styles.active : null; console.log(router.asPath, url)
const classActive = router.asPath.startsWith(url) ? panelStyles.active : null;
return ( return (
<Link href={url} passHref> <Link href={url} passHref>
<div className={styles.menuOption + " " + classActive}> <div className={[panelStyles.menuOption, classActive].join(' ')}>
<img src={icon} alt="" /> <img src={icon} alt="" />
<h3>{title}</h3> <h3>{title}</h3>
<p>{subtitle}</p> <p>{subtitle}</p>
@ -21,10 +23,10 @@ export default function MainMenu() {
return ( return (
<div className={styles.menu}> <div className={[panelStyles.panel, styles.panel].join(' ')}>
<Link href="/" passHref> <Link href="/" passHref>
<div className={styles.menuLogo}> <div className={styles.topLogo}>
<img src="/icons/accords.svg" alt="" /> <img src="/icons/accords.svg" alt="" />
<h2>Accord&apos;s Library</h2> <h2>Accord&apos;s Library</h2>
</div> </div>

10
src/components/Panels/SubPanel.tsx Normal file
View File

@ -0,0 +1,10 @@
import styles from 'styles/Panels/SubPanel.module.css'
import panelStyles from 'styles/Panels/Panels.module.css'
export default function SubPanel({children}) {
return (
<div className={[panelStyles.panel, styles.panel].join(' ')}>
{children}
</div>
)
}

79
src/pages/_app.tsx Normal file
View File

@ -0,0 +1,79 @@
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
I want the first column to be always 20rem, the second one to be 20rem when it's the subbar, but
1fr if it's the content...
Anyway, there is probably a much better way to do this, it it might backfire in my face in the future
Much love,
Mint
*/
const componentProcessed = Component(pageProps)
let useSubPanel = false
let useContentPanel = false
const children = componentProcessed.props.children
if (Array.isArray(children)) {
children.forEach(child => {
if (child.type.name === "SubPanel") {
useSubPanel = true
} else if (child.type.name === "ContentPanel") {
useContentPanel = true
}
});
} else {
if (children.type.name === "SubPanel") {
useSubPanel = true
} else if (children.type.name === "ContentPanel") {
useContentPanel = true
}
}
let additionalClasses = ""
if (useSubPanel) additionalClasses += " withSubPanel"
if (useContentPanel) additionalClasses += " withContentPanel"
/* [End of BIG HACK] */
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>
<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>
</Head>
<MainPanel/>
{componentProcessed}
</div>
)
}
export default AccordsLibraryApp

0
pages/api/hello.ts → src/pages/api/hello.ts
View File

14
src/pages/chronology/index.tsx Normal file
View File

@ -0,0 +1,14 @@
import type { NextPage } from 'next'
import SubPanel from 'components/Panels/SubPanel'
const Chronology: NextPage = () => {
return (
<>
<SubPanel>
Hello
</SubPanel>
</>
)
}
export default Chronology

41
src/pages/chronology/overview.tsx Normal file
View File

@ -0,0 +1,41 @@
import type { NextPage } from 'next'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { GetStaticProps } from 'next'
import ContentPanel from 'components/Panels/ContentPanel'
import SubPanel from 'components/Panels/SubPanel'
import { getChronologyItems } from 'queries/queries'
export const getStaticProps: GetStaticProps = async (context) => {
return await getChronologyItems()
}
const ChronologyOverview: NextPage = ({ chronologyItems }) => {
const router = useRouter()
return (
<>
<SubPanel>Hello</SubPanel>
<ContentPanel>
{chronologyItems.map((item: any) => (
<div key={item.id}>{item.year} -{' '}
{
item.translations.map((translation: any) => (
<>
{translation.languages_code.code === router.locale ? translation.title : ""}
</>
))}
</div>
))}
</ContentPanel>
</>
)
}
export default ChronologyOverview

24
src/pages/index.tsx Normal file
View File

@ -0,0 +1,24 @@
import type { NextPage } from 'next'
import SubPanel from 'components/Panels/SubPanel'
import ContentPanel from 'components/Panels/ContentPanel'
const Home: NextPage = () => {
return (
<>
<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>
<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>
</ContentPanel>
</>
)
}
export default Home

3
pages/library.tsx → src/pages/library.tsx
View File

@ -1,6 +1,5 @@
import type { NextPage } from 'next' import type { NextPage } from 'next'
import Head from 'next/head' import Head from 'next/head'
import Menu from '../components/menu'
const Home: NextPage = () => { const Home: NextPage = () => {
return ( return (
@ -11,8 +10,6 @@ const Home: NextPage = () => {
<link rel="icon" href="/favicon.png" /> <link rel="icon" href="/favicon.png" />
</Head> </Head>
<Menu></Menu>
</> </>
) )
} }

26
src/queries/queries.ts Normal file
View File

@ -0,0 +1,26 @@
export const getChronologyItems = async () => {
const res = await fetch(
process.env.NEXT_PUBLIC_GRAPHQL + `?query={
chronology_items {
id,
year,
month,
day,
translations {
languages_code {
code
}
title
}
}
}`)
const data = (await res.json()).data.chronology_items
return {
props: {
chronologyItems: data,
},
}
}

9
src/styles/Panels/ContentPanel.module.css Normal file
View File

@ -0,0 +1,9 @@
.panel {
padding-top: 5rem;
}
.panelInside {
max-width: 50rem;
text-align: justify;
text-justify: inter-word;
}

59
src/styles/Panels/MainPanel.module.css Normal file
View File

@ -0,0 +1,59 @@
.topLogo {
display: grid;
place-items: center;
cursor: pointer;
}
.topLogo > h2 {
margin-top: 1rem;
}
.topLogo > img {
width: 50%;
height: auto;
place-self: start center;
}
.menuFooter {
text-align: center;
}
.menuFooterCC {
margin-top: 1rem;
margin-bottom: 2rem;
display: grid;
height: 1rem;
grid-auto-flow: column;
place-content: center;
grid-gap: .2rem;
}
.menuFooterCC img {
height: 1.5rem;
width: auto;
}
.menuFooterCC:hover img {
filter: var(--filter-color-main-dark);
}
.menuFooterSocials {
margin-top: 3rem;
margin-bottom: 1rem;
display: grid;
height: 1rem;
grid-auto-flow: column;
place-content: center;
grid-gap: 2rem;
}
.menuFooterSocials img {
height: 2rem;
width: auto;
transition: .1s filter;
}
.menuFooterSocials img:hover {
filter: var(--filter-color-main-dark);
}

61
src/styles/Panels/Panels.module.css Normal file
View File

@ -0,0 +1,61 @@
.panel {
display: grid;
border-right: 1px solid black;
height: 100%;
max-height: 100vh;
justify-items: center;
padding: 2rem;
overflow-y: auto;
grid-row-gap: 0.5em;
place-content: start center;
scrollbar-width: none;
}
.panel::-webkit-scrollbar {
display: none;
}
.panel > hr {
height: 0;
width: 100%;
border: none;
border-top: 0.3rem dotted black;
margin: 2rem;
}
.menuOption {
justify-self: start;
display: grid;
grid-template-areas: 'img title' '. subtitle';
grid-template-columns: auto 1fr;
align-items: center;
border-radius: 1em;
grid-column-gap: 1em;
cursor: pointer;
padding: 0.6em 1.2em;
width: 100%;
transition: .1s background-color;
}
.menuOption:hover, .menuOption.active {
background-color: var(--color-main-base);
}
.menuOption > * {
margin: 0;
}
.menuOption > img {
width: 1.2em;
height: auto;
grid-area: img;
}
.menuOption > h3 {
grid-area: title;
font-size: 150%;
}
.menuOption > p {
grid-area: subtitle;
}

3
src/styles/Panels/SubPanel.module.css Normal file
View File

@ -0,0 +1,3 @@
.panel {
width: 20rem;
}

21
styles/globals.css → src/styles/globals.css
View File

@ -1,8 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
:root { :root {
--color-main-light: #ffedd8; --color-main-light: #ffedd8;
--color-main-base: #e6ccb2; --color-main-base: #e6ccb2;
@ -19,6 +17,25 @@ body {
color: var(--color-main-black); color: var(--color-main-black);
} }
.appContainer {
display: grid;
min-height: 100vh;
grid-auto-flow: column;
grid-template-columns: 20rem;
}
.appContainer.withSubPanel {
grid-template-columns: 20rem 20rem;
}
.appContainer.withContentPanel {
grid-template-columns: 20rem 1fr;
}
.appContainer.withSubPanel.withContentPanel {
grid-template-columns: 20rem 20rem 1fr;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: "Vollkorn"; font-family: "Vollkorn";
font-weight: 700; font-weight: 700;

122
styles/mainmenu.module.css
View File

@ -1,122 +0,0 @@
.menu {
border-right: 1px solid black;
height: 100%;
width: 100%;
display: grid;
justify-items: center;
padding: 2rem;
overflow-y: auto;
max-height: 100vh;
grid-row-gap: 0.5em;
place-content: start;
scrollbar-width: none;
}
.menu::-webkit-scrollbar {
display: none;
}
.menu > hr {
height: 0;
width: 100%;
border: none;
border-top: 0.3rem dotted black;
margin: 2rem;
}
.menuLogo {
display: grid;
place-items: center;
cursor: pointer;
}
.menuLogo > h2 {
margin-top: 1rem;
}
.menuLogo > img {
width: 50%;
height: auto;
place-self: start center;
}
.menuOption {
justify-self: start;
display: grid;
grid-template-areas: 'img title' '. subtitle';
grid-template-columns: auto 1fr;
align-items: center;
border-radius: 1em;
grid-column-gap: 1em;
cursor: pointer;
padding: 0.6em 1.2em;
width: 100%;
transition: .1s background-color;
}
.menuOption:hover, .menuOption.active {
background-color: var(--color-main-base);
}
.menuOption > * {
margin: 0;
}
.menuOption > img {
width: 1.2em;
height: auto;
grid-area: img;
}
.menuOption > h3 {
grid-area: title;
font-size: 150%;
}
.menuOption > p {
grid-area: subtitle;
}
.menuFooter {
text-align: center;
}
.menuFooterCC {
margin-top: 1rem;
margin-bottom: 2rem;
display: grid;
height: 1rem;
grid-auto-flow: column;
place-content: center;
grid-gap: .2rem;
}
.menuFooterCC img {
height: 1.5rem;
width: auto;
}
.menuFooterCC:hover img {
filter: var(--filter-color-main-dark);
}
.menuFooterSocials {
margin-top: 3rem;
margin-bottom: 1rem;
display: grid;
height: 1rem;
grid-auto-flow: column;
place-content: center;
grid-gap: 2rem;
}
.menuFooterSocials img {
height: 2rem;
width: auto;
transition: .1s filter;
}
.menuFooterSocials img:hover {
filter: var(--filter-color-main-dark);
}

6
styles/menu.module.css
View File

@ -1,6 +0,0 @@
.container {
display: grid;
grid-template-columns: 20rem 20rem 1fr;
min-height: 100vh;
}

13
styles/submenu.module.css
View File

@ -1,13 +0,0 @@
.menu {
border-right: 1px solid black;
height: 100%;
width: 100%;
display: grid;
justify-items: center;
padding: 2rem;
overflow-y: auto;
max-height: 100vh;
grid-row-gap: 0.5em;
place-content: start;
scrollbar-width: none;
}

5
tsconfig.json
View File

@ -1,6 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es6",
"lib": ["dom", "dom.iterable", "esnext"], "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
@ -13,7 +13,8 @@
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"jsx": "preserve", "jsx": "preserve",
"incremental": true "incremental": true,
"baseUrl": "src"
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"] "exclude": ["node_modules"]