Merge pull request #35 from itsBLOK/main

fix(app-cmd-comp): fixed black dot bug in component image

README.md

@@ -12,7 +12,7 @@ Here are some Discord servers that can help you out with everything Senchabot:
 
 The [Official Senchabot Support/Developers server](https://discord.com/invite/h3NqsbHW4a) has plenty of help channels with knowledgeable people and Senchabot's developers to get you help with something you need, and get updates straight from the developers. However do keep in mind this is a purely on-topic server. If you are looking for a community, join the server below.
 
-The [Kamp US server](https://discord.gg/kampus) is a common hangout for libraries and developers alike. It's a great starting point for those looking to dive in and learn how to developer.
+The [Kamp US server](https://discord.gg/kampus) is a common hangout for developers. It's a great starting point for those looking to dive in and learn how to developer.
 
 ## License
 

docs/.vitepress/theme/components/ApplicationCommands.vue

@@ -3,18 +3,18 @@
 		<img v-if="appCmd.icon" class="applicationCommandIcon" :src="appCmd.icon" alt="" />
 		<div v-if="appCmd.name" class="applicationCommandName">
 			<span>
-				{{ appCmd.name }}
+				/{{ appCmd.name }}
 			</span>
 		</div>
-		<div class="optionPill">
+		<div v-if="optionPillKey" class="optionPill">
 				<span v-if="optionPillKey" class="optionPillKey">
 					{{ optionPillKey }}
 				</span>
 				<span class="optionPillValue">
 					{{ optionPillValue }}
 				</span>
 		</div>
-		<div class="optionPill2">
+		<div v-if="optionPillKey2" class="optionPill2">
 			<span v-if="optionPillKey2" class="optionPillKey2">
 				{{ optionPillKey2 }}
 			</span>

docs/.vitepress/theme/custom.css

@@ -359,7 +359,7 @@ footer span a {
       background-color: #222226;
       flex: 1;
     }
-  
+
     .optionPill2 {
       display: flex;
       border-radius: 4px;

docs/MARKDOWN-EXTENSIONS.md

@@ -279,18 +279,44 @@ We have custom button style
   </a>
 </div>
 
-### Discord Button Style
+### Discord Application Commands Style
+
+We use a special component for Discord application commands.
+
+**Input**
+
+```js
+<ApplicationCommands
+    appCmd-icon="https://cdn.discordapp.com/avatars/1039550209274945587/026fae6fce576363a3ea9c6ebba467bb.webp"
+    appCmd-name="command-name"
+    optionPillKey="options1"
+    optionPillValue="option1-value"
+    >
+</ApplicationCommands>
+```
+
+**Output**
+
+<ApplicationCommands
+    appCmd-icon="https://cdn.discordapp.com/avatars/1039550209274945587/026fae6fce576363a3ea9c6ebba467bb.webp"
+    appCmd-name="command-name"
+    optionPillKey="options1"
+    optionPillValue="option1-value"
+    >
+</ApplicationCommands>
+
+You can also use it with two options:
 
 **Input**
 
 ```js
 <ApplicationCommands
     appCmd-icon="https://cdn.discordapp.com/avatars/1039550209274945587/026fae6fce576363a3ea9c6ebba467bb.webp"
-    appCmd-name="/set-twitch streamer"
-    optionPillKey="url-or-username"
-    optionPillValue="senchabot"
-    optionPillKey2="channel"
-    optionPillValue2="twitch"
+    appCmd-name="command-name"
+    optionPillKey="options1"
+    optionPillValue="option1-value"
+    optionPillKey2="options2"
+    optionPillValue2="options2-value"
     >
 </ApplicationCommands>
 ```
@@ -299,11 +325,11 @@ We have custom button style
 
 <ApplicationCommands
     appCmd-icon="https://cdn.discordapp.com/avatars/1039550209274945587/026fae6fce576363a3ea9c6ebba467bb.webp"
-    appCmd-name="/set-twitch streamer"
-    optionPillKey="url-or-username"
-    optionPillValue="senchabot"
-    optionPillKey2="channel"
-    optionPillValue2="twitch"
+    appCmd-name="command-name"
+    optionPillKey="options1"
+    optionPillValue="option1-value"
+    optionPillKey2="options2"
+    optionPillValue2="options2-value"
     >
 </ApplicationCommands>