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

Updated deps + removed pointer/coarse for hover instead

This commit is contained in:
DrMint 2022-06-10 22:50:51 +02:00
parent bd7330489f
commit 31165f966c
14 changed files with 854 additions and 712 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
graphql-codegen.js → graphql-codegen.config.js
View File

0
next-sitemap.js → next-sitemap.config.js
View File

3
next.config.js
View File

@ -1,11 +1,10 @@
/** @type {import('next').NextConfig} */
/* CONFIG */
const locales = ["en", "es", "fr", "pt-br", "ja"];
/* END CONFIG */
/** @type {import('next').NextConfig} */
module.exports = {
swcMinify: true,
reactStrictMode: true,

1337
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
package.json
View File

@ -5,21 +5,21 @@
"dev": "next dev -p 12499",
"prebuild": "npm run generate",
"build": "next build",
"postbuild": "next-sitemap",
"postbuild": "next-sitemap --config next-sitemap.config.js",
"start": "next start -p 12500",
"lint": "next lint",
"generate": "graphql-codegen --config graphql-codegen.js",
"generate": "graphql-codegen --config graphql-codegen.config.js",
"tsc": "tsc",
"prettier": "prettier --end-of-line auto --write ."
},
"dependencies": {
"@fontsource/material-icons": "^4.5.4",
"@fontsource/opendyslexic": "^4.5.4",
"@fontsource/vollkorn": "^4.5.9",
"@fontsource/vollkorn": "^4.5.10",
"@fontsource/zen-maru-gothic": "^4.5.11",
"@tippyjs/react": "^4.2.6",
"autoprefixer": "^10.4.7",
"graphql-request": "^4.2.0",
"graphql-request": "^4.3.0",
"markdown-to-jsx": "^7.1.7",
"meilisearch": "^0.25.1",
"next": "^12.1.6",
@ -32,24 +32,24 @@
},
"devDependencies": {
"@graphql-codegen/cli": "^2.6.2",
"@graphql-codegen/typescript": "2.4.11",
"@graphql-codegen/typescript-graphql-request": "^4.4.8",
"@graphql-codegen/typescript-operations": "^2.4.0",
"@types/node": "17.0.35",
"@graphql-codegen/typescript": "2.5.1",
"@graphql-codegen/typescript-graphql-request": "^4.4.10",
"@graphql-codegen/typescript-operations": "^2.4.2",
"@types/node": "17.0.41",
"@types/nodemailer": "^6.4.4",
"@types/react": "18.0.9",
"@types/react-dom": "^18.0.4",
"@types/react": "18.0.12",
"@types/react-dom": "^18.0.5",
"@types/turndown": "^5.0.1",
"@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.25.0",
"eslint": "^8.16.0",
"@typescript-eslint/eslint-plugin": "^5.27.1",
"@typescript-eslint/parser": "^5.27.1",
"eslint": "^8.17.0",
"eslint-config-next": "12.1.6",
"graphql": "^16.5.0",
"next-sitemap": "^2.5.21",
"next-sitemap": "^3.0.5",
"prettier": "^2.6.2",
"prettier-plugin-organize-imports": "^2.3.4",
"prettier-plugin-tailwindcss": "^0.1.11",
"tailwindcss": "^3.0.24",
"typescript": "^4.6.4"
"tailwindcss": "^3.1.2",
"typescript": "^4.7.3"
}
}

8
src/components/PreviewCard.tsx
View File

@ -126,7 +126,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
drop-shadow-shade-xl [--bg-opacity:0] [--play-opacity:0]
[--stacked-top:0] hover:scale-[1.02] hover:[--cover-opacity:1]
hover:[--bg-opacity:0.5] hover:[--play-opacity:100]
hover:[--stacked-top:1] fine:[--cover-opacity:0]"
hover:[--stacked-top:1] hoverable:[--cover-opacity:0]"
>
{stackNumber > 0 && (
<>
@ -171,7 +171,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
thumbnailRounded
? keepInfoVisible
? "rounded-t-md"
: "rounded-md coarse:rounded-b-none"
: "rounded-md notHoverable:rounded-b-none"
: undefined
}
image={thumbnail}
@ -212,7 +212,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
className={`relative w-full bg-light ${
keepInfoVisible
? "rounded-t-md"
: "rounded-md coarse:rounded-b-none"
: "rounded-md notHoverable:rounded-b-none"
}`}
>
{stackNumber > 0 && (
@ -229,7 +229,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
className={`linearbg-obi ${
!keepInfoVisible &&
`-inset-x-0.5 bottom-2 opacity-[var(--cover-opacity)]
coarse:rounded-b-md fine:absolute fine:drop-shadow-shade-lg`
notHoverable:rounded-b-md hoverable:absolute hoverable:drop-shadow-shade-lg`
} z-20 grid gap-2 p-4 transition-opacity`}
>
{metadata?.position === "Top" && metadataJSX}

8
src/hooks/useMediaQuery.ts
View File

@ -45,12 +45,8 @@ export function useMediaDesktop() {
return useMediaQuery("(min-width: 60rem)");
}
export function useMediaCoarse() {
return useMediaQuery("(pointer: coarse)");
}
export function useMediaFine() {
return useMediaQuery("(pointer: fine)");
export function useMediaHoverable() {
return useMediaQuery("(hover: hover)");
}
export function usePrefersDarkMode() {

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

@ -22,6 +22,8 @@ import {
} from "next";
import { Fragment, useState } from "react";
import { Icon } from "components/Ico";
import { useMediaHoverable } from "hooks/useMediaQuery";
import { WithLabel } from "components/Inputs/WithLabel";
interface Props extends AppStaticProps {
channel: NonNullable<
@ -32,6 +34,7 @@ interface Props extends AppStaticProps {
export default function Channel(props: Props): JSX.Element {
const { langui, channel } = props;
const [keepInfoVisible, setKeepInfoVisible] = useState(true);
const hoverable = useMediaHoverable();
const subPanel = (
<SubPanel>
@ -49,10 +52,14 @@ export default function Channel(props: Props): JSX.Element {
description={langui.archives_description}
/>
<div className="flex flex-row place-items-center gap-2 coarse:hidden">
<p className="flex-shrink-0">{langui.always_show_info}:</p>
{hoverable && (
<WithLabel
label={langui.always_show_info}
input={
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div>
}
/>
)}
</SubPanel>
);

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

@ -2,6 +2,7 @@ import { AppLayout } from "components/AppLayout";
import { Icon } from "components/Ico";
import { PageSelector } from "components/Inputs/PageSelector";
import { Switch } from "components/Inputs/Switch";
import { WithLabel } from "components/Inputs/WithLabel";
import { PanelHeader } from "components/PanelComponents/PanelHeader";
import {
ReturnButton,
@ -18,6 +19,7 @@ import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
import { prettyDate } from "helpers/formatters";
import { getVideoThumbnailURL } from "helpers/videos";
import { useMediaHoverable } from "hooks/useMediaQuery";
import { GetStaticPropsContext } from "next";
import { Fragment, useState } from "react";
@ -27,6 +29,7 @@ interface Props extends AppStaticProps {
export default function Videos(props: Props): JSX.Element {
const { langui, videos } = props;
const hoverable = useMediaHoverable();
videos
.sort((a, b) => {
@ -67,10 +70,14 @@ export default function Videos(props: Props): JSX.Element {
description={langui.archives_description}
/>
<div className="flex flex-row place-items-center gap-2 coarse:hidden">
<p className="flex-shrink-0">{langui.always_show_info}:</p>
{hoverable && (
<WithLabel
label={langui.always_show_info}
input={
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div>
}
/>
)}
</SubPanel>
);

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

@ -20,6 +20,7 @@ import { Icon } from "components/Ico";
import { WithLabel } from "components/Inputs/WithLabel";
import { Button } from "components/Inputs/Button";
import { TextInput } from "components/Inputs/TextInput";
import { useMediaHoverable } from "hooks/useMediaQuery";
interface Props extends AppStaticProps {
contents: NonNullable<GetContentsQuery["contents"]>["data"];
@ -36,6 +37,7 @@ const defaultFiltersState = {
export default function Contents(props: Immutable<Props>): JSX.Element {
const { langui, contents, languages } = props;
const hoverable = useMediaHoverable();
const [groupingMethod, setGroupingMethod] = useState<number>(
defaultFiltersState.groupingMethod
@ -118,10 +120,14 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
}
/>
{hoverable && (
<WithLabel
label={langui.always_show_info}
input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
input={
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
}
/>
)}
<Button
className="mt-8"

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

@ -46,6 +46,8 @@ import {
} from "next";
import { Fragment, useState } from "react";
import { isUntangibleGroupItem } from "helpers/libraryItem";
import { useMediaHoverable } from "hooks/useMediaQuery";
import { WithLabel } from "components/Inputs/WithLabel";
interface Props extends AppStaticProps {
item: NonNullable<
@ -59,6 +61,7 @@ interface Props extends AppStaticProps {
export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
const { item, itemId, langui, currencies } = props;
const appLayout = useAppLayout();
const hoverable = useMediaHoverable();
useScrollTopOnChange(AnchorIds.ContentPanel, [item]);
@ -401,10 +404,18 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
{isVariantSet ? langui.variants : langui.subitems}
</h2>
<div className="-mt-6 mb-8 flex flex-row place-items-center gap-2 coarse:hidden">
<p className="flex-shrink-0">{langui.always_show_info}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div>
{hoverable && (
<WithLabel
label={langui.always_show_info}
input={
<Switch
setState={setKeepInfoVisible}
state={keepInfoVisible}
/>
}
/>
)}
<div
className="grid w-full grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] items-end
gap-8 mobile:grid-cols-2"

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

@ -29,6 +29,7 @@ import {
isUntangibleGroupItem,
} from "helpers/libraryItem";
import { PreviewCard } from "components/PreviewCard";
import { useMediaHoverable } from "hooks/useMediaQuery";
interface Props extends AppStaticProps {
items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
@ -48,6 +49,7 @@ const defaultFiltersState = {
export default function Library(props: Immutable<Props>): JSX.Element {
const { langui, items: libraryItems, currencies } = props;
const appLayout = useAppLayout();
const hoverable = useMediaHoverable();
const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
const [showSubitems, setShowSubitems] = useState<boolean>(
@ -189,10 +191,14 @@ export default function Library(props: Immutable<Props>): JSX.Element {
}
/>
{hoverable && (
<WithLabel
label={langui.always_show_info}
input={<Switch state={keepInfoVisible} setState={setKeepInfoVisible} />}
input={
<Switch state={keepInfoVisible} setState={setKeepInfoVisible} />
}
/>
)}
<div className="mt-4 grid grid-flow-col">
<ToolTip content={langui.only_display_items_i_want}>

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

@ -18,6 +18,7 @@ import { Icon } from "components/Ico";
import { WithLabel } from "components/Inputs/WithLabel";
import { TextInput } from "components/Inputs/TextInput";
import { Button } from "components/Inputs/Button";
import { useMediaHoverable } from "hooks/useMediaQuery";
interface Props extends AppStaticProps {
posts: NonNullable<GetPostsPreviewQuery["posts"]>["data"];
@ -31,6 +32,7 @@ const defaultFiltersState = {
export default function News(props: Immutable<Props>): JSX.Element {
const { langui } = props;
const posts = sortPosts(props.posts);
const hoverable = useMediaHoverable();
const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
const [keepInfoVisible, setKeepInfoVisible] = useState(
@ -61,10 +63,14 @@ export default function News(props: Immutable<Props>): JSX.Element {
setState={setSearchName}
/>
{hoverable && (
<WithLabel
label={langui.always_show_info}
input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
input={
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
}
/>
)}
<Button
className="mt-8"

87
tailwind.config.js
View File

@ -33,26 +33,22 @@ const fontDyslexic = {
/* END CONFIG */
function withOpacity(variableName) {
return ({ opacityValue }) => {
if (opacityValue) {
return `rgba(var(${variableName}), ${opacityValue})`;
}
return `rgb(var(${variableName}))`;
};
function rgb(color) {
return [color.r, color.g, color.b].join(" ");
}
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: ["./src/**/*.{tsx,ts}"],
theme: {
colors: {
highlight: withOpacity("--theme-color-highlight"),
light: withOpacity("--theme-color-light"),
mid: withOpacity("--theme-color-mid"),
dark: withOpacity("--theme-color-dark"),
shade: withOpacity("--theme-color-shade"),
black: withOpacity("--theme-color-black"),
highlight: "rgb(var(--theme-color-highlight) / <alpha-value>)",
light: "rgb(var(--theme-color-light) / <alpha-value>)",
mid: "rgb(var(--theme-color-mid) / <alpha-value>)",
dark: "rgb(var(--theme-color-dark) / <alpha-value>)",
shade: "rgb(var(--theme-color-shade) / <alpha-value>)",
black: "rgb(var(--theme-color-black) / <alpha-value>)",
},
fontFamily: {
body: ["var(--theme-font-body)"],
@ -65,8 +61,8 @@ module.exports = {
desktop: breakDektop,
mobile: breakMobile,
thin: breakThin,
coarse: { raw: "(pointer: coarse)" },
fine: { raw: "(pointer: fine)" },
hoverable: { raw: "(hover: hover)" },
notHoverable: { raw: "(hover: hover)" },
},
extend: {
boxShadow: {
@ -78,22 +74,22 @@ module.exports = {
plugin(function ({ addUtilities }) {
addUtilities({
".set-theme-light": {
"--theme-color-highlight": `${hightlight.r}, ${hightlight.g}, ${hightlight.b}`,
"--theme-color-light": `${light.r}, ${light.g}, ${light.b}`,
"--theme-color-mid": `${mid.r}, ${mid.g}, ${mid.b}`,
"--theme-color-dark": `${dark.r}, ${dark.g}, ${dark.b}`,
"--theme-color-shade": `${shade.r}, ${shade.g}, ${shade.b}`,
"--theme-color-black": `${black.r}, ${black.g}, ${black.b}`,
"--theme-color-highlight": rgb(hightlight),
"--theme-color-light": rgb(light),
"--theme-color-mid": rgb(mid),
"--theme-color-dark": rgb(dark),
"--theme-color-shade": rgb(shade),
"--theme-color-black": rgb(black),
"--theme-texture-dots": `url("/paper-dots.webp")`,
"--theme-texture-dots-blend": `multiply`,
},
".set-theme-dark": {
"--theme-color-highlight": `${dark_highlight.r}, ${dark_highlight.g}, ${dark_highlight.b}`,
"--theme-color-light": `${dark_light.r}, ${dark_light.g}, ${dark_light.b}`,
"--theme-color-mid": `${dark_mid.r}, ${dark_mid.g}, ${dark_mid.b}`,
"--theme-color-dark": `${dark_dark.r}, ${dark_dark.g}, ${dark_dark.b}`,
"--theme-color-shade": `${dark_shade.r}, ${dark_shade.g}, ${dark_shade.b}`,
"--theme-color-black": `${dark_black.r}, ${dark_black.g}, ${dark_black.b}`,
"--theme-color-highlight": rgb(dark_highlight),
"--theme-color-light": rgb(dark_light),
"--theme-color-mid": rgb(dark_mid),
"--theme-color-dark": rgb(dark_dark),
"--theme-color-shade": rgb(dark_shade),
"--theme-color-black": rgb(dark_black),
"--theme-texture-dots": `url("/paper-dots-dark.webp")`,
"--theme-texture-dots-blend": `overlay`,
},
@ -129,29 +125,41 @@ module.exports = {
plugin(function ({ addUtilities }) {
addUtilities({
".drop-shadow-shade-md": {
filter: `drop-shadow(0 4px 3px rgba(var(--theme-color-shade), 0.15)) drop-shadow(0 2px 2px rgba(var(--theme-color-shade), 0.2))`,
filter: `
drop-shadow(0 4px 3px rgb(var(--theme-color-shade) / 0.15))
drop-shadow(0 2px 2px rgb(var(--theme-color-shade) / 0.2))`,
},
".drop-shadow-shade-lg": {
filter: `drop-shadow(0 10px 8px rgba(var(--theme-color-shade), 0.2)) drop-shadow(0 4px 3px rgba(var(--theme-color-shade), 0.4))`,
filter: `
drop-shadow(0 10px 8px rgb(var(--theme-color-shade) / 0.2))
drop-shadow(0 4px 3px rgb(var(--theme-color-shade) / 0.4))`,
},
".drop-shadow-shade-xl": {
filter: `drop-shadow(0 20px 13px rgba(var(--theme-color-shade), 0.25)) drop-shadow(0 8px 5px rgba(var(--theme-color-shade), 0.7))`,
filter: `
drop-shadow(0 20px 13px rgb(var(--theme-color-shade) / 0.25))
drop-shadow(0 8px 5px rgb(var(--theme-color-shade) / 0.7))`,
},
".drop-shadow-shade-2xl": {
filter: `drop-shadow(0 25px 25px rgba(var(--theme-color-shade), 0.8))`,
filter: `drop-shadow(0 25px 25px rgb(var(--theme-color-shade) / 0.8))`,
},
".drop-shadow-black-md": {
filter: `drop-shadow(0 4px 3px rgba(var(--theme-color-black), 0.15)) drop-shadow(0 2px 2px rgba(var(--theme-color-black), 0.2))`,
filter: `
drop-shadow(0 4px 3px rgb(var(--theme-color-black) / 0.15))
drop-shadow(0 2px 2px rgb(var(--theme-color-black) / 0.2))`,
},
".drop-shadow-black-lg": {
filter: `drop-shadow(0 10px 8px rgba(var(--theme-color-black), 0.2)) drop-shadow(0 4px 3px rgba(var(--theme-color-black), 0.4))`,
filter: `
drop-shadow(0 10px 8px rgb(var(--theme-color-black) / 0.2))
drop-shadow(0 4px 3px rgb(var(--theme-color-black) / 0.4))`,
},
".drop-shadow-black-xl": {
filter: `drop-shadow(0 20px 13px rgba(var(--theme-color-black), 0.25)) drop-shadow(0 8px 5px rgba(var(--theme-color-black), 0.7))`,
filter: `
drop-shadow(0 20px 13px rgb(var(--theme-color-black) / 0.25))
drop-shadow(0 8px 5px rgb(var(--theme-color-black) / 0.7))`,
},
".drop-shadow-black-2xl": {
filter: `drop-shadow(0 25px 25px rgba(var(--theme-color-black), 0.8))`,
filter: `drop-shadow(0 25px 25px rgb(var(--theme-color-black) / 0.8))`,
},
});
}),
@ -159,8 +167,13 @@ module.exports = {
plugin(function ({ addUtilities }) {
addUtilities({
".linearbg-obi": {
background:
"linear-gradient(to right, rgb(var(--theme-color-mid)), rgb(var(--theme-color-light)) 3%, rgb(var(--theme-color-light)) 97%, rgb(var(--theme-color-mid)))",
background: `linear-gradient(
to right,
rgb(var(--theme-color-mid)),
rgb(var(--theme-color-light)) 3%,
rgb(var(--theme-color-light)) 97%,
rgb(var(--theme-color-mid))
)`,
},
});
}),