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

Start using TailwindCSS

This commit is contained in:
DrMint 2022-01-01 20:04:48 +01:00
parent 7076b2d71e
commit 68f5a4f19e
17 changed files with 4930 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1114
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -8,15 +8,19 @@
"lint": "next lint"
},
"dependencies": {
"@fontsource/vollkorn": "^4.5.1",
"@fontsource/zen-maru-gothic": "^4.5.3",
"next": "12.0.2",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.0",
"@types/node": "16.11.6",
"@types/react": "17.0.34",
"eslint": "7.32.0",
"eslint-config-next": "12.0.2",
"tailwindcss": "^3.0.8",
"typescript": "4.4.4"
}
}

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}

0
run_dev.sh → run_accords.sh
View File

9
src/components/Panels/ContentPanel.tsx
View File

@ -1,14 +1,13 @@
import styles from "styles/Panels/ContentPanel.module.css";
import panelStyles from "styles/Panels/Panels.module.css";
type ContentPanelProps = {
children: React.ReactNode;
};
export default function ContentPanel(props: ContentPanelProps): JSX.Element {
return (
<div className={[panelStyles.panel, styles.panel].join(" ")}>
<main className={styles.panelInside}>{props.children}</main>
<div className="w-full grid overflow-y-scroll max-h-screen py-20 px-10">
<main className="prose lg:prose-lg place-self-center text-justify">
{props.children}
</main>
</div>
);
}

12
src/components/Panels/MainPanel.tsx
View File

@ -5,7 +5,7 @@ import NavOption from "components/Panels/NavOption";
export default function MainPanel(): JSX.Element {
return (
<div className={[panelStyles.panel, styles.panel].join(" ")}>
<div className={`${panelStyles.panel} ${styles.panel}`}>
<Link href="/" passHref>
<div className={styles.topLogo}>
<img src="/icons/accords.svg" alt="" />
@ -62,17 +62,17 @@ export default function MainPanel(): JSX.Element {
<hr />
<div className={styles.menuFooter}>
<div className="text-center">
<p>
This website&rsquo;s content is made available under{" "}
<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a>{" "}
unless otherwise noted.
</p>
<a href="https://creativecommons.org/licenses/by-sa/4.0/">
<div className={styles.menuFooterCC}>
<img src="/icons/creative-commons-brands.svg" alt="" />
<img src="/icons/creative-commons-by-brands.svg" alt="" />
<img src="/icons/creative-commons-sa-brands.svg" alt="" />
<div className="mt-4 mb-8 grid h-4 grid-flow-col place-content-center gap-1">
<img className="h-6" src="/icons/creative-commons-brands.svg" alt="" />
<img className="h-6" src="/icons/creative-commons-by-brands.svg" alt="" />
<img className="h-6" src="/icons/creative-commons-sa-brands.svg" alt="" />
</div>
</a>
<p>

18
src/pages/404.tsx
View File

@ -1,6 +1,7 @@
import Link from "next/link";
import ContentPanel from "components/Panels/ContentPanel";
import { applyCustomAppProps } from "./_app";
import Head from "next/head";
applyCustomAppProps(FourOhFour, {
useSubPanel: false,
@ -9,11 +10,16 @@ applyCustomAppProps(FourOhFour, {
export default function FourOhFour(): JSX.Element {
return (
<ContentPanel>
<h1>404 - Page Not Found</h1>
<Link href="/">
<a>Go back home</a>
</Link>
</ContentPanel>
<>
<Head>
<title>Accord&rsquo;s Library - 404</title>
</Head>
<ContentPanel>
<h1>404 - Page Not Found</h1>
<Link href="/">
<a>Go back home</a>
</Link>
</ContentPanel>
</>
);
}

50
src/pages/_app.tsx
View File

@ -1,7 +1,8 @@
import type { AppProps } from "next/app";
import Head from "next/head";
import MainPanel from "components/Panels/MainPanel";
import "styles/globals.css";
import "styles/index.css";
import "@fontsource/zen-maru-gothic/500.css";
import "@fontsource/vollkorn/700.css";
export type CustomAppProps = {
useSubPanel: boolean;
@ -16,39 +17,24 @@ export function applyCustomAppProps(
}
export default function AccordsLibraryApp(appProps: AppProps) {
let additionalClasses = "";
if (appProps.Component.customAppProps.useSubPanel)
additionalClasses += " withSubPanel";
if (appProps.Component.customAppProps.useContentPanel)
additionalClasses += " withContentPanel";
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";
// Apply a different style depending on the given CustomAppProps
let mainClasses = "grid min-h-screen grid-flow-col";
if (
appProps.Component.customAppProps.useSubPanel &&
appProps.Component.customAppProps.useContentPanel
) {
mainClasses += " grid-cols-appUseSubContent";
} else if (appProps.Component.customAppProps.useSubPanel) {
mainClasses += " grid-cols-appUseSub";
} else if (appProps.Component.customAppProps.useContentPanel) {
mainClasses += " grid-cols-appUseContent";
} else {
mainClasses += " grid-cols-appDefault";
}
return (
<div className={"appContainer" + additionalClasses}>
<Head>
<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={siteTitle}></meta>
<meta name="twitter:description" content={siteDescription}></meta>
<meta name="twitter:image" content={thumbnailImage}></meta>
</Head>
<div className={mainClasses}>
<MainPanel />
<appProps.Component {...appProps.pageProps} />
</div>
);

49
src/pages/_document.tsx Normal file
View File

@ -0,0 +1,49 @@
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
// General info about the site
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 (
<Html>
<Head>
<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={siteTitle}></meta>
<meta name="twitter:description" content={siteDescription}></meta>
<meta name="twitter:image" content={thumbnailImage}></meta>
</Head>
<body className="bg-light text-black">
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;

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

@ -8,14 +8,14 @@ import {
getChronologyItems,
getChronologyEras,
ChronologyItem,
ChronologyEra,
ChronologyItemsEvent,
} from "queries/chronology/overview";
import { applyCustomAppProps } from "pages/_app";
import { ChronologyEraEntityResponseCollection } from "queries/types";
type Props = {
chronologyItems: ChronologyItem[];
chronologyEras: ChronologyEra[];
chronologyEras: ChronologyEraEntityResponseCollection;
};
applyCustomAppProps(ChronologyOverview, {
@ -37,14 +37,11 @@ export default function ChronologyOverview(props: Props): JSX.Element {
return (
<>
<SubPanel>
{props.chronologyEras.map((era: ChronologyEra) => {
if (era.id == undefined) console.warn(era);
})}
<ReturnButton url="/chronology" title="Chronology" />
<hr />
{props.chronologyEras.map((era: ChronologyEra) => (
{props.chronologyEras.data.map((era) => (
<NavOption
key={era.id}
url={"#" + era.attributes.slug}

38
src/pages/index.tsx
View File

@ -1,4 +1,5 @@
import ContentPanel from "components/Panels/ContentPanel";
import Head from "next/head";
import { applyCustomAppProps } from "./_app";
applyCustomAppProps(Home, {
@ -9,25 +10,28 @@ applyCustomAppProps(Home, {
export default function Home(): JSX.Element {
return (
<>
<Head>
<title>Accord&rsquo;s Library - Home</title>
</Head>
<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;
Taro&rsquo;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
community grow by providing translators, writers, and wiki&rsquo;s
contributors a simple way to access these records filled with stories,
artworks, and knowledge.
</p>
@ -124,12 +128,12 @@ export default function Home(): JSX.Element {
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.
. Anyway, there is a lot more to it, you can click on &quot;Syntax
help&quot; 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>
</>

2
src/pages/library/index.tsx
View File

@ -20,7 +20,7 @@ export default function Library(props: Props): JSX.Element {
<SubPanel>
<h2>Library</h2>
<p>
A comprehensive list of all Yokoverse’s side materials (books,
A comprehensive list of all Yokoverse&rsquo;s side materials (books,
novellas, artbooks, stage plays, manga, drama CDs, and comics). For
each, we provide photos and/or scans of the content, information about
what it is, when and how it was released, size, initial price…

7
src/queries/chronology/overview.ts
View File

@ -1,5 +1,6 @@
import { queryGraphQL } from "queries/helpers";
import { Source } from "queries/helpers";
import { ChronologyEraEntityResponseCollection } from "queries/types";
export type ChronologyItem = {
id: string;
@ -63,6 +64,7 @@ export async function getChronologyItems(
).chronologyItems.data;
}
/*
export type ChronologyEra = {
id: string;
attributes: ChronologyEraAttributes;
@ -78,10 +80,11 @@ export type ChronologyEraAttributes = {
export type ChronologyEraTranslation = {
title: string;
};
*/
export async function getChronologyEras(
language_code: string | undefined
): Promise<ChronologyEra[]> {
): Promise<ChronologyEraEntityResponseCollection> {
return (
await queryGraphQL(
`
@ -102,5 +105,5 @@ export async function getChronologyEras(
}
`
)
).chronologyEras.data;
);
}

3583
src/queries/types.ts Normal file
View File

File diff suppressed because it is too large Load Diff

108
src/styles/globals.css
View File

@ -1,108 +0,0 @@
@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');
:root {
--color-main-light: #ffedd8;
--color-main-base: #e6ccb2;
--color-main-dark: #9c6644;
--color-main-black: #1B1811;
--filter-color-main-dark: invert(44%) sepia(29%) saturate(806%) hue-rotate(340deg) brightness(91%) contrast(85%);
}
html,
body {
padding: 0;
margin: 0;
background-color: var(--color-main-light);
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 {
font-family: "Vollkorn";
font-weight: 700;
}
a {
color: inherit;
text-decoration: underline dotted var(--color-main-dark);
transition: .1s color;
text-underline-offset: 0.15em;
}
a:hover {
color: var(--color-main-dark);
}
* {
box-sizing: border-box;
font-family: "Zen Maru Gothic";
font-weight: 500;
}
button {
display: grid;
place-content: center;
place-items: center;
border: .1rem solid var(--color-main-dark);
color: var(--color-main-dark);
background: var(--color-main-light);
border-radius: 100vmax;
padding: 0.4em 1em;
cursor: pointer;
transition: .1s color, .1s background-color;
}
button:hover {
background: var(--color-main-dark);
color: var(--color-main-light);
}
/* SCROLLBARS STYLING */
* {
scrollbar-color: var(--color-main-dark) transparent;
}
*::selection {
background-color: var(--color-main-dark);
color: var(--color-main-light);
border-radius: 1em;
}
*:target {
scroll-margin-top: 1em;
}
*::-webkit-scrollbar {
width: 12px; /* width of the entire scrollbar */
}
*::-webkit-scrollbar-track {
background: transparent; /* color of the tracking area */
}
*::-webkit-scrollbar-thumb {
background-color: var(--color-main-dark); /* color of the scroll thumb */
border-radius: 100vmax; /* roundness of the scroll thumb */
border: 3px solid var(--color-main-light); /* creates padding around scroll thumb */
}

94
src/styles/index.css Normal file
View File

@ -0,0 +1,94 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html,
body {
padding: 0;
margin: 0;
background-color: var(--color-main-light);
color: var(--color-main-black);
}
/* BUTTONS */
button {
display: grid;
place-content: center;
place-items: center;
border: 0.1rem solid theme("colors.dark");
color: theme("colors.dark");
background: theme("colors.light");
border-radius: 100vmax;
padding: 0.4em 1em;
cursor: pointer;
transition: 0.1s color, 0.1s background-color;
}
button:hover {
background: theme("colors.dark");
color: theme("colors.light");
}
/* FONT SETTING */
* {
box-sizing: border-box;
font-family: "Zen Maru Gothic";
font-weight: 500;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Vollkorn";
font-weight: 900;
}
/* LINKS */
a {
color: inherit;
text-decoration: underline dotted theme("colors.dark");
transition: 0.1s color;
text-underline-offset: 0.15em;
}
a:hover {
color: theme("colors.dark");
}
/* SCROLLBARS STYLING */
* {
scrollbar-color: theme("colors.dark") transparent;
scrollbar-width: thin;
}
*::selection {
background-color: theme("colors.dark");
color: theme("colors.light");
border-radius: 1em;
}
*:target {
scroll-margin-top: 1em;
}
*::-webkit-scrollbar {
width: 12px; /* width of the entire scrollbar */
}
*::-webkit-scrollbar-track {
background: transparent; /* color of the tracking area */
}
*::-webkit-scrollbar-thumb {
background-color: theme("colors.dark"); /* color of the scroll thumb */
border-radius: 100vmax; /* roundness of the scroll thumb */
border: 3px solid theme("colors.light"); /* creates padding around scroll thumb */
}
}

22
tailwind.config.js Normal file
View File

@ -0,0 +1,22 @@
module.exports = {
content: ["./src/**/*.{tsx,ts}"],
theme: {
colors: {
light: "#ffedd8",
base: "#e6ccb2",
dark: "#9c6644",
black: "#1B1811",
},
extend: {
gridTemplateColumns: {
appDefault: "20rem",
appUseSub: "20rem 20rem",
appUseContent: "20rem 1fr",
appUseSubContent: "20rem 20rem 1fr",
},
},
},
plugins: [
require("@tailwindcss/typography"),
],
};