component inside of this component.
71 | // eslint-disable-next-line lit-a11y/list
72 | return html`
73 |
74 |
`;
75 | }
76 | }
77 |
78 | declare global {
79 | interface HTMLElementTagNameMap {
80 | 'discord-ordered-list': DiscordOrderedList;
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/packages/core/src/components/discord-pre/DiscordPre.ts:
--------------------------------------------------------------------------------
1 | import { css, html, LitElement } from 'lit';
2 | import { customElement, property } from 'lit/decorators.js';
3 |
4 | @customElement('discord-pre')
5 | export class DiscordPre extends LitElement {
6 | /**
7 | * @internal
8 | */
9 | public static override readonly styles = css`
10 | :host pre {
11 | border-radius: 4px;
12 | padding: 0;
13 | font-size: 0.75rem;
14 | line-height: 1rem;
15 | margin-top: 6px;
16 | white-space: pre-wrap;
17 | background-clip: border-box;
18 | width: 90%;
19 | border: none;
20 | }
21 |
22 | :host([embed]) pre {
23 | margin: 0;
24 | margin-top: 6px;
25 | width: 100%;
26 | }
27 | `;
28 |
29 | @property({ type: Boolean, reflect: true })
30 | public accessor embed = false;
31 |
32 | protected override render() {
33 | return html`
`;
35 | }
36 | }
37 |
38 | declare global {
39 | interface HTMLElementTagNameMap {
40 | 'discord-pre': DiscordPre;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/packages/core/src/components/discord-quote/DiscordQuote.ts:
--------------------------------------------------------------------------------
1 | import { consume } from '@lit/context';
2 | import { css, html, LitElement } from 'lit';
3 | import { customElement, property } from 'lit/decorators.js';
4 | import type { LightTheme } from '../../types.js';
5 | import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
6 |
7 | @customElement('discord-quote')
8 | export class DiscordQuote extends LitElement implements LightTheme {
9 | /**
10 | * @internal
11 | */
12 | public static override readonly styles = css`
13 | :host {
14 | display: flex;
15 | }
16 |
17 | .discord-quote-divider {
18 | background-color: #4f545c;
19 | border-radius: 4px;
20 | font-size: 0.9em;
21 | font-style: normal;
22 | font-weight: 400;
23 | margin: 0;
24 | padding: 0;
25 | width: 4px;
26 | }
27 |
28 | :host([light-theme]) .discord-quote-divider {
29 | background-color: #c4c9ce;
30 | }
31 |
32 | blockquote {
33 | margin-block-end: unset;
34 | margin-block-start: unset;
35 | margin-inline-end: unset;
36 | margin-inline-start: unset;
37 | padding: 0 8px 0 12px;
38 | }
39 | `;
40 |
41 | @consume({ context: messagesLightTheme, subscribe: true })
42 | @property({ type: Boolean, reflect: true, attribute: 'light-theme' })
43 | public accessor lightTheme = false;
44 |
45 | protected override render() {
46 | return html`
47 |
48 |
49 |
50 | `;
51 | }
52 | }
53 |
54 | declare global {
55 | interface HTMLElementTagNameMap {
56 | 'discord-quote': DiscordQuote;
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/packages/core/src/components/discord-reactions/DiscordReactions.ts:
--------------------------------------------------------------------------------
1 | import { css, html, LitElement } from 'lit';
2 | import { customElement } from 'lit/decorators.js';
3 |
4 | @customElement('discord-reactions')
5 | export class DiscordReactions extends LitElement {
6 | /**
7 | * @internal
8 | */
9 | public static override readonly styles = css`
10 | :host {
11 | display: flex;
12 | -webkit-box-flex: 1;
13 | -ms-flex: 1 0 auto;
14 | flex: 1 0 auto;
15 | align-items: center;
16 | flex-wrap: wrap;
17 | }
18 | `;
19 |
20 | protected override render() {
21 | return html``;
22 | }
23 | }
24 |
25 | declare global {
26 | interface HTMLElementTagNameMap {
27 | 'discord-reactions': DiscordReactions;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/core/src/components/discord-spoiler/DiscordSpoiler.ts:
--------------------------------------------------------------------------------
1 | import { consume } from '@lit/context';
2 | import { css, html, LitElement } from 'lit';
3 | import { customElement, property } from 'lit/decorators.js';
4 | import type { LightTheme } from '../../types.js';
5 | import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
6 |
7 | @customElement('discord-spoiler')
8 | export class DiscordSpoiler extends LitElement implements LightTheme {
9 | /**
10 | * @internal
11 | */
12 | public static override readonly styles = css`
13 | :host {
14 | background-color: #202225;
15 | border-radius: 3px;
16 | color: transparent;
17 | cursor: pointer;
18 | }
19 |
20 | :host([light-theme]) {
21 | background-color: #c4c9ce;
22 | }
23 |
24 | :host(:hover) {
25 | background-color: rgba(32, 34, 37, 0.8);
26 | }
27 |
28 | :host([light-theme]:hover) {
29 | background-color: #cfd3d7;
30 | }
31 |
32 | :host([activated]) {
33 | color: inherit;
34 | background-color: hsla(0, 0%, 100%, 0.1);
35 | }
36 |
37 | :host([light-theme][activated]) {
38 | background-color: #e5e5e5;
39 | }
40 | `;
41 |
42 | @property({ type: Boolean, reflect: true })
43 | public accessor activated = false;
44 |
45 | /**
46 | * Whether to use light theme or not.
47 | */
48 | @consume({ context: messagesLightTheme })
49 | @property({ type: Boolean, reflect: true, attribute: 'light-theme' })
50 | public accessor lightTheme = false;
51 |
52 | protected override render() {
53 | return html` {
55 | this.activated = true;
56 | }}
57 | @keydown=${() => {
58 | this.activated = true;
59 | }}
60 | >`;
61 | }
62 | }
63 |
64 | declare global {
65 | interface HTMLElementTagNameMap {
66 | 'discord-spoiler': DiscordSpoiler;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/packages/core/src/components/discord-subscript/DiscordSubscript.ts:
--------------------------------------------------------------------------------
1 | import { consume } from '@lit/context';
2 | import { LitElement, css, html } from 'lit';
3 | import { customElement, property } from 'lit/decorators.js';
4 | import type { LightTheme } from '../../types.js';
5 | import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
6 |
7 | @customElement('discord-subscript')
8 | export class DiscordSubscript extends LitElement implements LightTheme {
9 | /**
10 | * @internal
11 | */
12 | public static override readonly styles = css`
13 | small {
14 | display: block;
15 | color: color-mix(in oklab, hsl(214 calc(1 * 8.1%) 61.2% / 1) 100%, black 0%);
16 | font-size: 0.8125rem;
17 | line-height: 1.11719rem;
18 | }
19 |
20 | :host([light-theme]) > small {
21 | color: color-mix(in oklab, hsl(228 calc(1 * 5.2%) 38% / 1) 100%, black 0%);
22 | }
23 | `;
24 |
25 | @consume({ context: messagesLightTheme })
26 | @property({ type: Boolean, reflect: true, attribute: 'light-theme' })
27 | public accessor lightTheme = false;
28 |
29 | protected override render() {
30 | return html`
31 |
32 |
33 |
34 |
35 |
36 | `;
37 | }
38 | }
39 |
40 | declare global {
41 | interface HTMLElementTagNameMap {
42 | 'discord-subscript': DiscordSubscript;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/core/src/components/discord-thread/DiscordThread.ts:
--------------------------------------------------------------------------------
1 | import { consume } from '@lit/context';
2 | import { css, html, LitElement } from 'lit';
3 | import { customElement, property } from 'lit/decorators.js';
4 | import type { LightTheme } from '../../types.js';
5 | import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
6 |
7 | @customElement('discord-thread')
8 | export class DiscordThread extends LitElement implements LightTheme {
9 | /**
10 | * @internal
11 | */
12 | public static override readonly styles = css`
13 | :host {
14 | background-color: #2f3136;
15 | border-radius: 4px;
16 | cursor: pointer;
17 | margin-top: 8px;
18 | max-width: 480px;
19 | min-width: 0;
20 | padding: 8px;
21 | display: inline-flex;
22 | width: fit-content;
23 | flex-direction: column;
24 | }
25 |
26 | :host([light-theme]) {
27 | background-color: #f2f3f5;
28 | }
29 |
30 | :host .discord-thread-top {
31 | display: flex;
32 | }
33 |
34 | :host .discord-thread-bottom {
35 | font-size: 0.875rem;
36 | line-height: 1.125rem;
37 | align-items: center;
38 | color: #b9bbbe;
39 | display: flex;
40 | margin-top: 2px;
41 | white-space: nowrap;
42 | }
43 |
44 | :host([light-theme]) .discord-thread-bottom {
45 | color: #4f5660;
46 | }
47 |
48 | :host .discord-thread-name {
49 | font-size: 0.875rem;
50 | font-weight: 600;
51 | line-height: 1.125rem;
52 | color: white;
53 | margin-right: 8px;
54 | overflow: hidden;
55 | text-overflow: ellipsis;
56 | white-space: nowrap;
57 | }
58 |
59 | :host([light-theme]) .discord-thread-name {
60 | color: #060607;
61 | }
62 |
63 | :host .discord-thread-cta {
64 | color: #00aff4;
65 | flex-shrink: 0;
66 | font-size: 0.875rem;
67 | font-weight: 600;
68 | line-height: 1.125rem;
69 | }
70 |
71 | :host .discord-thread-cta:hover {
72 | text-decoration: underline;
73 | }
74 |
75 | .discord-thread:hover .discord-thread-cta {
76 | text-decoration: underline;
77 | }
78 | `;
79 |
80 | /**
81 | * The name of the thread.
82 | */
83 | @property()
84 | public accessor name = 'Thread';
85 |
86 | /**
87 | * The the text within the call to action text. (i.e. 'See Thread' or 'x Messages')
88 | */
89 | @property()
90 | public accessor cta = 'See Thread';
91 |
92 | @consume({ context: messagesLightTheme })
93 | @property({ type: Boolean, reflect: true, attribute: 'light-theme' })
94 | public accessor lightTheme = false;
95 |
96 | protected override render() {
97 | return html`
98 |
99 | ${this.name}
100 | ${this.cta} ›
101 |
102 |
103 |
104 |
105 | `;
106 | }
107 | }
108 |
109 | declare global {
110 | interface HTMLElementTagNameMap {
111 | 'discord-thread': DiscordThread;
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/packages/core/src/components/discord-time/DiscordTime.ts:
--------------------------------------------------------------------------------
1 | import { css, html, LitElement } from 'lit';
2 | import { customElement } from 'lit/decorators.js';
3 |
4 | @customElement('discord-time')
5 | export class DiscordTime extends LitElement {
6 | /**
7 | * @internal
8 | */
9 | public static override readonly styles = css`
10 | :host {
11 | white-space: nowrap;
12 | background-color: #ffffff0f;
13 | border-radius: 3px;
14 | padding: 0 2px;
15 | }
16 | `;
17 |
18 | protected override render() {
19 | return html``;
20 | }
21 | }
22 |
23 | declare global {
24 | interface HTMLElementTagNameMap {
25 | 'discord-time': DiscordTime;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/core/src/components/discord-underlined/DiscordUnderlined.ts:
--------------------------------------------------------------------------------
1 | import { html, LitElement } from 'lit';
2 | import { customElement } from 'lit/decorators.js';
3 |
4 | @customElement('discord-underlined')
5 | export class DiscordUnderlined extends LitElement {
6 | protected override render() {
7 | return html`
8 |
9 |
10 |
11 | `;
12 | }
13 | }
14 |
15 | declare global {
16 | interface HTMLElementTagNameMap {
17 | 'discord-underlined': DiscordUnderlined;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/core/src/components/discord-unordered-list/DiscordUnorderedList.ts:
--------------------------------------------------------------------------------
1 | import { css, html, LitElement } from 'lit';
2 | import { customElement, property } from 'lit/decorators.js';
3 | import { DiscordComponentsError } from '../../util.js';
4 |
5 | @customElement('discord-unordered-list')
6 | export class DiscordUnorderedList extends LitElement {
7 | /**
8 | * @internal
9 | */
10 | public static override readonly styles = css`
11 | :host > ul {
12 | list-style-image: initial;
13 | list-style: disc;
14 | list-style-position: outside;
15 | margin: 4px 0 0 16px;
16 | padding: 0px;
17 | }
18 |
19 | :host([nested]) > ul {
20 | list-style: circle;
21 | }
22 | `;
23 |
24 | /**
25 | * Whether this is a nested list or not, this will change the style of the list-style.
26 | *
27 | * The library will try to guess this automatically based on the component tree, but
28 | * you can also set this manually.
29 | *
30 | * @defaultValue false
31 | */
32 | @property({ type: Boolean, reflect: true })
33 | public accessor nested = false;
34 |
35 | public checkChildren() {
36 | const allChildrenAreListItems = Array.from(this.children).every((child) => {
37 | const tagNameLowerCase = child.tagName.toLowerCase();
38 | return (
39 | tagNameLowerCase === 'discord-list-item' ||
40 | tagNameLowerCase === 'discord-unordered-list' ||
41 | tagNameLowerCase === 'discord-ordered-list'
42 | );
43 | });
44 |
45 | if (!allChildrenAreListItems) {
46 | throw new DiscordComponentsError(
47 | 'All direct children inside of a components must be one of , , or .'
48 | );
49 | }
50 | }
51 |
52 | /**
53 | * Sets {@link DiscordUnorderedList.nested | nested} to true if the parent is either
54 | * `` or ``.
55 | */
56 | protected override willUpdate(): void {
57 | if (
58 | this.parentElement?.tagName.toLowerCase() === 'discord-unordered-list' ||
59 | this.parentElement?.tagName.toLowerCase() === 'discord-ordered-list'
60 | ) {
61 | this.nested = true;
62 | }
63 | }
64 |
65 | protected override render() {
66 | this.checkChildren();
67 |
68 | // We disable the eslint rule here because users should use the component inside of this component.
69 | // eslint-disable-next-line lit-a11y/list
70 | return html``;
73 | }
74 | }
75 |
76 | declare global {
77 | interface HTMLElementTagNameMap {
78 | 'discord-unordered-list': DiscordUnorderedList;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/packages/core/src/components/discord-verified-author-tag/DiscordVerifiedAuthorTag.ts:
--------------------------------------------------------------------------------
1 | import { consume } from '@lit/context';
2 | import { css, html, LitElement } from 'lit';
3 | import { customElement, property } from 'lit/decorators.js';
4 | import { when } from 'lit/directives/when.js';
5 | import { messagesCompactMode } from '../discord-messages/DiscordMessages.js';
6 | import VerifiedTick from '../svgs/VerifiedTick.js';
7 |
8 | @customElement('discord-verified-author-tag')
9 | export class DiscordVerifiedAuthorTag extends LitElement {
10 | public static override readonly styles = css`
11 | :host {
12 | background-color: #5865f2;
13 | color: #fff;
14 | font-size: 0.625em;
15 | margin-left: 4px;
16 | border-radius: 3px;
17 | line-height: 100%;
18 | text-transform: uppercase;
19 | display: inline-flex;
20 | align-items: center;
21 | height: 0.9375rem;
22 | padding: 0 0.275rem;
23 | margin-top: 0.075em;
24 | border-radius: 0.1875rem;
25 | }
26 |
27 | :host .discord-application-tag-verified {
28 | display: inline-block;
29 | width: 0.9375rem;
30 | height: 0.9375rem;
31 | margin-left: -0.25rem;
32 | }
33 |
34 | :host([compact-mode]) {
35 | padding-left: 10px;
36 | padding-right: 4px;
37 | margin-right: 0.25rem;
38 | margin-left: 0px !important;
39 | margin-top: 0px !important;
40 | }
41 |
42 | :host([compact-mode]) .discord-application-tag-verified {
43 | margin-right: 0.7em;
44 | margin-left: -0.7em;
45 | }
46 | `;
47 |
48 | /**
49 | * Whether this bot is verified by Discord. Only works if `bot` is `true`
50 | */
51 | @property({ type: Boolean })
52 | public accessor verified = false;
53 |
54 | /**
55 | * Whether to reverse the order of the author info for compact mode.
56 | */
57 | @consume({ context: messagesCompactMode })
58 | @property({ type: Boolean, reflect: true, attribute: 'compact-mode' })
59 | public accessor compactMode = false;
60 |
61 | protected override render() {
62 | return html`${when(this.verified, () => VerifiedTick())}App`;
63 | }
64 | }
65 |
66 | declare global {
67 | interface HTMLElementTagNameMap {
68 | 'discord-verified-author-tag': DiscordVerifiedAuthorTag;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/AttachmentDownloadButton.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 | `;
10 |
11 | export default function AttachmentDownloadButton(props: Record = {}) {
12 | return html``;
25 | }
26 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/AttachmentReply.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 | `;
10 |
11 | export default function AttachmentReply(props: Record = {}) {
12 | return html``;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/Boost.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 | `;
8 |
9 | export default function Boost(props: Record = {}) {
10 | return html``;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/ChannelForum.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 |
13 | `;
14 |
15 | export default function ChannelForum(props: Record = {}) {
16 | return html``;
27 | }
28 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/ChannelIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
11 | `;
12 |
13 | export default function ChannelIcon(props: Record = {}) {
14 | return html``;
25 | }
26 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/ChannelThread.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 | `;
10 |
11 | export default function ChannelThread(props: Record = {}) {
12 | return html``;
23 | }
24 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/ChannelsAndRoles.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
11 |
15 | `;
16 |
17 | export default function ChannelsAndRoles(props: Record = {}) {
18 | return html``;
31 | }
32 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/CommandIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function CommandIcon(props: Record = {}) {
9 | return html``;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/CommandIconName.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 | `;
8 |
9 | export default function CommandIconName(props: Record = {}) {
10 | return html``;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/CommandReply.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
11 | `;
12 |
13 | export default function CommandReply(props: Record) {
14 | return html``;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/CustomizeCommunity.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 | `;
10 |
11 | export default function CustomizeCommunity(props: Record = {}) {
12 | return html``;
25 | }
26 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/DMCall.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
10 | `;
11 |
12 | export default function DMCall(props: Record = {}) {
13 | return html``;
14 | }
15 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/DMEdit.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
10 |
11 |
12 | `;
13 |
14 | export default function DMEdit(props: Record = {}) {
15 | return html``;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/DMMissedCall.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
11 |
12 | `;
13 |
14 | export default function DMMissedCall(props: Record = {}) {
15 | return html``;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/Ephemeral.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 |
15 | `;
16 |
17 | export default function Ephemeral(props: Record = {}) {
18 | return html``;
29 | }
30 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/ExpandMore.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function ExpandMore(props: Record = {}) {
9 | return html``;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/FileAttachment.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
8 | `;
9 |
10 | export default function FileAttachment(props: Record = {}) {
11 | return html``;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/GuildBadge.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
10 | `;
11 |
12 | export default function GuildBadge(props: Record) {
13 | return html``;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/LaunchIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 |
11 | `;
12 |
13 | export default function LaunchIcon(props: Record = {}) {
14 | return html``;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/LockedVoiceChannel.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
11 | `;
12 |
13 | export default function LockedVoiceChannel(props: Record = {}) {
14 | return html``;
25 | }
26 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/MediaPauseIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function AudioVideoPauseIcon(props: Record = {}) {
9 | return html``;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/MediaPlayIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function AudioVideoPlayIcon(props: Record = {}) {
9 | return html``;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/MediaRestartIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function AudioVideoRestartIcon(props: Record = {}) {
9 | return html``;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/MediaVolumeAbove50PercentIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 | `;
8 |
9 | export default function AudioVideoVolumeAbove50PercentIcon(props: Record = {}) {
10 | return html``;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/MediaVolumeBelow50PercentIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function AudioVideoVolumeBelow50PercentIcon(props: Record = {}) {
9 | return html``;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/MediaVolumeMutedIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function AudioVideoVolumeMutedIcon(props: Record = {}) {
9 | return html``;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/MessageIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 | `;
8 |
9 | export default function CommandIconName(props: Record = {}) {
10 | return html``;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/ModalClose.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function ModalClose(props: Record = {}) {
9 | return html``;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/ModalWarning.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 | `;
8 |
9 | export default function ModalWarning(props: Record = {}) {
10 | return html``;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/PartnerBadgeOverlay.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 |
13 | `;
14 |
15 | export default function PartnerBadgeOverlay(props: Record = {}) {
16 | return html``;
19 | }
20 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/Pin.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 | `;
10 |
11 | export default function Thread(props: Record = {}) {
12 | return html``;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/ReplyIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 | `;
10 |
11 | export default function ReplyIcon(props: Record = {}) {
12 | return html``;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/ServerGuide.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 | `;
10 |
11 | export default function ServerGuide(props: Record = {}) {
12 | return html``;
25 | }
26 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/ServerUpgrade.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
11 | `;
12 |
13 | export default function ServerUpgrade(props: Record = {}) {
14 | return html``;
15 | }
16 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/SystemAlert.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
11 | `;
12 |
13 | export default function SystemAlert(props: Record = {}) {
14 | return html``;
15 | }
16 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/SystemError.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
10 | `;
11 |
12 | export default function SystemError(props: Record = {}) {
13 | return html``;
14 | }
15 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/Thread.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 |
13 | `;
14 |
15 | export default function Thread(props: Record = {}) {
16 | return html``;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/UserJoin.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 | `;
10 |
11 | export default function UserJoin(props: Record = {}) {
12 | return html``;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/UserLeave.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 | `;
10 |
11 | export default function UserLeave(props: Record = {}) {
12 | return html``;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/VerifiedBadgeOverlay.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function VerifiedBadgeOverlay(props: Record = {}) {
9 | return html``;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/VerifiedTick.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function VerifiedTick(props: Record = {}) {
9 | return html``;
21 | }
22 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/VideoFullScreenIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function VideoFullScreenIcon(props: Record = {}) {
9 | return html``;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/VideoPausePopIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function VideoPausePopIcon(props: Record = {}) {
9 | return html``;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/VideoPlayPopIcon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 | `;
7 |
8 | export default function VideoPlayPopIcon(props: Record = {}) {
9 | return html``;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/VoiceChannel.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../spread.js';
3 |
4 | const svgContent = svg`
5 |
9 |
13 | `;
14 |
15 | export default function VoiceChannel(props: Record = {}) {
16 | return html``;
27 | }
28 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Crystal.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | `;
21 |
22 | export default function Crystal(props: Record = {}) {
23 | return html``;
35 | }
36 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Explosion.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | `;
24 |
25 | export default function Explosion(props: Record = {}) {
26 | return html``;
38 | }
39 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Flame.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | `;
17 |
18 | export default function Flame(props: Record = {}) {
19 | return html``;
31 | }
32 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Flower.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 | `;
12 |
13 | export default function Flower(props: Record = {}) {
14 | return html``;
26 | }
27 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Heart.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | `;
13 |
14 | export default function Heart(props: Record = {}) {
15 | return html``;
27 | }
28 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Key.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | `;
26 |
27 | export default function Key(props: Record = {}) {
28 | return html``;
40 | }
41 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Leaf.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | `;
17 |
18 | export default function Leaf(props: Record = {}) {
19 | return html``;
31 | }
32 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Lightning.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | `;
19 |
20 | export default function Lightning(props: Record = {}) {
21 | return html``;
33 | }
34 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Magic.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | `;
28 |
29 | export default function Magic(props: Record = {}) {
30 | return html``;
42 | }
43 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Moon.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | `;
15 |
16 | export default function Moon(props: Record = {}) {
17 | return html``;
29 | }
30 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Mushroom.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | `;
27 |
28 | export default function Mushroom(props: Record = {}) {
29 | return html``;
41 | }
42 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Plasma.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | `;
17 |
18 | export default function Plasma(props: Record = {}) {
19 | return html``;
31 | }
32 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Rock.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | `;
14 |
15 | export default function Rock(props: Record = {}) {
16 | return html``;
28 | }
29 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Shell.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | `;
23 |
24 | export default function Shell(props: Record = {}) {
25 | return html``;
37 | }
38 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Skull.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | `;
22 |
23 | export default function Skull(props: Record = {}) {
24 | return html``;
36 | }
37 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Sword.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | `;
21 |
22 | export default function Sword(props: Record = {}) {
23 | return html``;
35 | }
36 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/Water.ts:
--------------------------------------------------------------------------------
1 | import { html, svg } from 'lit';
2 | import { spread } from '../../../spread.js';
3 |
4 | const svgContent = svg`
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | `;
14 |
15 | export default function Water(props: Record = {}) {
16 | return html``;
28 | }
29 |
--------------------------------------------------------------------------------
/packages/core/src/components/svgs/clan-icons/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Crystal } from './Crystal.js';
2 | export { default as Diamond } from './Diamond.js';
3 | export { default as Explosion } from './Explosion.js';
4 | export { default as Flame } from './Flame.js';
5 | export { default as Flower } from './Flower.js';
6 | export { default as Heart } from './Heart.js';
7 | export { default as Key } from './Key.js';
8 | export { default as Leaf } from './Leaf.js';
9 | export { default as Lightning } from './Lightning.js';
10 | export { default as Magic } from './Magic.js';
11 | export { default as Moon } from './Moon.js';
12 | export { default as Mushroom } from './Mushroom.js';
13 | export { default as Mythical } from './Mythical.js';
14 | export { default as Ornament } from './Ornament.js';
15 | export { default as Plasma } from './Plasma.js';
16 | export { default as Rock } from './Rock.js';
17 | export { default as Shell } from './Shell.js';
18 | export { default as Skull } from './Skull.js';
19 | export { default as Sun } from './Sun.js';
20 | export { default as Sword } from './Sword.js';
21 | export { default as Water } from './Water.js';
22 |
--------------------------------------------------------------------------------
/packages/core/src/config.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Crystal,
3 | Diamond,
4 | Explosion,
5 | Flame,
6 | Flower,
7 | Heart,
8 | Key,
9 | Leaf,
10 | Lightning,
11 | Magic,
12 | Moon,
13 | Mushroom,
14 | Mythical,
15 | Ornament,
16 | Plasma,
17 | Rock,
18 | Shell,
19 | Skull,
20 | Sun,
21 | Sword,
22 | Water
23 | } from './components/svgs/clan-icons/index.js';
24 | import type { Avatars, DiscordMessageOptions, Profile } from './types.js';
25 |
26 | let config: DiscordMessageOptions = globalThis.$discordMessage ?? {};
27 |
28 | export function getConfig(): DiscordMessageOptions {
29 | return config;
30 | }
31 |
32 | export function setConfig(partialConfig: Partial): void {
33 | config = Object.assign(config, partialConfig);
34 | }
35 |
36 | export const defaultDiscordAvatars: Omit = {
37 | blue: 'https://cdn.discordapp.com/embed/avatars/0.png',
38 | gray: 'https://cdn.discordapp.com/embed/avatars/1.png',
39 | green: 'https://cdn.discordapp.com/embed/avatars/2.png',
40 | orange: 'https://cdn.discordapp.com/embed/avatars/3.png',
41 | red: 'https://cdn.discordapp.com/embed/avatars/4.png',
42 | pink: 'https://cdn.discordapp.com/embed/avatars/5.png'
43 | };
44 |
45 | const globalAvatars: Avatars = getConfig().avatars ?? ({} as Avatars);
46 |
47 | export const avatars: Avatars = Object.assign(defaultDiscordAvatars, globalAvatars, {
48 | default: defaultDiscordAvatars[globalAvatars.default] ?? globalAvatars.default ?? defaultDiscordAvatars.blue
49 | });
50 |
51 | export const profiles: { [key: string]: Profile } = getConfig().profiles ?? {};
52 |
53 | export const defaultTheme: string = getConfig().defaultTheme === 'light' ? 'light' : 'dark';
54 |
55 | export const defaultMode: string = getConfig().defaultMode === 'compact' ? 'compact' : 'cozy';
56 |
57 | export const defaultBackground: string = getConfig().defaultBackground === 'none' ? 'none' : 'discord';
58 |
59 | export const icons = new Map([
60 | ['heart', Heart()],
61 | ['crystal', Crystal()],
62 | ['diamond', Diamond()],
63 | ['explosion', Explosion()],
64 | ['flame', Flame()],
65 | ['flower', Flower()],
66 | ['key', Key()],
67 | ['leaf', Leaf()],
68 | ['lightning', Lightning()],
69 | ['magic', Magic()],
70 | ['moon', Moon()],
71 | ['mushroom', Mushroom()],
72 | ['mythical', Mythical()],
73 | ['ornament', Ornament()],
74 | ['plasma', Plasma()],
75 | ['rock', Rock()],
76 | ['shell', Shell()],
77 | ['skull', Skull()],
78 | ['sun', Sun()],
79 | ['sword', Sword()],
80 | ['water', Water()]
81 | ]);
82 |
--------------------------------------------------------------------------------
/packages/core/src/hex-to-rgba.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable id-length */
2 |
3 | function removeHash(color: string) {
4 | return color.startsWith('#') ? color.slice(1) : color;
5 | }
6 |
7 | function parseHex(nakedHex: string): HexObject {
8 | const isShort = nakedHex.length === 3 || nakedHex.length === 4;
9 |
10 | const twoDigitHexR = isShort ? `${nakedHex.slice(0, 1)}${nakedHex.slice(0, 1)}` : nakedHex.slice(0, 2);
11 | const twoDigitHexG = isShort ? `${nakedHex.slice(1, 2)}${nakedHex.slice(1, 2)}` : nakedHex.slice(2, 4);
12 | const twoDigitHexB = isShort ? `${nakedHex.slice(2, 3)}${nakedHex.slice(2, 3)}` : nakedHex.slice(4, 6);
13 | const twoDigitHexA = (isShort ? `${nakedHex.slice(3, 4)}${nakedHex.slice(3, 4)}` : nakedHex.slice(6, 8)) || 'ff';
14 |
15 | return {
16 | r: twoDigitHexR,
17 | g: twoDigitHexG,
18 | b: twoDigitHexB,
19 | a: twoDigitHexA
20 | };
21 | }
22 |
23 | function hexToDecimal(hex: string) {
24 | return Number.parseInt(hex, 16);
25 | }
26 |
27 | function hexesToDecimals({ r, g, b, a }: HexObject) {
28 | return {
29 | r: hexToDecimal(r),
30 | g: hexToDecimal(g),
31 | b: hexToDecimal(b),
32 | a: Number((hexToDecimal(a) / 255).toFixed(2))
33 | };
34 | }
35 |
36 | function isNumeric(n: number | string | undefined) {
37 | return typeof n === 'number' || (typeof n === 'string' && Number.isFinite(Number(n)));
38 | }
39 |
40 | function formatRgb(decimalObject: DecimalObject, parameterA?: number | string) {
41 | const { r, g, b, a: parsedA } = decimalObject;
42 | const a = isNumeric(parameterA) ? parameterA : parsedA;
43 |
44 | return `rgba(${r}, ${g}, ${b}, ${a})`;
45 | }
46 |
47 | /**
48 | * Turns an old-fashioned css hex color value into a rgb color value.
49 | *
50 | * If you specify an alpha value, you'll get a rgba() value instead.
51 | *
52 | * @param color - The hex value to convert. ('123456'. '#123456', ''123', '#123')
53 | * @param alpha - An alpha value to apply. (optional) ('0.5', '0.25')
54 | * @returns An rgb or rgba value. ('rgb(11, 22, 33)'. 'rgba(11, 22, 33, 0.5)')
55 | */
56 | export function hexToRgba(color: string, alpha?: number | string) {
57 | const hashlessHex = removeHash(color);
58 | const hexObject = parseHex(hashlessHex);
59 | const decimalObject = hexesToDecimals(hexObject);
60 |
61 | return formatRgb(decimalObject, alpha);
62 | }
63 |
64 | interface HexObject {
65 | a: string;
66 | b: string;
67 | g: string;
68 | r: string;
69 | }
70 |
71 | interface DecimalObject {
72 | a: number;
73 | b: number;
74 | g: number;
75 | r: number;
76 | }
77 |
--------------------------------------------------------------------------------
/packages/core/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "rootDir": ".",
5 | "outDir": "../dist",
6 | "skipLibCheck": true,
7 | "plugins": [
8 | {
9 | "name": "ts-lit-plugin"
10 | }
11 | ]
12 | },
13 | "include": ["."]
14 | }
15 |
--------------------------------------------------------------------------------
/packages/core/src/types.ts:
--------------------------------------------------------------------------------
1 | export type DiscordTimestamp = Date | string | null;
2 |
3 | export interface LightTheme {
4 | lightTheme: boolean;
5 | }
6 |
7 | export interface Avatars {
8 | [key: string]: string | undefined;
9 | blue?: string;
10 | default: 'blue' | 'gray' | 'green' | 'orange' | 'red';
11 | gray?: string;
12 | green?: string;
13 | orange?: string;
14 | red?: string;
15 | }
16 |
17 | export interface Profile {
18 | author?: string;
19 | avatar?: string;
20 | bot?: boolean;
21 | clanIcon?: string;
22 | clanTag?: string;
23 | officialApp?: boolean;
24 | op?: boolean;
25 | roleColor?: string;
26 | roleIcon?: string;
27 | roleName?: string;
28 | server?: boolean;
29 | verified?: boolean;
30 | }
31 |
32 | export interface DiscordMessageOptions {
33 | avatars?: Avatars;
34 | defaultBackground?: 'discord' | 'none';
35 | defaultMode?: string;
36 | defaultTheme?: string;
37 | emojis?: { [key: string]: Emoji };
38 | profiles?: { [key: string]: Profile };
39 | }
40 |
41 | export interface Emoji {
42 | embedEmoji?: boolean;
43 | name?: string;
44 | url?: string;
45 | }
46 |
--------------------------------------------------------------------------------
/packages/core/src/util.ts:
--------------------------------------------------------------------------------
1 | import { getConfig, icons } from './config.js';
2 | import type { Emoji, DiscordTimestamp } from './types.js';
3 |
4 | export class DiscordComponentsError extends Error {
5 | public constructor(message: string) {
6 | super(message);
7 | this.name = 'DiscordComponentsError';
8 | }
9 | }
10 |
11 | const intlDateFormat = new Intl.DateTimeFormat('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' });
12 | const intlTwelveHourFormat = new Intl.DateTimeFormat('en-US', { hour12: true, hour: '2-digit', minute: '2-digit' });
13 | const intlTwentyFourHourFormat = new Intl.DateTimeFormat('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
14 |
15 | const formatDate = (value: Exclude): string | null => {
16 | if (!(value instanceof Date)) return value;
17 | return intlDateFormat.format(value);
18 | };
19 |
20 | const formatTime = (value: Exclude, hour24 = false): string | null => {
21 | if (!(value instanceof Date)) return value;
22 | if (hour24) return intlTwentyFourHourFormat.format(value);
23 | return intlTwelveHourFormat.format(value);
24 | };
25 |
26 | export function handleTimestamp(value: DiscordTimestamp, useTime = false, hour24 = false): string | null {
27 | if (!(value instanceof Date) && typeof value !== 'string') {
28 | throw new TypeError('Timestamp prop must be a Date object or a string.');
29 | }
30 |
31 | return useTime ? formatTime(value, hour24) : formatDate(value);
32 | }
33 |
34 | export const IMAGE_EXTENSION = /\.(?bmp|jpe?g|png|gif|webp|tiff)$/i;
35 |
36 | export function validateImageExtension(url: string) {
37 | if (!IMAGE_EXTENSION.test(url))
38 | throw new DiscordComponentsError(`The url of an image for discord-image-attachment should match the regex ${IMAGE_EXTENSION}`);
39 | }
40 |
41 | const emojiRegex = /(?:<(?a)?:(?\w{2,32}):)?(?\d{17,21})>?/;
42 | export function getGlobalEmojiUrl(emojiName: string): Emoji | undefined {
43 | const globalEmoji = getConfig().emojis?.[emojiName];
44 | if (globalEmoji) return globalEmoji;
45 |
46 | const match = emojiRegex.exec(emojiName);
47 |
48 | if (match?.groups) {
49 | const { name, id, animated } = match.groups;
50 | const extension = animated ? 'gif' : 'png';
51 |
52 | return {
53 | name,
54 | url: `https://cdn.discordapp.com/emojis/${id}.${extension}`
55 | };
56 | }
57 |
58 | return undefined;
59 | }
60 |
61 | /**
62 | * Get the image for a clan icon
63 | *
64 | * @param clanIcon - The clan icon to get the image for
65 | * @returns The image for the clan icon, or the clan icon itself if it's not found
66 | */
67 | export function getClanIcon(clanIcon: string | undefined): object | string | undefined {
68 | if (!clanIcon) return undefined;
69 |
70 | return icons.get(clanIcon) ?? clanIcon;
71 | }
72 |
--------------------------------------------------------------------------------
/packages/core/tsconfig.eslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "include": ["src", "test"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/core/web-dev-server.config.mjs:
--------------------------------------------------------------------------------
1 | import { fileURLToPath, URL } from 'node:url';
2 | import { esbuildPlugin } from '@web/dev-server-esbuild';
3 |
4 | export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
5 | plugins: [
6 | esbuildPlugin({
7 | ts: true,
8 | target: 'es2020',
9 | tsconfig: fileURLToPath(new URL('src/tsconfig.json', import.meta.url))
10 | })
11 | ],
12 |
13 | open: '/demo/',
14 | watch: true,
15 |
16 | nodeResolve: {
17 | exportConditions: ['browser', 'development']
18 | },
19 |
20 | appIndex: 'demo/index.html'
21 | });
22 |
--------------------------------------------------------------------------------
/packages/documentation/.gitignore:
--------------------------------------------------------------------------------
1 | # build output
2 | dist/
3 |
4 | # generated types
5 | .astro/
6 |
7 | # dependencies
8 | node_modules/
9 |
10 | # Autogenerated documentation
11 | src/content/docs/api/
12 |
--------------------------------------------------------------------------------
/packages/documentation/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "documentation",
3 | "type": "module",
4 | "version": "4.0.0",
5 | "private": true,
6 | "scripts": {
7 | "dev": "astro dev",
8 | "build": "astro check && astro build",
9 | "preview": "astro preview",
10 | "astro": "astro"
11 | },
12 | "dependencies": {
13 | "@astrojs/check": "0.9.4",
14 | "@astrojs/lit": "^4.3.0",
15 | "@astrojs/starlight": "0.34.5",
16 | "@sapphire/docusaurus-plugin-npm2yarn2pnpm": "2.0.2",
17 | "@webcomponents/template-shadowroot": "^0.2.1",
18 | "astro": "5.11.0",
19 | "lit": "^3.3.1",
20 | "react": "^19.1.0",
21 | "starlight-typedoc": "0.21.3",
22 | "typedoc": "0.28.5",
23 | "typedoc-plugin-frontmatter": "^1.3.0",
24 | "typedoc-plugin-markdown": "4.6.4"
25 | },
26 | "devDependencies": {
27 | "@skyra/discord-components-core": "workspace:^",
28 | "@skyra/discord-components-react": "workspace:^",
29 | "@types/react": "19.1.8",
30 | "@types/react-dom": "^19.1.6",
31 | "react-dom": "^19.1.0",
32 | "typescript": "^5.8.3"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/documentation/public/.nojekyll:
--------------------------------------------------------------------------------
1 | This file prevents GitHub Pages from using Jekyll.
2 |
--------------------------------------------------------------------------------
/packages/documentation/public/CNAME:
--------------------------------------------------------------------------------
1 | discord-components.js.org
2 |
--------------------------------------------------------------------------------
/packages/documentation/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
--------------------------------------------------------------------------------
/packages/documentation/public/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | #ffffff
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/android-chrome-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/android-chrome-144x144.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/android-chrome-192x192.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/android-chrome-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/android-chrome-256x256.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/android-chrome-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/android-chrome-36x36.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/android-chrome-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/android-chrome-384x384.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/android-chrome-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/android-chrome-48x48.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/android-chrome-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/android-chrome-72x72.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/android-chrome-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/android-chrome-96x96.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-startup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-startup.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-114x114-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-114x114-precomposed.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-114x114.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-120x120-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-120x120-precomposed.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-120x120.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-144x144-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-144x144-precomposed.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-144x144.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-152x152-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-152x152-precomposed.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-152x152.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-180x180-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-180x180-precomposed.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-180x180.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-57x57-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-57x57-precomposed.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-57x57.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-60x60-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-60x60-precomposed.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-60x60.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-72x72-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-72x72-precomposed.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-72x72.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-76x76-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-76x76-precomposed.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-76x76.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon-precomposed.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/apple-touch-icon.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/favicon-16x16.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/favicon-32x32.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/favicon.ico
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/mstile-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/mstile-144x144.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/mstile-150x150.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/mstile-310x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/mstile-310x150.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/mstile-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/mstile-310x310.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/mstile-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/mstile-70x70.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/opengraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/favicons/opengraph.png
--------------------------------------------------------------------------------
/packages/documentation/public/favicons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
--------------------------------------------------------------------------------
/packages/documentation/public/manifest.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Discord Components",
3 | "short_name": "Discord Components",
4 | "description": "Web components to easily build and display fake Discord messages on your webpages",
5 | "theme_color": "#5865F2",
6 | "background_color": "#131516",
7 | "display": "minimal-ui",
8 | "categories": ["discord", "library", "webcomponents", "lit", "components", "html", "documentation"],
9 | "dir": "ltr",
10 | "lang": "en",
11 | "orientation": "portrait-primary",
12 | "scope": "/",
13 | "start_url": "/",
14 | "icons": [
15 | {
16 | "src": "https://discord-components.js.org/favicons/android-chrome-36x36.png",
17 | "sizes": "36x36",
18 | "type": "image/png"
19 | },
20 | {
21 | "src": "https://discord-components.js.org/favicons/android-chrome-48x48.png",
22 | "sizes": "48x48",
23 | "type": "image/png"
24 | },
25 | {
26 | "src": "https://discord-components.js.org/favicons/android-chrome-72x72.png",
27 | "sizes": "72x72",
28 | "type": "image/png"
29 | },
30 | {
31 | "src": "https://discord-components.js.org/favicons/android-chrome-96x96.png",
32 | "sizes": "96x96",
33 | "type": "image/png"
34 | },
35 | {
36 | "src": "https://discord-components.js.org/favicons/android-chrome-144x144.png",
37 | "sizes": "144x144",
38 | "type": "image/png"
39 | },
40 | {
41 | "src": "https://discord-components.js.org/favicons/android-chrome-192x192.png",
42 | "sizes": "192x192",
43 | "type": "image/png"
44 | },
45 | {
46 | "src": "https://discord-components.js.org/favicons/android-chrome-256x256.png",
47 | "sizes": "256x256",
48 | "type": "image/png"
49 | },
50 | {
51 | "src": "https://discord-components.js.org/favicons/android-chrome-384x384.png",
52 | "sizes": "384x384",
53 | "type": "image/png"
54 | }
55 | ],
56 | "shortcuts": [
57 | {
58 | "name": "Discord Components",
59 | "short_name": "Discord Components",
60 | "description": "Web components to easily build and display fake Discord messages on your webpages",
61 | "url": "/",
62 | "icons": [
63 | {
64 | "src": "https://discord-components.js.org/favicons/android-chrome-96x96.png",
65 | "sizes": "96x96",
66 | "type": "image/png"
67 | }
68 | ]
69 | }
70 | ],
71 | "screenshots": [
72 | {
73 | "src": "/screenshots/pwa-desktop.png",
74 | "sizes": "1200x710",
75 | "type": "image/png",
76 | "form_factor": "wide",
77 | "label": "Discord Components"
78 | },
79 | {
80 | "src": "/screenshots/pwa-mobile.png",
81 | "sizes": "480x640",
82 | "type": "image/png",
83 | "form_factor": "narrow",
84 | "label": "Discord Components"
85 | }
86 | ]
87 | }
88 |
--------------------------------------------------------------------------------
/packages/documentation/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 |
--------------------------------------------------------------------------------
/packages/documentation/public/screenshots/pwa-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/screenshots/pwa-desktop.png
--------------------------------------------------------------------------------
/packages/documentation/public/screenshots/pwa-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/public/screenshots/pwa-mobile.png
--------------------------------------------------------------------------------
/packages/documentation/src/assets/discord-components-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skyra-project/discord-components/cbb5c4230d0a19e713ac4fbb76e55d7dcb0ba558/packages/documentation/src/assets/discord-components-logo.png
--------------------------------------------------------------------------------
/packages/documentation/src/assets/styles.css:
--------------------------------------------------------------------------------
1 | .action:where(.astro-button).primary {
2 | height: 3rem;
3 | background: var(--sl-color-text-accent);
4 | color: var(--sl-color-black);
5 | }
6 |
7 | @media (min-width: 50rem) {
8 | .action:where(.astro-button) {
9 | font-size: var(--sl-text-base);
10 | padding: 1rem 1.25rem;
11 | }
12 | }
13 |
14 | .action:where(.astro-button) {
15 | gap: 0.5em;
16 | align-items: center;
17 | border-radius: 999rem;
18 | padding: 0.5rem 1.125rem;
19 | color: var(--sl-color-black) !important;
20 | line-height: 1.1875;
21 | text-decoration: none;
22 | font-size: var(--sl-text-sm);
23 | }
24 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/angular.svg:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/astro.svg:
--------------------------------------------------------------------------------
1 |
21 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/htmx.svg:
--------------------------------------------------------------------------------
1 |
2 |
29 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/nextjs.svg:
--------------------------------------------------------------------------------
1 |
2 |
37 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/nuxt.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/preact.svg:
--------------------------------------------------------------------------------
1 |
26 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/qwik.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/solid.svg:
--------------------------------------------------------------------------------
1 |
61 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/svelte.svg:
--------------------------------------------------------------------------------
1 |
21 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/vite.svg:
--------------------------------------------------------------------------------
1 |
32 |
--------------------------------------------------------------------------------
/packages/documentation/src/components/astro/images/vue.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/packages/documentation/src/content/config.ts:
--------------------------------------------------------------------------------
1 | import { docsSchema } from '@astrojs/starlight/schema';
2 | import { defineCollection } from 'astro:content';
3 |
4 | export const collections = {
5 | docs: defineCollection({ schema: docsSchema() })
6 | };
7 |
--------------------------------------------------------------------------------
/packages/documentation/src/content/docs/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Discord Components
3 | description: Discord message components to easily build and display fake Discord messages on your webpage.
4 | template: splash
5 | hero:
6 | tagline: Discord message components to easily build and display fake Discord messages on your webpage.
7 | image:
8 | file: ../../assets/discord-components-logo.png
9 | actions:
10 | - text: Documentation
11 | link: /api/readme
12 | icon: right-arrow
13 | variant: primary
14 | ---
15 |
16 | import { Card, CardGrid, Code, Icon } from '@astrojs/starlight/components';
17 | import { Tabs, TabItem } from '@astrojs/starlight/components';
18 | import { npmToBun, npmToYarn, npmToPnpm } from '@sapphire/docusaurus-plugin-npm2yarn2pnpm';
19 | import Templates from '../../components/astro/framework-grid.astro';
20 |
21 |
22 |
23 |
24 |
25 |