mirror of
https://github.com/discordeno/discordeno.git
synced 2026-09-17 08:47:22 +00:00
Mobile responsiveness + add loading (#3005)
* Mobile responsiveness + add loading * formatting + remove animate.css - causing useless lag --------- Co-authored-by: Peter Hanania <peter@pogy.xyz>
This commit is contained in:
Peter
@@ -1,3 +1,4 @@
|
||||
module.exports = {
|
||||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
||||
plugins: ['babel-plugin-styled-components'],
|
||||
}
|
||||
|
||||
@@ -405,7 +405,6 @@ This is for bots who need to take certain actions when the bot is added to or re
|
||||
|
||||
Let's start by creating a small local cache at the top of the file.
|
||||
|
||||
|
||||
```ts
|
||||
const cache = {
|
||||
guildIds: new Set<string>(),
|
||||
@@ -444,31 +443,31 @@ events: {
|
||||
},
|
||||
```
|
||||
|
||||
Now we need to make sure that this will handle it correctly by changing any guild creates that are not new guilds, to a private event.
|
||||
Now we need to make sure that this will handle it correctly by changing any guild creates that are not new guilds, to a private event.
|
||||
|
||||
```ts
|
||||
if (payload.t === "READY") {
|
||||
if (payload.t === 'READY') {
|
||||
// Marks which guilds the bot in when initial loading in cache
|
||||
payload.d.guilds.forEach((g) => cache.loadingGuildIds.add(g.id));
|
||||
payload.d.guilds.forEach(g => cache.loadingGuildIds.add(g.id))
|
||||
}
|
||||
|
||||
if (payload.t === "GUILD_CREATE") {
|
||||
if (payload.t === 'GUILD_CREATE') {
|
||||
// Check if this id is in cache
|
||||
const existing = cache.guildIds.has(payload.d.id);
|
||||
const existing = cache.guildIds.has(payload.d.id)
|
||||
// If it already exists this was either a shard resume or unavailable guild became available etc...
|
||||
if (existing) return;
|
||||
if (existing) return
|
||||
|
||||
// add this id to cache or db
|
||||
cache.guildIds.add(payload.d.id);
|
||||
|
||||
if (cache.loadingGuildIds.has(payload.d.id)) {
|
||||
cache.guildIds.add(payload.d.id)
|
||||
|
||||
if (cache.loadingGuildIds.has(payload.d.id)) {
|
||||
// SEND A CUSTOM EVENT. Name it whatever u want
|
||||
payload.t = "GUILD_LOADED_DD";
|
||||
payload.t = 'GUILD_LOADED_DD'
|
||||
// Remove from cache
|
||||
cache.loadingGuildIds.delete(id);
|
||||
cache.loadingGuildIds.delete(id)
|
||||
}
|
||||
|
||||
cache.guildIds.add(id);
|
||||
cache.guildIds.add(id)
|
||||
}
|
||||
```
|
||||
|
||||
@@ -477,14 +476,14 @@ This will make it so whenever a GUILD_CREATE arrives from the initial batch it w
|
||||
One last bit before you are done, simply add the following to make it ignore any useless **GUILD_DELETE** events as well. You can also choose rename it should you like to something like **GUILD_UNAVAILABLE**.
|
||||
|
||||
```ts
|
||||
if (payload.t === "GUILD_DELETE") {
|
||||
if ((payload.d as DiscordUnavailableGuild).unavailable) return;
|
||||
if (payload.t === 'GUILD_DELETE') {
|
||||
if ((payload.d as DiscordUnavailableGuild).unavailable) return
|
||||
}
|
||||
```
|
||||
|
||||
#### MESSAGE_UPDATE
|
||||
|
||||
One other area where we can optimize is for the **MESSAGE_UPDATE** event, assuming you have the MessageContent intent enabled. You can save a ton of your CPU for gateway and bot by adding this in. This event can spam for no reason whatsoever and we can use the following code to ignore useless events. For example, any message that is sent with an embed will have a
|
||||
One other area where we can optimize is for the **MESSAGE_UPDATE** event, assuming you have the MessageContent intent enabled. You can save a ton of your CPU for gateway and bot by adding this in. This event can spam for no reason whatsoever and we can use the following code to ignore useless events. For example, any message that is sent with an embed will have a
|
||||
|
||||
- MESSAGE_CREATE
|
||||
- MESSAGE_UPDATE
|
||||
@@ -511,21 +510,21 @@ Then let's say the user actually edits the message just a tiny bit.
|
||||
Imagine having to process all these events, sending them through your queue system and causing a waste of CPU processing power.
|
||||
|
||||
```ts
|
||||
if (payload.t === "MESSAGE_UPDATE") {
|
||||
const message = payload.d as DiscordMessage;
|
||||
if (payload.t === 'MESSAGE_UPDATE') {
|
||||
const message = payload.d as DiscordMessage
|
||||
|
||||
const id = message.id;
|
||||
const content = message.content || "";
|
||||
const cached = cache.editedMessages.get(id);
|
||||
const id = message.id
|
||||
const content = message.content || ''
|
||||
const cached = cache.editedMessages.get(id)
|
||||
|
||||
if (cached === content) return;
|
||||
if (cached === content) return
|
||||
else {
|
||||
// Add to local cache for future events comparison
|
||||
cache.editedMessages.set(id, content);
|
||||
cache.editedMessages.set(id, content)
|
||||
// Remove after 10 seconds from cache
|
||||
setTimeout(() => {
|
||||
cache.editedMessages.delete(id);
|
||||
}, 10000);
|
||||
cache.editedMessages.delete(id)
|
||||
}, 10000)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Generated
+1
-6
@@ -13,7 +13,7 @@
|
||||
"@docusaurus/preset-classic": "2.3.1",
|
||||
"@easyops-cn/docusaurus-search-local": "^0.34.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"animate.css": "^4.1.1",
|
||||
"babel-plugin-styled-components": "^2.1.1",
|
||||
"chart.js": "^4.2.1",
|
||||
"clsx": "^1.2.1",
|
||||
"prism-react-renderer": "^1.3.5",
|
||||
@@ -5192,11 +5192,6 @@
|
||||
"algoliasearch": ">= 3.1 < 6"
|
||||
}
|
||||
},
|
||||
"node_modules/animate.css": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
|
||||
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
|
||||
},
|
||||
"node_modules/ansi-align": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
"@docusaurus/preset-classic": "2.3.1",
|
||||
"@easyops-cn/docusaurus-search-local": "^0.34.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"animate.css": "^4.1.1",
|
||||
"babel-plugin-styled-components": "^2.1.1",
|
||||
"chart.js": "^4.2.1",
|
||||
"clsx": "^1.2.1",
|
||||
"prism-react-renderer": "^1.3.5",
|
||||
|
||||
@@ -44,23 +44,28 @@ const Faq = ({
|
||||
|
||||
const questions = [
|
||||
{
|
||||
question: 'Does Discordeno work on all JavaScript runtimes like Deno, Node.js, and Bun?',
|
||||
answer: "Yes! Discordeno is designed to work on any JavaScript runtime, including Deno, Node.js, and even in the Bun environment. This means that you can use Discordeno in your project no matter where you're running your code.",
|
||||
question:
|
||||
'Does Discordeno work on all JavaScript runtimes like Deno, Node.js, and Bun?',
|
||||
answer:
|
||||
"Yes! Discordeno is designed to work on any JavaScript runtime, including Deno, Node.js, and even in the Bun environment. This means that you can use Discordeno in your project no matter where you're running your code.",
|
||||
defaultExpanded: true,
|
||||
},
|
||||
{
|
||||
question: 'Does Discordeno handle sharding?',
|
||||
answer: "Yes! Discordeno helps run some of the largest bot's on discord. Discordeno has built-in support for sharding, which allows you to distribute your bot across multiple processes or servers. Sharding can help improve the scalability and reliability of your bot, especially if you're working with a large number of guilds or users. Discordeno's sharding system is designed to be easy to use and configure, with support for automatic sharding and custom sharding strategies. Make sure to check the Discordeno documentation for more information on how to use sharding in your bot.",
|
||||
answer:
|
||||
"Yes! Discordeno helps run some of the largest bot's on discord. Discordeno has built-in support for sharding, which allows you to distribute your bot across multiple processes or servers. Sharding can help improve the scalability and reliability of your bot, especially if you're working with a large number of guilds or users. Discordeno's sharding system is designed to be easy to use and configure, with support for automatic sharding and custom sharding strategies. Make sure to check the Discordeno documentation for more information on how to use sharding in your bot.",
|
||||
defaultExpanded: false,
|
||||
},
|
||||
{
|
||||
question: "Why doesn't Discordeno use Classes like other libraries?",
|
||||
answer: "Yes and No. Generally, Discordeno does not use classes. However, in certain cases where it makes sense we do use them. Instead, Discordeno uses plain JavaScript objects to define commands, events, and other components. This design choice was made to keep the library lightweight and simple, and to allow for more flexible and dynamic code, as components can be easily modified and extended at runtime. While classes can be useful in some cases, Discordeno has chosen to use a more functional approach.",
|
||||
answer:
|
||||
'Yes and No. Generally, Discordeno does not use classes. However, in certain cases where it makes sense we do use them. Instead, Discordeno uses plain JavaScript objects to define commands, events, and other components. This design choice was made to keep the library lightweight and simple, and to allow for more flexible and dynamic code, as components can be easily modified and extended at runtime. While classes can be useful in some cases, Discordeno has chosen to use a more functional approach.',
|
||||
defaultExpanded: false,
|
||||
},
|
||||
{
|
||||
question: 'Can I still use classes in my bot with Discordeno?',
|
||||
answer: "Yes! While Discordeno itself does not use classes, you can still use classes in your own code by using one of the many libraries or frameworks that provide class-based abstractions on top of Discordeno. Some examples of such libraries include the Discordeno.js which provides a very similar framework and API to Discord.js or the Sinf library that provides a similar API to Eris library. These libraries provide classes and other abstractions that can help simplify the development of your bot, while still leveraging the power and flexibility of Discordeno's underlying object-based API. Make sure to check the documentation of these libraries for more information on how to use them in your bot.",
|
||||
answer:
|
||||
"Yes! While Discordeno itself does not use classes, you can still use classes in your own code by using one of the many libraries or frameworks that provide class-based abstractions on top of Discordeno. Some examples of such libraries include the Discordeno.js which provides a very similar framework and API to Discord.js or the Sinf library that provides a similar API to Eris library. These libraries provide classes and other abstractions that can help simplify the development of your bot, while still leveraging the power and flexibility of Discordeno's underlying object-based API. Make sure to check the documentation of these libraries for more information on how to use them in your bot.",
|
||||
defaultExpanded: false,
|
||||
},
|
||||
]
|
||||
|
||||
@@ -4,7 +4,7 @@ import clsx from 'clsx'
|
||||
|
||||
export default function Feature({ data }: FeatureList): JSX.Element {
|
||||
return (
|
||||
<div className={clsx('col col--4 animate__animated animate__fadeInDown')}>
|
||||
<div className={clsx('col col--4')}>
|
||||
<div className="text--center">{data.feature.Svg}</div>
|
||||
|
||||
<div className="text--center padding-horiz--md">
|
||||
|
||||
@@ -95,10 +95,7 @@ export default function DiscordenoReviews() {
|
||||
return b.bot.guild_count - a.bot.guild_count
|
||||
})
|
||||
.map((review, idx) => (
|
||||
<ReviewsElement
|
||||
key={review.bot.username}
|
||||
className="animate__animated animate__fadeInDown"
|
||||
>
|
||||
<ReviewsElement key={review.bot.username}>
|
||||
<ReviewsHeader>
|
||||
<ReviewsLeft>
|
||||
<img src={review.bot.avatar} alt={review.bot.username} />
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
||||
import Layout from '@theme/Layout'
|
||||
import 'animate.css'
|
||||
import DiscordenoHeader from '../components/header'
|
||||
import { MainPage } from '../styling'
|
||||
import DiscordenoFeatures from '../components/home/features'
|
||||
@@ -10,7 +9,59 @@ import DiscordenoReviews from '../components/home/reviews'
|
||||
import DiscordenoFAQ from '../components/home/faq'
|
||||
|
||||
export default function Home(): JSX.Element {
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
// Use loading to give time to JS to load
|
||||
const [loading, setLoading] = React.useState(true)
|
||||
|
||||
React.useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false)
|
||||
|
||||
// give it a small timeout to make sure the loading screen is shown
|
||||
}, 1000)
|
||||
}, [])
|
||||
|
||||
if (loading)
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
background: 'var(--ifm-navbar-background-color)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/img/logo.png"
|
||||
alt="Discordeno Logo"
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
color: 'var(--ifm-navbar-color)',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
Loading...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`Discordeno Documentation`}
|
||||
|
||||
@@ -33,6 +33,10 @@ export const Header = styled.div`
|
||||
line-height: 1.25;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -42,6 +46,10 @@ export const Header = styled.div`
|
||||
line-height: 1.25;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@@ -155,6 +163,10 @@ export const ReviewsSection = styled.div`
|
||||
color: var(--ifm-color-white);
|
||||
line-height: 1.25;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@@ -174,6 +186,10 @@ export const ReviewsElement = styled.div`
|
||||
height: 240px;
|
||||
padding: 32px 40px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: fit-content;
|
||||
}
|
||||
`
|
||||
|
||||
export const ReviewsHeader = styled.div`
|
||||
@@ -281,6 +297,10 @@ export const ReviewsBox = styled.div`
|
||||
gap: 0.5rem;
|
||||
height: 80px;
|
||||
color: var(--ifm-color-white);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: fit-content;
|
||||
}
|
||||
`
|
||||
|
||||
export const StarContainer = styled.div`
|
||||
@@ -300,6 +320,10 @@ export const ReviewsOther = styled.div`
|
||||
bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
position: unset;
|
||||
}
|
||||
`
|
||||
|
||||
export const ReviewsOtherContainer = styled.div`
|
||||
@@ -365,6 +389,10 @@ export const FaqSection = styled.div`
|
||||
color: var(--ifm-color-white);
|
||||
line-height: 1.25;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@@ -372,7 +400,7 @@ export const FaqContainer = styled.div`
|
||||
border: 1px solid var(--ifm-footer-background-color);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
width: 40vw;
|
||||
width: 55vw;
|
||||
background-color: var(--ifm-footer-background-color);
|
||||
|
||||
#rotated {
|
||||
@@ -380,7 +408,7 @@ export const FaqContainer = styled.div`
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 90vw;
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
+2
-9
@@ -3775,13 +3775,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"animate.css@npm:^4.1.1":
|
||||
version: 4.1.1
|
||||
resolution: "animate.css@npm:4.1.1"
|
||||
checksum: c7eb91540423532c549725a6dedea993735a05eadaa49ed4d1965ce166a6db36459adcc9667c1dfe13657fab92a2875bbee34ad0d942444a731badab69f762c8
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"ansi-align@npm:^3.0.0, ansi-align@npm:^3.0.1":
|
||||
version: 3.0.1
|
||||
resolution: "ansi-align@npm:3.0.1"
|
||||
@@ -4099,7 +4092,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"babel-plugin-styled-components@npm:>= 1.12.0":
|
||||
"babel-plugin-styled-components@npm:>= 1.12.0, babel-plugin-styled-components@npm:^2.1.1":
|
||||
version: 2.1.1
|
||||
resolution: "babel-plugin-styled-components@npm:2.1.1"
|
||||
dependencies:
|
||||
@@ -12294,7 +12287,7 @@ __metadata:
|
||||
"@tsconfig/docusaurus": ^1.0.5
|
||||
"@typescript-eslint/eslint-plugin": ^5.57.1
|
||||
"@typescript-eslint/parser": ^5.57.1
|
||||
animate.css: ^4.1.1
|
||||
babel-plugin-styled-components: ^2.1.1
|
||||
chart.js: ^4.2.1
|
||||
clsx: ^1.2.1
|
||||
eslint: ^8.38.0
|
||||
|
||||
Reference in New Issue
Block a user