80 lines
2.8 KiB
XML
80 lines
2.8 KiB
XML
import type { AppProps } from "next/app";
|
||
import Head from "next/head";
|
||
import MainPanel from "components/Panels/MainPanel";
|
||
import "styles/globals.css";
|
||
|
||
function AccordsLibraryApp({ Component, pageProps }: AppProps) {
|
||
/* [BIG HACK]
|
||
Yes this is probably terrible, I'm trying to apply a different style to my appContainer div
|
||
depending on if the page uses a subpanel or contentpanel, or both, or neither. This is because
|
||
I want the first column to be always 20rem, the second one to be 20rem when it's the subbar, but
|
||
1fr if it's the content...
|
||
|
||
Anyway, there is probably a much better way to do this, it it might backfire in my face in the future
|
||
Much love,
|
||
|
||
Mint
|
||
*/
|
||
|
||
const componentProcessed = Component(pageProps);
|
||
let useSubPanel = false;
|
||
let useContentPanel = false;
|
||
|
||
const children = componentProcessed.props.children;
|
||
|
||
if (Array.isArray(children)) {
|
||
children.forEach((child) => {
|
||
if (child.type.name === "SubPanel") {
|
||
useSubPanel = true;
|
||
} else if (child.type.name === "ContentPanel") {
|
||
useContentPanel = true;
|
||
}
|
||
});
|
||
} else {
|
||
if (children.type.name === "SubPanel") {
|
||
useSubPanel = true;
|
||
} else if (children.type.name === "ContentPanel") {
|
||
useContentPanel = true;
|
||
}
|
||
}
|
||
|
||
let additionalClasses = "";
|
||
if (useSubPanel) additionalClasses += " withSubPanel";
|
||
if (useContentPanel) additionalClasses += " withContentPanel";
|
||
|
||
/* [End of BIG HACK] */
|
||
|
||
const siteTitle =
|
||
"Accord's Library - Discover • Analyse • Translate • Archive";
|
||
const siteDescription =
|
||
"Accord's Library aims at gathering and archiving all of Yoko Taro’s work. Yoko Taro is a Japanese video game director and scenario writer.";
|
||
const siteFavicon = "/favicon.png";
|
||
const thumbnailImage = "/default_og.jpg";
|
||
|
||
return (
|
||
<div className={"appContainer" + additionalClasses}>
|
||
<Head>
|
||
<title>{siteTitle}</title>
|
||
<meta name="description" content={siteDescription} />
|
||
<link rel="icon" href={siteFavicon} />
|
||
<meta property="og:image" content={thumbnailImage}></meta>
|
||
<meta property="og:image:secure_url" content={thumbnailImage}></meta>
|
||
<meta property="og:image:width" content="1200"></meta>
|
||
<meta property="og:image:height" content="630"></meta>
|
||
<meta property="og:image:alt" content="Accord's Library"></meta>
|
||
<meta property="og:image:type" content="image/jpeg"></meta>
|
||
<meta name="twitter:card" content="summary_large_image"></meta>
|
||
<meta name="twitter:title" content={siteTitle}></meta>
|
||
<meta name="twitter:description" content={siteDescription}></meta>
|
||
<meta name="twitter:image" content={thumbnailImage}></meta>
|
||
</Head>
|
||
|
||
<MainPanel />
|
||
|
||
{componentProcessed}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default AccordsLibraryApp;
|