Made props types more consistent

src/components/AppLayout.tsx

@@ -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();

src/components/Button.tsx

@@ -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 = (

src/components/Chip.tsx

@@ -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}`}

src/components/Chronology/ChronologyItemComponent.tsx

@@ -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(
+export default function ChronologyItemComponent(props: Props): JSX.Element {
-  props: ChronologyItemComponentProps
-): JSX.Element {
   const { langui } = props;
 
   function generateAnchor(

src/components/Chronology/ChronologyYearComponent.tsx

@@ -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(
+export default function ChronologyYearComponent(props: Props): JSX.Element {
-  props: ChronologyYearComponentProps
-): JSX.Element {
   const { langui } = props;
 
   return (

src/components/Content/ThumbnailHeader.tsx

@@ -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(
+export default function ThumbnailHeader(props: Props): JSX.Element {
-  props: ThumbnailHeaderProps
-): JSX.Element {
   const {
     langui,
     pre_title,

src/components/HorizontalLine.tsx

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

src/components/Img.tsx

@@ -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 <></>;
-}

src/components/InsetBox.tsx

@@ -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}

src/components/LanguageSwitcher.tsx

@@ -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;

src/components/Library/ContentTOCLine.tsx

@@ -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(
+export default function ContentTOCLine(props: Props): JSX.Element {
-  props: ContentTOCLineProps
-): JSX.Element {
   const { content, langui, parentSlug } = props;
 
   const [opened, setOpened] = useState(false);

src/components/Library/LibraryContentPreview.tsx

@@ -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(
+export default function LibraryContentPreview(props: Props): JSX.Element {
-  props: LibraryContentPreviewProps
-): JSX.Element {
   const { item } = props;
 
   return (

src/components/Library/LibraryItemsPreview.tsx

@@ -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(
+export default function LibraryItemsPreview(props: Props): JSX.Element {
-  props: LibraryItemsPreviewProps
-): JSX.Element {
   const { item } = props;
   const appLayout = useAppLayout();
 

src/components/LightBox.tsx

@@ -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();
 

src/components/Markdown/Markdawn.tsx

@@ -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);
 

src/components/Markdown/TOC.tsx

@@ -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 = {

src/components/News/PostsPreview.tsx

@@ -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 (

src/components/PageSelector.tsx

@@ -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;

src/components/PanelComponents/NavOption.tsx

@@ -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";

src/components/PanelComponents/PanelHeader.tsx

@@ -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">

src/components/PanelComponents/ReturnButton.tsx

@@ -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 (

src/components/Panels/ContentPanel.tsx

@@ -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";

src/components/Panels/MainPanel.tsx

@@ -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();

src/components/Panels/SubPanel.tsx

@@ -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}

src/components/Popup.tsx

@@ -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 ${

src/components/RecorderChip.tsx

@@ -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

src/components/SVG.tsx

@@ -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

src/components/Select.tsx

@@ -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 (

src/components/Switch.tsx

@@ -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 ${

src/components/ToolTip.tsx

@@ -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

src/components/Videos/VideoPreview.tsx

@@ -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;

src/contexts/AppLayoutContext.tsx

@@ -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<

src/graphql/operations/getVideoChannel.graphql

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

src/graphql/operations/getVideoChannelsSlugs.graphql

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

src/pages/404.tsx

@@ -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 }> {
+): Promise<{ notFound: boolean } | { props: Props }> {
-  const props: FourOhFourProps = {
+  const props: Props = {
     ...(await getAppStaticProps(context)),
   };
   return {

src/pages/500.tsx

@@ -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 }> {
+): Promise<{ notFound: boolean } | { props: Props }> {
-  const props: FiveHundredProps = {
+  const props: Props = {
     ...(await getAppStaticProps(context)),
   };
   return {

src/pages/api/mail.ts

@@ -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,

src/pages/api/revalidate.ts

@@ -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;
 };

src/pages/archives/index.tsx

@@ -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 }> {
+): Promise<{ notFound: boolean } | { props: Props }> {
-  const props: ArchivesProps = {
+  const props: Props = {
     ...(await getAppStaticProps(context)),
   };
   return {

src/pages/archives/videos/index.tsx

@@ -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 && (

src/pages/archives/videos/v/[uid].tsx

@@ -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>
 

src/pages/chronicles/index.tsx

@@ -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 }> {
+): Promise<{ notFound: boolean } | { props: Props }> {
-  const props: ChroniclesProps = {
+  const props: Props = {
     ...(await getAppStaticProps(context)),
   };
   return {

src/pages/contents/index.tsx

@@ -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: {

src/pages/editor.tsx

@@ -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 }> {
+): Promise<{ notFound: boolean } | { props: Props }> {
-  const props: EditorProps = {
+  const props: Props = {
     ...(await getAppStaticProps(context)),
   };
   return {

src/pages/gallery/index.tsx

@@ -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 }> {
+): Promise<{ notFound: boolean } | { props: Props }> {
-  const props: GalleryProps = {
+  const props: Props = {
     ...(await getAppStaticProps(context)),
   };
   return {

src/pages/merch/index.tsx

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

src/pages/news/[slug].tsx

@@ -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,

src/pages/wiki/index.tsx

@@ -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 }> {
+): Promise<{ notFound: boolean } | { props: Props }> {
-  const props: WikiProps = {
+  const props: Props = {
     ...(await getAppStaticProps(context)),
   };
   return {

src/queries/helpers.ts

@@ -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,