Made props types more consistent

This commit is contained in:
DrMint 2022-04-03 10:34:21 +02:00
parent 572cbb57d5
commit 3f452c529a
49 changed files with 246 additions and 258 deletions

View File

@ -18,7 +18,7 @@ import MainPanel from "./Panels/MainPanel";
import Popup from "./Popup";
import Select from "./Select";
interface AppLayoutProps extends AppStaticProps {
interface Props extends AppStaticProps {
subPanel?: React.ReactNode;
subPanelIcon?: string;
contentPanel?: React.ReactNode;
@ -28,7 +28,7 @@ interface AppLayoutProps extends AppStaticProps {
description?: string;
}
export default function AppLayout(props: AppLayoutProps): JSX.Element {
export default function AppLayout(props: Props): JSX.Element {
const { langui, currencies, languages, subPanel, contentPanel } = props;
const router = useRouter();
const isMobile = useMediaMobile();

View File

@ -1,7 +1,7 @@
import { useRouter } from "next/router";
import { MouseEventHandler } from "react";
type ButtonProps = {
interface Props {
id?: string;
className?: string;
href?: string;
@ -9,9 +9,9 @@ type ButtonProps = {
active?: boolean;
locale?: string;
onClick?: MouseEventHandler<HTMLDivElement>;
};
}
export default function Button(props: ButtonProps): JSX.Element {
export default function Button(props: Props): JSX.Element {
const router = useRouter();
const button = (

View File

@ -1,9 +1,9 @@
type ChipProps = {
interface Props {
className?: string;
children: React.ReactNode;
};
}
export default function Chip(props: ChipProps): JSX.Element {
export default function Chip(props: 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}`}

View File

@ -7,18 +7,16 @@ import {
import { AppStaticProps } from "queries/getAppStaticProps";
import { getStatusDescription } from "queries/helpers";
export type ChronologyItemComponentProps = {
interface Props {
item: Exclude<
GetChronologyItemsQuery["chronologyItems"],
null | undefined
>["data"][number];
displayYear: boolean;
langui: AppStaticProps["langui"];
};
}
export default function ChronologyItemComponent(
props: ChronologyItemComponentProps
): JSX.Element {
export default function ChronologyItemComponent(props: Props): JSX.Element {
const { langui } = props;
function generateAnchor(

View File

@ -2,18 +2,16 @@ import ChronologyItemComponent from "components/Chronology/ChronologyItemCompone
import { GetChronologyItemsQuery } from "graphql/generated";
import { AppStaticProps } from "queries/getAppStaticProps";
type ChronologyYearComponentProps = {
interface Props {
year: number;
items: Exclude<
GetChronologyItemsQuery["chronologyItems"],
null | undefined
>["data"][number][];
langui: AppStaticProps["langui"];
};
}
export default function ChronologyYearComponent(
props: ChronologyYearComponentProps
): JSX.Element {
export default function ChronologyYearComponent(props: Props): JSX.Element {
const { langui } = props;
return (

View File

@ -5,7 +5,7 @@ import { GetContentQuery, UploadImageFragment } from "graphql/generated";
import { AppStaticProps } from "queries/getAppStaticProps";
import { prettyinlineTitle, prettySlug, slugify } from "queries/helpers";
export type ThumbnailHeaderProps = {
interface Props {
pre_title?: string | null | undefined;
title: string | null | undefined;
subtitle?: string | null | undefined;
@ -26,11 +26,9 @@ export type ThumbnailHeaderProps = {
>["categories"];
thumbnail?: UploadImageFragment | null | undefined;
langui: AppStaticProps["langui"];
};
}
export default function ThumbnailHeader(
props: ThumbnailHeaderProps
): JSX.Element {
export default function ThumbnailHeader(props: Props): JSX.Element {
const {
langui,
pre_title,

View File

@ -1,10 +1,8 @@
type HorizontalLineProps = {
interface Props {
className?: string;
};
}
export default function HorizontalLine(
props: HorizontalLineProps
): JSX.Element {
export default function HorizontalLine(props: Props): JSX.Element {
return (
<div
className={`h-0 w-full my-8 border-t-[3px] border-dotted border-black ${props.className}`}

View File

@ -1,6 +1,60 @@
import { UploadImageFragment } from "graphql/generated";
import Image, { ImageProps } from "next/image";
interface Props {
className?: string;
image?: UploadImageFragment;
quality?: ImageQuality;
alt?: ImageProps["alt"];
layout?: ImageProps["layout"];
objectFit?: ImageProps["objectFit"];
priority?: ImageProps["priority"];
rawImg?: boolean;
}
export default function Img(props: Props): JSX.Element {
if (props.image?.width && props.image?.height) {
const imgSize = getImgSizesByQuality(
props.image.width,
props.image.height,
props.quality ?? ImageQuality.Small
);
if (props.rawImg) {
return (
// eslint-disable-next-line @next/next/no-img-element
<img
className={props.className}
src={getAssetURL(
props.image.url,
props.quality ?? ImageQuality.Small
)}
alt={props.alt ?? props.image.alternativeText ?? ""}
width={imgSize.width}
height={imgSize.height}
/>
);
}
return (
<Image
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
/>
);
}
return <></>;
}
export enum ImageQuality {
Small = "small",
Medium = "medium",
@ -48,57 +102,3 @@ export function getImgSizesByQuality(
return { width: 0, height: 0 };
}
}
type ImgProps = {
className?: string;
image?: UploadImageFragment;
quality?: ImageQuality;
alt?: ImageProps["alt"];
layout?: ImageProps["layout"];
objectFit?: ImageProps["objectFit"];
priority?: ImageProps["priority"];
rawImg?: boolean;
};
export default function Img(props: ImgProps): JSX.Element {
if (props.image?.width && props.image?.height) {
const imgSize = getImgSizesByQuality(
props.image.width,
props.image.height,
props.quality ?? ImageQuality.Small
);
if (props.rawImg) {
return (
// eslint-disable-next-line @next/next/no-img-element
<img
className={props.className}
src={getAssetURL(
props.image.url,
props.quality ?? ImageQuality.Small
)}
alt={props.alt ?? props.image.alternativeText ?? ""}
width={imgSize.width}
height={imgSize.height}
/>
);
}
return (
<Image
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
/>
);
}
return <></>;
}

View File

@ -1,10 +1,10 @@
type InsetBoxProps = {
interface Props {
className?: string;
children: React.ReactNode;
id?: string;
};
}
export default function InsetBox(props: InsetBoxProps): JSX.Element {
export default function InsetBox(props: Props): JSX.Element {
return (
<div
id={props.id}

View File

@ -3,13 +3,13 @@ import { AppStaticProps } from "queries/getAppStaticProps";
import { prettyLanguage } from "queries/helpers";
import Button from "./Button";
type Props = {
interface Props {
className?: string;
locales: (string | undefined)[];
languages: AppStaticProps["languages"];
langui: AppStaticProps["langui"];
href?: string;
};
}
export default function LanguageSwitcher(props: Props): JSX.Element {
const { locales, langui, href } = props;

View File

@ -5,7 +5,7 @@ import { AppStaticProps } from "queries/getAppStaticProps";
import { prettyinlineTitle, prettySlug } from "queries/helpers";
import { useState } from "react";
type ContentTOCLineProps = {
interface Props {
content: Exclude<
Exclude<
Exclude<
@ -18,11 +18,9 @@ type ContentTOCLineProps = {
>["data"][number];
parentSlug: string;
langui: AppStaticProps["langui"];
};
}
export default function ContentTOCLine(
props: ContentTOCLineProps
): JSX.Element {
export default function ContentTOCLine(props: Props): JSX.Element {
const { content, langui, parentSlug } = props;
const [opened, setOpened] = useState(false);

View File

@ -4,16 +4,14 @@ import { GetContentsQuery } from "graphql/generated";
import Link from "next/link";
import { prettySlug } from "queries/helpers";
export type LibraryContentPreviewProps = {
interface Props {
item: Exclude<
GetContentsQuery["contents"],
null | undefined
>["data"][number]["attributes"];
};
}
export default function LibraryContentPreview(
props: LibraryContentPreviewProps
): JSX.Element {
export default function LibraryContentPreview(props: Props): JSX.Element {
const { item } = props;
return (

View File

@ -9,7 +9,7 @@ import Link from "next/link";
import { AppStaticProps } from "queries/getAppStaticProps";
import { prettyDate, prettyItemSubType, prettyPrice } from "queries/helpers";
export type LibraryItemsPreviewProps = {
interface Props {
className?: string;
item:
| Exclude<
@ -27,11 +27,9 @@ export type LibraryItemsPreviewProps = {
null | undefined
>["data"][number]["attributes"];
currencies: AppStaticProps["currencies"];
};
}
export default function LibraryItemsPreview(
props: LibraryItemsPreviewProps
): JSX.Element {
export default function LibraryItemsPreview(props: Props): JSX.Element {
const { item } = props;
const appLayout = useAppLayout();

View File

@ -2,7 +2,7 @@ import { useMediaMobile } from "hooks/useMediaQuery";
import { Dispatch, SetStateAction } from "react";
import Lightbox from "react-image-lightbox";
export type LightBoxProps = {
interface Props {
setState:
| Dispatch<SetStateAction<boolean | undefined>>
| Dispatch<SetStateAction<boolean>>;
@ -10,9 +10,9 @@ export type LightBoxProps = {
images: string[];
index: number;
setIndex: Dispatch<SetStateAction<number>>;
};
}
export default function LightBox(props: LightBoxProps): JSX.Element {
export default function LightBox(props: Props): JSX.Element {
const { state, setState, images, index, setIndex } = props;
const mobile = useMediaMobile();

View File

@ -10,12 +10,12 @@ import { slugify } from "queries/helpers";
import React, { useState } from "react";
import ReactDOMServer from "react-dom/server";
type MarkdawnProps = {
interface Props {
className?: string;
text: string;
};
}
export default function Markdawn(props: MarkdawnProps): JSX.Element {
export default function Markdawn(props: Props): JSX.Element {
const appLayout = useAppLayout();
const text = preprocessMarkDawn(props.text);

View File

@ -2,12 +2,12 @@ import { useRouter } from "next/router";
import { slugify } from "queries/helpers";
import { preprocessMarkDawn } from "./Markdawn";
type TOCProps = {
interface Props {
text: string;
title?: string;
};
}
export default function TOCComponent(props: TOCProps): JSX.Element {
export default function TOCComponent(props: Props): JSX.Element {
const { text, title } = props;
const toc = getTocFromMarkdawn(preprocessMarkDawn(text), title);
const router = useRouter();
@ -27,12 +27,12 @@ export default function TOCComponent(props: TOCProps): JSX.Element {
);
}
type TOCLevelProps = {
interface LevelProps {
tocchildren: TOC[];
parentNumbering: string;
};
}
function TOCLevel(props: TOCLevelProps): JSX.Element {
function TOCLevel(props: LevelProps): JSX.Element {
const router = useRouter();
const { tocchildren, parentNumbering } = props;
return (
@ -60,11 +60,11 @@ function TOCLevel(props: TOCLevelProps): JSX.Element {
);
}
export type TOC = {
interface TOC {
title: string;
slug: string;
children: TOC[];
};
}
export function getTocFromMarkdawn(text: string, title?: string): TOC {
const toc: TOC = {

View File

@ -4,14 +4,14 @@ import { GetPostsPreviewQuery } from "graphql/generated";
import Link from "next/link";
import { prettyDate, prettySlug } from "queries/helpers";
export type PostPreviewProps = {
interface Props {
post: Exclude<
GetPostsPreviewQuery["posts"],
null | undefined
>["data"][number]["attributes"];
};
}
export default function PostPreview(props: PostPreviewProps): JSX.Element {
export default function PostPreview(props: Props): JSX.Element {
const { post } = props;
return (

View File

@ -1,12 +1,12 @@
import { Dispatch, SetStateAction } from "react";
import Button from "./Button";
type Props = {
interface Props {
className?: string;
maxPage: number;
page: number;
setPage: Dispatch<SetStateAction<number>>;
};
}
export default function PageSelector(props: Props): JSX.Element {
const { page, setPage, maxPage } = props;

View File

@ -2,7 +2,7 @@ import ToolTip from "components/ToolTip";
import { useRouter } from "next/router";
import { MouseEventHandler } from "react";
type NavOptionProps = {
interface Props {
url: string;
icon?: string;
title: string | null | undefined;
@ -10,9 +10,9 @@ type NavOptionProps = {
border?: boolean;
reduced?: boolean;
onClick?: MouseEventHandler<HTMLDivElement>;
};
}
export default function NavOption(props: NavOptionProps): JSX.Element {
export default function NavOption(props: Props): JSX.Element {
const router = useRouter();
const isActive = router.asPath.startsWith(props.url);
const divActive = "bg-mid shadow-inner-sm shadow-shade";

View File

@ -1,12 +1,12 @@
import HorizontalLine from "components/HorizontalLine";
type PanelHeaderProps = {
interface Props {
icon?: string;
title: string | null | undefined;
description?: string | null | undefined;
};
}
export default function PanelHeader(props: PanelHeaderProps): JSX.Element {
export default function PanelHeader(props: Props): JSX.Element {
return (
<>
<div className="w-full grid place-items-center">

View File

@ -3,14 +3,14 @@ import HorizontalLine from "components/HorizontalLine";
import { useAppLayout } from "contexts/AppLayoutContext";
import { AppStaticProps } from "queries/getAppStaticProps";
type ReturnButtonProps = {
interface Props {
href: string;
title: string | null | undefined;
langui: AppStaticProps["langui"];
displayOn: ReturnButtonType;
horizontalLine?: boolean;
className?: string;
};
}
export enum ReturnButtonType {
mobile = "mobile",
@ -18,7 +18,7 @@ export enum ReturnButtonType {
both = "both",
}
export default function ReturnButton(props: ReturnButtonProps): JSX.Element {
export default function ReturnButton(props: Props): JSX.Element {
const appLayout = useAppLayout();
return (

View File

@ -1,15 +1,15 @@
type ContentPanelProps = {
interface Props {
children: React.ReactNode;
autoformat?: boolean;
width?: ContentPanelWidthSizes;
};
}
export enum ContentPanelWidthSizes {
default = "default",
large = "large",
}
export default function ContentPanel(props: ContentPanelProps): JSX.Element {
export default function ContentPanel(props: Props): JSX.Element {
const width = props.width ? props.width : ContentPanelWidthSizes.default;
const widthCSS =
width === ContentPanelWidthSizes.default ? "max-w-2xl" : "w-full";

View File

@ -9,11 +9,11 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { AppStaticProps } from "queries/getAppStaticProps";
type MainPanelProps = {
interface Props {
langui: AppStaticProps["langui"];
};
}
export default function MainPanel(props: MainPanelProps): JSX.Element {
export default function MainPanel(props: Props): JSX.Element {
const { langui } = props;
const router = useRouter();
const isDesktop = useMediaDesktop();

View File

@ -1,8 +1,8 @@
type SubPanelProps = {
interface Props {
children: React.ReactNode;
};
}
export default function SubPanel(props: SubPanelProps): JSX.Element {
export default function SubPanel(props: Props): JSX.Element {
return (
<div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 text-center">
{props.children}

View File

@ -1,7 +1,7 @@
import { Dispatch, SetStateAction } from "react";
import Button from "./Button";
export type PopupProps = {
interface Props {
setState:
| Dispatch<SetStateAction<boolean | undefined>>
| Dispatch<SetStateAction<boolean>>;
@ -9,9 +9,9 @@ export type PopupProps = {
children: React.ReactNode;
fillViewport?: boolean;
hideBackground?: boolean;
};
}
export default function Popup(props: PopupProps): JSX.Element {
export default function Popup(props: Props): JSX.Element {
return (
<div
className={`fixed inset-0 z-50 grid place-content-center transition-[backdrop-filter] duration-500 ${

View File

@ -5,13 +5,13 @@ import Button from "./Button";
import Img, { ImageQuality } from "./Img";
import ToolTip from "./ToolTip";
type RecorderChipProps = {
interface Props {
className?: string;
recorder: RecorderChipFragment;
langui: AppStaticProps["langui"];
};
}
export default function RecorderChip(props: RecorderChipProps): JSX.Element {
export default function RecorderChip(props: Props): JSX.Element {
const { recorder, langui } = props;
return (
<ToolTip

View File

@ -1,12 +1,12 @@
import Image from "next/image";
export type SVGProps = {
interface Props {
src: string;
alt: string;
className?: string;
};
}
export default function SVG(props: SVGProps): JSX.Element {
export default function SVG(props: Props): JSX.Element {
return (
<div className={props.className}>
<Image

View File

@ -1,15 +1,15 @@
import { Dispatch, SetStateAction, useState } from "react";
export type SelectProps = {
interface Props {
setState: Dispatch<SetStateAction<number>>;
state: number;
options: string[];
selected?: number;
allowEmpty?: boolean;
className?: string;
};
}
export default function Select(props: SelectProps): JSX.Element {
export default function Select(props: Props): JSX.Element {
const [opened, setOpened] = useState(false);
return (

View File

@ -1,12 +1,12 @@
import { Dispatch, SetStateAction } from "react";
export type SwitchProps = {
interface Props {
setState: Dispatch<SetStateAction<boolean>>;
state: boolean;
className?: string;
};
}
export default function Switch(props: SwitchProps): JSX.Element {
export default function Switch(props: Props): JSX.Element {
return (
<div
className={`h-6 w-12 rounded-full border-2 border-mid grid transition-colors relative cursor-pointer ${

View File

@ -1,9 +1,9 @@
import Tippy, { TippyProps } from "@tippyjs/react";
import "tippy.js/animations/scale-subtle.css";
interface ToolTipProps extends TippyProps {}
interface Props extends TippyProps {}
export default function ToolTip(props: ToolTipProps): JSX.Element {
export default function ToolTip(props: Props): JSX.Element {
const newProps = { ...props };
// Set defaults

View File

@ -8,7 +8,7 @@ import {
prettyShortenNumber,
} from "queries/helpers";
export type Props = {
interface Props {
video: Exclude<
Exclude<
GetVideosPreviewQuery["videos"],
@ -16,7 +16,7 @@ export type Props = {
>["data"][number]["attributes"],
null | undefined
>;
};
}
export default function PostPreview(props: Props): JSX.Element {
const { video } = props;

View File

@ -2,7 +2,7 @@ import useDarkMode from "hooks/useDarkMode";
import useStateWithLocalStorage from "hooks/useStateWithLocalStorage";
import React, { ReactNode, useContext } from "react";
export interface AppLayoutState {
interface AppLayoutState {
subPanelOpen: boolean | undefined;
languagePanelOpen: boolean | undefined;
configPanelOpen: boolean | undefined;
@ -68,9 +68,9 @@ export function useAppLayout(): AppLayoutState {
return useContext(AppContext);
}
type Props = {
interface Props {
children: ReactNode;
};
}
export function AppContextProvider(props: Props): JSX.Element {
const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage<

View File

@ -1,36 +1,36 @@
query getVideoChannel($channel: String) {
videoChannels(filters: { uid: { eq: $channel } } ) {
data {
attributes {
uid
title
subscribers
videos (pagination:{limit: -1}) {
data {
id
attributes {
uid
title
views
duration
gone
categories {
data {
id
attributes {
short
}
}
}
published_date {
year
month
day
}
}
}
}
}
}
}
videoChannels(filters: { uid: { eq: $channel } }) {
data {
attributes {
uid
title
subscribers
videos(pagination: { limit: -1 }) {
data {
id
attributes {
uid
title
views
duration
gone
categories {
data {
id
attributes {
short
}
}
}
published_date {
year
month
day
}
}
}
}
}
}
}
}

View File

@ -1,9 +1,9 @@
query getVideoChannelsSlugs {
videoChannels(pagination: {limit: -1}) {
data {
attributes {
videoChannels(pagination: { limit: -1 }) {
data {
attributes {
uid
}
}
}
}
}
}

View File

@ -6,9 +6,9 @@ import ContentPanel from "components/Panels/ContentPanel";
import { GetStaticPropsContext } from "next";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
interface FourOhFourProps extends AppStaticProps {}
interface Props extends AppStaticProps {}
export default function FourOhFour(props: FourOhFourProps): JSX.Element {
export default function FourOhFour(props: Props): JSX.Element {
const { langui } = props;
const contentPanel = (
<ContentPanel>
@ -26,8 +26,8 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element {
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: FourOhFourProps }> {
const props: FourOhFourProps = {
): Promise<{ notFound: boolean } | { props: Props }> {
const props: Props = {
...(await getAppStaticProps(context)),
};
return {

View File

@ -6,9 +6,9 @@ import ContentPanel from "components/Panels/ContentPanel";
import { GetStaticPropsContext } from "next";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
interface FiveHundredProps extends AppStaticProps {}
interface Props extends AppStaticProps {}
export default function FiveHundred(props: FiveHundredProps): JSX.Element {
export default function FiveHundred(props: Props): JSX.Element {
const { langui } = props;
const contentPanel = (
<ContentPanel>
@ -26,8 +26,8 @@ export default function FiveHundred(props: FiveHundredProps): JSX.Element {
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: FiveHundredProps }> {
const props: FiveHundredProps = {
): Promise<{ notFound: boolean } | { props: Props }> {
const props: Props = {
...(await getAppStaticProps(context)),
};
return {

View File

@ -2,17 +2,17 @@ import type { NextApiRequest, NextApiResponse } from "next";
import nodemailer from "nodemailer";
import { SMTPError } from "nodemailer/lib/smtp-connection";
export type ResponseMailProps = {
export interface ResponseMailProps {
code?: string;
message?: string;
};
}
export type RequestMailProps = {
export interface RequestMailProps {
name: string;
email: string;
message: string;
formName: string;
};
}
export default async function Mail(
req: NextApiRequest,

View File

@ -1,7 +1,7 @@
import type { NextApiRequest, NextApiResponse } from "next";
import getConfig from "next/config";
export type RequestProps =
type RequestProps =
| HookRangedContent
| HookPostContent
| HookLibraryItem
@ -9,7 +9,7 @@ export type RequestProps =
| HookContent
| HookCustom;
export type HookRangedContent = {
type HookRangedContent = {
event: "entry.update" | "entry.delete" | "entry.create";
model: "ranged-content";
entry: {
@ -22,19 +22,19 @@ export type HookRangedContent = {
};
};
export type HookCustom = {
type HookCustom = {
model: "custom";
url: string;
};
export type HookContent = {
type HookContent = {
model: "content";
entry: {
slug: string;
};
};
export type HookPostContent = {
type HookPostContent = {
event: "entry.update" | "entry.delete" | "entry.create";
model: "post";
entry: {
@ -42,7 +42,7 @@ export type HookPostContent = {
};
};
export type HookLibraryItem = {
type HookLibraryItem = {
event: "entry.update" | "entry.delete" | "entry.create";
model: "library-item";
entry: {
@ -50,12 +50,12 @@ export type HookLibraryItem = {
};
};
export type HookChronology = {
type HookChronology = {
event: "entry.update" | "entry.delete" | "entry.create";
model: "chronology-era" | "chronology-item";
};
export type ResponseMailProps = {
type ResponseMailProps = {
message: string;
revalidated: boolean;
};

View File

@ -5,9 +5,9 @@ import SubPanel from "components/Panels/SubPanel";
import { GetStaticPropsContext } from "next";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
interface ArchivesProps extends AppStaticProps {}
interface Props extends AppStaticProps {}
export default function Archives(props: ArchivesProps): JSX.Element {
export default function Archives(props: Props): JSX.Element {
const { langui } = props;
const subPanel = (
<SubPanel>
@ -26,8 +26,8 @@ export default function Archives(props: ArchivesProps): JSX.Element {
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: ArchivesProps }> {
const props: ArchivesProps = {
): Promise<{ notFound: boolean } | { props: Props }> {
const props: Props = {
...(await getAppStaticProps(context)),
};
return {

View File

@ -72,7 +72,7 @@ export default function Videos(props: Props): JSX.Element {
className="mb-12"
/>
<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 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 && (

View File

@ -146,7 +146,9 @@ export default function Video(props: Props): JSX.Element {
<div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-4 text-center">
<h2 className="text-2xl">{"Channel"}</h2>
<div>
<Button href={`/archives/videos/c/${video.channel.data.attributes.uid}`}>
<Button
href={`/archives/videos/c/${video.channel.data.attributes.uid}`}
>
<h3>{video.channel.data.attributes.title}</h3>
</Button>

View File

@ -4,9 +4,9 @@ import SubPanel from "components/Panels/SubPanel";
import { GetStaticPropsContext } from "next";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
interface ChroniclesProps extends AppStaticProps {}
interface Props extends AppStaticProps {}
export default function Chronicles(props: ChroniclesProps): JSX.Element {
export default function Chronicles(props: Props): JSX.Element {
const { langui } = props;
const subPanel = (
<SubPanel>
@ -24,8 +24,8 @@ export default function Chronicles(props: ChroniclesProps): JSX.Element {
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: ChroniclesProps }> {
const props: ChroniclesProps = {
): Promise<{ notFound: boolean } | { props: Props }> {
const props: Props = {
...(await getAppStaticProps(context)),
};
return {

View File

@ -14,13 +14,13 @@ import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
import { prettyinlineTitle, prettySlug } from "queries/helpers";
import { useEffect, useState } from "react";
interface ContentsProps extends AppStaticProps {
interface Props extends AppStaticProps {
contents: Exclude<GetContentsQuery["contents"], null | undefined>["data"];
}
type GroupContentItems = Map<string, ContentsProps["contents"]>;
type GroupContentItems = Map<string, Props["contents"]>;
export default function Contents(props: ContentsProps): JSX.Element {
export default function Contents(props: Props): JSX.Element {
const { langui, contents } = props;
const [groupingMethod, setGroupingMethod] = useState<number>(-1);
@ -105,7 +105,7 @@ export default function Contents(props: ContentsProps): JSX.Element {
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: ContentsProps }> {
): Promise<{ notFound: boolean } | { props: Props }> {
const sdk = getReadySdk();
const contents = await sdk.getContents({
language_code: context.locale ?? "en",
@ -129,7 +129,7 @@ export async function getStaticProps(
return titleA.localeCompare(titleB);
});
const props: ContentsProps = {
const props: Props = {
...(await getAppStaticProps(context)),
contents: contents.contents.data,
};
@ -141,7 +141,7 @@ export async function getStaticProps(
function getGroups(
langui: AppStaticProps["langui"],
groupByType: number,
items: ContentsProps["contents"]
items: Props["contents"]
): GroupContentItems {
switch (groupByType) {
case 0: {

View File

@ -9,9 +9,9 @@ import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
import { useCallback, useState } from "react";
import { default as TurndownService } from "turndown";
interface EditorProps extends AppStaticProps {}
interface Props extends AppStaticProps {}
export default function Editor(props: EditorProps): JSX.Element {
export default function Editor(props: Props): JSX.Element {
const handleInput = useCallback((event) => {
setMarkdown(event.target.value);
}, []);
@ -91,8 +91,8 @@ export default function Editor(props: EditorProps): JSX.Element {
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: EditorProps }> {
const props: EditorProps = {
): Promise<{ notFound: boolean } | { props: Props }> {
const props: Props = {
...(await getAppStaticProps(context)),
};
return {

View File

@ -2,9 +2,9 @@ import AppLayout from "components/AppLayout";
import { GetStaticPropsContext } from "next";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
interface GalleryProps extends AppStaticProps {}
interface Props extends AppStaticProps {}
export default function Gallery(props: GalleryProps): JSX.Element {
export default function Gallery(props: Props): JSX.Element {
const { langui } = props;
const contentPanel = (
<iframe
@ -24,8 +24,8 @@ export default function Gallery(props: GalleryProps): JSX.Element {
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: GalleryProps }> {
const props: GalleryProps = {
): Promise<{ notFound: boolean } | { props: Props }> {
const props: Props = {
...(await getAppStaticProps(context)),
};
return {

View File

@ -4,8 +4,8 @@ import SubPanel from "components/Panels/SubPanel";
import { GetStaticPropsContext } from "next";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
interface MerchProps extends AppStaticProps {}
export default function Merch(props: MerchProps): JSX.Element {
interface Props extends AppStaticProps {}
export default function Merch(props: Props): JSX.Element {
const { langui } = props;
const subPanel = (
<SubPanel>
@ -22,8 +22,8 @@ export default function Merch(props: MerchProps): JSX.Element {
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: MerchProps }> {
const props: MerchProps = {
): Promise<{ notFound: boolean } | { props: Props }> {
const props: Props = {
...(await getAppStaticProps(context)),
};
return {

View File

@ -27,7 +27,7 @@ import {
prettySlug,
} from "queries/helpers";
interface PostProps extends AppStaticProps {
interface Props extends AppStaticProps {
post: Exclude<
GetPostQuery["posts"],
null | undefined
@ -38,7 +38,7 @@ interface PostProps extends AppStaticProps {
>["data"][number]["id"];
}
export default function LibrarySlug(props: PostProps): JSX.Element {
export default function LibrarySlug(props: Props): JSX.Element {
const { post, langui } = props;
const locales = getLocalesFromLanguages(post?.translations_languages);
const router = useRouter();
@ -145,7 +145,7 @@ export default function LibrarySlug(props: PostProps): JSX.Element {
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: PostProps }> {
): Promise<{ notFound: boolean } | { props: Props }> {
const sdk = getReadySdk();
const slug = context.params?.slug ? context.params.slug.toString() : "";
const post = await sdk.getPost({
@ -153,7 +153,7 @@ export async function getStaticProps(
language_code: context.locale ?? "en",
});
if (!post.posts?.data[0]) return { notFound: true };
const props: PostProps = {
const props: Props = {
...(await getAppStaticProps(context)),
post: post.posts.data[0].attributes,
postId: post.posts.data[0].id,

View File

@ -5,9 +5,9 @@ import SubPanel from "components/Panels/SubPanel";
import { GetStaticPropsContext } from "next";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
interface WikiProps extends AppStaticProps {}
interface Props extends AppStaticProps {}
export default function Wiki(props: WikiProps): JSX.Element {
export default function Wiki(props: Props): JSX.Element {
const { langui } = props;
const subPanel = (
<SubPanel>
@ -25,8 +25,8 @@ export default function Wiki(props: WikiProps): JSX.Element {
export async function getStaticProps(
context: GetStaticPropsContext
): Promise<{ notFound: boolean } | { props: WikiProps }> {
const props: WikiProps = {
): Promise<{ notFound: boolean } | { props: Props }> {
const props: Props = {
...(await getAppStaticProps(context)),
};
return {

View File

@ -336,12 +336,12 @@ export function convertMmToInch(mm: number | null | undefined): string {
return mm ? (mm * 0.03937008).toPrecision(3) : "";
}
export type OgImage = {
export interface OgImage {
image: string;
width: number;
height: number;
alt: string;
};
}
export function getOgImage(
quality: ImageQuality,