www/components/title.tsx

71 lines
2.1 KiB
TypeScript

import Link from 'next/link';
import { useRouter } from 'next/router';
import style from '../styles/title.module.css';
import SiteMap from '../public/sitemap.json';
import Head from 'next/head';
import { SiteSubPages } from '../lib/site';
function createPathElements(ancestors: Array<{ name: string, path: string }>) {
let currentPath = '';
return ancestors.map((ancestor, id) => {
currentPath += `/${ancestor.path}`
return (
<>
<Link key={id + 1} href={currentPath}>{ancestor.name}</Link>
<> / </>
</>
);
});
}
function Title() {
const router = useRouter();
const pagePath = router.asPath;
const splitPath: Array<{ name: string, path: string }> = [];
let currRoot: SiteSubPages = SiteMap.subpages;
let title: string | null = null;
if (pagePath !== '/') {
const subPaths = pagePath.split('?')[0].split('#')[0].split('/');
for (const p of subPaths.slice(1, subPaths.length)) {
if (!p)
continue;
splitPath.push({ name: currRoot[p].title, path: p });
if (currRoot === undefined
|| currRoot[p] === undefined
|| currRoot[p].subpages === undefined)
break;
currRoot = currRoot[p].subpages!;
}
if (splitPath !== undefined && splitPath.length > 0)
title = splitPath.pop()!.name;
}
const pathElements = splitPath && createPathElements(splitPath) || <></>;
return (
<>
<Head>
<title>{title && `${title} | PaulW.XYZ` || 'PaulW.XYZ'}</title>
</Head>
<div className={style.container}>
<h1 className={style.title}>
{title || 'PaulW.XYZ'}
</h1>
</div>
<div className={`${style.nav} h1`}>
{
title
? <><Link href='/'>PaulW.XYZ</Link> / {pathElements}{title}</>
: <>PaulW.XYZ /</>
}
</div>
</>
);
}
export default Title;