Merge pull request #32 from itsBLOK/main

style: more readability and descriptions
senchabot-opensource · Sep 18, 2023 · 29a3fec · 29a3fec
2 parents d002f1f + ff8f473
commit 29a3fec
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 1,571 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -2,11 +2,17 @@ import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
+  vite: {
+    ssr: { 
+        noExternal: ['@discord-message-components/vue'] 
+    } 
+  },
   title: 'Senchabot',
   description: 'Documentation',
 
   lastUpdated: true,
   cleanUrls: true,
+  ignoreDeadLinks: true,
 
   head: [
     ['link', { rel: 'icon', href: '/favicon.ico' }],
@@ -15,8 +21,6 @@ export default defineConfig({
     ['meta', { name: 'og:site_name', content: 'Senchabot' }]
   ],
 
-  ignoreDeadLinks: true,
-
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     logo: { src: '/svg/senchabot-nobg-1.svg', width: 24, height: 24 },

diff --git a/docs/.vitepress/theme/components/Footer.vue b/docs/.vitepress/theme/components/Footer.vue
@@ -1,19 +1,17 @@
-<script setup>
-import "../custom.css";
-</script>
-
 <template>
     <footer>
         <span>
             Released under the  <a href="https://github.com/senchabot-opensource/monorepo/blob/dev/LICENSE">GPL-3.0 License</a>
         </span>
         <span>
-          Copyright © {{ new Date().getFullYear() }} <a href="https://github.com/senchabot-opensource">Senchabot</a>
+            Copyright © {{ new Date().getFullYear() }} <a href="https://github.com/senchabot-opensource">Senchabot</a>
         </span>
         <span>
             <a href="https://senchabot.app/terms" target="_blank" rel="noopener">Terms of Service</a>
-             • 
+            • 
             <a href="https://senchabot.app/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a>
         </span>
     </footer>
 </template>
+
+<style src="@theme/custom.css" scoped></style>
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -21,13 +21,17 @@ footer span {
   color: var(--vp-c-text-3);
 }
 
+footer a:hover {
+  color: var(--brand-primary);;
+}
+
 footer span a {
   text-decoration: underline;
 }
 
 /* Scrollbar Styles */
 *::-webkit-scrollbar {
-  width: 16px;
+  width: 12px;
 }
 
 *::-webkit-scrollbar-track {
@@ -131,14 +135,15 @@ footer span a {
     color: var(--brand-secondary);
   }
 
+  /* Application Command Light Theme*/
   .applicationCommand {
-    color: #dbdee1;
+    color: #40444b;
     font-size: 14px;
     display: flex;
     flex-wrap: wrap;
     font-family: 'Noto Sans', sans-serif;
     border-radius: 8px;
-    background-color: #40444b;
+    background-color: #dbdee1;
   }
 
   .applicationCommandIcon {
@@ -160,7 +165,7 @@ footer span a {
     margin: 6px 0px 6px 6px;
     border: 1px solid transparent;
     align-self: flex-start;
-    background-color: #101113;
+    background-color: #E3E5E8;
     justify-content: flex-start;
     vertical-align: top;
     max-width: calc(100% - 30px);
@@ -180,7 +185,7 @@ footer span a {
     display: block;
     padding: 1px 8px;
     white-space: pre-wrap;
-    background-color: #222226;
+    background-color: #fff;
     flex: 1;
   }
 
@@ -190,7 +195,7 @@ footer span a {
     margin: 6px 0px 6px 6px;
     border: 1px solid transparent;
     align-self: flex-start;
-    background-color: #101113;
+    background-color: #E3E5E8;
     justify-content: flex-start;
     vertical-align: top;
     max-width: calc(100% - 30px);
@@ -210,13 +215,14 @@ footer span a {
     display: block;
     padding: 1px 8px;
     white-space: pre-wrap;
-    background-color: #222226;
+    background-color: #fff;
     flex: 1;
   }
 }
 
 /* Dark Theme */
 .dark {
+
   /* Content ref large */
   .content-ref {
     display: flex;
@@ -299,4 +305,88 @@ footer span a {
   .content-ref-s:hover .content-ref-svg-s {
     color: var(--brand-primary);
   }
+
+    /* Application Command Dark Theme*/
+    .applicationCommand {
+      color: #dbdee1;
+      font-size: 14px;
+      display: flex;
+      flex-wrap: wrap;
+      font-family: 'Noto Sans', sans-serif;
+      border-radius: 8px;
+      background-color: #40444b;
+    }
+
+    .applicationCommandIcon {
+      width: 20px;
+      height: 20px;
+      margin: 8px 14px 8px 14px;
+      position: sticky;
+    }
+
+    .applicationCommandName {
+      font-weight: 600;
+      margin-left: 4px;
+      padding: 8px 0px 0px;
+    }
+
+    .optionPill {
+      display: flex;
+      border-radius: 4px;
+      margin: 6px 0px 6px 6px;
+      border: 1px solid transparent;
+      align-self: flex-start;
+      background-color: #101113;
+      justify-content: flex-start;
+      vertical-align: top;
+      max-width: calc(100% - 30px);
+      margin-top: 6px;
+    }
+
+    .optionPillKey {
+      display: inline-block;
+      padding: 1px 8px;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      user-select: none;
+      flex-shrink: 0;
+    }
+
+    .optionPillValue {
+      display: block;
+      padding: 1px 8px;
+      white-space: pre-wrap;
+      background-color: #222226;
+      flex: 1;
+    }
+
+    .optionPill2 {
+      display: flex;
+      border-radius: 4px;
+      margin: 6px 0px 6px 6px;
+      border: 1px solid transparent;
+      align-self: flex-start;
+      background-color: #101113;
+      justify-content: flex-start;
+      vertical-align: top;
+      max-width: calc(100% - 30px);
+      margin-top: 6px;
+    }
+
+    .optionPillKey2 {
+      display: inline-block;
+      padding: 1px 8px;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      user-select: none;
+      flex-shrink: 0;
+    }
+
+    .optionPillValue2 {
+      display: block;
+      padding: 1px 8px;
+      white-space: pre-wrap;
+      background-color: #222226;
+      flex: 1;
+    }
 }
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,10 +1,8 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from 'vue'
 import Theme from 'vitepress/theme'
-import './style.css'
-
-import Footer from './components/Footer.vue'
-import ApplicationCommands from './components/ApplicationCommands.vue'
+import '@theme/style.css'
+import '@theme/custom.css'
 
 import {
 	DiscordButton,
@@ -23,6 +21,9 @@ import {
 } from '@discord-message-components/vue';
 import '@discord-message-components/vue/dist/style.css';
 
+import Footer from './components/Footer.vue'
+import ApplicationCommands from './components/ApplicationCommands.vue'
+
 export default {
   extends: Theme,
   Layout: () => {
@@ -31,7 +32,7 @@ export default {
       'sidebar-nav-after': () => h(Footer)
     })
   },
-  enhanceApp({ app, router, siteData }) {
+  enhanceApp({ app }) {
     app.use(DiscordMessageComponents, {
       profiles: {
         user: {

diff --git a/docs/MARKDOWN-EXTENSIONS.md b/docs/MARKDOWN-EXTENSIONS.md
@@ -315,7 +315,7 @@ We use [@discord-message-components/vue](https://github.com/Danktuary/discord-me
 	<DiscordMessage profile="user">
 		!ping
 	</DiscordMessage>
-	<DiscordMessage profile="bot" >
+	<DiscordMessage profile="bot" role-color="#1fab89" >
 		<DiscordMention :highlight="true" profile="user" />, pong! Took 50ms
 	</DiscordMessage>
 </DiscordMessages>
@@ -327,7 +327,7 @@ The syntax to make this display is quite simple as well:
 	<DiscordMessage profile="user">
 		!ping
 	</DiscordMessage>
-	<DiscordMessage profile="bot" >
+	<DiscordMessage profile="bot" role-color="#1fab89" >
 		<DiscordMention :highlight="true" profile="user" />, pong! Took 50ms
 	</DiscordMessage>
 </DiscordMessages>
@@ -403,7 +403,7 @@ The syntax to make this display is quite simple as well:
 
 ```js
 <DiscordMessages>
-	<DiscordMessage profile="bot">
+	<DiscordMessage profile="bot" role-color="#1fab89">
     <DiscordMention>everyone</DiscordMention>, TestUser is live on Twitch! Go check it out!
 		<template #embeds>
 			<DiscordEmbed
@@ -421,7 +421,7 @@ The syntax to make this display is quite simple as well:
 **Output**
 
 <DiscordMessages>
-	<DiscordMessage profile="bot">
+	<DiscordMessage profile="bot" role-color="#1fab89">
     <DiscordMention :highlight="true">everyone</DiscordMention>, TestUser is live on Twitch! Go check it out!
 		<template #embeds>
 			<DiscordEmbed

diff --git a/docs/twitch-bot/command-timer-system.md b/docs/twitch-bot/command-timer-system.md
@@ -4,7 +4,7 @@
 !timer [command_name] [time]
 ```
 
-Returns the [custom command](/en/twitch-bot/custom-commands) you specified within the specified time.
+Returns the [custom command](/twitch-bot/custom-commands) you specified within the specified time.
 
 ::: details Example Usage