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

Wrapped lines that are too long

Browse Source
This commit is contained in:
DrMint 2022-05-10 22:24:31 +02:00
parent 0591fa22d4
commit e17dbc14a0
23 changed files with 168 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -50,6 +50,7 @@ module.exports = {
"max-classes-per-file": ["error", 1], "max-classes-per-file": ["error", 1],
// "max-depth": ["warn", 4], // "max-depth": ["warn", 4],
// "max-lines": "warn", // "max-lines": "warn",
"max-len": ["warn", { "code": 100 }],
// "max-lines-per-function": "warn", // "max-lines-per-function": "warn",
// "max-nested-callbacks": "warn", // "max-nested-callbacks": "warn",
// "max-params": "warn", // "max-params": "warn",

35
src/components/AppLayout.tsx
View File

@ -151,7 +151,9 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
> >
<div <div
{...handlers} {...handlers}
className={`fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black grid [grid-template-areas:'main_sub_content'] ${gridCol} mobile:grid-cols-[1fr] mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`} className={`fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black grid
[grid-template-areas:'main_sub_content'] ${gridCol} mobile:grid-cols-[1fr]
mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`}
> >
<Head> <Head>
<title>{`${titlePrefix} - ${ogTitle}`}</title> <title>{`${titlePrefix} - ${ogTitle}`}</title>
@ -183,7 +185,8 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Background when navbar is opened */} {/* Background when navbar is opened */}
<div <div
className={`[grid-area:content] mobile:z-10 absolute inset-0 transition-[backdrop-filter] duration-500 ${ className={`[grid-area:content] mobile:z-10 absolute
inset-0 transition-[backdrop-filter] duration-500 ${
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile (appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
? "[backdrop-filter:blur(2px)]" ? "[backdrop-filter:blur(2px)]"
: "pointer-events-none touch-none " : "pointer-events-none touch-none "
@ -212,7 +215,10 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
contentPanel contentPanel
) : ( ) : (
<div className="grid place-content-center h-full"> <div className="grid place-content-center h-full">
<div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9 opacity-40"> <div
className="text-dark border-dark border-2 border-dotted rounded-2xl
p-8 grid grid-flow-col place-items-center gap-9 opacity-40"
>
<p className="text-4xl">❮</p> <p className="text-4xl">❮</p>
<p className="text-2xl w-64">{langui.select_option_sidebar}</p> <p className="text-2xl w-64">{langui.select_option_sidebar}</p>
</div> </div>
@ -223,7 +229,10 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Sub panel */} {/* Sub panel */}
{subPanel && ( {subPanel && (
<div <div
className={`[grid-area:sub] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%] mobile:justify-self-end border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots className={`[grid-area:sub] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%]
mobile:justify-self-end border-r-[1px] mobile:border-r-0 mobile:border-l-[1px]
border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0
[scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
${ ${
turnSubIntoContent turnSubIntoContent
? "mobile:border-l-0 mobile:w-full" ? "mobile:border-l-0 mobile:w-full"
@ -236,14 +245,21 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Main panel */} {/* Main panel */}
<div <div
className={`[grid-area:main] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%] mobile:justify-self-start border-r-[1px] border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots className={`[grid-area:main] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%]
${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`} mobile:justify-self-start border-r-[1px] border-black border-dotted overflow-y-scroll
webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light
texture-paper-dots ${
appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"
}`}
> >
<MainPanel langui={langui} /> <MainPanel langui={langui} />
</div> </div>
{/* Navbar */} {/* Navbar */}
<div className="[grid-area:navbar] border-t-[1px] border-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light texture-paper-dots"> <div
className="[grid-area:navbar] border-t-[1px] border-black border-dotted grid
grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light texture-paper-dots"
>
<span <span
className="material-icons mt-[.1em] cursor-pointer" className="material-icons mt-[.1em] cursor-pointer"
onClick={() => { onClick={() => {
@ -285,7 +301,10 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
> >
<h2 className="text-2xl">{langui.settings}</h2> <h2 className="text-2xl">{langui.settings}</h2>
<div className="mt-4 grid gap-16 justify-items-center text-center desktop:grid-cols-[auto_auto]"> <div
className="mt-4 grid gap-16 justify-items-center
text-center desktop:grid-cols-[auto_auto]"
>
{router.locales && ( {router.locales && (
<div> <div>
<h3 className="text-xl">{langui.languages}</h3> <h3 className="text-xl">{langui.languages}</h3>

4
src/components/Chip.tsx
View File

@ -8,7 +8,9 @@ interface Props {
export default function Chip(props: Immutable<Props>): JSX.Element { export default function Chip(props: Immutable<Props>): JSX.Element {
return ( return (
<div <div
className={`grid place-content-center place-items-center text-xs pb-[0.14rem] whitespace-nowrap px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className}`} className={`grid place-content-center place-items-center text-xs pb-[0.14rem]
whitespace-nowrap px-1.5 border-[1px] rounded-full opacity-70
transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className}`}
> >
{props.children} {props.children}
</div> </div>

7
src/components/Inputs/Select.tsx
View File

@ -20,7 +20,9 @@ export default function Select(props: Immutable<Props>): JSX.Element {
} ${props.className}`} } ${props.className}`}
> >
<div <div
className={`outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] bg-light rounded-[1em] p-1 grid grid-flow-col grid-cols-[1fr_auto_auto] place-items-center cursor-pointer hover:bg-mid transition-all ${ className={`outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent]
bg-light rounded-[1em] p-1 grid grid-flow-col grid-cols-[1fr_auto_auto] place-items-center
cursor-pointer hover:bg-mid transition-all ${
opened && "outline-[transparent] rounded-b-none" opened && "outline-[transparent] rounded-b-none"
}`} }`}
> >
@ -48,7 +50,8 @@ export default function Select(props: Immutable<Props>): JSX.Element {
<> <>
{index !== props.state && ( {index !== props.state && (
<div <div
className="bg-light hover:bg-mid transition-colors cursor-pointer p-1 last-of-type:rounded-b-[1em]" className="bg-light hover:bg-mid transition-colors
cursor-pointer p-1 last-of-type:rounded-b-[1em]"
key={index} key={index}
id={option} id={option}
onClick={() => { onClick={() => {

10
src/components/Inputs/Switch.tsx
View File

@ -10,15 +10,17 @@ interface Props {
export default function Switch(props: Immutable<Props>): JSX.Element { export default function Switch(props: Immutable<Props>): JSX.Element {
return ( return (
<div <div
className={`h-6 w-12 rounded-full border-2 border-mid grid transition-colors relative cursor-pointer ${ className={`h-6 w-12 rounded-full border-2 border-mid grid
props.className transition-colors relative cursor-pointer ${props.className} ${
} ${props.state ? "bg-mid" : "bg-light"}`} props.state ? "bg-mid" : "bg-light"
}`}
onClick={() => { onClick={() => {
props.setState(!props.state); props.setState(!props.state);
}} }}
> >
<div <div
className={`bg-dark aspect-square rounded-full absolute top-0 bottom-0 left-0 transition-transform ${ className={`bg-dark aspect-square rounded-full absolute
top-0 bottom-0 left-0 transition-transform ${
props.state && "translate-x-[115%]" props.state && "translate-x-[115%]"
}`} }`}
></div> ></div>

3
src/components/Library/ContentLine.tsx
View File

@ -33,7 +33,8 @@ export default function ContentLine(props: Immutable<Props>): JSX.Element {
opened && "bg-mid shadow-inner-sm shadow-shade h-auto py-3 my-2" opened && "bg-mid shadow-inner-sm shadow-shade h-auto py-3 my-2"
}`} }`}
> >
<div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]"> <div className="grid gap-4 place-items-center
grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]">
<a> <a>
<h3 className="cursor-pointer" onClick={() => setOpened(!opened)}> <h3 className="cursor-pointer" onClick={() => setOpened(!opened)}>
{content.attributes.content?.data?.attributes?.titles?.[0] {content.attributes.content?.data?.attributes?.titles?.[0]

14
src/components/Library/ScanSet.tsx
View File

@ -101,7 +101,10 @@ export default function ScanSet(props: Immutable<Props>): JSX.Element {
<> <>
{selectedScan && ( {selectedScan && (
<div> <div>
<div className="flex flex-row flex-wrap place-items-center gap-6 text-base pt-10 first-of-type:pt-0"> <div
className="flex flex-row flex-wrap place-items-center
gap-6 text-base pt-10 first-of-type:pt-0"
>
<h2 id={slug} className="text-2xl"> <h2 id={slug} className="text-2xl">
{title} {title}
</h2> </h2>
@ -198,11 +201,16 @@ export default function ScanSet(props: Immutable<Props>): JSX.Element {
)} )}
</div> </div>
<div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"> <div
className="grid gap-8 items-end mobile:grid-cols-2
desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))]
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
>
{selectedScan.pages?.data.map((page, index) => ( {selectedScan.pages?.data.map((page, index) => (
<div <div
key={page.id} key={page.id}
className="drop-shadow-shade-lg hover:scale-[1.02] cursor-pointer transition-transform" className="drop-shadow-shade-lg hover:scale-[1.02]
cursor-pointer transition-transform"
onClick={() => { onClick={() => {
const images: string[] = []; const images: string[] = [];
selectedScan.pages?.data.map((image) => { selectedScan.pages?.data.map((image) => {

14
src/components/Library/ScanSetCover.tsx
View File

@ -66,7 +66,10 @@ export default function ScanSetCover(props: Immutable<Props>): JSX.Element {
<> <>
{selectedScan && ( {selectedScan && (
<div> <div>
<div className="flex flex-row flex-wrap place-items-center gap-6 text-base pt-10 first-of-type:pt-0"> <div
className="flex flex-row flex-wrap place-items-center
gap-6 text-base pt-10 first-of-type:pt-0"
>
<h2 id={"cover"} className="text-2xl"> <h2 id={"cover"} className="text-2xl">
{"Cover"} {"Cover"}
</h2> </h2>
@ -151,11 +154,16 @@ export default function ScanSetCover(props: Immutable<Props>): JSX.Element {
)} )}
</div> </div>
<div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"> <div
className="grid gap-8 items-end mobile:grid-cols-2
desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))]
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
>
{coverImages.map((image, index) => ( {coverImages.map((image, index) => (
<div <div
key={image.url} key={image.url}
className="drop-shadow-shade-lg hover:scale-[1.02] cursor-pointer transition-transform" className="drop-shadow-shade-lg hover:scale-[1.02]
cursor-pointer transition-transform"
onClick={() => { onClick={() => {
const imgs: string[] = []; const imgs: string[] = [];
coverImages.map((img) => { coverImages.map((img) => {

10
src/components/PanelComponents/NavOption.tsx
View File

@ -17,11 +17,15 @@ export default function NavOption(props: Immutable<Props>): JSX.Element {
const router = useRouter(); const router = useRouter();
const isActive = router.asPath.startsWith(props.url); const isActive = router.asPath.startsWith(props.url);
const divActive = "bg-mid shadow-inner-sm shadow-shade"; const divActive = "bg-mid shadow-inner-sm shadow-shade";
const border = const border =
"outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent]"; "outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent]";
const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid hover:shadow-inner-sm hover:shadow-shade hover:active:shadow-inner hover:active:shadow-shade transition-all ${
props.border ? border : "" const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid
} ${isActive ? divActive : ""}`; hover:shadow-inner-sm hover:shadow-shade hover:active:shadow-inner
hover:active:shadow-shade transition-all ${props.border ? border : ""} ${
isActive ? divActive : ""
}`;
return ( return (
<ToolTip <ToolTip

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

@ -3,11 +3,11 @@ import Button from "components/Inputs/Button";
import NavOption from "components/PanelComponents/NavOption"; import NavOption from "components/PanelComponents/NavOption";
import ToolTip from "components/ToolTip"; import ToolTip from "components/ToolTip";
import { useAppLayout } from "contexts/AppLayoutContext"; import { useAppLayout } from "contexts/AppLayoutContext";
import { AppStaticProps } from "graphql/getAppStaticProps";
import { Immutable } from "helpers/types";
import { useMediaDesktop } from "hooks/useMediaQuery"; import { useMediaDesktop } from "hooks/useMediaQuery";
import Markdown from "markdown-to-jsx"; import Markdown from "markdown-to-jsx";
import Link from "next/link"; import Link from "next/link";
import { AppStaticProps } from "graphql/getAppStaticProps";
import { Immutable } from "helpers/types";
interface Props { interface Props {
langui: AppStaticProps["langui"]; langui: AppStaticProps["langui"];
@ -20,7 +20,8 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
return ( return (
<div <div
className={`flex flex-col justify-center content-start gap-y-2 justify-items-center text-center p-8 ${ className={`flex flex-col justify-center content-start
gap-y-2 justify-items-center text-center p-8 ${
appLayout.mainPanelReduced && isDesktop && "px-4" appLayout.mainPanelReduced && isDesktop && "px-4"
}`} }`}
> >
@ -45,7 +46,9 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
onClick={() => appLayout.setMainPanelOpen(false)} onClick={() => appLayout.setMainPanelOpen(false)}
className={`${ className={`${
appLayout.mainPanelReduced && isDesktop ? "w-12" : "w-1/2" appLayout.mainPanelReduced && isDesktop ? "w-12" : "w-1/2"
} aspect-square cursor-pointer transition-colors [mask:url('/icons/accords.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black hover:bg-dark mb-4`} } aspect-square cursor-pointer transition-colors [mask:url('/icons/accords.svg')]
![mask-size:contain] ![mask-repeat:no-repeat]
![mask-position:center] bg-black hover:bg-dark mb-4`}
></div> ></div>
</Link> </Link>
@ -219,10 +222,22 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
className="transition-[filter] colorize-black hover:colorize-dark" className="transition-[filter] colorize-black hover:colorize-dark"
href="https://creativecommons.org/licenses/by-sa/4.0/" href="https://creativecommons.org/licenses/by-sa/4.0/"
> >
<div className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1 hover:[--theme-color-black:var(--theme-color-dark)]"> <div
<div className="w-6 aspect-square [mask:url('/icons/creative-commons-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" /> className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1
<div className="w-6 aspect-square [mask:url('/icons/creative-commons-by-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" /> hover:[--theme-color-black:var(--theme-color-dark)]"
<div className="w-6 aspect-square [mask:url('/icons/creative-commons-sa-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" /> >
<div
className="w-6 aspect-square [mask:url('/icons/creative-commons-brands.svg')]
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
/>
<div
className="w-6 aspect-square [mask:url('/icons/creative-commons-by-brands.svg')]
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
/>
<div
className="w-6 aspect-square [mask:url('/icons/creative-commons-sa-brands.svg')]
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
/>
</div> </div>
</a> </a>
<p> <p>
@ -233,14 +248,18 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8"> <div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
<a <a
aria-label="Browse our GitHub repository, which include this website source code" aria-label="Browse our GitHub repository, which include this website source code"
className="transition-colors [mask:url('/icons/github-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] w-10 aspect-square bg-black hover:bg-dark" className="transition-colors [mask:url('/icons/github-brands.svg')]
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]
w-10 aspect-square bg-black hover:bg-dark"
href="https://github.com/Accords-Library" href="https://github.com/Accords-Library"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
></a> ></a>
<a <a
aria-label="Join our Discord server!" aria-label="Join our Discord server!"
className="transition-colors [mask:url('/icons/discord-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] w-10 aspect-square bg-black hover:bg-dark" className="transition-colors [mask:url('/icons/discord-brands.svg')]
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]
w-10 aspect-square bg-black hover:bg-dark"
href="/discord" href="/discord"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"

5
src/components/PreviewLine.tsx
View File

@ -31,8 +31,9 @@ export default function PreviewLine(props: Immutable<Props>): JSX.Element {
return ( return (
<Link href={href} passHref> <Link href={href} passHref>
<div <div
className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer hover:scale-[1.02] className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer
transition-transform flex flex-row gap-4 overflow-hidden place-items-center pr-4 w-full h-36" hover:scale-[1.02] transition-transform flex flex-row gap-4
overflow-hidden place-items-center pr-4 w-full h-36"
> >
{thumbnail ? ( {thumbnail ? (
<div className="h-full aspect-[3/2]"> <div className="h-full aspect-[3/2]">

3
src/components/RecorderChip.tsx
View File

@ -51,10 +51,7 @@ export default function RecorderChip(props: Immutable<Props>): JSX.Element {
)} )}
</div> </div>
</div> </div>
{recorder.bio?.[0] && <Markdawn text={recorder.bio[0].bio ?? ""} />} {recorder.bio?.[0] && <Markdawn text={recorder.bio[0].bio ?? ""} />}
{/* <Button className="cursor-not-allowed">View profile</Button> */}
</div> </div>
} }
placement="top" placement="top"

11
src/components/Wiki/Chronology/ChronologyItemComponent.tsx
View File

@ -74,7 +74,8 @@ export default function ChronologyItemComponent(
if (props.item.attributes) { if (props.item.attributes) {
return ( return (
<div <div
className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em] py-4 px-8 rounded-2xl target:bg-mid target:py-8 target:my-4" className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em]
py-4 px-8 rounded-2xl target:bg-mid target:py-8 target:my-4"
id={generateAnchor( id={generateAnchor(
props.item.attributes.year, props.item.attributes.year,
props.item.attributes.month, props.item.attributes.month,
@ -103,7 +104,10 @@ export default function ChronologyItemComponent(
<> <>
{translation && ( {translation && (
<> <>
<div className="place-items-start place-content-start grid grid-flow-col gap-2"> <div
className="place-items-start
place-content-start grid grid-flow-col gap-2"
>
{translation.status !== {translation.status !==
Enum_Componenttranslationschronologyitem_Status.Done && ( Enum_Componenttranslationschronologyitem_Status.Done && (
<ToolTip <ToolTip
@ -128,7 +132,8 @@ export default function ChronologyItemComponent(
className={ className={
event.translations && event.translations &&
event.translations.length > 1 event.translations.length > 1
? "before:content-['-'] before:text-dark before:inline-block before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line" ? `before:content-['-'] before:text-dark before:inline-block
before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line`
: "whitespace-pre-line" : "whitespace-pre-line"
} }
> >

8
src/pages/archives/videos/c/[uid].tsx
View File

@ -10,8 +10,8 @@ import ContentPanel, {
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import ThumbnailPreview from "components/PreviewCard"; import ThumbnailPreview from "components/PreviewCard";
import { GetVideoChannelQuery } from "graphql/generated"; import { GetVideoChannelQuery } from "graphql/generated";
import { getReadySdk } from "graphql/sdk";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
import { getVideoThumbnailURL } from "helpers/videos"; import { getVideoThumbnailURL } from "helpers/videos";
import { import {
GetStaticPathsContext, GetStaticPathsContext,
@ -60,7 +60,11 @@ export default function Channel(props: Props): JSX.Element {
<h1 className="text-3xl">{channel?.title}</h1> <h1 className="text-3xl">{channel?.title}</h1>
<p>{channel?.subscribers.toLocaleString()} subscribers</p> <p>{channel?.subscribers.toLocaleString()} subscribers</p>
</div> </div>
<div className="grid gap-8 items-start mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"> <div
className="grid gap-8 items-start mobile:grid-cols-2
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
>
{channel?.videos?.data.map((video) => ( {channel?.videos?.data.map((video) => (
<> <>
{video.attributes && ( {video.attributes && (

8
src/pages/archives/videos/index.tsx
View File

@ -11,9 +11,9 @@ import ContentPanel, {
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import ThumbnailPreview from "components/PreviewCard"; import ThumbnailPreview from "components/PreviewCard";
import { GetVideosPreviewQuery } from "graphql/generated"; import { GetVideosPreviewQuery } from "graphql/generated";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk"; import { getReadySdk } from "graphql/sdk";
import { prettyDate } from "helpers/formatters"; import { prettyDate } from "helpers/formatters";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getVideoThumbnailURL } from "helpers/videos"; import { getVideoThumbnailURL } from "helpers/videos";
import { GetStaticPropsContext } from "next"; import { GetStaticPropsContext } from "next";
import { useState } from "react"; import { useState } from "react";
@ -80,7 +80,11 @@ export default function Videos(props: Props): JSX.Element {
className="mb-12" className="mb-12"
/> />
<div className="grid gap-8 items-start thin:grid-cols-1 mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"> <div
className="grid gap-8 items-start thin:grid-cols-1 mobile:grid-cols-2
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
>
{paginatedVideos[page].map((video) => ( {paginatedVideos[page].map((video) => (
<> <>
{video.attributes && ( {video.attributes && (

6
src/pages/contents/index.tsx
View File

@ -70,7 +70,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
{name && ( {name && (
<h2 <h2
key={`h2${name}`} key={`h2${name}`}
className="text-2xl pb-2 pt-10 first-of-type:pt-0 flex flex-row place-items-center gap-2" className="text-2xl pb-2 pt-10 first-of-type:pt-0
flex flex-row place-items-center gap-2"
> >
{name} {name}
<Chip>{`${items.length} ${ <Chip>{`${items.length} ${
@ -82,7 +83,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
)} )}
<div <div
key={`items${name}`} key={`items${name}`}
className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]" className="grid gap-8 items-end grid-cols-2
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
> >
{items.map((item) => ( {items.map((item) => (
<> <>

3
src/pages/dev/checkup/libraryitems.tsx
View File

@ -41,7 +41,8 @@ export default function CheckupLibraryItems(
{testReport.lines.map((line, index) => ( {testReport.lines.map((line, index) => (
<div <div
key={index} key={index}
className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] gap-2 items-center mb-2 justify-items-start" className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr]
gap-2 items-center mb-2 justify-items-start"
> >
<Button <Button
href={line.frontendUrl} href={line.frontendUrl}

3
src/pages/dev/editor.tsx
View File

@ -338,7 +338,8 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
const textarea = event.target as HTMLTextAreaElement; const textarea = event.target as HTMLTextAreaElement;
handleInput(textarea.value); handleInput(textarea.value);
}} }}
className="bg-mid !bg-opacity-40 rounded-xl outline-none p-8 w-full text-black font-monospace h-[70vh]" className="bg-mid !bg-opacity-40 rounded-xl
outline-none p-8 w-full text-black font-monospace h-[70vh]"
value={markdown} value={markdown}
title="Input textarea" title="Input textarea"
/> />

6
src/pages/index.tsx
View File

@ -15,7 +15,11 @@ export default function Home(props: Immutable<PostStaticProps>): JSX.Element {
post={post} post={post}
prependBody={ prependBody={
<div className="grid place-items-center place-content-center w-full gap-5 text-center"> <div className="grid place-items-center place-content-center w-full gap-5 text-center">
<div className="[mask:url('/icons/accords.svg')] [mask-size:contain] [mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square mobile:w-[50vw] bg-black" /> <div
className="[mask:url('/icons/accords.svg')] [mask-size:contain]
[mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square
mobile:w-[50vw] bg-black"
/>
<h1 className="text-5xl mb-0">Accord&rsquo;s Library</h1> <h1 className="text-5xl mb-0">Accord&rsquo;s Library</h1>
<h2 className="text-xl -mt-5"> <h2 className="text-xl -mt-5">
Discover • Analyze • Translate • Archive Discover • Analyze • Translate • Archive

21
src/pages/library/[slug]/index.tsx
View File

@ -153,7 +153,8 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
/> />
<div className="grid place-items-center gap-12"> <div className="grid place-items-center gap-12">
<div <div
className="drop-shadow-shade-xl w-full h-[50vh] mobile:h-[60vh] desktop:mb-16 relative cursor-pointer" className="drop-shadow-shade-xl w-full h-[50vh]
mobile:h-[60vh] desktop:mb-16 relative cursor-pointer"
onClick={() => { onClick={() => {
if (item?.thumbnail?.data?.attributes) { if (item?.thumbnail?.data?.attributes) {
setLightboxOpen(true); setLightboxOpen(true);
@ -240,13 +241,17 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
{item?.gallery && item.gallery.data.length > 0 && ( {item?.gallery && item.gallery.data.length > 0 && (
<div id="gallery" className="grid place-items-center gap-8 w-full"> <div id="gallery" className="grid place-items-center gap-8 w-full">
<h2 className="text-2xl">{langui.gallery}</h2> <h2 className="text-2xl">{langui.gallery}</h2>
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"> <div
className="grid w-full gap-8 items-end
grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
>
{item.gallery.data.map((galleryItem, index) => ( {item.gallery.data.map((galleryItem, index) => (
<> <>
{galleryItem.attributes && ( {galleryItem.attributes && (
<div <div
key={galleryItem.id} key={galleryItem.id}
className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer" className="relative aspect-square hover:scale-[1.02]
transition-transform cursor-pointer"
onClick={() => { onClick={() => {
if (item.gallery?.data) { if (item.gallery?.data) {
const images: string[] = []; const images: string[] = [];
@ -265,7 +270,10 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
} }
}} }}
> >
<div className="bg-light absolute inset-0 rounded-lg drop-shadow-shade-md"></div> <div
className="bg-light absolute inset-0
rounded-lg drop-shadow-shade-md"
></div>
<Img <Img
className="rounded-lg" className="rounded-lg"
image={galleryItem.attributes} image={galleryItem.attributes}
@ -430,7 +438,10 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
<p className="flex-shrink-0">{"Always show info"}:</p> <p className="flex-shrink-0">{"Always show info"}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} /> <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div> </div>
<div className="grid gap-8 items-end mobile:grid-cols-2 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full"> <div
className="grid gap-8 items-end mobile:grid-cols-2
grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full"
>
{item.subitems.data.map((subitem) => ( {item.subitems.data.map((subitem) => (
<> <>
{subitem.attributes && ( {subitem.attributes && (

8
src/pages/library/[slug]/scans.tsx
View File

@ -12,17 +12,17 @@ import ContentPanel, {
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import { useAppLayout } from "contexts/AppLayoutContext"; import { useAppLayout } from "contexts/AppLayoutContext";
import { GetLibraryItemScansQuery } from "graphql/generated"; import { GetLibraryItemScansQuery } from "graphql/generated";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk"; import { getReadySdk } from "graphql/sdk";
import { prettyinlineTitle, prettySlug } from "helpers/formatters"; import { prettyinlineTitle, prettySlug } from "helpers/formatters";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { sortContent } from "helpers/others"; import { sortContent } from "helpers/others";
import { Immutable } from "helpers/types";
import { import {
GetStaticPathsContext, GetStaticPathsContext,
GetStaticPathsResult, GetStaticPathsResult,
GetStaticPropsContext, GetStaticPropsContext,
} from "next"; } from "next";
import { useState } from "react"; import { useState } from "react";
import { Immutable } from "helpers/types";
interface Props extends AppStaticProps { interface Props extends AppStaticProps {
item: Exclude< item: Exclude<
@ -63,7 +63,9 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
subtitle={ subtitle={
content.attributes?.range[0]?.__typename === content.attributes?.range[0]?.__typename ===
"ComponentRangePageRange" "ComponentRangePageRange"
? `${content.attributes.range[0].starting_page} → ${content.attributes.range[0].ending_page}` ? `${content.attributes.range[0].starting_page}` +
`→` +
`${content.attributes.range[0].ending_page}`
: undefined : undefined
} }
onClick={() => appLayout.setSubPanelOpen(false)} onClick={() => appLayout.setSubPanelOpen(false)}

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

@ -143,7 +143,8 @@ export default function Library(props: Immutable<Props>): JSX.Element {
{name && ( {name && (
<h2 <h2
key={`h2${name}`} key={`h2${name}`}
className="text-2xl pb-2 pt-10 first-of-type:pt-0 flex flex-row place-items-center gap-2" className="text-2xl pb-2 pt-10 first-of-type:pt-0
flex flex-row place-items-center gap-2"
> >
{name} {name}
<Chip>{`${items.length} ${ <Chip>{`${items.length} ${
@ -155,7 +156,9 @@ export default function Library(props: Immutable<Props>): JSX.Element {
)} )}
<div <div
key={`items${name}`} key={`items${name}`}
className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0" className="grid gap-8 items-end mobile:grid-cols-2
desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
> >
{items.map((item) => ( {items.map((item) => (
<> <>

5
src/pages/news/index.tsx
View File

@ -41,7 +41,10 @@ export default function News(props: Immutable<Props>): JSX.Element {
const contentPanel = ( const contentPanel = (
<ContentPanel width={ContentPanelWidthSizes.large}> <ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid gap-8 items-end grid-cols-1 desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]"> <div
className="grid gap-8 items-end grid-cols-1
desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]"
>
{posts.map((post) => ( {posts.map((post) => (
<> <>
{post.attributes && ( {post.attributes && (