diff --git a/design.config.js b/design.config.js index 84a6e3c..7451beb 100644 --- a/design.config.js +++ b/design.config.js @@ -27,16 +27,19 @@ const fonts = { openDyslexic: "OpenDyslexic", vollkorn: "Vollkorn", zenMaruGothic: "Zen Maru Gothic", + shareTechMono: "Share Tech Mono", }; const fontFamilies = { standard: { body: fonts.zenMaruGothic, headers: fonts.vollkorn, + mono: fonts.shareTechMono, }, dyslexic: { body: fonts.openDyslexic, headers: fonts.openDyslexic, + mono: fonts.shareTechMono, }, }; diff --git a/package-lock.json b/package-lock.json index 8cae2d1..886cbe5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "dependencies": { "@fontsource/material-icons": "^4.5.4", "@fontsource/opendyslexic": "^4.5.4", + "@fontsource/share-tech-mono": "^4.5.8", "@fontsource/vollkorn": "^4.5.10", "@fontsource/zen-maru-gothic": "^4.5.11", "@tippyjs/react": "^4.2.6", @@ -1087,6 +1088,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.4.tgz", "integrity": "sha512-afgJ74VbN5SYYyv2VEAcTMHDMqLIqEtHRHyhUqMXd7IxzYOxvEpUw2Q963BHK3134RLJ1U1QeZgY0a7934+Fig==" }, + "node_modules/@fontsource/share-tech-mono": { + "version": "4.5.8", + "resolved": "https://registry.npmjs.org/@fontsource/share-tech-mono/-/share-tech-mono-4.5.8.tgz", + "integrity": "sha512-z/4SQIrVgaanGUU7LBSpBNlAd3WMJsL8IpweLOThCtDRhDMwqaWb8AVSphAJv1OATIH2RcuiWrDkza714UIRwQ==" + }, "node_modules/@fontsource/vollkorn": { "version": "4.5.10", "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.10.tgz", @@ -9804,6 +9810,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.4.tgz", "integrity": "sha512-afgJ74VbN5SYYyv2VEAcTMHDMqLIqEtHRHyhUqMXd7IxzYOxvEpUw2Q963BHK3134RLJ1U1QeZgY0a7934+Fig==" }, + "@fontsource/share-tech-mono": { + "version": "4.5.8", + "resolved": "https://registry.npmjs.org/@fontsource/share-tech-mono/-/share-tech-mono-4.5.8.tgz", + "integrity": "sha512-z/4SQIrVgaanGUU7LBSpBNlAd3WMJsL8IpweLOThCtDRhDMwqaWb8AVSphAJv1OATIH2RcuiWrDkza714UIRwQ==" + }, "@fontsource/vollkorn": { "version": "4.5.10", "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.10.tgz", diff --git a/package.json b/package.json index 4b4ccc1..1411296 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dependencies": { "@fontsource/material-icons": "^4.5.4", "@fontsource/opendyslexic": "^4.5.4", + "@fontsource/share-tech-mono": "^4.5.8", "@fontsource/vollkorn": "^4.5.10", "@fontsource/zen-maru-gothic": "^4.5.11", "@tippyjs/react": "^4.2.6", diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 3f39891..77ef32a 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -13,6 +13,7 @@ import { useRouter } from "next/router"; import { useEffect, useMemo, useState } from "react"; import { useSwipeable } from "react-swipeable"; import { Ico, Icon } from "./Ico"; +import { ButtonGroup } from "./Inputs/ButtonGroup"; import { OrderableList } from "./Inputs/OrderableList"; import { Select } from "./Inputs/Select"; import { TextInput } from "./Inputs/TextInput"; @@ -381,7 +382,7 @@ export function AppLayout(props: Immutable): JSX.Element {

{langui.theme}

-
+
+
@@ -431,9 +429,8 @@ export function AppLayout(props: Immutable): JSX.Element {

{langui.font_size}

-
+
+
diff --git a/src/components/Inputs/Button.tsx b/src/components/Inputs/Button.tsx index 9d1cba0..90a78ac 100644 --- a/src/components/Inputs/Button.tsx +++ b/src/components/Inputs/Button.tsx @@ -38,25 +38,25 @@ export function Button(props: Immutable): JSX.Element { draggable={draggable} id={id} onClick={onClick} - className={`--opacityBadge:100 grid select-none grid-flow-col place-content-center - place-items-center gap-2 rounded-full border-[1px] border-dark px-4 pt-[0.4rem] - pb-[0.5rem] text-dark transition-all hover:[--opacityBadge:0] ${className} ${ + className={`component-button group grid select-none grid-flow-col place-content-center + place-items-center gap-2 rounded-full border-[1px] border-dark px-4 pt-[0.4rem] pb-[0.5rem] + text-dark transition-all ${ active ? "!border-black bg-black text-light drop-shadow-black-lg" : `cursor-pointer hover:bg-dark hover:text-light hover:drop-shadow-shade-lg active:border-black active:bg-black active:text-light active:drop-shadow-black-lg` - }`} + } ${className}`} > {badgeNumber && (

{badgeNumber}

)} - {icon && } - {text &&

{text}

} + {icon && } + {text &&

{text}

}
); diff --git a/src/components/Inputs/ButtonGroup.tsx b/src/components/Inputs/ButtonGroup.tsx new file mode 100644 index 0000000..3ef95a1 --- /dev/null +++ b/src/components/Inputs/ButtonGroup.tsx @@ -0,0 +1,41 @@ +import { Immutable } from "helpers/types"; +import { useEffect, useRef } from "react"; + +interface Props { + children: React.ReactNode; + className?: string; +} + +export function ButtonGroup(props: Immutable): JSX.Element { + const { children, className } = props; + const ref = useRef(null); + + useEffect(() => { + if (ref.current) { + const buttons = ref.current.querySelectorAll(".component-button"); + buttons.forEach((button, index) => { + button.classList.remove("rounded-full"); + button.classList.remove("border-[1px]"); + if (index === 0) { + button.classList.add("rounded-l-full"); + button.classList.add("border-l-[1px]"); + } else if (index === buttons.length - 1) { + button.classList.add("rounded-r-full"); + button.classList.add("border-r-[1px]"); + } else { + button.classList.add("rounded-none"); + } + button.classList.add("border-y-[1px]"); + }); + } + }, [children]); + + return ( +
+ {children} +
+ ); +} diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 6c7852a..853a357 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -21,8 +21,7 @@ export function MainPanel(props: Immutable): JSX.Element { return (
@@ -131,9 +130,7 @@ export function MainPanel(props: Immutable): JSX.Element { icon={Icon.WatchLater} title={langui.chronicles} subtitle={langui.chronicles_short_description} - reduced={appLayout.mainPanelReduced && isDesktop} - /> */} @@ -151,9 +148,7 @@ export function MainPanel(props: Immutable): JSX.Element { url="/merch" icon={Icon.Store} title={langui.merch} - reduced={appLayout.mainPanelReduced && isDesktop} - /> */} @@ -193,23 +188,23 @@ export function MainPanel(props: Immutable): JSX.Element {
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx index 1d21c49..35ae16d 100644 --- a/src/components/PreviewCard.tsx +++ b/src/components/PreviewCard.tsx @@ -23,6 +23,7 @@ import { Img } from "./Img"; interface Props { thumbnail?: UploadImageFragment | string | null | undefined; thumbnailAspectRatio?: string; + thumbnailForceAspectRatio?: boolean; thumbnailRounded?: boolean; href: string; pre_title?: string | null | undefined; @@ -55,6 +56,7 @@ export function PreviewCard(props: Immutable): JSX.Element { href, thumbnail, thumbnailAspectRatio = "4/3", + thumbnailForceAspectRatio = false, thumbnailRounded = true, pre_title, title, @@ -122,20 +124,16 @@ export function PreviewCard(props: Immutable): JSX.Element { return (
{stackNumber > 0 && ( <>
{thumbnail && ( ): JSX.Element {
{thumbnail && ( ): JSX.Element { )} {thumbnail ? ( -
+
@@ -188,13 +191,12 @@ export function PreviewCard(props: Immutable): JSX.Element { {hoverlay && hoverlay.__typename === "Video" && ( <>
): JSX.Element {
)}
{metadata?.position === "Top" && metadataJSX} {topChips && topChips.length > 0 && ( @@ -272,12 +274,13 @@ export function PreviewCard(props: Immutable): JSX.Element { } interface TranslatedProps - extends Omit { + extends Omit { translations: | { pre_title?: string | null | undefined; title: string | null | undefined; subtitle?: string | null | undefined; + description?: string | null | undefined; language: string | undefined; }[] | undefined; @@ -305,6 +308,7 @@ export function TranslatedPreviewCard( pre_title={selectedTranslation?.pre_title} title={selectedTranslation?.title ?? prettySlug(slug)} subtitle={selectedTranslation?.subtitle} + description={selectedTranslation?.description} {...props} /> ); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 99bbb20..1721d05 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,6 @@ import "@fontsource/material-icons"; import "@fontsource/opendyslexic/400.css"; +import "@fontsource/share-tech-mono/400.css"; import "@fontsource/opendyslexic/700.css"; import "@fontsource/vollkorn/700.css"; import "@fontsource/zen-maru-gothic/500.css"; diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx index 5522848..3a6bedd 100644 --- a/src/pages/contents/index.tsx +++ b/src/pages/contents/index.tsx @@ -196,6 +196,7 @@ export default function Contents(props: Immutable): JSX.Element { languages={languages} thumbnail={item.attributes.thumbnail?.data?.attributes} thumbnailAspectRatio="3/2" + thumbnailForceAspectRatio stackNumber={ effectiveCombineRelatedContent && item.attributes.group?.data?.attributes?.combine diff --git a/src/pages/dev/editor.tsx b/src/pages/dev/editor.tsx index 0e608a3..59064fe 100644 --- a/src/pages/dev/editor.tsx +++ b/src/pages/dev/editor.tsx @@ -407,7 +407,7 @@ export default function Editor(props: Immutable): JSX.Element { handleInput(textarea.value); }} className="h-[70vh] w-full rounded-xl bg-mid !bg-opacity-40 p-8 - text-black outline-none" + text-black font-mono outline-none" value={markdown} title="Input textarea" /> diff --git a/src/pages/library/[slug]/index.tsx b/src/pages/library/[slug]/index.tsx index 0b53a15..c55e199 100644 --- a/src/pages/library/[slug]/index.tsx +++ b/src/pages/library/[slug]/index.tsx @@ -170,7 +170,7 @@ export default function LibrarySlug(props: Immutable): JSX.Element { />
)} -
+

{item?.title}

{item?.subtitle &&

{item.subtitle}

}
@@ -261,7 +261,10 @@ export default function LibrarySlug(props: Immutable): JSX.Element {

{langui.details}

-
+
{item?.metadata?.[0] && (

{langui.type}

@@ -313,17 +316,26 @@ export default function LibrarySlug(props: Immutable): JSX.Element { )} {item?.size && ( - <> +

{langui.size}

-
-
+
+

{langui.width}:

{item.size.width} mm

{convertMmToInch(item.size.width)} in

-
+

{langui.height}:

{item.size.height} mm

@@ -331,7 +343,10 @@ export default function LibrarySlug(props: Immutable): JSX.Element {
{item.size.thickness && ( -
+

{langui.thickness}:

{item.size.thickness} mm

@@ -340,7 +355,7 @@ export default function LibrarySlug(props: Immutable): JSX.Element {
)}
- +
)} {item?.metadata?.[0]?.__typename !== "ComponentMetadataGroup" && @@ -417,8 +432,8 @@ export default function LibrarySlug(props: Immutable): JSX.Element { )}
{item.subitems.data.map((subitem) => ( diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index 09c405b..e36192f 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -30,6 +30,7 @@ import { } from "helpers/libraryItem"; import { PreviewCard } from "components/PreviewCard"; import { useMediaHoverable } from "hooks/useMediaQuery"; +import { ButtonGroup } from "components/Inputs/ButtonGroup"; interface Props extends AppStaticProps { items: NonNullable["data"]; @@ -200,10 +201,9 @@ export default function Library(props: Immutable): JSX.Element { /> )} -
+
+