docs: document CommandMetadata.nameAliases and Section component

Author: notunderctrl

apps/website/docs/guide/02-commands/05-command-metadata.mdx

@@ -154,6 +154,79 @@ This only works for [message commands](./04-message-commands.mdx).
   </TabItem>
 </Tabs>
 
+### `nameAliases`
+
+This is a way to use a different context menu command name from the
+one defined in your `command` object. This is helpful when you want a
+different name compared to your chat input or message command while
+still using the same command file to handle them.
+
+:::warning
+
+When the
+[@commandkit/i18n](../05-official-plugins/05-commandkit-i18n.mdx)
+plugin is in use and a translation for the context menu command is
+provided, this option will be ignored.
+
+:::
+
+<Tabs>
+  <TabItem value="ts" label="TypeScript" default>
+    ```ts title="src/app/commands/avatar.ts"
+    export const command: CommandData = {
+      name: 'avatar'
+    }
+
+    export const metadata: CommandMetadata = {
+      nameAliases: {
+        message: 'author-avatar',
+        user: 'profile-picture'
+      }
+    };
+
+    // this slash command will run using the name `avatar`
+    export const chatInput: ChatInputCommand = () => {};
+
+    // this message command will run using the name `avatar`
+    export const message: MessageCommand = () => {};
+
+    // this message context menu command will run using the name `author-avatar`
+    export const messageContextMenu: MessageContextMenuCommand = () => {};
+
+    // this user context menu command will run using the name `profile-picture`
+    export const userContextMenu: UserContextMenuCommand = () => {};
+    ```
+
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+    ```js title="src/app/commands/avatar.js"
+    export const command = {
+      name: 'avatar'
+    }
+
+    export const metadata = {
+      nameAliases: {
+        message: 'author-avatar',
+        user: 'profile-picture'
+      }
+    };
+
+    // this slash command will run using the name `avatar`
+    export const chatInput = () => {};
+
+    // this message command will run using the name `avatar`
+    export const message = () => {};
+
+    // this message context menu command will run using the name `author-avatar`
+    export const messageContextMenu = () => {};
+
+    // this user context menu command will run using the name `profile-picture`
+    export const userContextMenu = () => {};
+    ```
+
+  </TabItem>
+</Tabs>
+
 ## Generated metadata
 
 If you'd like to generate metadata dynamically, you can export a

apps/website/docs/guide/04-jsx-components/01-using-jsx.mdx

@@ -53,6 +53,7 @@ builders:
 - [`MediaGallery`](./03-discord-components-v2/03-media-gallery.mdx)
 - [`Separator`](./03-discord-components-v2/04-separator.mdx)
 - [`File`](./03-discord-components-v2/05-file.mdx)
+- [`Section`](./03-discord-components-v2/06-section.mdx)
 
 ## Example usage
 

apps/website/docs/guide/04-jsx-components/03-discord-components-v2/06-section.mdx

@@ -0,0 +1,40 @@
+---
+title: Section
+---
+
+The `Section` component allows you to combine a text component with an
+accessory component.
+
+## Basic usage
+
+```tsx title="src/app/commands/section-example.tsx"
+import {
+  type ChatInputCommand,
+  Section,
+  TextDisplay,
+  Thumbnail,
+} from 'commandkit';
+import { MessageFlags } from 'discord.js';
+
+export const chatInput: ChatInputCommand = async ({
+  interaction,
+}) => {
+  const section = (
+    <Section>
+      <TextDisplay content="Here's a text component (1)" />
+      <TextDisplay content="Here's a text component (2)" />
+      <TextDisplay content="Here's a text component (3)" />
+
+      <Thumbnail
+        url="https://cdn.discordapp.com/embed/avatars/0.png"
+        description="Discord avatar"
+      />
+    </Section>
+  );
+
+  await interaction.reply({
+    components: [section],
+    flags: MessageFlags.IsComponentsV2,
+  });
+};
+```