Video embed, Accordion, added icons, updated React

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@site/*": ["./*"]
+    }
+  }
+}

package.json

@@ -17,14 +17,15 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
+    "@docusaurus/core": "^2.4.3",
+    "@docusaurus/preset-classic": "^2.4.3",
+    "@iconify/react": "^4.1.1",
     "@mdx-js/react": "^1.6.22",
     "altv-docs-js-api": "^3.0.0",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.4.1",

src/components/Accordion.jsx

@@ -0,0 +1,46 @@
+import React, {useContext, useEffect, useId, useState} from 'react';
+import { Icon } from '@iconify/react';
+
+const AccordionContext = React.createContext({
+    group: false,
+    openedId: null,
+    setOpenedId(id) {}
+});
+
+export function Accordion(props) {
+    const [openedId, setOpenedId] = useState(null);
+
+    const context = { group: props.grouped ?? false, openedId, setOpenedId };
+    return <AccordionContext.Provider value={context}>
+        <p>
+            {props.children ?? null}
+        </p>
+    </AccordionContext.Provider>
+}
+
+export function AccordionItem(props) {
+    const context = useContext(AccordionContext);
+    const id = useId();
+
+    const [openedState, setOpenedState] = useState(props.opened ?? false);
+    const opened = context.group ? context.openedId === id : openedState;
+    const setOpened = context.group ? (state) => {
+        if (state) context.setOpenedId(id);
+        else if (context.openedId === id) context.setOpenedId(null);
+    } : setOpenedState;
+
+    useEffect(() => {
+        if (context.group && props.opened)
+            context.setOpenedId(id);
+    }, []);
+
+    return <div className="accordionItem">
+        <h3 className="heading" onClick={() => setOpened(!opened)}>
+            {props.header}
+            <Icon icon="akar-icons:triangle-up-fill" vFlip={!opened} />
+        </h3>
+        {opened && <div className="content">
+            {props.children ?? null}
+        </div>}
+    </div>
+}

src/components/Joaat/Joaat.js → src/components/Joaat/Joaat.jsx

@@ -40,26 +40,26 @@ function JOAATCalculator() {
   };
 
   return (
-    <div class="joaat">
-      <div class="calculator">
+    <div className="joaat">
+      <div className="calculator">
         <input id="input" type="text" value={input} onChange={handleInputChange} placeholder='Name' />
-        <div class="results">
-          <div class="item">
+        <div className="results">
+          <div className="item">
             <span>uint32</span>
             {input ? uint32Result : "-"}
           </div>
-          <div class="item">
+          <div className="item">
             <span>int32</span>
             {input ? int32Result : "-"}
           </div>
-          <div class="item">
+          <div className="item">
             <span>hex</span>
             {input ? "0x" + hexResult : "-"}
           </div>
         </div>
       </div>
       {showKarby && (
-        <div class="karby">
+        <div className="karby">
           <p>Karby. Karby. Karby. Karby. Karby. Karby. Karby. Karby. Karby.</p>
           <img src={require('@site/static/img/karby.png').default}></img>
           <p>Join our <a href="https://discord.altv.mp" target='blank'>Discord Server</a> for daily Karbys!</p>

src/components/Video.jsx

@@ -0,0 +1,29 @@
+import React, {useState} from "react";
+import Admonition from '@theme/Admonition';
+
+function Video(props) {
+
+    const url = new URL(props.url);
+
+    if (url.host === 'youtu.be' || url.hostname === 'youtube.com' || url.host === 'www.youtube.com') {
+        const code = url.pathname.match(/([A-Za-z0-9_\-]+)\/?$/);
+        if (!code[1]) {
+            return <Admonition type="caution" title="Something went wrong...">Failed to parse YouTube URL: {props.url}</Admonition>
+        }
+
+        const query = new URLSearchParams;
+
+        if (url.searchParams.has('t'))
+            query.set('start', url.searchParams.get('t'));
+
+        return <iframe width="560" height="315" src={"https://www.youtube-nocookie.com/embed/" + code[1] + '?' + query}
+                       title="YouTube video player" frameBorder="0" className="youtube-video"
+                       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                       allowFullScreen></iframe>
+    } else {
+
+        return <Admonition type="caution" title="Something went wrong...">Unsupported video URL: {url}</Admonition>
+    }
+}
+
+export default Video;

src/css/altv.css

@@ -498,4 +498,25 @@ table {
 .theme-doc-version-badge {
   position: relative;
   top: -20px;
+}
+
+.youtube-video {
+  margin: 0 0 var(--ifm-leading);
+}
+
+.accordionItem h3 {
+  margin-bottom: 0.3em;
+}
+
+.accordionItem {
+  margin-bottom: 1em;
+}
+
+.accordionItem .heading {
+  cursor: pointer;
+}
+
+.accordionItem .heading > svg.iconify {
+  vertical-align: -0.15em;
+  margin-left: 4px;
 }

src/theme/MDXComponents.js

@@ -0,0 +1,10 @@
+import React from 'react';
+// Import the original mapper
+import MDXComponents from '@theme-original/MDXComponents';
+import { Icon } from '@iconify/react'; // Import the entire Iconify library.
+
+export default {
+    // Re-use the default mapping
+    ...MDXComponents,
+    icon: Icon, // Make the iconify Icon component available in MDX as <icon />.
+};