diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index c1101c8..3bac0e7 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -1,20 +1,27 @@ -import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; +import { + GetWebsiteInterfaceQuery, + StrapiImage, +} from "graphql/operations-types"; import MainPanel from "./Panels/MainPanel"; import Head from "next/head"; import { useSwipeable } from "react-swipeable"; import { useRouter } from "next/router"; import Button from "components/Button"; -import { prettyLanguage } from "queries/helpers"; +import { getOgImage, prettyLanguage } from "queries/helpers"; import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery"; import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; +import { ImageQuality } from "./Img"; type AppLayoutProps = { subPanel?: React.ReactNode; subPanelIcon?: string; contentPanel?: React.ReactNode; langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; - title: string; + title?: string; + navTitle: string; + thumbnail?: StrapiImage; + description?: string; }; export default function AppLayout(props: AppLayoutProps): JSX.Element { @@ -68,6 +75,9 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { const turnSubIntoContent = props.subPanel && !props.contentPanel; + const ogImage = getOgImage(ImageQuality.Og, props.thumbnail); + const ogTitle = props.title ? props.title : props.navTitle; + return (
- - {props.title ? `${titlePrefix} - ${props.title}` : titlePrefix} - + {`${titlePrefix} - ${ogTitle}`} + + + + {props.description && ( + <> + + + + )} + + {ogImage && ( + <> + + + + + + + + + + + )} {/* Navbar */} @@ -88,7 +134,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { > menu -

{props.title}

+

{props.navTitle}

appLayout.setSubPanelOpen(true)} diff --git a/src/components/Img.tsx b/src/components/Img.tsx index c097127..76262bd 100644 --- a/src/components/Img.tsx +++ b/src/components/Img.tsx @@ -1,4 +1,4 @@ -import { GetLibraryItemsPreviewQuery } from "graphql/operations-types"; +import { StrapiImage } from "graphql/operations-types"; import { ImageProps } from "next/image"; import Image from "next/image"; @@ -9,11 +9,11 @@ export enum ImageQuality { Og = "og", } -export function getAssetURL(url: string, quality?: ImageQuality): string { - if (!quality) quality = ImageQuality.Small; +export function getAssetURL(url: string, quality: ImageQuality): string { url = url.replace(/^\/uploads/, "/" + quality); url = url.replace(/.jpg$/, ".webp"); url = url.replace(/.png$/, ".webp"); + if (quality === ImageQuality.Og) url = url.replace(/.webp$/, ".jpg"); return process.env.NEXT_PUBLIC_URL_IMG + url; } @@ -50,7 +50,7 @@ export function getImgSizesByQuality( type ImgProps = { className?: string; - image: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["thumbnail"]["data"]["attributes"]; + image: StrapiImage; quality?: ImageQuality; alt?: ImageProps["alt"]; layout?: ImageProps["layout"]; @@ -67,7 +67,10 @@ export default function Img(props: ImgProps): JSX.Element { return ( {props.alt {item.metadata && item.metadata.length > 0 ? (
- {item.metadata[0].__typename === "ComponentMetadataOther" - ? console.log(item.slug) - : ""} {prettyItemSubType(item.metadata[0])}
) : ( diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index d33d367..0aeff4e 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -62,6 +62,16 @@ export enum Enum_Componentsetstextset_Status { Done = "Done", } +export type StrapiImage = { + __typename: "UploadFile"; + name: string; + alternativeText: string; + caption: string; + width: number; + height: number; + url: string; +}; + // __________________________________________________________________ export type GetWebsiteInterfaceQueryVariables = Exact<{ diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 0a973ef..fd9217f 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -19,7 +19,7 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element { ); - return ; + return ; } export const getStaticProps: GetStaticProps = async (context) => { diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 87b87b5..5f0bc03 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -24,18 +24,46 @@ class MyDocument extends Document { return ( - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx index 67c500b..eb258b9 100644 --- a/src/pages/archives/index.tsx +++ b/src/pages/archives/index.tsx @@ -22,7 +22,7 @@ export default function Archives(props: ArchivesProps): JSX.Element { ); return ( diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx index db705d4..8f9db43 100644 --- a/src/pages/chronicles/index.tsx +++ b/src/pages/chronicles/index.tsx @@ -22,7 +22,7 @@ export default function Chronicles(props: ChroniclesProps): JSX.Element { ); return ( diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index 1a4a784..a1b04f2 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -15,6 +15,7 @@ import ThumbnailHeader from "components/Content/ThumbnailHeader"; import AppLayout from "components/AppLayout"; import SubPanel from "components/Panels/SubPanel"; import ReturnButton from "components/PanelComponents/ReturnButton"; +import { prettyinlineTitle, prettySlug } from "queries/helpers"; type ContentIndexProps = { content: GetContentQuery; @@ -26,11 +27,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { const langui = props.langui.websiteInterfaces.data[0].attributes; const subPanel = ( - + ); @@ -70,7 +67,13 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { return ( 0 + ? prettyinlineTitle(content.titles[0].pre_title, content.titles[0].title, content.titles[0].subtitle) + : prettySlug(content.slug) + } + thumbnail={content.thumbnail.data.attributes} langui={langui} contentPanel={contentPanel} subPanel={subPanel} diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index 18c8c21..fa1d757 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -15,6 +15,7 @@ import ReturnButton from "components/PanelComponents/ReturnButton"; import ThumbnailHeader from "components/Content/ThumbnailHeader"; import AppLayout from "components/AppLayout"; import Markdawn from "components/Markdown/Markdawn"; +import { prettyinlineTitle, prettySlug } from "queries/helpers"; type ContentReadProps = { content: GetContentTextQuery; @@ -51,7 +52,13 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { return ( 0 + ? prettyinlineTitle(content.titles[0].pre_title, content.titles[0].title, content.titles[0].subtitle) + : prettySlug(content.slug) + } + thumbnail={content.thumbnail.data.attributes} langui={langui} contentPanel={contentPanel} subPanel={subPanel} diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx index 4c061e9..0c9eed5 100644 --- a/src/pages/contents/index.tsx +++ b/src/pages/contents/index.tsx @@ -10,8 +10,6 @@ import { import { getContents, getWebsiteInterface } from "graphql/operations"; import PanelHeader from "components/PanelComponents/PanelHeader"; import AppLayout from "components/AppLayout"; -import ReturnButton from "components/PanelComponents/ReturnButton"; -import HorizontalLine from "components/HorizontalLine"; import LibraryContentPreview from "components/Library/LibraryContentPreview"; import { prettyinlineTitle } from "queries/helpers"; @@ -63,7 +61,7 @@ export default function Library(props: LibraryProps): JSX.Element { ); return ( diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index a37b980..865078b 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -18,7 +18,7 @@ export default function Gallery(props: GalleryProps): JSX.Element { return ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f95e872..538a2c0 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -143,7 +143,7 @@ export default function Home(props: HomeProps): JSX.Element { return ( <> diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index 49479a5..9758c7b 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -481,10 +481,17 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { return ( 0 + ? item.descriptions[0].description + : undefined + } /> ); } diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index c69ce9d..915a284 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -42,7 +42,7 @@ export default function Library(props: LibraryProps): JSX.Element { ); return ( + ); } diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx index bbdd4b8..3521fba 100644 --- a/src/pages/news/index.tsx +++ b/src/pages/news/index.tsx @@ -22,7 +22,11 @@ export default function News(props: NewsProps): JSX.Element { ); return ( - + ); } diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx index b970ec6..645e981 100644 --- a/src/pages/wiki/chronology.tsx +++ b/src/pages/wiki/chronology.tsx @@ -119,7 +119,7 @@ export default function DataChronology( return (