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

feat: web-components (#8715)

Browse Source
This commit is contained in:
Noel
2022-10-07 06:56:13 +02:00
committed by GitHub
parent 76a7021452
commit 0ac3e766bd
46 changed files with 2250 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/guide/astro.config.ts
View File

@@ -14,7 +14,9 @@ export default defineConfig({
image({
serviceEntryPoint: '@astrojs/image/sharp',
}),
Unocss(),
Unocss({
configFile: fileURLToPath(new URL('../ui/unocss.config.ts', import.meta.url)),
}),
],
markdown: {
remarkPlugins: [[remarkCodeHike, { autoImport: false, theme: shikiThemeDarkPlus, lineNumbers: true }]],

9
packages/guide/package.json
View File

@@ -1,15 +1,15 @@
{
"name": "@discordjs/guide",
"version": "0.1.0",
"description": "",
"description": "Imagine a guide... that explores the many possibilities for your discord.js bot",
"private": true,
"scripts": {
"test": "vitest run",
"build:prod": "astro build",
"build:prod": "yarn workspace @discordjs/ui run build && astro build",
"dev": "astro dev",
"preview": "astro preview",
"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts,tsx,astro",
"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts,tsx,astro --fix"
"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro",
"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro --fix"
},
"type": "module",
"contributors": [
@@ -38,6 +38,7 @@
"@astrojs/mdx": "^0.11.4",
"@astrojs/react": "^1.1.4",
"@code-hike/mdx": "^0.7.4",
"@discordjs/ui": "workspace:^",
"@vscode/codicons": "^0.0.32",
"ariakit": "^2.0.0-next.41",
"astro": "^1.4.5",

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

@@ -1,50 +0,0 @@
import { Disclosure, DisclosureContent, useDisclosureState } from 'ariakit/disclosure';
import type { PropsWithChildren } from 'react';
import { VscChevronDown } from 'react-icons/vsc';
export function Section({
title,
icon,
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;
}>) {
const disclosure = useDisclosureState({ defaultOpen: !defaultClosed });
return (
<div className="flex flex-col">
<Disclosure
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={disclosure}
>
<div className="flex flex-row place-content-between place-items-center">
<div className="flex flex-row place-items-center gap-3">
{icon ?? null}
<span className="font-semibold">{title}</span>
</div>
<VscChevronDown
className={`transform transition duration-150 ease-in-out ${disclosure.open ? 'rotate-180' : 'rotate-0'}`}
size={20}
/>
</div>
</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>
);
}

2
packages/guide/src/components/SidebarItems.tsx
View File

@@ -1,5 +1,5 @@
import { Section } from '@discordjs/ui';
import type { MDXInstance } from 'astro';
import { Section } from './Section.jsx';
export type MDXPage = MDXInstance<{ category: string; title: string }>;

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

@@ -4,12 +4,12 @@ title: Initial files
category: Creating your bot
---
import { CH } from '@code-hike/mdx/components';
import { Section } from '@discordjs/ui';
import { Tip } from '../../components/Tip.jsx';
import { Caution } from '../../components/Caution.jsx';
import { DocsLink } from '../../components/DocsLink.jsx';
import { ResultingCode } from '../../components/ResultingCode.jsx';
import { CH } from '@code-hike/mdx/components';
import { Section } from '../../components/Section.jsx';
# Initial files
@@ -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 padded dense background gutter>
<Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded 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)

65
packages/guide/unocss.config.ts
View File

@@ -1,65 +0,0 @@
import { defineConfig, presetTypography, presetUno, presetWebFonts } from 'unocss';
export default defineConfig({
theme: {
colors: {
blurple: {
50: '#e0e3ff',
100: '#cdd2ff',
200: '#9ea7ff',
300: '#7782fa',
DEFAULT: '#5865F2',
500: '#3d48c3',
600: '#293294',
700: '#1a2165',
800: '#0e1137',
900: '#020208',
},
},
},
presets: [
presetUno({ dark: 'class' }),
presetWebFonts({
provider: 'bunny',
fonts: {
mono: ['JetBrains Mono', 'JetBrains Mono:400,600,700'],
},
}),
presetTypography({
cssExtend: {
pre: {
padding: '1em',
'line-height': '1.5',
'border-radius': '4px',
},
code: {
'font-size': '1em',
'font-weight': 'unset',
},
':where(:not(pre) > code)::before': {
content: '""',
},
':where(:not(pre) > code)::after': {
content: '""',
},
a: {
color: '#5865F2',
'text-decoration': 'none',
},
'a > img': {
display: 'inline-block',
},
h2: {
'margin-top': '1.25em',
},
h3: {
'margin-top': '0.75em',
},
// eslint-disable-next-line id-length
p: {
margin: '.5em 0',
},
},
}),
],
});