Adding ComponentsV2 page (Popular Topics)

[PakjeBecel]

• Added new page under "Popular Topics" section called "Components V2"

Since I have an issue with running the guide in a local environment, I cannot run the guide locally. Someone else has to check first if this PR will render properly when merged.

[Amgelo563]

I'm not sure whether we should call sections and text display "top level" components since they can also be used as a child inside a container, so it's half true, waiting for opinions.

[PakjeBecel]

@Amgelo563 Discord released the restrictions of top-level components, so maybe it isn't even worth mentioning whether a component is top-level or not anymore -- wrote those parts when the restriction still existed.

[Jiralite]

Could you place this file appropriately in guide/.vuepress/sidebar.ts? This will make it appear in the sidebar.

Looks like you have to run linting on your changes too.

[monbrey]

Hope I'm not coming across too harsh in my review - I really like the overall structure and the way the examples are presented.

My main concern is just the phrasing of CV2 as "new" and being a little overly comparative - they're only new now, but won't be forever. Write the guide as if they've always existed.

[monbrey]

I'd suggest avoiding point-in-time wording like "there are now other ways", "...have stayed the same". Yes, CV2 is currently new but it won't be new forever. Focus on highlighting what CV2 is, not it's differences to embeds or a previous state.

Maybe something like "Components V2 (CV2) provides comprehensive set of layout and content components to style your messages".

[monbrey]

Suggested change

	To use the new **Components V2 (CV2)** components, you need to pass in the new `IsComponentsV2` message flag from the <DocsLink path="MessageFlags:Enum" /> enum when sending a message. The flag should only be added to the message's `flags` field when the message contains CV2 components, unlike the `Ephemeral` message flag that can be added when you defer an interaction response.
	To use **Components V2 (CV2)**, you need to pass in the new `IsComponentsV2` message flag from the <DocsLink path="MessageFlags:Enum" /> enum when sending a message. The flag should only be added to the message's `flags` field when the message contains CV2 components, unlike the `Ephemeral` message flag that can be added when you defer an interaction response.

Same reasoning as my previous comment.

[monbrey]

Suggested change

All components, both new and existing, now have a new field `id` (which should not be confused with the existing `custom_id` field for interactive components), which is an optional 32-bit integer identifier for a component presented in a message. It is used to identify non-interactive components in the response from an interaction. More information about these can be found [here](https://discord.com/developers/docs/components/reference#anatomy-of-a-component).

All components have an `id` field (which should not be confused with the `custom_id` field for interactive components), which is an optional 32-bit integer identifier for a component presented in a message. It is used to identify non-interactive components in the response from an interaction. More information about these can be found [here](https://discord.com/developers/docs/components/reference#anatomy-of-a-component).

[monbrey]

I feel the same here. Too much focus on "new" and too much comparison to embeds as a previous state.

[monbrey]

Suggested change

	A Text Display is a content component allowing you to add text to your message formatted with Discord's available markdown. This component is very similar to the `content` field of a message, but using multiple of these components you can control the layout of your message. You can use the <DocsLink path="TextDisplayBuilder:Class" /> utility class to easily create a Text Display component.
	A Text Display is a content component for adding markdown-formatted text to your message. This component is very similar to the `content` field of a message, but by using multiple Text Display components, you gain greater control over the layout of your message. You can use the <DocsLink path="TextDisplayBuilder:Class" /> utility class to easily create a Text Display component.

Just a bit of a restructure on this paragraph, felt a little awkward to read for me personally. Curious how others feel.

[monbrey]

Suggested change

A File is a content component that can display any uploaded file as an attachment to a message and reference it in the File component itself. It can only display 1 attachment per File component, but using multiple File components, you can upload multiple files in one message. File components cannot have alt text (description), unlike a Thumbnail or Media Gallery component, but you can add a spoiler to the component. You can use the <DocsLink path="FileBuilder:Class" /> utility class to easily create a File component.

A File is a content component that can display a single uploaded file attachment within the body of the message. By using multiple File components, you can upload and display multiple files in a single message. File components cannot have alt text (description), unlike a Thumbnail or Media Gallery component, but can be marked as a spoiler. You can use the <DocsLink path="FileBuilder:Class" /> utility class to easily create a File component.

Small restructure, and consistent wording around "marked as a spoiler".

[monbrey]

Suggested change

	A Separator is a layout component that adds some vertical padding and optional visual division between components. You can select the amount of padding used for the Separator component (small or large) as well as whether a visual divider should be displayed (defaults to `true`). You can use the <DocsLink path="SeparatorBuilder:Class" /> utility class to easily create a Separator component.
	A Separator is a layout component that adds vertical padding and optional visual division between components. You can select the amount of padding used for the Separator component (small or large) as well as whether a visual divider should be displayed (defaults to `true`). You can use the <DocsLink path="SeparatorBuilder:Class" /> utility class to easily create a Separator component.

[monbrey]

Suggested change

	A Section is a layout component allowing you to display text next to an accessory. You can use the <DocsLink path="SectionBuilder:Class" /> utility class to easily create a Section component. Every Section component must have at least 1 and at most 3 Text Display components with either a Thumbnail or Button component.
	A Section is a layout component that places between one and three left-aligned Text Display components next to a right-aligned accessory (Thumbnail or Button component). At least one Text Display and the accessory are required. You can use the <DocsLink path="SectionBuilder:Class" /> utility class to easily create a Section component.

[monbrey]

Suggested change

A Container is a layout component that will group its child components and has an optional color bar on the left, just like embeds. However, unlike embeds, not specifying a color will make the left side of the Container component match the background color. You can also mark the Container component as a spoiler, to make all contents inside it blurred. You can use the <DocsLink path="ContainerBuilder:Class" /> utility class to easily create a Container component.

A Container is a layout component which groups its child components inside a visually distinct rounded box with an optional accent color on the left, just like embeds. However, unlike embeds, not specifying a color will make the left side of the Container component match the background color. You can also mark the Container component as a spoiler, which blurs all content inside the container. You can use the <DocsLink path="ContainerBuilder:Class" /> utility class to easily create a Container component.

[monbrey]

Suggested change

	The example below shows how to send a Container component in a channel containing a Text Display component, an Action Row component with a User Select component, two Separator components, and a Section component with two Text Display components where a Button component is present as an accessory.
	The example below shows how to send a Container component in a channel. It contains:
	- a Text Display component
	- an Action Row component with a User Select component
	- two Separator components
	- a Section component with two Text Display components and a Button component accessory

Might be easier to read as a list.