Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-16 19:43:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): show package members in a sidebar (#8245)

Browse Source 
* feat(website): show package members in a sidebar

* fix: put response instead of loader

* Apply suggestions from code review

Co-authored-by: Noel <buechler.noel@outlook.com>

* chore: make requested changes

* refactor: make only package list scrollable

* feat: make sidebar mobile responsive

* fix: breakpoints for sidebar

Co-authored-by: Noel <buechler.noel@outlook.com>
This commit is contained in:
Suneet Tipirneni
2022-07-07 16:09:19 -04:00
committed by GitHub
parent 43f62bb667
commit e78c9c9ee9
18 changed files with 156 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/website/src/routes/docs/$branchName/packages/$packageName/index.tsx → packages/website/src/routes/docs/$branchName/packages/$packageName.tsx
View File

@@ -1,19 +1,32 @@
/* eslint-disable @typescript-eslint/no-throw-literal */
import { json } from '@remix-run/node';
import { Params, useLoaderData } from '@remix-run/react';
import { Outlet, Params, useLoaderData, useParams } from '@remix-run/react';
import { ItemSidebar } from '~/components/ItemSidebar';
import { createApiModel } from '~/util/api-model.server';
import { findPackage, getMembers } from '~/util/parse.server';
export async function loader({ params }: { params: Params }) {
const UnknownResponse = new Response('Not Found', {
status: 404,
});
const res = await fetch(
`https://raw.githubusercontent.com/discordjs/docs/main/${params.packageName!}/${params.branchName!}.api.json`,
);
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const data = await res.json();
const model = createApiModel(data);
const data = await res.json().catch(() => {
throw UnknownResponse;
});
const model = createApiModel(data);
const pkg = findPackage(model, params.packageName!);
if (!pkg) {
throw UnknownResponse;
}
return json({
members: getMembers(pkg!),
members: getMembers(pkg),
});
}
@@ -23,14 +36,16 @@ interface LoaderData {
export default function Package() {
const data = useLoaderData<LoaderData>();
const { packageName } = useParams();
return (
<ul>
{data.members.map((member, i) => (
<li key={i}>
<a href={member.path}>{member.name}</a>
</li>
))}
</ul>
<div className="flex flex-col lg:flex-row overflow-none max-w-full h-full">
<div className="w-full lg:min-w-1/4 lg:max-w-1/4">
<ItemSidebar packageName={packageName!} data={data} />
</div>
<div>
<Outlet />
</div>
</div>
);
}