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

refactor: improve tips/warnings

Browse Source
This commit is contained in:
iCrawl
2022-10-07 02:44:28 +02:00
parent f85022162d
commit baa6c69835
5 changed files with 45 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/guide/src/components/Caution.tsx
View File

@@ -3,14 +3,18 @@ import { VscWarning } from 'react-icons/vsc';
export function Caution({ children }: PropsWithChildren<{}>) { export function Caution({ children }: PropsWithChildren<{}>) {
return ( return (
<div className="my-4 rounded border border-red-500 p-4"> <div className="my-4">
<div className="flex flex-row place-items-center gap-4"> <div className="relative flex">
<span className="text-red-500"> <div className="p-4">{children}</div>
<VscWarning size={20} /> <div className="absolute flex h-full w-full">
</span> <div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-red-500" />
<div className="flex flex-col gap-2 text-sm"> <div className="relative border-b-2 border-red-500">
<span className="font-semibold text-red-500">Caution</span> <div className="-translate-y-50% flex place-items-center gap-2 px-2 text-red-500">
{children} <VscWarning size={20} />
<span className="font-semibold text-red-500">Caution</span>
</div>
</div>
<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-red-500" />
</div> </div>
</div> </div>
</div> </div>

20
packages/guide/src/components/Info.tsx
View File

@@ -3,14 +3,18 @@ import { VscInfo } from 'react-icons/vsc';
export function Info({ children }: PropsWithChildren<{}>) { export function Info({ children }: PropsWithChildren<{}>) {
return ( return (
<div className="my-4 rounded border border-blue-500 p-4"> <div className="my-4">
<div className="flex flex-row place-items-center gap-4"> <div className="relative flex">
<span className="text-blue-500"> <div className="p-4">{children}</div>
<VscInfo size={20} /> <div className="absolute flex h-full w-full">
</span> <div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-blue-500" />
<div className="flex flex-col gap-2 text-sm"> <div className="relative border-b-2 border-blue-500">
<span className="font-semibold text-blue-500">Info</span> <div className="-translate-y-50% flex place-items-center gap-2 px-2 text-blue-500">
{children} <VscInfo size={20} />
<span className="font-semibold text-blue-500">Info</span>
</div>
</div>
<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-blue-500" />
</div> </div>
</div> </div>
</div> </div>

9
packages/guide/src/components/Section.tsx
View File

@@ -8,10 +8,14 @@ export function Section({
padded = false, padded = false,
dense = false, dense = false,
defaultClosed = false, defaultClosed = false,
background = false,
gutter = false,
children, children,
}: PropsWithChildren<{ }: PropsWithChildren<{
background?: boolean;
defaultClosed?: boolean; defaultClosed?: boolean;
dense?: boolean; dense?: boolean;
gutter?: boolean;
icon?: JSX.Element; icon?: JSX.Element;
padded?: boolean; padded?: boolean;
title: string; title: string;
@@ -35,7 +39,10 @@ export function Section({
/> />
</div> </div>
</Disclosure> </Disclosure>
<DisclosureContent state={disclosure}> <DisclosureContent
className={`${background ? 'bg-light-700 dark:bg-dark-500 rounded' : ''} ${gutter ? 'mt-2' : ''}`}
state={disclosure}
>
{padded ? <div className={`py-5 ${dense ? 'mx-2 px-0' : 'px-4.5 mx-6.5'}`}>{children}</div> : children} {padded ? <div className={`py-5 ${dense ? 'mx-2 px-0' : 'px-4.5 mx-6.5'}`}>{children}</div> : children}
</DisclosureContent> </DisclosureContent>
</div> </div>

20
packages/guide/src/components/Tip.tsx
View File

@@ -3,14 +3,18 @@ import { VscFlame } from 'react-icons/vsc';
export function Tip({ children }: PropsWithChildren<{}>) { export function Tip({ children }: PropsWithChildren<{}>) {
return ( return (
<div className="my-4 rounded border border-green-500 p-4"> <div className="my-4">
<div className="flex flex-row place-items-center gap-4"> <div className="relative flex">
<span className="text-green-500"> <div className="p-4">{children}</div>
<VscFlame size={20} /> <div className="absolute flex h-full w-full">
</span> <div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-green-500" />
<div className="flex flex-col gap-2 text-sm"> <div className="relative border-b-2 border-green-500">
<span className="font-semibold text-green-500">Tip</span> <div className="-translate-y-50% flex place-items-center gap-2 px-2 text-green-500">
{children} <VscFlame size={20} />
<span className="font-semibold text-green-500">Tip</span>
</div>
</div>
<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-green-500" />
</div> </div>
</div> </div>
</div> </div>

2
packages/guide/src/pages/creating-your-bot/index.mdx
View File

@@ -119,7 +119,7 @@ console.log(process.env.DISCORD_TOKEN);
`.gitignore`](/creating-your-bot/#git-and-gitignore). `.gitignore`](/creating-your-bot/#git-and-gitignore).
</Caution> </Caution>
<Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed={true}> <Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded dense background gutter>
While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe: While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe:
- Glitch: [Storing secrets in .env](https://glitch.happyfox.com/kb/article/18) - Glitch: [Storing secrets in .env](https://glitch.happyfox.com/kb/article/18)