chore: improve imports and wording

Author: SocketSomeone

content/recipes/necord.md

@@ -17,6 +17,12 @@ $ npm install necord discord.js
 To utilize Necord in your project, import the `NecordModule` and configure it with the necessary options.
 
 ```typescript
+@@filename(app.module)
+import { Module } from '@nestjs/common';
+import { NecordModule } from 'necord';
+import { IntentsBitField } from 'discord.js';
+import { AppService } from './app.service';
+
 @Module({
   imports: [
     NecordModule.forRoot({
@@ -35,6 +41,11 @@ export class AppModule {}
 With this setup, you can inject the `AppService` into your providers to easily register commands, events, and more.
 
 ```typescript
+@@filename(app.service)
+import { Injectable, Logger } from '@nestjs/common';
+import { Context, On, Once, ContextOf } from 'necord';
+import { Client } from 'discord.js';
+
 @Injectable()
 export class AppService {
   private readonly logger = new Logger(AppService.name);
@@ -62,6 +73,10 @@ You may have noticed the `@Context` decorator in the examples above. This decora
 Here's how to create a simple command handler for messages using the `@TextCommand` decorator.
 
 ```typescript
+@@filename(app.commands)
+import { Injectable } from '@nestjs/common';
+import { Context, TextCommand, TextCommandContext, Arguments } from 'necord';
+
 @Injectable()
 export class AppCommands {
   @TextCommand({
@@ -81,7 +96,7 @@ export class AppCommands {
 
 Application commands provide a native way for users to interact with your app within the Discord client. There are three types of application commands that can be accessed through different interfaces: chat input, message context menu (accessed by right-clicking a message), and user context menu (accessed by right-clicking a user).
 
-<figure><img src="https://i.imgur.com/4EmG8G8.png" /></figure>
+<figure><img class="illustrative-image" src="https://i.imgur.com/4EmG8G8.png" /></figure>
 
 #### Slash commands
 
@@ -90,6 +105,10 @@ Slash commands are an excellent way to engage with users in a structured manner.
 To define a slash command using Necord, you can use the `SlashCommand` decorator.
 
 ```typescript
+@@filename(app.commands)
+import { Injectable } from '@nestjs/common';
+import { Context, SlashCommand, SlashCommandContext } from 'necord';
+
 @Injectable()
 export class AppCommands {
   @SlashCommand({
@@ -109,6 +128,9 @@ export class AppCommands {
 You can define parameters for your slash commands using option decorators. Let's create a `TextDto` class for this purpose:
 
 ```typescript
+@@filename(text.dto)
+import { StringOption } from 'necord';
+
 export class TextDto {
   @StringOption({
     name: 'text',
@@ -122,6 +144,11 @@ export class TextDto {
 You can then use this DTO in the `AppCommands` class:
 
 ```typescript
+@@filename(app.commands)
+import { Injectable } from '@nestjs/common';
+import { Context, SlashCommand, Options, SlashCommandContext } from 'necord';
+import { TextDto } from './length.dto';
+
 @Injectable()
 export class AppCommands {
   @SlashCommand({
@@ -146,6 +173,11 @@ For a complete list of built-in option decorators, check out [this documentation
 To implement autocomplete functionality for your slash commands, you'll need to create an interceptor. This interceptor will handle requests as users type in the autocomplete field.
 
 ```typescript
+@@filename(cats-autocomplete.interceptor)
+import { Injectable } from '@nestjs/common';
+import { AutocompleteInteraction } from 'discord.js';
+import { AutocompleteInterceptor } from 'necord';
+
 @Injectable()
 class CatsAutocompleteInterceptor extends AutocompleteInterceptor {
   public transformOptions(interaction: AutocompleteInteraction) {
@@ -168,6 +200,9 @@ class CatsAutocompleteInterceptor extends AutocompleteInterceptor {
 You will also need to mark your options class with `autocomplete: true`:
 
 ```typescript
+@@filename(cat.dto)
+import { StringOption } from 'necord';
+
 export class CatDto {
   @StringOption({
     name: 'cat',
@@ -182,6 +217,12 @@ export class CatDto {
 Finally, apply the interceptor to your slash command:
 
 ```typescript
+@@filename(cats.commands)
+import { Injectable, UseInterceptors } from '@nestjs/common';
+import { Context, SlashCommand, Options, SlashCommandContext } from 'necord';
+import { CatDto } from '/cat.dto';
+import { CatsAutocompleteInterceptor } from './cats-autocomplete.interceptor';
+
 @Injectable()
 export class CatsCommands {
   @UseInterceptors(CatsAutocompleteInterceptor)
@@ -205,6 +246,11 @@ export class CatsCommands {
 User commands appear on the context menu that appears when right-clicking (or tapping) on users. These commands provide quick actions that target users directly.
 
 ```typescript
+@@filename(app.commands)
+import { Injectable } from '@nestjs/common';
+import { Context, UserCommand, UserCommandContext, TargetUser } from 'necord';
+import { User } from 'discord.js';
+
 @Injectable()
 export class AppCommands {
   @UserCommand({ name: 'Get avatar' })
@@ -228,6 +274,11 @@ export class AppCommands {
 Message commands show up in the context menu when right-clicking on messages, allowing for quick actions relevant to those messages.
 
 ```typescript
+@@filename(app.commands)
+import { Injectable } from '@nestjs/common';
+import { Context, MessageCommand, MessageCommandContext, TargetMessage } from 'necord';
+import { Message } from 'discord.js';
+
 @Injectable()
 export class AppCommands {
   @MessageCommand({ name: 'Copy Message' })
@@ -245,6 +296,10 @@ export class AppCommands {
 [Buttons](https://discord.com/developers/docs/interactions/message-components#buttons) are interactive elements that can be included in messages. When clicked, they send an [interaction](https://discord.com/developers/docs/interactions/receiving-and-responding#interaction-object) to your application.
 
 ```typescript
+@@filename(app.components)
+import { Injectable } from '@nestjs/common';
+import { Context, Button, ButtonContext } from 'necord';
+
 @Injectable()
 export class AppComponents {
   @Button('BUTTON')
@@ -259,12 +314,16 @@ export class AppComponents {
 [Select menus](https://discord.com/developers/docs/interactions/message-components#select-menus) are another type of interactive component that appears on messages. They provide a dropdown-like UI for users to select options.
 
 ```typescript
+@@filename(app.components)
+import { Injectable } from '@nestjs/common';
+import { Context, StringSelect, StringSelectContext, SelectedStrings } from 'necord';
+
 @Injectable()
 export class AppComponents {
   @StringSelect('SELECT_MENU')
   public onSelectMenu(
     @Context() [interaction]: StringSelectContext,
-    @Values() values: string[],
+    @SelectedStrings() values: string[],
   ) {
     return interaction.reply({ content: `You selected: ${values.join(', ')}` });
   }