Adds bot documentation to docusaurus and changes for hub (#4409)

* feat: adds bot docs to docu

* fix: file structure

* fix: brings changelog and switch platform button

* adding available options and changing Example text

* fix: detect whether iframe, fix availableoptions component, dynamic update third friday for options component

* fix: updated readme to reflect new changes

* fix: made it so from iframe only shows relevant sidebar

* PLAY BUTTON WOOO - works on discord/charting/chart

* comment

* fix: search bar, improve search

* fix: hijacks ctrl+k from iframe, adds visit to hub link

* about

* setting up play button for all images on Discord

* Bot docs updates

* terminal/faqs

* update main page

* add changelog to terminal

* SDK refactoring

* minor reordering

* bot struct in place

* move bot faqs over

* updating bot index and installation

* add new letterings

* fix: adds new navbar

* fix: new bot images and layouts

* updating installation and flow

* black linter

* spelling

* spelling

* The best commit

---------

Co-authored-by: andrewkenreich <andrew.kenreich@gmail.com>
Co-authored-by: DidierRLopes <dro.lopes@campus.fct.unl.pt>
Co-authored-by: James Maslek <jmaslek11@gmail.com>

website/src/theme/CodeBlock/Content/String.js

@@ -11,9 +11,12 @@ import {
 import Highlight, { defaultProps } from "prism-react-renderer";
 import Line from "@theme/CodeBlock/Line";
 import CopyButton from "@theme/CodeBlock/CopyButton";
+import PlayButton from "@site/src/components/General/PlayButton";
 import WordWrapButton from "@theme/CodeBlock/WordWrapButton";
 import Container from "@theme/CodeBlock/Container";
 import styles from "./styles.module.css";
+import { useLocation } from "react-router-dom";
+
 export default function CodeBlockString({
   children,
   className: blockClassName = "",
@@ -28,7 +31,7 @@ export default function CodeBlockString({
   const language =
     languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
   const prismTheme = usePrismTheme();
-  const wordWrap = useCodeWordWrap()
+  const wordWrap = useCodeWordWrap();
 
   // We still parse the metastring in case we want to support more syntax in the
   // future. Note that MDX doesn't strip quotes when parsing metastring:
@@ -42,7 +45,12 @@ export default function CodeBlockString({
   const showLineNumbers =
     showLineNumbersProp ?? containsLineNumbers(metastring);
 
-  const shouldWordwrapByDefault = metastring?.includes("wordwrap")
+  const shouldWordwrapByDefault = metastring?.includes("wordwrap");
+
+  const newDate = getThirdFriday();
+
+  const newCode = code.replace("2022-07-29", newDate);
+  const {pathname} = useLocation();
 
   return (
     <Container
@@ -50,8 +58,8 @@ export default function CodeBlockString({
       className={clsx(
         blockClassName,
         language &&
-        !blockClassName.includes(`language-${language}`) &&
-        `language-${language}`
+          !blockClassName.includes(`language-${language}`) &&
+          `language-${language}`
       )}
     >
       {title && <div className={styles.codeBlockTitle}>{title}</div>}
@@ -59,7 +67,7 @@ export default function CodeBlockString({
         <Highlight
           {...defaultProps}
           theme={prismTheme}
-          code={code}
+          code={newCode}
           language={language ?? "text"}
         >
           {({ className, tokens, getLineProps, getTokenProps }) => (
@@ -70,10 +78,14 @@ export default function CodeBlockString({
               className={clsx(className, styles.codeBlock, "thin-scrollbar")}
             >
               <code
-                style={shouldWordwrapByDefault ? {
-                  whiteSpace: 'pre-wrap',
-                  overflowWrap: 'anywhere'
-                } : {}}
+                style={
+                  shouldWordwrapByDefault
+                    ? {
+                        whiteSpace: "pre-wrap",
+                        overflowWrap: "anywhere",
+                      }
+                    : {}
+                }
                 className={clsx(
                   styles.codeBlockLines,
                   showLineNumbers && styles.codeBlockLinesWithNumbering
@@ -101,9 +113,26 @@ export default function CodeBlockString({
               isEnabled={wordWrap.isEnabled}
             />
           )}
-          <CopyButton className={styles.codeButton} code={code} />
+          <PlayButton text={newCode} pathname={pathname} />
+          <CopyButton className={styles.codeButton} code={newCode} />
         </div>
       </div>
     </Container>
   );
 }
+
+function getThirdFriday() {
+  const thirdFriday = new Date();
+  thirdFriday.setMonth(thirdFriday.getMonth() + 1);
+  thirdFriday.setDate(1);
+  const firstDay = thirdFriday.getDay();
+  let daysToAdd = (5 - firstDay + 7) % 7;
+  daysToAdd += 15;
+  thirdFriday.setDate(daysToAdd);
+
+  const yearString = thirdFriday.getFullYear().toString();
+  const monthString = (thirdFriday.getMonth() + 1).toString().padStart(2, "0");
+  const dayString = thirdFriday.getDate().toString().padStart(2, "0");
+  const dateString = `${yearString}-${monthString}-${dayString}`;
+  return dateString;
+}