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

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-depth": ["warn", 4],
// "max-lines": "warn",
"max-len": ["warn", { "code": 100 }],
// "max-lines-per-function": "warn",
// "max-nested-callbacks": "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
{...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>
<title>{`${titlePrefix} - ${ogTitle}`}</title>
@ -183,7 +185,8 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Background when navbar is opened */}
<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
? "[backdrop-filter:blur(2px)]"
: "pointer-events-none touch-none "
@ -212,7 +215,10 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
contentPanel
) : (
<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-2xl w-64">{langui.select_option_sidebar}</p>
</div>
@ -223,7 +229,10 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Sub panel */}
{subPanel && (
<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
? "mobile:border-l-0 mobile:w-full"
@ -236,14 +245,21 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
{/* Main panel */}
<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
${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
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 ${
appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"
}`}
>
<MainPanel langui={langui} />
</div>
{/* 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
className="material-icons mt-[.1em] cursor-pointer"
onClick={() => {
@ -285,7 +301,10 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
>
<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 && (
<div>
<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 {
return (
<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}
</div>

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

@ -20,7 +20,9 @@ export default function Select(props: Immutable<Props>): JSX.Element {
} ${props.className}`}
>
<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"
}`}
>
@ -48,7 +50,8 @@ export default function Select(props: Immutable<Props>): JSX.Element {
<>
{index !== props.state && (
<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}
id={option}
onClick={() => {

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

@ -10,15 +10,17 @@ interface Props {
export default function Switch(props: Immutable<Props>): JSX.Element {
return (
<div
className={`h-6 w-12 rounded-full border-2 border-mid grid transition-colors relative cursor-pointer ${
props.className
} ${props.state ? "bg-mid" : "bg-light"}`}
className={`h-6 w-12 rounded-full border-2 border-mid grid
transition-colors relative cursor-pointer ${props.className} ${
props.state ? "bg-mid" : "bg-light"
}`}
onClick={() => {
props.setState(!props.state);
}}
>
<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%]"
}`}
></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"
}`}
>
<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>
<h3 className="cursor-pointer" onClick={() => setOpened(!opened)}>
{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 && (
<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">
{title}
</h2>
@ -198,11 +201,16 @@ export default function ScanSet(props: Immutable<Props>): JSX.Element {
)}
</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) => (
<div
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={() => {
const images: string[] = [];
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 && (
<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">
{"Cover"}
</h2>
@ -151,11 +154,16 @@ export default function ScanSetCover(props: Immutable<Props>): JSX.Element {
)}
</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) => (
<div
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={() => {
const imgs: string[] = [];
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 isActive = router.asPath.startsWith(props.url);
const divActive = "bg-mid shadow-inner-sm shadow-shade";
const border =
"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 : ""
} ${isActive ? divActive : ""}`;
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 : ""} ${
isActive ? divActive : ""
}`;
return (
<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 ToolTip from "components/ToolTip";
import { useAppLayout } from "contexts/AppLayoutContext";
import { AppStaticProps } from "graphql/getAppStaticProps";
import { Immutable } from "helpers/types";
import { useMediaDesktop } from "hooks/useMediaQuery";
import Markdown from "markdown-to-jsx";
import Link from "next/link";
import { AppStaticProps } from "graphql/getAppStaticProps";
import { Immutable } from "helpers/types";
interface Props {
langui: AppStaticProps["langui"];
@ -20,7 +20,8 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
return (
<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"
}`}
>
@ -45,7 +46,9 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
onClick={() => appLayout.setMainPanelOpen(false)}
className={`${
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>
</Link>
@ -219,10 +222,22 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
className="transition-[filter] colorize-black hover:colorize-dark"
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 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
className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1
hover:[--theme-color-black:var(--theme-color-dark)]"
>
<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>
</a>
<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">
<a
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"
target="_blank"
rel="noopener noreferrer"
></a>
<a
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"
target="_blank"
rel="noopener noreferrer"

5
src/components/PreviewLine.tsx
View File

@ -31,8 +31,9 @@ export default function PreviewLine(props: Immutable<Props>): JSX.Element {
return (
<Link href={href} passHref>
<div
className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer hover:scale-[1.02]
transition-transform flex flex-row gap-4 overflow-hidden place-items-center pr-4 w-full h-36"
className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer
hover:scale-[1.02] transition-transform flex flex-row gap-4
overflow-hidden place-items-center pr-4 w-full h-36"
>
{thumbnail ? (
<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>
{recorder.bio?.[0] && <Markdawn text={recorder.bio[0].bio ?? ""} />}
{/* <Button className="cursor-not-allowed">View profile</Button> */}
</div>
}
placement="top"

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

@ -74,7 +74,8 @@ export default function ChronologyItemComponent(
if (props.item.attributes) {
return (
<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(
props.item.attributes.year,
props.item.attributes.month,
@ -103,7 +104,10 @@ export default function ChronologyItemComponent(
<>
{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 !==
Enum_Componenttranslationschronologyitem_Status.Done && (
<ToolTip
@ -128,7 +132,8 @@ export default function ChronologyItemComponent(
className={
event.translations &&
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"
}
>

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

@ -10,8 +10,8 @@ import ContentPanel, {
import SubPanel from "components/Panels/SubPanel";
import ThumbnailPreview from "components/PreviewCard";
import { GetVideoChannelQuery } from "graphql/generated";
import { getReadySdk } from "graphql/sdk";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
import { getVideoThumbnailURL } from "helpers/videos";
import {
GetStaticPathsContext,
@ -60,7 +60,11 @@ export default function Channel(props: Props): JSX.Element {
<h1 className="text-3xl">{channel?.title}</h1>
<p>{channel?.subscribers.toLocaleString()} subscribers</p>
</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) => (
<>
{video.attributes && (

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

@ -11,9 +11,9 @@ import ContentPanel, {
import SubPanel from "components/Panels/SubPanel";
import ThumbnailPreview from "components/PreviewCard";
import { GetVideosPreviewQuery } from "graphql/generated";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
import { prettyDate } from "helpers/formatters";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getVideoThumbnailURL } from "helpers/videos";
import { GetStaticPropsContext } from "next";
import { useState } from "react";
@ -80,7 +80,11 @@ export default function Videos(props: Props): JSX.Element {
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) => (
<>
{video.attributes && (

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

@ -70,7 +70,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
{name && (
<h2
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}
<Chip>{`${items.length} ${
@ -82,7 +83,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
)}
<div
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) => (
<>

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

@ -41,7 +41,8 @@ export default function CheckupLibraryItems(
{testReport.lines.map((line, index) => (
<div
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
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;
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}
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}
prependBody={
<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>
<h2 className="text-xl -mt-5">
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="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={() => {
if (item?.thumbnail?.data?.attributes) {
setLightboxOpen(true);
@ -240,13 +241,17 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
{item?.gallery && item.gallery.data.length > 0 && (
<div id="gallery" className="grid place-items-center gap-8 w-full">
<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) => (
<>
{galleryItem.attributes && (
<div
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={() => {
if (item.gallery?.data) {
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
className="rounded-lg"
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>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</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) => (
<>
{subitem.attributes && (

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

@ -12,17 +12,17 @@ import ContentPanel, {
import SubPanel from "components/Panels/SubPanel";
import { useAppLayout } from "contexts/AppLayoutContext";
import { GetLibraryItemScansQuery } from "graphql/generated";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
import { prettyinlineTitle, prettySlug } from "helpers/formatters";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { sortContent } from "helpers/others";
import { Immutable } from "helpers/types";
import {
GetStaticPathsContext,
GetStaticPathsResult,
GetStaticPropsContext,
} from "next";
import { useState } from "react";
import { Immutable } from "helpers/types";
interface Props extends AppStaticProps {
item: Exclude<
@ -63,7 +63,9 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
subtitle={
content.attributes?.range[0]?.__typename ===
"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
}
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 && (
<h2
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}
<Chip>{`${items.length} ${
@ -155,7 +156,9 @@ export default function Library(props: Immutable<Props>): JSX.Element {
)}
<div
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) => (
<>

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

@ -41,7 +41,10 @@ export default function News(props: Immutable<Props>): JSX.Element {
const contentPanel = (
<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) => (
<>
{post.attributes && (