2023-09-20 00:25:34 -04:00
|
|
|
import Link from 'next/link';
|
2023-10-30 00:18:38 -04:00
|
|
|
import { useRouter } from 'next/router';
|
2024-12-28 12:23:50 -05:00
|
|
|
import { Fragment } from 'react';
|
2023-09-20 00:25:34 -04:00
|
|
|
|
|
|
|
|
import style from '../styles/title.module.css';
|
2023-10-30 00:18:38 -04:00
|
|
|
import SiteMap from '../public/sitemap.json';
|
|
|
|
|
import Head from 'next/head';
|
2024-12-28 12:23:50 -05:00
|
|
|
import { Sites } from '../lib/site';
|
2023-09-20 00:25:34 -04:00
|
|
|
|
|
|
|
|
function createPathElements(ancestors: Array<{ name: string, path: string }>) {
|
|
|
|
|
let currentPath = '';
|
|
|
|
|
return ancestors.map((ancestor, id) => {
|
|
|
|
|
currentPath += `/${ancestor.path}`
|
|
|
|
|
return (
|
2024-12-28 12:23:50 -05:00
|
|
|
<Fragment key={currentPath} >
|
|
|
|
|
<Link href={currentPath}>{ancestor.name}</Link>
|
2023-09-20 00:25:34 -04:00
|
|
|
<> / </>
|
2024-12-28 12:23:50 -05:00
|
|
|
</Fragment>
|
2023-09-20 00:25:34 -04:00
|
|
|
);
|
|
|
|
|
});
|
2024-02-13 18:01:07 -05:00
|
|
|
}
|
2023-09-20 00:25:34 -04:00
|
|
|
|
2023-10-30 00:18:38 -04:00
|
|
|
function Title() {
|
|
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const pagePath = router.asPath;
|
|
|
|
|
const splitPath: Array<{ name: string, path: string }> = [];
|
|
|
|
|
|
2024-12-28 12:23:50 -05:00
|
|
|
// TODO(Paul): clean this up
|
|
|
|
|
let currRoot: Sites = SiteMap.pages;
|
2023-10-30 00:18:38 -04:00
|
|
|
let title: string | null = null;
|
|
|
|
|
if (pagePath !== '/') {
|
2024-10-02 22:47:34 -04:00
|
|
|
const subPaths = pagePath.split('?')[0].split('#')[0].split('/');
|
2023-10-30 00:18:38 -04:00
|
|
|
for (const p of subPaths.slice(1, subPaths.length)) {
|
2024-10-10 00:51:55 -04:00
|
|
|
if (!p)
|
|
|
|
|
continue;
|
2023-10-30 00:18:38 -04:00
|
|
|
splitPath.push({ name: currRoot[p].title, path: p });
|
2024-02-13 18:01:07 -05:00
|
|
|
|
2023-10-30 00:18:38 -04:00
|
|
|
if (currRoot === undefined
|
|
|
|
|
|| currRoot[p] === undefined
|
2024-12-28 12:23:50 -05:00
|
|
|
|| currRoot[p].pages === undefined)
|
2024-02-13 18:01:07 -05:00
|
|
|
break;
|
2024-12-28 12:23:50 -05:00
|
|
|
currRoot = currRoot[p].pages!;
|
2023-10-30 00:18:38 -04:00
|
|
|
}
|
|
|
|
|
if (splitPath !== undefined && splitPath.length > 0)
|
|
|
|
|
title = splitPath.pop()!.name;
|
|
|
|
|
|
|
|
|
|
}
|
2023-09-20 00:25:34 -04:00
|
|
|
|
2023-10-30 00:18:38 -04:00
|
|
|
const pathElements = splitPath && createPathElements(splitPath) || <></>;
|
2023-09-20 00:25:34 -04:00
|
|
|
return (
|
|
|
|
|
<>
|
2023-10-30 00:18:38 -04:00
|
|
|
<Head>
|
|
|
|
|
<title>{title && `${title} | PaulW.XYZ` || 'PaulW.XYZ'}</title>
|
|
|
|
|
</Head>
|
2023-09-20 00:25:34 -04:00
|
|
|
<div className={style.container}>
|
|
|
|
|
<h1 className={style.title}>
|
2023-10-30 00:18:38 -04:00
|
|
|
{title || 'PaulW.XYZ'}
|
2023-09-20 00:25:34 -04:00
|
|
|
</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={`${style.nav} h1`}>
|
2024-02-13 18:01:07 -05:00
|
|
|
{
|
|
|
|
|
title
|
|
|
|
|
? <><Link href='/'>PaulW.XYZ</Link> / {pathElements}{title}</>
|
|
|
|
|
: <>PaulW.XYZ /</>
|
|
|
|
|
}
|
2023-09-20 00:25:34 -04:00
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Title;
|
