mirror of
https://github.com/discordeno/discordeno.git
synced 2026-09-17 08:47:22 +00:00
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
This commit is contained in:
Fleny
@@ -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',
|
||||
|
||||
+16
-18
@@ -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": [
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<>
|
||||
<Header>
|
||||
<div className={style.header}>
|
||||
<h1>Its time to ditch Eris and Discord.js</h1>
|
||||
<h2>
|
||||
Making <Highlight>Scalable</Highlight> Bots Easy!
|
||||
Making <span className={style.highlight}>Scalable</span> Bots Easy!
|
||||
</h2>
|
||||
<HeaderBody>
|
||||
<Button variant="primary">
|
||||
<div className={style.headerBody}>
|
||||
<button className={style.headerButton}>
|
||||
<Link to="/docs/intro">Documentation</Link>
|
||||
</Button>
|
||||
</HeaderBody>
|
||||
</Header>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<FaqContainer>
|
||||
<div className={style.faqContainer}>
|
||||
<div>
|
||||
<FaqQuestion onClick={toggleVisibility}>
|
||||
<div className={style.faqQuestion} onClick={toggleVisibility}>
|
||||
{question}
|
||||
{visible ? (
|
||||
<svg height="24" width="24" id="rotated">
|
||||
@@ -22,10 +22,12 @@ const Faq = ({ question, answer, defaultExpanded }: { question: string; answer:
|
||||
<path d="m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4Z"></path>
|
||||
</svg>
|
||||
)}
|
||||
</FaqQuestion>
|
||||
<FaqAnswer visible={visible}>{answer}</FaqAnswer>
|
||||
</div>
|
||||
<div className={style.faqAnswer} data-visible={visible && 'true'}>
|
||||
{answer}
|
||||
</div>
|
||||
</div>
|
||||
</FaqContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
<FaqSection>
|
||||
<div className={style.faqSection}>
|
||||
<div>
|
||||
<h1>Frequently Asked Questions</h1>
|
||||
{questions.map((question, index) => (
|
||||
<Faq key={index} question={question.question} answer={question.answer} defaultExpanded={question.defaultExpanded} />
|
||||
))}
|
||||
</div>
|
||||
</FaqSection>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import type { FeatureList } from '@site/src/types'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export default function Feature({ data }: FeatureList) {
|
||||
return (
|
||||
<div className={clsx('col col--4')}>
|
||||
<div className="col col--4">
|
||||
<div className="text--center">{data.feature.Svg}</div>
|
||||
|
||||
<div className="text--center padding-horiz--md">
|
||||
<h3>{data.feature.title}</h3>
|
||||
<p>{data.feature.description}</p>
|
||||
{data.feature.description}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
-5
@@ -4,8 +4,3 @@
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
@@ -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[] = [
|
||||
{
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<ReviewsSection>
|
||||
<div className={style.reviewsSection}>
|
||||
<div>
|
||||
<div>
|
||||
<h1>Discordeno Community Feedback</h1>
|
||||
</div>
|
||||
<ReviewsElementWrapper>
|
||||
<div className={style.reviewsElementWrapper}>
|
||||
{reviewList
|
||||
.sort((a, b) => {
|
||||
return b.bot.guild_count - a.bot.guild_count
|
||||
})
|
||||
.map((review) => (
|
||||
<ReviewsElement key={review.bot.username}>
|
||||
<ReviewsHeader>
|
||||
<ReviewsLeft>
|
||||
<div className={style.reviewsElement} key={review.bot.username}>
|
||||
<div className={style.reviewsHeader}>
|
||||
<div className={style.reviewsLeft}>
|
||||
<img src={review.bot.avatar} alt={review.bot.username} />
|
||||
<div>
|
||||
<span>
|
||||
<div id="username">{review.bot.username}</div>
|
||||
<div id="discriminator">#{review.bot.discriminator}</div>
|
||||
<div id="badge">
|
||||
<div className={style.username}>{review.bot.username}</div>
|
||||
<div className={style.discriminator}>#{review.bot.discriminator}</div>
|
||||
<div className={style.badge}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16">
|
||||
<path fill="#fff" fillRule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"></path>
|
||||
</svg>
|
||||
Bot
|
||||
</div>
|
||||
</span>
|
||||
<div id="sub_header">
|
||||
by <div id="username">{review.developer.usernames.join(', ')}</div>
|
||||
<div className={style.sub_header}>
|
||||
by <div className={style.username}>{review.developer.usernames.join(', ')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReviewsLeft>
|
||||
<ReviewsRight>
|
||||
<StarContainer>
|
||||
{([1, 2, 3, 4, 5] as const).map((star) => (
|
||||
<StarIcon key={star} active={star > review.stars} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
|
||||
</div>
|
||||
<div className={style.reviewsRight}>
|
||||
<div className={style.starContainer}>
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<svg
|
||||
key={star}
|
||||
className={style.reviewStar}
|
||||
data-active={star > review.stars}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<title>{`Star ${star}`}</title>
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</StarIcon>
|
||||
</svg>
|
||||
))}
|
||||
</StarContainer>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
@@ -148,12 +144,12 @@ export default function DiscordenoReviews() {
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
{String(review.bot.guild_count).replace(/\B(?=(\d{3})+(?!\d))/g, ',')} guilds
|
||||
{review.bot.guild_count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} guilds
|
||||
</div>
|
||||
</ReviewsRight>
|
||||
</ReviewsHeader>
|
||||
<ReviewsBox>{review.review}</ReviewsBox>
|
||||
<ReviewsOtherContainer>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.reviewsBox}>{review.review}</div>
|
||||
<div className={style.reviewsOtherContainer}>
|
||||
<a href={review.bot.invite_url} target="_blank" rel="noopener noreferrer">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
@@ -200,11 +196,11 @@ export default function DiscordenoReviews() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ReviewsOtherContainer>
|
||||
</ReviewsElement>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</ReviewsElementWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</ReviewsSection>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 (
|
||||
<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`} description="An in-depth guide to using the Discordeno library for Deno.">
|
||||
<DiscordenoHeader />
|
||||
<MainPage>
|
||||
<div style={{ backgroundColor: 'var(--ifm-navbar-background-color)' }}>
|
||||
<DiscordenoFeatures />
|
||||
<DiscordenoReviews />
|
||||
<DiscordenoFAQ />
|
||||
</MainPage>
|
||||
</div>
|
||||
<Footer />
|
||||
</Layout>
|
||||
)
|
||||
|
||||
@@ -1,437 +0,0 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
export const Header = styled.div`
|
||||
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;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const HeaderCode = styled.div``
|
||||
|
||||
export const Highlight = styled.span`
|
||||
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;
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
}`
|
||||
|
||||
export const Button = styled.button<{
|
||||
variant: 'primary' | 'link'
|
||||
}>`
|
||||
background: transparent;
|
||||
border: transparent;
|
||||
|
||||
a {
|
||||
background: ${({ variant }) => (variant === 'primary' ? '#181818' : 'transparent')};
|
||||
color: ${({ variant }) => (variant === 'primary' ? '#fff' : 'primary')};
|
||||
animation: gradient 10s ease infinite;
|
||||
-webkit-text-decoration-color: transparent;
|
||||
border: none;
|
||||
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;
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
:hover {
|
||||
background: ${({ variant }) => (variant === 'primary' ? '#0F0F0F' : 'transparent')};
|
||||
color: ${({ variant }) => (variant === 'primary' ? '#fff' : 'primary')};
|
||||
animation: gradient 10s ease infinite;
|
||||
-webkit-text-decoration-color: transparent;
|
||||
border: none;
|
||||
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;
|
||||
}
|
||||
}
|
||||
`
|
||||
export const HeaderBody = styled.div`
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
`
|
||||
|
||||
export const MainPage = styled.div`
|
||||
background: var(--ifm-navbar-background-color);
|
||||
`
|
||||
|
||||
export const ReviewsSection = styled.div`
|
||||
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;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ReviewsElementWrapper = styled.div`
|
||||
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));
|
||||
}
|
||||
`
|
||||
|
||||
export const ReviewsElement = styled.div`
|
||||
background: var(--ifm-footer-background-color);
|
||||
border-radius: 5px;
|
||||
height: 240px;
|
||||
padding: 32px 40px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: fit-content;
|
||||
}
|
||||
`
|
||||
|
||||
export const ReviewsHeader = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
export const ReviewsRight = styled.div`
|
||||
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;
|
||||
}
|
||||
`
|
||||
|
||||
export const ReviewsLeft = styled.div`
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ReviewsBox = styled.div`
|
||||
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;
|
||||
}
|
||||
`
|
||||
|
||||
export const StarContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
export const StarIcon = styled.svg<{ active: boolean }>`
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: ${(props) => (props.active ? 'currentColor' : '#CBD5E0')};
|
||||
`
|
||||
|
||||
export const ReviewsOther = styled.div`
|
||||
margin-top: 7px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
position: unset;
|
||||
}
|
||||
`
|
||||
|
||||
export const ReviewsOtherContainer = styled.div`
|
||||
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;
|
||||
text-decoration: none;
|
||||
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;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const FaqSection = styled.div`
|
||||
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;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const FaqContainer = styled.div`
|
||||
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%;
|
||||
}
|
||||
`
|
||||
|
||||
export const FaqQuestion = styled.h3`
|
||||
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);
|
||||
}
|
||||
`
|
||||
|
||||
export const FaqAnswer = styled.div<{ visible: boolean }>`
|
||||
padding: ${({ visible }) => (visible ? '10px' : '0px')};
|
||||
background-color: var(--ifm-footer-background-color);
|
||||
color: #fff;
|
||||
height: ${({ visible }) => (visible ? 'auto' : '0px')};
|
||||
overflow: hidden;
|
||||
transition: height 0.3s;
|
||||
`
|
||||
+1381
-732
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user