Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-10 00:23:30 +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<{}>) {
return (
<div className="my-4 rounded border border-red-500 p-4">
<div className="flex flex-row place-items-center gap-4">
<span className="text-red-500">
<VscWarning size={20} />
</span>
<div className="flex flex-col gap-2 text-sm">
<span className="font-semibold text-red-500">Caution</span>
{children}
<div className="my-4">
<div className="relative flex">
<div className="p-4">{children}</div>
<div className="absolute flex h-full w-full">
<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="relative border-b-2 border-red-500">
<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-red-500">
<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>

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

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

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

@@ -8,10 +8,14 @@ export function Section({
padded = false,
dense = false,
defaultClosed = false,
background = false,
gutter = false,
children,
}: PropsWithChildren<{
background?: boolean;
defaultClosed?: boolean;
dense?: boolean;
gutter?: boolean;
icon?: JSX.Element;
padded?: boolean;
title: string;
@@ -35,7 +39,10 @@ export function Section({
/>
</div>
</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}
</DisclosureContent>
</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<{}>) {
return (
<div className="my-4 rounded border border-green-500 p-4">
<div className="flex flex-row place-items-center gap-4">
<span className="text-green-500">
<VscFlame size={20} />
</span>
<div className="flex flex-col gap-2 text-sm">
<span className="font-semibold text-green-500">Tip</span>
{children}
<div className="my-4">
<div className="relative flex">
<div className="p-4">{children}</div>
<div className="absolute flex h-full w-full">
<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="relative border-b-2 border-green-500">
<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-green-500">
<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>

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).
</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:
- Glitch: [Storing secrets in .env](https://glitch.happyfox.com/kb/article/18)