components/layout/layout.tsx (49 lines of code) (raw):
import React, { FC, useMemo } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import styles from './layout.module.css';
interface CommunityLayoutProps {
title: string;
description?: string;
ogImageName?: string;
darkTheme?: boolean;
children: React.ReactNode;
}
export const Layout: FC<CommunityLayoutProps> = ({ title, ogImageName, description, children, darkTheme }) => {
const router = useRouter();
const ogImagePath = useMemo(
() => `https://kotlinlang.org/assets/images/open-graph/${ogImageName ? ogImageName : 'general.png'}`,
[ogImageName]
);
const ogImageTwitterPath = useMemo(
() => (ogImageName ? ogImagePath : 'https://kotlinlang.org/assets/images/twitter/general.png'),
[ogImageName, ogImagePath]
);
return (
<>
<Head>
<title>{title}</title>
<meta property="og:title" content={title} />
<meta property="og:type" content="website" />
<meta property="og:url" content={'https://kotlinlang.org' + router.pathname} />
<meta property="og:image" content={ogImagePath} />
{description && <meta property="og:description" content={description} />}
{description && <meta name="description" content={description} />}
<meta property="og:site_name" content="Kotlin" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@kotlin" />
<meta name="twitter:title" content={title} />
{description && <meta name="twitter:description" content={description} />}
<meta name="twitter:image:src" content={ogImageTwitterPath} />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet" />
</Head>
<div className={styles.wrapper}>
{children}
</div>
</>
);
};
function addTrailingSlash(path: string): string {
return path.endsWith('/') ? path : `${path}/`;
}