docs: upgrade documentation (#4622)

docs/src/components/PlatformsList/PlatformsList.module.css

@@ -0,0 +1,13 @@
+.paragraphStyle {
+  margin-top: 10;
+}
+
+.spanStyle {
+  /* font-family: var(--font-orbitron);
+  font-weight: 800; */
+
+  font-family: "Orbitron", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 800;
+  font-style: normal;
+}

docs/src/components/PlatformsList/PlatformsList.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './PlatformsList.module.css';
+
+type Platform =
+  | 'Android'
+  | 'iOS'
+  | 'visionOS'
+  | 'tvOS'
+  | 'Windows UWP'
+  | 'Web'
+  | 'All';
+
+interface Platforms {
+  types: Platform[];
+}
+
+function PlatformsList({types}: Platforms) {
+  return (
+    <p className={styles.paragraphStyle}>
+      {types.length === 1 && !types.includes('All')
+        ? 'Platform:'
+        : 'Platforms:'}
+      <span className={styles.spanStyle}>{' ' + types.join(' | ')}</span>
+    </p>
+  );
+}
+
+export default PlatformsList;

docs/src/components/TWGBadge/TWGBadge.module.css

@@ -0,0 +1,74 @@
+.extraContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0.5rem;
+    text-align: center;
+    background-color: var(--ifm-color-primary);
+    padding: 1rem;
+    gap: 1rem;
+    border-radius: 0.5rem;
+}
+
+.extraText {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-weight: bold;
+    color: var(--ifm-background-color);
+    text-wrap: nowrap;
+    font-size: 0.95rem;
+}
+
+.extraButton {
+    width: 90%;
+    border: none;
+    padding: 0.4rem 0.8rem;
+    font-weight: 500;
+    background-color: var(--ifm-background-color);
+    transition: transform 0.3s ease, background-color 0.3s ease;
+    color: #fff;
+    border-radius: 0.5rem;
+}
+
+.extraButton:hover {
+    transform: scale(1.05);
+    background-color: #fff;
+}
+
+:is(html[class~=dark]) .extraContainer {
+    background-color: #87ccef;
+}
+
+:is(html[class~=dark]) .extraText {
+    color: #171717;
+}
+
+:is(html[class~=dark]) .extraButton {
+    background-color: #171717;
+}
+
+
+@media (min-width: 1280px) {
+    .visibleOnLarge {
+        display: flex;
+    }
+    .visibleOnSmall {
+        display: none;
+    }
+    .extraContainer {
+        margin: 1rem;
+    }
+}
+
+@media (max-width: 1279px) {
+    .visibleOnLarge {
+        display: none;
+    }
+    .visibleOnSmall {
+        display: flex;
+    }
+    .extraContainer {
+        margin: 2rem 0.2rem 0.2rem 0.2rem;
+    }
+}

docs/src/components/TWGBadge/TWGBadge.tsx

@@ -0,0 +1,26 @@
+import styles from './TWGBadge.module.css';
+
+interface TWGBadgeProps {
+  visibleOnLarge?: boolean;
+}
+
+const TWGBadge = ({visibleOnLarge}: TWGBadgeProps) => {
+  const visibilityClass = visibleOnLarge
+    ? styles.visibleOnLarge
+    : styles.visibleOnSmall;
+
+  return (
+    <div className={[styles.extraContainer, visibilityClass].join(' ')}>
+      <span className={styles.extraText}>We are TheWidlarzGroup</span>
+      <a
+        target="_blank"
+        href="https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs&utm_campaign=badge&utm_id=enterprise#Contact"
+        className={styles.extraButton}
+        rel="noreferrer">
+        Premium support →
+      </a>
+    </div>
+  );
+};
+
+export default TWGBadge;

docs/src/css/custom.css

@@ -24,3 +24,7 @@
   --ifm-background-color: #171717;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.hidden {
+  display: none !important;
+}

docs/src/pages/index.tsx

@@ -1,14 +1,30 @@
 import Link from '@docusaurus/Link';
+import { useDocsPreferredVersion } from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';
 import Layout from '@theme/Layout';
 import clsx from 'clsx';
-import type { ReactNode } from 'react';
+import { useMemo, type ReactNode } from 'react';
 import styles from './index.module.css';
 
+interface PreferredVersion {
+  preferredVersion: {label: string, mainDocId: string, path: string} | null;
+}
+
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
+
+  const version = useDocsPreferredVersion() as PreferredVersion;
+
+  const link = useMemo(() => {
+    if (!version.preferredVersion) {
+      return '/docs/v6/intro'; // Default to v6 if no version is selected
+    }
+
+    return `${version.preferredVersion.path}/${version.preferredVersion.mainDocId}`;
+  }, [version]);
+
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
@@ -20,7 +36,7 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/intro">
+            to={link}>
             Get Started
           </Link>
         </div>

docs/src/theme/DocItem/Footer/index.tsx

@@ -0,0 +1,16 @@
+import type { WrapperProps } from '@docusaurus/types';
+import TWGBadge from '@site/src/components/TWGBadge/TWGBadge';
+import Footer from '@theme-original/DocItem/Footer';
+import type FooterType from '@theme/DocItem/Footer';
+import { type ReactNode } from 'react';
+
+type Props = WrapperProps<typeof FooterType>;
+
+export default function FooterWrapper(props: Props): ReactNode {
+  return (
+    <>
+      <Footer {...props} />
+      <TWGBadge visibleOnLarge={false} />
+    </>
+  );
+}

docs/src/theme/TOC/index.tsx

@@ -0,0 +1,25 @@
+import type { Props } from '@theme/TOC';
+import TOCItems from '@theme/TOCItems';
+import clsx from 'clsx';
+import { type ReactNode } from 'react';
+
+import TWGBadge from '@site/src/components/TWGBadge/TWGBadge';
+import styles from './styles.module.css';
+
+// Using a custom className
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
+
+export default function TOC({className, ...props}: Props): ReactNode {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+      <TWGBadge visibleOnLarge={true} />
+    </div>
+  );
+}

docs/src/theme/TOC/styles.module.css

@@ -0,0 +1,16 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}