refactor: include item kind into url

This commit is contained in:
iCrawl
2022-08-23 05:13:53 +02:00
parent 206523587a
commit 11e02f1e5d
3 changed files with 39 additions and 37 deletions

View File

@@ -129,7 +129,7 @@ export function SidebarLayout({
</Menu.Item> </Menu.Item>
)) ?? []; )) ?? [];
const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0]; const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0];
const breadcrumbs = asPathWithoutQueryAndAnchor?.split('/').map((path, idx, original) => ( const breadcrumbs = asPathWithoutQueryAndAnchor?.split('/').map((path, idx, original) => (
<Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref> <Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref>
<Anchor component="a">{path}</Anchor> <Anchor component="a">{path}</Anchor>

View File

@@ -2,7 +2,7 @@ import { readFile } from 'node:fs/promises';
import { join } from 'node:path'; import { join } from 'node:path';
import { Affix, Box, Button, LoadingOverlay, Transition } from '@mantine/core'; import { Affix, Box, Button, LoadingOverlay, Transition } from '@mantine/core';
import { useMediaQuery, useWindowScroll } from '@mantine/hooks'; import { useMediaQuery, useWindowScroll } from '@mantine/hooks';
import { ApiFunction, type ApiPackage } from '@microsoft/api-extractor-model'; import { ApiFunction, ApiItemKind, type ApiPackage } from '@microsoft/api-extractor-model';
import { MDXRemote } from 'next-mdx-remote'; import { MDXRemote } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize'; import { serialize } from 'next-mdx-remote/serialize';
import Head from 'next/head'; import Head from 'next/head';
@@ -66,25 +66,29 @@ export const getStaticPaths: GetStaticPaths = async () => {
const pkgs = models.map((model) => findPackage(model, packageName)) as ApiPackage[]; const pkgs = models.map((model) => findPackage(model, packageName)) as ApiPackage[];
return [ return [
{ params: { slug: ['packages', packageName, 'main'] } },
...versions.map((version) => ({ params: { slug: ['packages', packageName, version] } })), ...versions.map((version) => ({ params: { slug: ['packages', packageName, version] } })),
...pkgs ...pkgs
.map((pkg, idx) => .map((pkg, idx) =>
getMembers(pkg, versions[idx]!) getMembers(pkg, versions[idx]!).map((member) => {
// Filtering out enum `RESTEvents` because of interface with similar name `RestEvents` if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
// causing next.js export to error return {
.filter((member) => member.name !== 'RESTEvents') params: {
.map((member) => { slug: [
if (member.kind === 'Function' && member.overloadIndex && member.overloadIndex > 1) { 'packages',
return { packageName,
params: { versions[idx]!,
slug: ['packages', packageName, versions[idx]!, `${member.name}:${member.overloadIndex}`], `${member.name}:${member.overloadIndex}:${member.kind}`,
}, ],
}; },
} };
}
return { params: { slug: ['packages', packageName, versions[idx]!, member.name] } }; return {
}), params: {
slug: ['packages', packageName, versions[idx]!, `${member.name}:${member.kind}`],
},
};
}),
) )
.flat(), .flat(),
]; ];
@@ -95,21 +99,17 @@ export const getStaticPaths: GetStaticPaths = async () => {
return [ return [
{ params: { slug: ['packages', packageName, 'main'] } }, { params: { slug: ['packages', packageName, 'main'] } },
...getMembers(pkg!, 'main') ...getMembers(pkg!, 'main').map((member) => {
// Filtering out enum `RESTEvents` because of interface with similar name `RestEvents` if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
// causing next.js export to error return {
.filter((member) => member.name !== 'RESTEvents') params: {
.map((member) => { slug: ['packages', packageName, 'main', `${member.name}:${member.overloadIndex}:${member.kind}`],
if (member.kind === 'Function' && member.overloadIndex && member.overloadIndex > 1) { },
return { };
params: { }
slug: ['packages', packageName, 'main', `${member.name}:${member.overloadIndex}`],
},
};
}
return { params: { slug: ['packages', packageName, 'main', member.name] } }; return { params: { slug: ['packages', packageName, 'main', `${member.name}:${member.kind}`] } };
}), }),
]; ];
} catch { } catch {
return { params: { slug: [] } }; return { params: { slug: [] } };
@@ -120,7 +120,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
return { return {
paths: pkgs, paths: pkgs,
fallback: 'blocking', fallback: true,
}; };
}; };
@@ -159,7 +159,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
const pkg = findPackage(model, packageName); const pkg = findPackage(model, packageName);
let { containerKey, name } = findMember(model, packageName, memberName, branchName) ?? {}; let { containerKey, name } = findMember(model, packageName, memberName, branchName) ?? {};
if (name && overloadIndex) { if (name && overloadIndex && !Number.isNaN(parseInt(overloadIndex, 10))) {
containerKey = ApiFunction.getContainerKey(name, parseInt(overloadIndex, 10)); containerKey = ApiFunction.getContainerKey(name, parseInt(overloadIndex, 10));
} }
@@ -209,6 +209,8 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
const [scroll, scrollTo] = useWindowScroll(); const [scroll, scrollTo] = useWindowScroll();
const matches = useMediaQuery('(max-width: 1200px)', true, { getInitialValueInEffect: false }); const matches = useMediaQuery('(max-width: 1200px)', true, { getInitialValueInEffect: false });
const name = `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`;
if (router.isFallback) { if (router.isFallback) {
return ( return (
<SidebarLayout> <SidebarLayout>
@@ -225,7 +227,7 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
{props.data?.member ? ( {props.data?.member ? (
<> <>
<Head> <Head>
<title key="title">discord.js | {props.data.member.name}</title> <title key="title">{name}</title>
</Head> </Head>
{member(props.data.member)} {member(props.data.member)}
<Affix position={{ bottom: 20, right: matches ? 20 : 280 }}> <Affix position={{ bottom: 20, right: matches ? 20 : 280 }}>

View File

@@ -40,17 +40,17 @@ export function generatePath(items: readonly ApiItem[], version: string) {
const functionItem = item as ApiFunction; const functionItem = item as ApiFunction;
path += `/${functionItem.displayName}${ path += `/${functionItem.displayName}${
functionItem.overloadIndex && functionItem.overloadIndex > 1 ? `:${functionItem.overloadIndex}` : '' functionItem.overloadIndex && functionItem.overloadIndex > 1 ? `:${functionItem.overloadIndex}` : ''
}`; }:${item.kind}`;
break; break;
case ApiItemKind.Property: case ApiItemKind.Property:
case ApiItemKind.Method: case ApiItemKind.Method:
case ApiItemKind.MethodSignature: case ApiItemKind.MethodSignature:
case ApiItemKind.PropertySignature: case ApiItemKind.PropertySignature:
// TODO: Take overloads into account // TODO: Take overloads into account
path += `#${item.displayName}`; path += `#${item.displayName}:${item.kind}`;
break; break;
default: default:
path += `/${item.displayName}`; path += `/${item.displayName}:${item.kind}`;
} }
} }