Skip to content

Commit

Permalink
refactor: simplify path logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@iCrawl
iCrawl committed Oct 11, 2022
1 parent c39faa9 commit f92be4f
Show file tree
Hide file tree
Showing 11 changed files with 46 additions and 50 deletions.
2 changes: 1 addition & 1 deletion apps/website/src/components/CmdK.tsx
View file
Expand Up @@ -52,7 +52,7 @@ export function CmdKDialog({
() =>
searchResults?.map((item) => (
<Command.Item
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex flex transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
key={item.id}
onSelect={() => {
void router.push(item.path);
Expand Down
6 changes: 3 additions & 3 deletions apps/website/src/components/CodeListing.tsx
View file
Expand Up @@ -45,17 +45,17 @@ export function CodeListing({
{deprecation || readonly || optional ? (
<div className="flex flex-row gap-1">
{deprecation ? (
<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</div>
) : null}
{readonly ? (
<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Readonly
</div>
) : null}
{optional ? (
<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Optional
</div>
) : null}
Expand Down
6 changes: 3 additions & 3 deletions apps/website/src/components/MethodItem.tsx
View file
Expand Up @@ -47,17 +47,17 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
(data.kind === 'Method' && method.static) ? (
<div className="flex flex-row gap-1">
{data.deprecated ? (
<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</div>
) : null}
{data.kind === 'Method' && method.protected ? (
<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Protected
</div>
) : null}
{data.kind === 'Method' && method.static ? (
<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Static
</div>
) : null}
Expand Down
4 changes: 2 additions & 2 deletions apps/website/src/components/Sections.tsx
View file
Expand Up @@ -66,12 +66,12 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
{data.deprecated || data.protected ? (
<div className="flex flex-row gap-1">
{data.deprecated ? (
<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</div>
) : null}
{data.protected ? (
<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Protected
</div>
) : null}
Expand Down
13 changes: 4 additions & 9 deletions apps/website/src/components/SidebarItems.tsx
View file
@@ -1,7 +1,6 @@
import { Section } from '@discordjs/ui';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { type Dispatch, type SetStateAction, useEffect, useState, useMemo } from 'react';
import { type Dispatch, type SetStateAction, useMemo } from 'react';
import {
VscSymbolClass,
VscSymbolEnum,
Expand Down Expand Up @@ -68,18 +67,14 @@ function resolveIcon(item: keyof GroupedMembers) {
export function SidebarItems({
members,
setOpened,
asPath,
}: {
asPath: string;
members: Members;
setOpened: Dispatch<SetStateAction<boolean>>;
}) {
const router = useRouter();
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
const groupItems = useMemo(() => groupMembers(members), [members]);

useEffect(() => {
setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');
}, [router.asPath]);

return (
<div className="flex flex-col gap-3 p-3 pb-32 lg:pb-12">
{(Object.keys(groupItems) as (keyof GroupedMembers)[])
Expand All @@ -90,7 +85,7 @@ export function SidebarItems({
<Link href={member.path} key={index} prefetch={false}>
<a
className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
asPathWithoutQueryAndAnchor === member.path
asPath === member.path
? 'bg-blurple text-white'
: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
}`}
Expand Down
33 changes: 14 additions & 19 deletions apps/website/src/components/SidebarLayout.tsx
View file
@@ -1,9 +1,8 @@
import type { getMembers, ApiItemJSON, ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
import type { getMembers, ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
import { Button } from 'ariakit/button';
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
import Image from 'next/future/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
import { useTheme } from 'next-themes';
import { type PropsWithChildren, useState, useEffect, useMemo, Fragment } from 'react';
Expand All @@ -29,15 +28,14 @@ import { fetcher } from '~/util/fetcher';
import type { findMember } from '~/util/model.server';

export interface SidebarLayoutProps {
asPath: string;
branchName: string;
data: {
member: ReturnType<typeof findMember>;
member?: ReturnType<typeof findMember>;
members: ReturnType<typeof getMembers>;
source: MDXRemoteSerializeResult;
};
packageName: string;

selectedMember?: ApiItemJSON | undefined;
}

export type Members = SidebarLayoutProps['data']['members'];
Expand All @@ -55,11 +53,10 @@ export function SidebarLayout({
packageName,
branchName,
data,
asPath,
children,
}: PropsWithChildren<Partial<SidebarLayoutProps>>) {
const router = useRouter();
}: PropsWithChildren<SidebarLayoutProps>) {
const dialog = useCmdK();
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
const { data: versions } = useSWR<string[]>(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher);
const { resolvedTheme, setTheme } = useTheme();
const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
Expand All @@ -75,9 +72,7 @@ export function SidebarLayout({
}
}, [matches]);

useEffect(() => {
setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0] ?? '');
}, [router.asPath]);
const asPathWithoutContainerKey = useMemo(() => asPath?.split(':')[0] ?? '', [asPath]);

const packageMenuItems = useMemo(
() => [
Expand Down Expand Up @@ -129,15 +124,15 @@ export function SidebarLayout({

const pathElements = useMemo(
() =>
asPathWithoutQueryAndAnchor
asPathWithoutContainerKey
.split('/')
.slice(1)
.map((path, idx, original) => (
<Link href={`/${original.slice(0, idx + 1).join('/')}`} key={idx} prefetch={false}>
<a className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring">{path}</a>
</Link>
)),
[asPathWithoutQueryAndAnchor],
[asPathWithoutContainerKey],
);

const breadcrumbs = useMemo(
Expand Down Expand Up @@ -174,12 +169,12 @@ export function SidebarLayout({
<div className="flex h-full flex-row place-content-between place-items-center">
<Button
aria-label="Menu"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
onClick={() => setOpened((open) => !open)}
>
<VscMenu size={24} />
</Button>
<div className="hidden md:flex md:flex-row">{breadcrumbs}</div>
<div className="hidden md:flex md:flex-row md:overflow-hidden">{breadcrumbs}</div>
<div className="flex flex-row place-items-center gap-4">
<Button
as="div"
Expand All @@ -189,15 +184,15 @@ export function SidebarLayout({
<div className="flex flex-row place-items-center gap-4">
<VscSearch size={18} />
<span className="opacity-65">Search...</span>
<div className="opacity-65 flex flex-row place-items-center gap-2">
<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
<FiCommand size={18} /> K
</div>
</div>
</Button>
<Button
aria-label="GitHub"
as="a"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"
Expand All @@ -206,7 +201,7 @@ export function SidebarLayout({
</Button>
<Button
aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
onClick={() => toggleTheme()}
>
<VscColorMode size={24} />
Expand Down Expand Up @@ -277,7 +272,7 @@ export function SidebarLayout({
{versionMenuItems}
</Menu>
</div>
<SidebarItems members={data?.members ?? []} setOpened={setOpened} />
<SidebarItems asPath={asPath} members={data?.members ?? []} setOpened={setOpened} />
</Scrollbars>
</nav>
<main
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/pages/404.tsx
View file
Expand Up @@ -12,7 +12,7 @@ export default function FourOhFourPage() {
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link href="/docs/packages" prefetch={false}>
<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
Take me back
</a>
</Link>
Expand Down
12 changes: 9 additions & 3 deletions apps/website/src/pages/docs/[...slug].tsx
View file
Expand Up @@ -20,7 +20,7 @@ import { useRouter } from 'next/router';
import type { GetStaticPaths, GetStaticProps } from 'next/types';
import { MDXRemote } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize';
import { useMemo } from 'react';
import { useEffect, useMemo, useState } from 'react';
import rehypeIgnore from 'rehype-ignore';
import rehypePrettyCode, { type Options } from 'rehype-pretty-code';
import rehypeRaw from 'rehype-raw';
Expand Down Expand Up @@ -280,8 +280,10 @@ function member(props?: ApiItemJSON | undefined) {
}
}

export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: string }>) {
export default function SlugPage(props: SidebarLayoutProps & { error?: string }) {
const router = useRouter();
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');

const name = useMemo(
() => `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`,
[props.data?.member?.name],
Expand All @@ -295,6 +297,10 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
[props.packageName, props.data?.member],
);

useEffect(() => {
setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');
}, [router.asPath]);

if (router.isFallback) {
return null;
}
Expand All @@ -307,7 +313,7 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
) : (
<CmdKProvider>
<MemberProvider member={props.data?.member}>
<SidebarLayout {...props}>
<SidebarLayout {...props} asPath={asPathWithoutQueryAndAnchor}>
{props.data?.member ? (
<>
<Head>
Expand Down
4 changes: 2 additions & 2 deletions apps/website/src/pages/docs/packages/[package]/index.tsx
View file
Expand Up @@ -71,7 +71,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
<h1 className="text-2xl font-semibold">Select a version:</h1>
{props.data?.versions.map((version) => (
<Link href={`/docs/packages/${props.packageName}/${version}`} key={version} prefetch={false}>
<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white">
<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white">
<div className="flex flex-row place-content-between place-items-center gap-4">
<div className="flex flex-row place-content-between place-items-center gap-4">
<VscVersions size={25} />
Expand All @@ -83,7 +83,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
</Link>
)) ?? null}
<Link href="/docs/packages" prefetch={false}>
<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
<VscArrowLeft size={20} /> Go back
</a>
</Link>
Expand Down

1 comment on commit f92be4f

@vercel
Copy link

@vercel vercel bot commented on f92be4f Oct 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

discord-js – ./apps/website

www.discordjs.dev
discord-js-discordjs.vercel.app
discord-js-git-main-discordjs.vercel.app
discord-js-number-one.vercel.app
discordjs.dev

Please sign in to comment.