update docs

silevis · Oct 11, 2024 · 8c65567 · 8c65567
1 parent d60dd87
commit 8c65567
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 211 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git a/website/pages/docs/3.1.mdx b/website/pages/docs/3.1.mdx
diff --git a/website/pages/docs/4.0.mdx b/website/pages/docs/4.0.mdx
diff --git a/website/pages/docs/5.0.mdx b/website/pages/docs/5.0.mdx
diff --git 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",