From 8c6556723c859f5d1cccf2a6d6f85f7e33ebded1 Mon Sep 17 00:00:00 2001
From: Pawel <webloopbox@gmail.com>
Date: Fri, 11 Oct 2024 09:22:03 +0200
Subject: [PATCH] update docs

---
 .github/workflows/deploy-website.yml    |  9 +++++
 website/components/header.tsx           |  2 +-
 website/components/reactgrid-sample.tsx |  7 +++-
 website/pages/docs.mdx                  | 43 ++++++++++++++++++++
 website/pages/docs/3.0.mdx              | 51 ------------------------
 website/pages/docs/3.1.mdx              | 52 -------------------------
 website/pages/docs/4.0.mdx              | 51 ------------------------
 website/pages/docs/5.0.mdx              | 51 ------------------------
 website/pages/docs/_meta.json           |  4 --
 9 files changed, 59 insertions(+), 211 deletions(-)
 delete mode 100644 website/pages/docs/3.0.mdx
 delete mode 100644 website/pages/docs/3.1.mdx
 delete mode 100644 website/pages/docs/4.0.mdx
 delete mode 100644 website/pages/docs/5.0.mdx

diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml
index 36b170b2..506696b3 100644
--- a/.github/workflows/deploy-website.yml
+++ b/.github/workflows/deploy-website.yml
@@ -19,6 +19,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
+        with:
+          lfs: true
 
       - name: Setup Node.js
         uses: actions/setup-node@v3
@@ -30,6 +32,8 @@ jobs:
           npm install
 
       - name: Build all packages (reactgrid and website)
+        env:
+          NEXT_PUBLIC_BASE_PATH: "/reactgrid"
         run: |
           npm run build --workspaces
 
@@ -46,6 +50,11 @@ jobs:
     runs-on: ubuntu-latest
     needs: build
     steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          lfs: true
+
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1
diff --git a/website/components/header.tsx b/website/components/header.tsx
index 2dd17f55..5806cfbc 100644
--- a/website/components/header.tsx
+++ b/website/components/header.tsx
@@ -64,7 +64,7 @@ export default function Header({ children }: { children: any }) {
               className={`grid hidden md:grid text-black-primary md:text-white-primary col-start-5 col-end-13 2xl:col-start-8 2xl:col-end-11 grid-cols-1 md:grid-cols-navLinks justify-items-start md:justify-items-stretch content-start md:content-stretch md:top-auto gap-y-4 md:gap-y-0 menu-horizontal`}
             >
               <HeaderLink href="/demo">Demo</HeaderLink>
-              <HeaderLink href="/docs">Docs</HeaderLink>
+              <HeaderLink href="/docs/5.0/1-getting-started">Docs</HeaderLink>
               <HeaderLink href="/support">Support</HeaderLink>
             </div>
             <span className="border-l-1 hidden 2xl:flex border-l-1 border-green-light"></span>
diff --git a/website/components/reactgrid-sample.tsx b/website/components/reactgrid-sample.tsx
index 31d7ed37..becc98d5 100644
--- a/website/components/reactgrid-sample.tsx
+++ b/website/components/reactgrid-sample.tsx
@@ -54,7 +54,12 @@ export default function ReactGridMainExample() {
           </div>
           <div className="flex justify-center items-center">
             <video autoPlay loop muted className="w-full h-auto">
-              <source src="/static/liquidity-planner.webm" type="video/webm" />
+              <source
+                src={`${
+                  process.env.NEXT_PUBLIC_BASE_PATH || ""
+                }/static/liquidity-planner.webm`}
+                type="video/webm"
+              />
               Your browser does not support the video tag.
             </video>
           </div>
diff --git a/website/pages/docs.mdx b/website/pages/docs.mdx
index b79e1c05..73c15cfc 100644
--- a/website/pages/docs.mdx
+++ b/website/pages/docs.mdx
@@ -5,4 +5,47 @@ metaTitle: "Introduction"
 metaDescription: "ReactGrid docs"
 ---
 
+import Image from "next/image";
+import edgeIcon from "@/public/static/edge.svg";
+import chromeIcon from "@/public/static/chrome.svg";
+import firefoxIcon from "@/public/static/firefox.svg";
+import safariIcon from "@/public/static/safari.svg";
+
 ReactGrid lets you create custom data grids inside your ReactJS applications, which look and feel like spreadsheets.
+
+#### Caveats
+
+a) If you notice `sticky` incorrect behavior, when you try to pin them to HTML `<body>` tag, add this line to `index.html` file in your project.
+It should be helpful in many cases and different mobile devices.
+
+```html
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86"
+/>
+```
+
+#### Supported browsers
+
+Desktop Browsers
+
+<br />
+
+<div style={{ display: "flex", gap: "2rem", height: "3rem" }}>
+  <Image src={chromeIcon} alt="Chrome logo." width={50} height={50} />
+  <Image src={firefoxIcon} alt="Firefox logo." width={50} height={50} />
+  <Image src={edgeIcon} alt="Edge logo." width={50} height={50} />
+  <Image src={safariIcon} alt="Safari logo." width={50} height={50} />
+</div>
+
+<br />
+
+Mobile Browsers
+
+<br />
+
+<div style={{ display: "flex", gap: "2rem", height: "3rem" }}>
+  <Image src={chromeIcon} alt="Chrome logo." width={50} height={50} />
+  <Image src={firefoxIcon} alt="Firefox logo." width={50} height={50} />
+  <Image src={safariIcon} alt="Safari logo." width={50} height={50} />
+</div>
diff --git a/website/pages/docs/3.0.mdx b/website/pages/docs/3.0.mdx
deleted file mode 100644
index f1d8398d..00000000
--- a/website/pages/docs/3.0.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-posttype: "docs"
-title: "3.0"
-metaTitle: "Introduction to 3.0"
-metaDescription: "ReactGrid docs"
----
-
-import Image from 'next/image'
-import edgeIcon from "@/public/static/edge.svg";
-import chromeIcon from "@/public/static/chrome.svg";
-import firefoxIcon from "@/public/static/firefox.svg";
-import safariIcon from "@/public/static/safari.svg";
-
-
-ReactGrid lets you create custom data grids inside your ReactJS applications, which look and feel like spreadsheets.
-
-#### About MIT and PRO version
-
-ReactGrid in both version uses the same component interface. However, if you implement a PRO feature (using MIT package)
-probably nothing will happen.
-
-A functionality that is partly or fully supported by PRO version is marked by <i class="fas fa-rocket fa-lg"></i> icon.
-
-#### Supported browsers
-
-Desktop Browsers
-
-
-<br/>
-
-
-<div style={{display: "flex",  gap: "2rem", height: "3rem"}}>
-<Image src={chromeIcon} alt="Chrome logo." width={50} height={50} />
-<Image src={firefoxIcon} alt="Firefox logo." width={50} height={50} />
-<Image src={edgeIcon} alt="Edge logo." width={50} height={50} />
-<Image src={safariIcon} alt="Safari logo." width={50} height={50} />
- </div>
-
-<br/>
-
-
-Mobile Browsers
-
-<br/>
-
-
-<div style={{display: "flex",  gap: "2rem", height: "3rem"}}>
-<Image src={chromeIcon} alt="Chrome logo." width={50} height={50} />
-<Image src={firefoxIcon} alt="Firefox logo." width={50} height={50} />
-<Image src={safariIcon} alt="Safari logo." width={50} height={50} />
- </div>
diff --git a/website/pages/docs/3.1.mdx b/website/pages/docs/3.1.mdx
deleted file mode 100644
index b81c08a0..00000000
--- a/website/pages/docs/3.1.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
----
-posttype: "docs"
-title: "3.1"
-metaTitle: "Introduction to 3.1"
-metaDescription: "ReactGrid docs"
----
-
-
-import Image from 'next/image'
-import edgeIcon from "@/public/static/edge.svg";
-import chromeIcon from "@/public/static/chrome.svg";
-import firefoxIcon from "@/public/static/firefox.svg";
-import safariIcon from "@/public/static/safari.svg";
-
-
-ReactGrid lets you create custom data grids inside your ReactJS applications, which look and feel like spreadsheets.
-
-#### Caveats
-a) If you notice `sticky` incorrect behavior, when you try to pin them to HTML `<body>` tag, add this line to `index.html` file in your project.
-It should be helpful in many cases and different mobile devices.
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
-```
-
-#### Supported browsers
-
-Desktop Browsers
-
-<br/>
-
-
-<div style={{display: "flex",  gap: "2rem", height: "3rem"}}>
-<Image src={chromeIcon} alt="Chrome logo." width={50} height={50} />
-<Image src={firefoxIcon} alt="Firefox logo." width={50} height={50} />
-<Image src={edgeIcon} alt="Edge logo." width={50} height={50} />
-<Image src={safariIcon} alt="Safari logo." width={50} height={50} />
- </div>
-
-<br/>
-
-
-Mobile Browsers
-
-<br/>
-
-
-<div style={{display: "flex",  gap: "2rem", height: "3rem"}}>
-<Image src={chromeIcon} alt="Chrome logo." width={50} height={50} />
-<Image src={firefoxIcon} alt="Firefox logo." width={50} height={50} />
-<Image src={safariIcon} alt="Safari logo." width={50} height={50} />
- </div>
diff --git a/website/pages/docs/4.0.mdx b/website/pages/docs/4.0.mdx
deleted file mode 100644
index de77834f..00000000
--- a/website/pages/docs/4.0.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-posttype: "docs"
-title: "4.0"
-metaTitle: "Introduction to 4.0"
-metaDescription: "ReactGrid docs"
----
-
-
-import Image from 'next/image'
-import edgeIcon from "@/public/static/edge.svg";
-import chromeIcon from "@/public/static/chrome.svg";
-import firefoxIcon from "@/public/static/firefox.svg";
-import safariIcon from "@/public/static/safari.svg";
-
-ReactGrid lets you create custom data grids inside your ReactJS applications, which look and feel like spreadsheets.
-
-#### Caveats
-a) If you notice `sticky` incorrect behavior, when you try to pin them to HTML `<body>` tag, add this line to `index.html` file in your project.
-It should be helpful in many cases and different mobile devices.
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
-```
-
-#### Supported browsers
-
-Desktop Browsers
-
-<br/>
-
-
-<div style={{display: "flex",  gap: "2rem", height: "3rem"}}>
-<Image src={chromeIcon} alt="Chrome logo." width={50} height={50} />
-<Image src={firefoxIcon} alt="Firefox logo." width={50} height={50} />
-<Image src={edgeIcon} alt="Edge logo." width={50} height={50} />
-<Image src={safariIcon} alt="Safari logo." width={50} height={50} />
- </div>
-
-<br/>
-
-
-Mobile Browsers
-
-<br/>
-
-
-<div style={{display: "flex",  gap: "2rem", height: "3rem"}}>
-<Image src={chromeIcon} alt="Chrome logo." width={50} height={50} />
-<Image src={firefoxIcon} alt="Firefox logo." width={50} height={50} />
-<Image src={safariIcon} alt="Safari logo." width={50} height={50} />
- </div>
diff --git a/website/pages/docs/5.0.mdx b/website/pages/docs/5.0.mdx
deleted file mode 100644
index ffa83abc..00000000
--- a/website/pages/docs/5.0.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-posttype: "docs"
-title: "5.0"
-metaTitle: "Introduction to 5.0"
-metaDescription: "ReactGrid docs"
----
-
-
-import Image from 'next/image'
-import edgeIcon from "@/public/static/edge.svg";
-import chromeIcon from "@/public/static/chrome.svg";
-import firefoxIcon from "@/public/static/firefox.svg";
-import safariIcon from "@/public/static/safari.svg";
-
-ReactGrid lets you create custom data grids inside your ReactJS applications, which look and feel like spreadsheets.
-
-#### Caveats
-a) If you notice `sticky` incorrect behavior, when you try to pin them to HTML `<body>` tag, add this line to `index.html` file in your project.
-It should be helpful in many cases and different mobile devices.
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
-```
-
-#### Supported browsers
-
-Desktop Browsers
-
-<br/>
-
-
-<div style={{display: "flex",  gap: "2rem", height: "3rem"}}>
-<Image src={chromeIcon} alt="Chrome logo." width={50} height={50} />
-<Image src={firefoxIcon} alt="Firefox logo." width={50} height={50} />
-<Image src={edgeIcon} alt="Edge logo." width={50} height={50} />
-<Image src={safariIcon} alt="Safari logo." width={50} height={50} />
- </div>
-
-<br/>
-
-
-Mobile Browsers
-
-<br/>
-
-
-<div style={{display: "flex",  gap: "2rem", height: "3rem"}}>
-<Image src={chromeIcon} alt="Chrome logo." width={50} height={50} />
-<Image src={firefoxIcon} alt="Firefox logo." width={50} height={50} />
-<Image src={safariIcon} alt="Safari logo." width={50} height={50} />
- </div>
diff --git a/website/pages/docs/_meta.json b/website/pages/docs/_meta.json
index 62f6a51e..59b90dd0 100644
--- a/website/pages/docs/_meta.json
+++ b/website/pages/docs/_meta.json
@@ -1,8 +1,4 @@
 {
-  "-- Versions": {
-    "title": "Versions",
-    "type": "separator"
-  },
     "5.0": "5.0",
     "4.0": "4.0",
     "3.1": "3.1",