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

Renamed ThumbnailPreview to PreviewCard + removed Next/Image

Browse Source
This commit is contained in:
DrMint 2022-05-13 19:24:25 +02:00
parent 16891dfad1
commit a82bc74baa
9 changed files with 22 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Img.tsx
View File

@ -1,16 +1,13 @@
import { UploadImageFragment } from "graphql/generated";
import { getAssetURL, getImgSizesByQuality, ImageQuality } from "helpers/img";
import { Immutable } from "helpers/types";
import Image, { ImageProps } from "next/image";
import { ImageProps } from "next/image";
interface Props {
className?: string;
image?: UploadImageFragment | string;
quality?: ImageQuality;
alt?: ImageProps["alt"];
layout?: ImageProps["layout"];
objectFit?: ImageProps["objectFit"];
priority?: ImageProps["priority"];
}
export default function Img(props: Immutable<Props>): JSX.Element {
@ -20,6 +17,7 @@ export default function Img(props: Immutable<Props>): JSX.Element {
className={props.className}
src={props.image}
alt={props.alt ?? ""}
loading="lazy"
/>
);
} else if (props.image?.width && props.image.height) {
@ -29,19 +27,16 @@ export default function Img(props: Immutable<Props>): JSX.Element {
props.quality ?? ImageQuality.Small
);
return (
<Image
<img
className={props.className}
src={getAssetURL(
props.image.url,
props.quality ? props.quality : ImageQuality.Small
)}
alt={props.alt ?? props.image.alternativeText ?? ""}
width={props.layout === "fill" ? undefined : imgSize.width}
height={props.layout === "fill" ? undefined : imgSize.height}
layout={props.layout}
objectFit={props.objectFit}
priority={props.priority}
unoptimized
width={imgSize.width}
height={imgSize.height}
loading="lazy"
/>
);
}

2
src/components/Markdown/Markdawn.tsx
View File

@ -270,8 +270,6 @@ export default function Markdawn(props: Immutable<Props>): JSX.Element {
? getAssetURL(compProps.src, ImageQuality.Small)
: compProps.src
}
layout="fill"
objectFit="contain"
quality={ImageQuality.Medium}
></Img>
</div>

7
src/components/PreviewCard.tsx
View File

@ -44,7 +44,7 @@ interface Props {
| { __typename: "anotherHoverlayName" };
}
export default function ThumbnailPreview(props: Immutable<Props>): JSX.Element {
export default function PreviewCard(props: Immutable<Props>): JSX.Element {
const {
href,
thumbnail,
@ -160,9 +160,8 @@ export default function ThumbnailPreview(props: Immutable<Props>): JSX.Element {
)}
<div
className={`linearbg-obi ${
keepInfoVisible
? "-mt-[0.3333em]"
: `fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md
!keepInfoVisible &&
`fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md
bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)]`
} transition-opacity z-20 grid p-4 gap-2`}
>

1
src/components/ThumbnailHeader.tsx
View File

@ -54,7 +54,6 @@ export default function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
className=" rounded-xl"
image={thumbnail}
quality={ImageQuality.Medium}
priority
/>
) : (
<div className="w-96 aspect-[4/3] bg-light rounded-xl"></div>

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

@ -8,7 +8,7 @@ import ContentPanel, {
ContentPanelWidthSizes,
} from "components/Panels/ContentPanel";
import SubPanel from "components/Panels/SubPanel";
import ThumbnailPreview from "components/PreviewCard";
import PreviewCard from "components/PreviewCard";
import { GetVideoChannelQuery } from "graphql/generated";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
@ -68,7 +68,7 @@ export default function Channel(props: Props): JSX.Element {
{channel?.videos?.data.map((video) => (
<>
{video.attributes && (
<ThumbnailPreview
<PreviewCard
key={video.id}
href={`/archives/videos/v/${video.attributes.uid}`}
title={video.attributes.title}

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

@ -9,7 +9,7 @@ import ContentPanel, {
ContentPanelWidthSizes,
} from "components/Panels/ContentPanel";
import SubPanel from "components/Panels/SubPanel";
import ThumbnailPreview from "components/PreviewCard";
import PreviewCard from "components/PreviewCard";
import { GetVideosPreviewQuery } from "graphql/generated";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
@ -88,7 +88,7 @@ export default function Videos(props: Props): JSX.Element {
{paginatedVideos[page].map((video) => (
<>
{video.attributes && (
<ThumbnailPreview
<PreviewCard
key={video.id}
href={`/archives/videos/v/${video.attributes.uid}`}
title={video.attributes.title}

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

@ -7,7 +7,7 @@ import ContentPanel, {
ContentPanelWidthSizes,
} from "components/Panels/ContentPanel";
import SubPanel from "components/Panels/SubPanel";
import ThumbnailPreview from "components/PreviewCard";
import PreviewCard from "components/PreviewCard";
import { GetContentsQuery } from "graphql/generated";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
@ -89,7 +89,7 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
{items.map((item) => (
<>
{item.attributes && (
<ThumbnailPreview
<PreviewCard
key={item.id}
href={`/contents/${item.attributes.slug}`}
pre_title={item.attributes.titles?.[0]?.pre_title}

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

@ -14,7 +14,7 @@ import ContentPanel, {
ContentPanelWidthSizes,
} from "components/Panels/ContentPanel";
import SubPanel from "components/Panels/SubPanel";
import ThumbnailPreview from "components/PreviewCard";
import PreviewCard from "components/PreviewCard";
import { useAppLayout } from "contexts/AppLayoutContext";
import {
Enum_Componentmetadatabooks_Binding_Type,
@ -172,9 +172,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
<Img
image={item.thumbnail.data.attributes}
quality={ImageQuality.Large}
layout="fill"
objectFit="contain"
priority
className="w-full h-full object-contain"
/>
) : (
<div className="w-full aspect-[21/29.7] bg-light rounded-xl"></div>
@ -270,15 +268,10 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
}
}}
>
<div
className="bg-light absolute inset-0
rounded-lg drop-shadow-shade-md"
></div>
<Img
className="rounded-lg"
className="bg-light rounded-lg drop-shadow-shade-md
w-full h-full object-cover"
image={galleryItem.attributes}
layout="fill"
objectFit="cover"
/>
</div>
)}
@ -445,7 +438,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
{item.subitems.data.map((subitem) => (
<>
{subitem.attributes && (
<ThumbnailPreview
<PreviewCard
key={subitem.id}
href={`/library/${subitem.attributes.slug}`}
title={subitem.attributes.title}

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

@ -5,7 +5,7 @@ import ContentPanel, {
ContentPanelWidthSizes,
} from "components/Panels/ContentPanel";
import SubPanel from "components/Panels/SubPanel";
import ThumbnailPreview from "components/PreviewCard";
import PreviewCard from "components/PreviewCard";
import { GetPostsPreviewQuery } from "graphql/generated";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk";
@ -48,7 +48,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
{posts.map((post) => (
<>
{post.attributes && (
<ThumbnailPreview
<PreviewCard
key={post.id}
href={`/news/${post.attributes.slug}`}
title={