From fde6751b77f7274d8ec105d0520d5f4e01b5b2f6 Mon Sep 17 00:00:00 2001 From: Fleny Date: Thu, 2 Oct 2025 21:41:54 +0200 Subject: [PATCH] chore(website): Update deps and remove styled-components (#4466) * chore(website): Remove styled-components This also allows us to remove the loading screen on page load as the styles are now loaded by the browser itself. * chore(website): Update dependencies * Remove clsx * Update dependencies Also update markdown onBrokenMarkdownLinks options as it now deprecated in favor of markdown.hooks.onBrokenMarkdownLinks * Update dependencies --- website/docusaurus.config.ts | 7 +- website/package.json | 34 +- .../src/components/header/index.module.css | 104 + website/src/components/header/index.tsx | 16 +- .../src/components/home/faq/index.module.css | 74 + website/src/components/home/faq/index.tsx | 21 +- .../src/components/home/features/feature.tsx | 5 +- .../home/features/index.module.css} | 5 - .../src/components/home/features/index.tsx | 2 +- .../components/home/reviews/index.module.css | 216 ++ website/src/components/home/reviews/index.tsx | 72 +- website/src/pages/index.module.css | 23 - website/src/pages/index.tsx | 54 +- website/src/styling/index.ts | 437 ---- website/yarn.lock | 2113 +++++++++++------ 15 files changed, 1854 insertions(+), 1329 deletions(-) create mode 100644 website/src/components/header/index.module.css create mode 100644 website/src/components/home/faq/index.module.css rename website/src/{styling/styles.module.css => components/home/features/index.module.css} (63%) create mode 100644 website/src/components/home/reviews/index.module.css delete mode 100644 website/src/pages/index.module.css delete mode 100644 website/src/styling/index.ts diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index c9335f1de..b1535720f 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -40,7 +40,6 @@ const config: Config = { }, onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'throw', onBrokenAnchors: 'throw', // Even if you don't use internalization, you can use this field to set useful @@ -51,6 +50,12 @@ const config: Config = { locales: ['en'], }, + markdown: { + hooks: { + onBrokenMarkdownLinks: 'throw', + }, + }, + presets: [ [ 'classic', diff --git a/website/package.json b/website/package.json index 9571b9890..9f776136c 100644 --- a/website/package.json +++ b/website/package.json @@ -16,29 +16,27 @@ "check": "biome check --write" }, "dependencies": { - "@docusaurus/core": "^3.8.1", - "@docusaurus/faster": "^3.8.1", - "@docusaurus/plugin-client-redirects": "^3.8.1", - "@docusaurus/plugin-content-docs": "^3.8.1", - "@docusaurus/preset-classic": "^3.8.1", - "@docusaurus/theme-common": "^3.8.1", + "@docusaurus/core": "^3.9.1", + "@docusaurus/faster": "^3.9.1", + "@docusaurus/plugin-client-redirects": "^3.9.1", + "@docusaurus/plugin-content-docs": "^3.9.1", + "@docusaurus/preset-classic": "^3.9.1", + "@docusaurus/theme-common": "^3.9.1", "@easyops-cn/docusaurus-search-local": "^0.52.1", - "@mdx-js/react": "^3.1.0", - "@xyflow/react": "^12.8.2", - "clsx": "^2.1.1", + "@mdx-js/react": "^3.1.1", + "@xyflow/react": "^12.8.6", "prism-react-renderer": "^2.4.1", - "react": "^19.1.1", - "react-dom": "^19.1.1", - "styled-components": "^6.1.19" + "react": "^19.2.0", + "react-dom": "^19.2.0" }, "devDependencies": { "@biomejs/biome": "2.2.4", - "@docusaurus/module-type-aliases": "^3.8.1", - "@docusaurus/tsconfig": "^3.8.1", - "@docusaurus/types": "^3.8.1", - "@types/react": "^19.1.10", - "typescript": "5.9.2", - "webpack": "5.101.2" + "@docusaurus/module-type-aliases": "^3.9.1", + "@docusaurus/tsconfig": "^3.9.1", + "@docusaurus/types": "^3.9.1", + "@types/react": "^19.2.0", + "typescript": "5.9.3", + "webpack": "5.102.0" }, "browserslist": { "production": [ diff --git a/website/src/components/header/index.module.css b/website/src/components/header/index.module.css new file mode 100644 index 000000000..193a91ddb --- /dev/null +++ b/website/src/components/header/index.module.css @@ -0,0 +1,104 @@ +.header { + background: url("/img/deno_background.png") repeat center center fixed; + background-repeat: repeat; + height: 60vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; + + ::before { + content: ""; + position: absolute; + bottom: 0px; + right: 0px; + left: 0px; + height: 10px; + background: linear-gradient(0deg, var(--ifm-navbar-background-color), hsla(0, 0%, 7%, 0)); + z-index: 100; + padding: 10px; + } + + h1 { + font-size: 4rem; + font-weight: 900; + color: var(--ifm-color-white); + 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 { + font-size: 2rem; + font-weight: 800; + color: var(--ifm-color-white); + 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; + } + } +} + +.highlight { + background: linear-gradient(135deg, #000, #443281, #443281, #7289da), repeating-linear-gradient(135deg, #000, #000 10px, #000 10px, #443281 20px); + background-clip: text; + -webkit-background-clip: text; + color: transparent; + background-size: 600% 600%; + animation: gradient 10s ease infinite; + height: 100vh; + -webkit-text-decoration-color: transparent; + text-decoration-color: transparent; + + @keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } + } +} + +.headerBody { + margin-top: 2rem; + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} + +.headerButton { + background: transparent; + border: transparent; + + a { + background: #181818; + color: #fff; + text-decoration-color: transparent; + outline: none; + cursor: pointer; + font-size: 1.5rem; + font-weight: 900; + border: 2px solid black; + padding: 0.7rem 1.1rem; + border-radius: 0.5rem; + margin: 0.5rem; + transition: all 0.3s ease-in-out; + + :hover { + background: #0f0f0f; + } + } +} diff --git a/website/src/components/header/index.tsx b/website/src/components/header/index.tsx index 9eb346462..3540c9ced 100644 --- a/website/src/components/header/index.tsx +++ b/website/src/components/header/index.tsx @@ -1,20 +1,20 @@ import Link from '@docusaurus/Link' -import { Button, Header, HeaderBody, Highlight } from '@site/src/styling' +import style from './index.module.css' export default function DiscordenoHeader() { return ( <> -
+

Its time to ditch Eris and Discord.js

- Making Scalable Bots Easy! + Making Scalable Bots Easy!

- - - -
+ + + ) } diff --git a/website/src/components/home/faq/index.module.css b/website/src/components/home/faq/index.module.css new file mode 100644 index 000000000..31750b71d --- /dev/null +++ b/website/src/components/home/faq/index.module.css @@ -0,0 +1,74 @@ +.faqContainer { + border: 1px solid var(--ifm-footer-background-color); + border-radius: 5px; + margin-bottom: 10px; + width: 55vw; + background-color: var(--ifm-footer-background-color); + + #rotated { + transform: rotate(180deg); + } + + @media (max-width: 1024px) { + width: 100%; + } +} + +.faqQuestion { + cursor: pointer; + padding: 10px; + margin: 0; + background-color: var(--ifm-footer-background-color); + color: var(--ifm-color-white); + user-select: none; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + + svg { + fill: var(--ifm-color-white); + } +} + +.faqAnswer { + background-color: var(--ifm-footer-background-color); + color: #fff; + padding-inline: 10px; + height: 0px; + overflow: hidden; + transition: height 0.3s; + /* Firefox and Safari don't support this yet, however since it is just for an animation this is fine */ + /* https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size */ + interpolate-size: allow-keywords; + + &[data-visible="true"] { + height: auto; + padding-block-end: 10px; + } +} + +.faqSection { + display: flex; + justify-content: center; + align-items: center; + margin-top: 5rem; + margin-left: 2vw; + margin-right: 2vw; + + h1 { + margin-top: 3rem; + margin-bottom: 2rem; + width: 100%; + text-align: center; + font-size: 3rem; + font-weight: 900; + 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; + } + } +} diff --git a/website/src/components/home/faq/index.tsx b/website/src/components/home/faq/index.tsx index 929535426..55c5f8efc 100644 --- a/website/src/components/home/faq/index.tsx +++ b/website/src/components/home/faq/index.tsx @@ -1,5 +1,5 @@ -import { FaqAnswer, FaqContainer, FaqQuestion, FaqSection } from '@site/src/styling' import { useState } from 'react' +import style from './index.module.css' const Faq = ({ question, answer, defaultExpanded }: { question: string; answer: string; defaultExpanded?: boolean }) => { const [visible, setVisible] = useState(defaultExpanded ?? false) @@ -9,9 +9,9 @@ const Faq = ({ question, answer, defaultExpanded }: { question: string; answer: } return ( - +
- +
{question} {visible ? ( @@ -22,10 +22,12 @@ const Faq = ({ question, answer, defaultExpanded }: { question: string; answer: )} - - {answer} +
+
+ {answer} +
- +
) } @@ -40,33 +42,30 @@ const questions = [ 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.", - defaultExpanded: false, }, { question: "Why doesn't Discordeno use classes like other libraries?", answer: 'Generally, Discordeno does not use classes. Instead, Discordeno uses plain JavaScript objects to define commands, events, and other components. However, in certain cases where it makes sense, we do use classes. 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.", - defaultExpanded: false, }, ] export default function DiscordenoFAQ() { return ( <> - +

Frequently Asked Questions

{questions.map((question, index) => ( ))}
- +
) } diff --git a/website/src/components/home/features/feature.tsx b/website/src/components/home/features/feature.tsx index 46c9d9d32..b1616900e 100644 --- a/website/src/components/home/features/feature.tsx +++ b/website/src/components/home/features/feature.tsx @@ -1,14 +1,13 @@ import type { FeatureList } from '@site/src/types' -import clsx from 'clsx' export default function Feature({ data }: FeatureList) { return ( -
+
{data.feature.Svg}

{data.feature.title}

-

{data.feature.description}

+ {data.feature.description}
) diff --git a/website/src/styling/styles.module.css b/website/src/components/home/features/index.module.css similarity index 63% rename from website/src/styling/styles.module.css rename to website/src/components/home/features/index.module.css index b248eb2e5..2132b3d12 100644 --- a/website/src/styling/styles.module.css +++ b/website/src/components/home/features/index.module.css @@ -4,8 +4,3 @@ padding: 2rem 0; width: 100%; } - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/website/src/components/home/features/index.tsx b/website/src/components/home/features/index.tsx index 24f09c4ef..91f369f11 100644 --- a/website/src/components/home/features/index.tsx +++ b/website/src/components/home/features/index.tsx @@ -1,6 +1,6 @@ -import styles from '@site/src/styling/styles.module.css' import type { FeatureItem } from '@site/src/types' import Feature from './feature' +import styles from './index.module.css' const FeatureList: FeatureItem[] = [ { diff --git a/website/src/components/home/reviews/index.module.css b/website/src/components/home/reviews/index.module.css new file mode 100644 index 000000000..5672ca4cc --- /dev/null +++ b/website/src/components/home/reviews/index.module.css @@ -0,0 +1,216 @@ +.reviewStar { + width: 20px; + height: 20px; + fill: #cbd5e0; + + [data-active="true"] & { + fill: currentColor; + } +} + +.starContainer { + display: flex; + align-items: center; +} + +.reviewsRight { + display: flex; + align-items: center; + flex-direction: column; + font-size: 1.5rem; + font-weight: 900; + color: var(--ifm-color-white); + + div { + display: flex; + align-items: center; + gap: 0.2rem; + } + + @media (max-width: 768px) { + display: none; + } +} + +.reviewsLeft { + display: flex; + align-items: center; + gap: 0.7rem; + + > img { + width: 50px; + height: 50px; + border-radius: 50%; + } + + > div { + .sub_header { + display: flex; + align-items: center; + gap: 0.1rem; + color: var(--ifm-color-white); + + .username { + margin-left: 0.3rem; + font-size: 1rem; + font-weight: 900; + } + + .discriminator { + font-size: 0.8rem; + color: lightgray; + font-weight: 900; + margin-left: 0.1rem; + margin-top: 3px; + } + } + } + + span { + display: flex; + align-items: center; + color: var(--ifm-color-white); + + .username { + font-size: 1.5rem; + font-weight: 900; + line-height: 1; + } + + .discriminator { + font-size: 1rem; + color: lightgray; + font-weight: 900; + margin-top: 0.4rem; + margin-left: 0.3rem; + } + + .badge { + display: flex; + align-items: center; + background-color: #5865f2; + font-size: 0.65em; + margin-left: 5px; + padding: 3px 4px; + border-radius: 3px; + line-height: 100%; + text-transform: uppercase; + + svg { + margin-right: 2px; + width: 12px; + height: 12px; + } + } + } +} + +.reviewsHeader { + display: flex; + justify-content: space-between; + align-items: center; +} + +.reviewsElement { + background: var(--ifm-footer-background-color); + border-radius: 5px; + height: 240px; + padding: 32px 40px; + position: relative; + + @media (max-width: 768px) { + height: fit-content; + } +} + +.reviewsBox { + margin-top: 1rem; + display: flex; + align-items: center; + gap: 0.5rem; + height: 80px; + color: var(--ifm-color-white); + + @media (max-width: 768px) { + height: fit-content; + } +} + +.reviewsOtherContainer { + margin-top: 7px; + display: flex; + justify-content: space-between; + align-items: center; + color: var(--ifm-color-white); + + a { + color: var(--ifm-color-white); + font-size: 1rem; + font-weight: 400; + transition: all 0.3s ease-in-out; + display: flex; + align-items: center; + gap: 0.2rem; + text-decoration: underline; + + svg { + width: 20px; + height: 20px; + } + + :hover { + color: lightblue; + } + } + + div { + display: flex; + align-items: center; + gap: 0.5rem; + text-transform: capitalize; + + @media (max-width: 768px) { + display: none; + } + + strong { + margin-left: 4px; + margin-right: -2px; + } + } +} + +.reviewsElementWrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(700px, 1fr)); + gap: 1rem; + + @media (max-width: 768px) { + grid-template-columns: repeat(auto-fill, minmax(95vw, 1fr)); + } +} + +.reviewsSection { + display: flex; + justify-content: center; + align-items: center; + margin-top: 2rem; + margin-left: 2vw; + margin-right: 2vw; + + h1 { + margin-top: 3rem; + margin-bottom: 2rem; + width: 100%; + text-align: center; + font-size: 3rem; + font-weight: 900; + 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; + } + } +} diff --git a/website/src/components/home/reviews/index.tsx b/website/src/components/home/reviews/index.tsx index 6c764e741..494ecd929 100644 --- a/website/src/components/home/reviews/index.tsx +++ b/website/src/components/home/reviews/index.tsx @@ -1,16 +1,5 @@ -import { - ReviewsBox, - ReviewsElement, - ReviewsElementWrapper, - ReviewsHeader, - ReviewsLeft, - ReviewsOtherContainer, - ReviewsRight, - ReviewsSection, - StarContainer, - StarIcon, -} from '@site/src/styling' import { DiscordLibraries, type IReview } from '@site/src/types' +import style from './index.module.css' const reviewList: IReview[] = [ { @@ -97,46 +86,53 @@ const reviewList: IReview[] = [ export default function DiscordenoReviews() { return ( - +

Discordeno Community Feedback

- +
{reviewList .sort((a, b) => { return b.bot.guild_count - a.bot.guild_count }) .map((review) => ( - - - +
+
+
{review.bot.username}
-
{review.bot.username}
-
#{review.bot.discriminator}
-
+
{review.bot.username}
+
#{review.bot.discriminator}
+
Bot
-
- by
{review.developer.usernames.join(', ')}
+
+ by
{review.developer.usernames.join(', ')}
- - - - {([1, 2, 3, 4, 5] as const).map((star) => ( - review.stars} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true"> +
+
+
+ {[1, 2, 3, 4, 5].map((star) => ( + review.stars} + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 20 20" + aria-hidden="true" + > {`Star ${star}`} - + ))} - +
- {String(review.bot.guild_count).replace(/\B(?=(\d{3})+(?!\d))/g, ',')} guilds + {review.bot.guild_count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} guilds
- - - {review.review} - +
+
+
{review.review}
+ - - +
+
))} - +
- +
) } diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css deleted file mode 100644 index 9f71a5da7..000000000 --- a/website/src/pages/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 44369a8dc..4a350f81f 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,69 +1,19 @@ import Layout from '@theme/Layout' -import { useEffect, useState } from 'react' import Footer from '../components/footer' import DiscordenoHeader from '../components/header' import DiscordenoFAQ from '../components/home/faq' import DiscordenoFeatures from '../components/home/features' import DiscordenoReviews from '../components/home/reviews' -import { MainPage } from '../styling' export default function Home(): JSX.Element { - const [loading, setLoading] = useState(true) - - useEffect(() => { - setLoading(false) - }, []) - - if (loading) - return ( -
-
- Discordeno Logo - - Loading... - -
-
- ) - return ( - +
- +