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

fix: codeblock background and other mobile issues (#10892)

Browse Source 
* fix: codeblock background

* fix: horizontal scroll on properties

* fix: badge text wrapping

* fix: wrap overload tab list
This commit is contained in:
Almeida
2025-05-07 22:17:09 +01:00
committed by GitHub
parent 436784f945
commit f686c83b18
6 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/website/src/components/Badges.tsx
View File

@@ -4,7 +4,7 @@ import type { PropsWithChildren } from 'react';
export function Badge({ children, className = '' }: PropsWithChildren<{ readonly className?: string }>) { export function Badge({ children, className = '' }: PropsWithChildren<{ readonly className?: string }>) {
return ( return (
<span <span
className={`inline-flex place-items-center gap-1 rounded-full px-2 py-1 font-sans text-sm leading-none font-normal ${className}`} className={`inline-flex place-items-center gap-1 rounded-full px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap ${className}`}
> >
{children} {children}
</span> </span>
@@ -24,7 +24,7 @@ export async function Badges({ node }: { readonly node: any }) {
const isAny = isDeprecated || isProtected || isStatic || isAbstract || isReadonly || isOptional || isExternal; const isAny = isDeprecated || isProtected || isStatic || isAbstract || isReadonly || isOptional || isExternal;
return isAny ? ( return isAny ? (
<div className="mb-1 flex gap-3"> <div className="mb-1 flex flex-wrap gap-3">
{isDeprecated ? ( {isDeprecated ? (
<Badge className="bg-red-500/20 text-red-500"> <Badge className="bg-red-500/20 text-red-500">
<AlertTriangle aria-hidden size={14} /> deprecated <AlertTriangle aria-hidden size={14} /> deprecated

6
apps/website/src/components/DocItem.tsx
View File

@@ -30,10 +30,10 @@ async function OverloadNode({
return ( return (
<Tabs className="flex flex-col gap-4"> <Tabs className="flex flex-col gap-4">
<TabList className="flex gap-2"> <TabList className="flex flex-wrap gap-2">
{node.overloads.map((overload: any) => ( {node.overloads.map((overload: any) => (
<Tab <Tab
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70" className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
id={`overload-${overload.displayName}-${overload.overloadIndex}`} id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`} key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
> >
@@ -75,7 +75,7 @@ export async function DocItem({
<Scrollbars className="border-base-neutral-200 dark:border-base-neutral-600 bg-base-neutral-100 dark:bg-base-neutral-900 rounded-sm border"> <Scrollbars className="border-base-neutral-200 dark:border-base-neutral-600 bg-base-neutral-100 dark:bg-base-neutral-900 rounded-sm border">
<SyntaxHighlighter <SyntaxHighlighter
className="w-min bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]" className="min-w-max bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
code={node.sourceExcerpt} code={node.sourceExcerpt}
lang="typescript" lang="typescript"
/> />

2
apps/website/src/components/DocNode.tsx
View File

@@ -72,7 +72,7 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
key={`${language}-${text}-${idx}`} key={`${language}-${text}-${idx}`}
> >
<SyntaxHighlighter <SyntaxHighlighter
className="w-min bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]" className="min-w-max bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
code={text} code={text}
lang={language} lang={language}
/> />

4
apps/website/src/components/EventNode.tsx
View File

@@ -104,10 +104,10 @@ async function OverloadNode({
}) { }) {
return ( return (
<Tabs className="flex flex-col gap-4"> <Tabs className="flex flex-col gap-4">
<TabList className="flex gap-2"> <TabList className="flex flex-wrap gap-2">
{event.overloads.map((overload: any) => ( {event.overloads.map((overload: any) => (
<Tab <Tab
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70" className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
id={`overload-${overload.displayName}-${overload.overloadIndex}`} id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`} key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
> >

4
apps/website/src/components/MethodNode.tsx
View File

@@ -108,10 +108,10 @@ async function OverloadNode({
}) { }) {
return ( return (
<Tabs className="flex flex-col gap-4"> <Tabs className="flex flex-col gap-4">
<TabList className="flex gap-2"> <TabList className="flex flex-wrap gap-2">
{method.overloads.map((overload: any) => ( {method.overloads.map((overload: any) => (
<Tab <Tab
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70" className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
id={`overload-${overload.displayName}-${overload.overloadIndex}`} id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`} key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
> >

2
apps/website/src/components/PropertyNode.tsx
View File

@@ -38,7 +38,7 @@ export async function PropertyNode({
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center gap-1"> <div className="flex place-content-between place-items-center gap-1">
<h3 <h3
className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group flex flex-col gap-2 px-2 font-mono font-semibold break-words`} className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group flex flex-col gap-2 px-2 font-mono font-semibold break-all`}
id={property.displayName} id={property.displayName}
> >
<Badges node={property} /> <Badges node={property} />