build: update to docusaurus v3, use different discord components framework

.github/CONTRIBUTING.md

@@ -8,7 +8,7 @@ To get started with contributing to this guide, follow these steps:
 
 1. `cd guide` as this is our docusaurus directory.
 2. Install dependencies: `npm install`.
-    - Note: Node version 16.14 or higher is required for Docusaurus 2.
+    - Note: Node v24 or higher is required.
 3. Build using `Docusaurus`.
     - To build the documentation once, use `npm run build` and open `build/index.html` in your browser
     - Alternatively, if you want to see your changes to the content in real-time, use `npm run start` to start an autoreloading server on localhost.

.pre-commit-config.yaml

@@ -1,6 +1,6 @@
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.2.0
+    rev: v6.0.0
     hooks:
       - id: check-case-conflict
       - id: end-of-file-fixer
@@ -17,13 +17,13 @@ repos:
       args: [--line-length=100]
   # for code samples
   - repo: https://github.com/psf/black
-    rev: 22.3.0
+    rev: 26.5.1
     hooks:
     - id: black
       args: [--line-length=100]
   # for markdown formatting
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v2.6.2
+  - repo: https://github.com/rbubley/mirrors-prettier
+    rev: v3.9.6
     hooks:
     - id: prettier
       types_or: [html, css, javascript, markdown, mdx]

README.md

@@ -14,12 +14,12 @@ as their library of choice.
 
 The concept we will be going over, include:
 
--   How to get started on working with bots;
--   How to create and organize commands, using cogs/extensions;
--   Working with databases (such as [`sqlite`][sqlite-docs] and [`mongodb (motor)`][motor-docs]);
--   Using the [`AutoShardedClient`](https://disnake.readthedocs.io/en/stable/api.html#disnake.AutoShardedClient) class
-    to shard your bot;
--   A plethora of examples with popular topics along with in-depth explanation, and much more!
+- How to get started on working with bots;
+- How to create and organize commands, using cogs/extensions;
+- Working with databases (such as [`sqlite`][sqlite-docs] and [`mongodb (motor)`][motor-docs]);
+- Using the [`AutoShardedClient`](https://disnake.readthedocs.io/en/stable/api.html#disnake.AutoShardedClient) class
+  to shard your bot;
+- A plethora of examples with popular topics along with in-depth explanation, and much more!
 
 [sqlite-docs]: https://docs.python.org/3/library/sqlite3.html
 [motor-docs]: https://motor.readthedocs.io/en/stable/

code-samples/interactions/modals/create-tag.py

@@ -2,7 +2,6 @@
 from disnake.ext import commands
 from disnake import TextInputStyle
 
-
 bot = commands.Bot(command_prefix="!")
 
 

guide/babel.config.js

@@ -1,3 +1,3 @@
-module.exports = {
-	presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+export default {
+	presets: ['@docusaurus/core/lib/babel/preset'],
 };

guide/docs/contributing.mdx

@@ -8,8 +8,8 @@ First off, thanks for taking the time to contribute. This guide uses [Docusaurus
 
 ## Prerequisites
 
--   node v16 or newer
--   pre-commit
+- node v24 or newer
+- pre-commit
 
 ## Local development
 

guide/docs/faq/general.mdx

@@ -32,8 +32,8 @@ It is highly discouraged to use <DocsLink ext="commands" reference="disnake.ext.
 The status type (playing, listening, streaming, watching) can be set using the <DocsLink reference="disnake.ActivityType" /> enum.
 For memory optimisation purposes, some activities are offered in slimmed-down versions:
 
--   <DocsLink reference="disnake.Game" />
--   <DocsLink reference="disnake.Streaming" />
+- <DocsLink reference="disnake.Game" />
+- <DocsLink reference="disnake.Streaming" />
 
 Putting both of these pieces of info together, you get the following:
 
@@ -137,9 +137,9 @@ You use the <DocsLink reference="disnake.Message.add_reaction" /> method.
 
 If you want to use unicode emoji, you must pass a valid unicode code point in a string. In your code, you can write this in a few different ways:
 
--   `'👍'`
--   `'\U0001F44D'`
--   `'\N{THUMBS UP SIGN}'`
+- `'👍'`
+- `'\U0001F44D'`
+- `'\N{THUMBS UP SIGN}'`
 
 Quick example:
 
@@ -213,23 +213,23 @@ Check the [`background_task.py` example](https://github.com/DisnakeDev/disnake/b
 There are multiple ways of doing this. If you have a specific model's ID then you can use
 one of the following functions:
 
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_channel" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_guild" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_user" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_emoji" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_member" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_channel" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_role" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_channel" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_guild" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_user" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_emoji" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_member" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_channel" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.get_role" />
 
 The following use an HTTP request:
 
--   <DocsLink reference="disnake.abc.Messageable.fetch_message" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_user" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_guilds" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_guild" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_emojis" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_emoji" />
--   <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_member" />
+- <DocsLink reference="disnake.abc.Messageable.fetch_message" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_user" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_guilds" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_guild" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_emojis" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_emoji" />
+- <DocsLink ext="commands" reference="disnake.ext.commands.Bot.fetch_member" />
 
 If the functions above do not help you, then use of <DocsLink reference="disnake.utils.find" /> or <DocsLink reference="disnake.utils.get" /> would serve some use in finding
 specific models.

guide/docs/faq/intro.mdx

@@ -12,5 +12,5 @@ new at the [support server](https://discord.gg/disnake), or submit one via pull
 
 ## Legend
 
--   `bot` refers to the <DocsLink ext="commands" reference="disnake.ext.commands.Bot">commands.Bot</DocsLink> object. For example, `bot = commands.Bot(command_prefix="!", ...)`.
--   `ctx` refers to the <DocsLink ext="commands" reference="disnake.ext.commands.Context">commands.Context</DocsLink> object, while `inter` refers to a version of the <DocsLink reference="disnake.Interaction">disnake.Interaction</DocsLink> object. For example, `async def command(ctx: commands.Context, ...):`
+- `bot` refers to the <DocsLink ext="commands" reference="disnake.ext.commands.Bot">commands.Bot</DocsLink> object. For example, `bot = commands.Bot(command_prefix="!", ...)`.
+- `ctx` refers to the <DocsLink ext="commands" reference="disnake.ext.commands.Context">commands.Context</DocsLink> object, while `inter` refers to a version of the <DocsLink reference="disnake.Interaction">disnake.Interaction</DocsLink> object. For example, `async def command(ctx: commands.Context, ...):`

guide/docs/getting-started/creating-commands.mdx

@@ -167,11 +167,7 @@ bot.run("YOUR_BOT_TOKEN")
 <br />
 <DiscordMessages>
 	<DiscordMessage profile="bot">
-		<div slot="interactions">
-			<DiscordInteraction profile="user" command="true">
-				ping
-			</DiscordInteraction>
-		</div>
+		<DiscordCommand slot="reply" profile="user" command="/ping"></DiscordCommand>
 		Pong!
 	</DiscordMessage>
 </DiscordMessages>
@@ -207,11 +203,7 @@ bot.run("YOUR_BOT_TOKEN")
 <br />
 <DiscordMessages>
 	<DiscordMessage profile="bot">
-		<div slot="interactions">
-			<DiscordInteraction profile="user" command="true">
-				server
-			</DiscordInteraction>
-		</div>
+		<DiscordCommand slot="reply" profile="user" command="/server"></DiscordCommand>
 		Server name: Disnake Guide <br />
 		Total members: 2
 	</DiscordMessage>
@@ -257,11 +249,7 @@ bot.run("YOUR_BOT_TOKEN")
 <br />
 <DiscordMessages>
 	<DiscordMessage profile="bot">
-		<div slot="interactions">
-			<DiscordInteraction profile="user" command="true">
-				server
-			</DiscordInteraction>
-		</div>
+		<DiscordCommand slot="reply" profile="user" command="/server"></DiscordCommand>
 		Your tag: AbhigyanTrips#1234 <br />
 		Your ID: 123456789012345678
 	</DiscordMessage>

guide/docs/getting-started/initial-files.mdx

@@ -105,8 +105,8 @@ While we generally do not recommend using online editors as hosting solutions, b
 private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's
 documentation and help articles for more information on how to keep sensitive values safe:
 
--   Glitch: [Storing secrets in .env][glitch-article]
--   Replit: [Secrets and environment variables][replit-article]
+- Glitch: [Storing secrets in .env][glitch-article]
+- Replit: [Secrets and environment variables][replit-article]
 
 :::
 

guide/docs/getting-started/using-cogs.mdx

@@ -155,14 +155,14 @@ be found [in the documentation](https://docs.disnake.dev/en/stable/ext/commands/
 Cogs represent a fairly drastic change in the way you write commands and bots, so here's a list you can come back to for
 the primary syntax used in cogs:
 
--   Each cog is a Python class that subclasses <DocsLink ext="commands" reference="disnake.ext.commands.Cog">commands.Cog</DocsLink>.
--   Decorators for commands in cogs:
-    -   Command - <DocsLink ext="commands" reference="disnake.ext.commands.command">commands.command()</DocsLink>
-    -   Slash command - <DocsLink ext="commands" reference="disnake.ext.commands.slash_command">commands.slash_command()</DocsLink>
-    -   User command - <DocsLink ext="commands" reference="disnake.ext.commands.user_command">commands.user_command()</DocsLink>
-    -   Message command - <DocsLink ext="commands" reference="disnake.ext.commands.message_command">commands.message_command()</DocsLink>
--   Every listener is marked with the <DocsLink ext="commands" reference="disnake.ext.commands.Cog.listener">commands.Cog.listener()</DocsLink> decorator.
--   Cogs are then registered with the <DocsLink ext="commands" reference="disnake.ext.commands.Bot.add_cog">Bot.add_cog</DocsLink> call, and are subsequently removed with the <DocsLink ext="commands" reference="disnake.ext.commands.Bot.remove_cog">Bot.remove_cog</DocsLink> call.
+- Each cog is a Python class that subclasses <DocsLink ext="commands" reference="disnake.ext.commands.Cog">commands.Cog</DocsLink>.
+- Decorators for commands in cogs:
+    - Command - <DocsLink ext="commands" reference="disnake.ext.commands.command">commands.command()</DocsLink>
+    - Slash command - <DocsLink ext="commands" reference="disnake.ext.commands.slash_command">commands.slash_command()</DocsLink>
+    - User command - <DocsLink ext="commands" reference="disnake.ext.commands.user_command">commands.user_command()</DocsLink>
+    - Message command - <DocsLink ext="commands" reference="disnake.ext.commands.message_command">commands.message_command()</DocsLink>
+- Every listener is marked with the <DocsLink ext="commands" reference="disnake.ext.commands.Cog.listener">commands.Cog.listener()</DocsLink> decorator.
+- Cogs are then registered with the <DocsLink ext="commands" reference="disnake.ext.commands.Bot.add_cog">Bot.add_cog</DocsLink> call, and are subsequently removed with the <DocsLink ext="commands" reference="disnake.ext.commands.Bot.remove_cog">Bot.remove_cog</DocsLink> call.
 
 <sup>
 	Source: <a href="https://docs.disnake.dev/en/stable/ext/commands/cogs.html">Disnake Documentation</a>

guide/docs/interactions/buttons.mdx

@@ -6,23 +6,21 @@ description: They refer to views, buttons and select menus that can be added to
 
 Components allow users to interact with your bot through interactive UI elements. In this section, we will discuss how bots can receive and process information from these elements through the library.
 
-<br />
+{
+
 <DiscordMessages>
 	<DiscordMessage profile="bot">
-		<div slot="interactions">
-			<DiscordInteraction profile="user" command={true}>
-				buttons
-			</DiscordInteraction>
-		</div>
+		<DiscordCommand slot="reply" profile="user" command="/buttons"></DiscordCommand>
 		Need help?
-		<div slot="actions">
-			<DiscordButtons>
+		<DiscordAttachments slot="components">
+			<DiscordActionRow>
 				<DiscordButton type="success">Yes</DiscordButton>
-				<DiscordButton type="danger">No</DiscordButton>
-			</DiscordButtons>
-		</div>
+				<DiscordButton type="destructive">No</DiscordButton>
+			</DiscordActionRow>
+		</DiscordAttachments>
 	</DiscordMessage>
 </DiscordMessages>
+}
 <br />
 
 The code for this command is given below.
@@ -69,22 +67,22 @@ async def help_listener(inter: disnake.MessageInteraction):
 | Danger    | `ButtonStyle.danger` / `ButtonStyle.red`                          | Red     |
 | Link      | `ButtonStyle.link` / `ButtonStyle.url`                            | Grey    |
 
-<br />
+{
+
 <DiscordMessages>
 	<DiscordMessage profile="bot">
-		<div slot="actions">
-			<DiscordButtons>
+		<DiscordAttachments slot="components">
+			<DiscordActionRow>
 				<DiscordButton type="primary">Primary</DiscordButton>
 				<DiscordButton type="secondary">Secondary</DiscordButton>
 				<DiscordButton type="success">Success</DiscordButton>
-				<DiscordButton type="danger">Danger</DiscordButton>
-				<DiscordButton type="link" url="https://guide.disnake.dev/">
-					Link
-				</DiscordButton>
-			</DiscordButtons>
-		</div>
+				<DiscordButton type="destructive">Danger</DiscordButton>
+				<DiscordButton url="https://guide.disnake.dev/">Link</DiscordButton>
+			</DiscordActionRow>
+		</DiscordAttachments>
 	</DiscordMessage>
 </DiscordMessages>
+}
 <br />
 
 :::note

guide/docs/interactions/context-menus.mdx

@@ -23,13 +23,8 @@ For more specific annotations, you can use <DocsLink reference="disnake.UserComm
 
 <DiscordMessages>
 	<DiscordMessage profile="bot">
-		<div slot="interactions">
-			<DiscordInteraction profile="user" command={true}>
-				User Info
-			</DiscordInteraction>
-		</div>
-		Username: AbhigyanTrips#2474
-		<br />
+		<DiscordCommand slot="reply" profile="user" command="User Info"></DiscordCommand>
+		Username: AbhigyanTrips#2474 <br />
 		Bot: False
 	</DiscordMessage>
 </DiscordMessages>
@@ -47,11 +42,7 @@ async def avatar(inter: disnake.ApplicationCommandInteraction, user: disnake.Use
 
 <DiscordMessages>
 	<DiscordMessage profile="bot">
-		<div slot="interactions">
-			<DiscordInteraction profile="user" command={true}>
-				Reverse
-			</DiscordInteraction>
-		</div>
+		<DiscordCommand slot="reply" profile="user" command="Reverse"></DiscordCommand>
 		.desrever si egassem sihT
 	</DiscordMessage>
 </DiscordMessages>
@@ -68,5 +59,5 @@ async def reverse(inter: disnake.ApplicationCommandInteraction, message: disnake
 
 ## Context menu notes
 
--   Context menu commands cannot have subcommands or any other options.
--   Responses to context menu commands and their permissions function the same as slash commands.
+- Context menu commands cannot have subcommands or any other options.
+- Responses to context menu commands and their permissions function the same as slash commands.