website changes

silevis · Oct 25, 2024 · ab0fa91 · ab0fa91
1 parent 3ba8486
commit ab0fa91
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/reactgrid/lib/behaviors/DefaultBehavior.ts b/reactgrid/lib/behaviors/DefaultBehavior.ts
@@ -501,6 +501,9 @@ const defaultPasteHandler = (
   const doc = parser.parseFromString(html, "text/html");
 
   const rows = doc.querySelectorAll("tr");
+
+  if (rows.length === 0) return store;
+
   const firstRowCells = rows[0].querySelectorAll("td");
 
   if (rows.length === 1 && firstRowCells.length === 1) {

diff --git a/reactgrid/stories/CutCopyPaste.stories.tsx b/reactgrid/stories/CutCopyPaste.stories.tsx
@@ -141,6 +141,9 @@ const handlePaste = (
   const doc = parser.parseFromString(html, "text/html");
 
   const rows = doc.querySelectorAll("tr");
+
+  if (rows.length === 0) return false;
+
   const firstRowCells = rows[0].querySelectorAll("td");
 
   if (rows.length === 1 && firstRowCells.length === 1) {

diff --git a/website/app/demo/page.tsx b/website/app/demo/page.tsx
@@ -72,7 +72,7 @@ export default function ExamplesPage() {
   return (
     <section>
       <div className="grid grid-cols-main pt-12 md:pt-32 pb-[40px]">
-        <h1 className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-xl md:text-2xl font-bold text-center text-green-primary p-4">
+        <h1 className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-xl md:text-2xl font-bold text-center p-4 bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent">
           ReactGrid Demo
         </h1>
         <p className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary text-center text-xs md:text-sm px-4">

diff --git a/website/app/globals.css b/website/app/globals.css
@@ -88,6 +88,11 @@ body {
   --cc-btn-border-radius: 10px;
 }
 
+.prism-code.language-javascript {
+  white-space: nowrap !important;
+  overflow-x: auto !important;
+}
+
 @media (min-width: 780px) {
   .flex-none {
     display: none;

diff --git a/website/app/support/page.tsx b/website/app/support/page.tsx
@@ -22,7 +22,7 @@ export default function FeaturesPage() {
 
       <section className="relative texture-bg-2 z-2">
         <div className="grid grid-cols-main grid-rows-2 pt-12 md:pt-32 md:pb-12">
-          <h1 className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-xl md:text-2xl font-bold text-center text-green-primary px-4">
+          <h1 className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-xl md:text-2xl font-bold text-center bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent px-4">
             Need support?
           </h1>
           <p className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary text-center text-xs md:text-sm px-4 font-bold">

diff --git a/website/components/footer.tsx b/website/components/footer.tsx
@@ -8,32 +8,52 @@ export const Footer = () => {
     <footer className="relative z-5 texture-bg grid grid-cols-main bg-black-primary py-[40px] gap-y-12 md:gap-y-32">
       <div className="flex justify-between gap-y-8 md:gap-y-16 col-start-3 col-end-11 flex-wrap lg:flex-nowrap">
         <div className="w-[100%] sm:w-[50%] lg:w-auto">
-          <h2 className="font-bold text-green-primary text-sm mb-4 md:mb-[32px]">
+          <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
             Info
           </h2>
           <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
             {/* <Link href="/cookies">Cookies</Link> */}
-            <Link href="/privacy-policy">Privacy Policy</Link>
+            <Link
+              href="/privacy-policy"
+              className="transition-colors duration-100 hover:text-slate-50"
+            >
+              Privacy Policy
+            </Link>
           </ul>
         </div>
         <div className="w-[100%] sm:w-[50%] lg:w-auto">
-          <h2 className="font-bold text-green-primary text-sm mb-4 md:mb-[32px]">
+          <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
             Explore
           </h2>
           <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
             <li>
-              <Link href="/demo">Demo</Link>
+              <Link
+                href="/demo"
+                className="transition-colors duration-100 hover:text-slate-50"
+              >
+                Demo
+              </Link>
             </li>
             <li>
-              <Link href="/docs/5.0/1-getting-started">Documentation</Link>
+              <Link
+                href="/docs/5.0/1-getting-started"
+                className="transition-colors duration-100 hover:text-slate-50"
+              >
+                Documentation
+              </Link>
             </li>
             <li>
-              <Link href="/support">Support</Link>
+              <Link
+                href="/support"
+                className="transition-colors duration-100 hover:text-slate-50"
+              >
+                Support
+              </Link>
             </li>
           </ul>
         </div>
         <div className="w-[100%] sm:w-[50%] lg:w-auto">
-          <h2 className="font-bold text-green-primary text-sm mb-4 md:mb-[32px]">
+          <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
             Social
           </h2>
           <ul className="text-white-secondary3 flex gap-x-8">
@@ -57,7 +77,7 @@ export const Footer = () => {
           </ul>
         </div>
         <div className="w-[100%] sm:w-[50%] lg:w-auto">
-          <h2 className="font-bold text-green-primary text-sm mb-4 md:mb-[32px]">
+          <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
             Contact
           </h2>
           <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">

diff --git a/website/components/reactgrid-sample.tsx b/website/components/reactgrid-sample.tsx
@@ -14,7 +14,7 @@ export default function ReactGridMainExample() {
           delay={0.1}
           inView
         >
-          <h1 className="text-md sm:text-xl md:text-2xl px-4 font-bold text-center">
+          <h1 className="text-md sm:text-xl md:text-2xl px-4 font-bold text-center bg-gradient-to-t from-slate-50 to-slate-300 bg-clip-text text-transparent">
             ReactGrid component
           </h1>
         </BlurFade>

diff --git a/website/components/why-us-section.tsx b/website/components/why-us-section.tsx
@@ -78,7 +78,7 @@ export const WhyUsSection = () => {
           delay={0.1}
           inView
         >
-          <h1 className="text-md sm:text-xl md:text-2xl px-4 font-bold text-center text-green-primary z-10">
+          <h1 className="text-md sm:text-xl md:text-2xl px-4 font-bold text-center bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent z-10">
             Why is ReactGrid unique?
           </h1>
         </BlurFade>

diff --git a/website/package.json b/website/package.json
@@ -16,7 +16,7 @@
     "@silevis/reactgrid-4": "npm:@silevis/reactgrid@^4.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.11.1",
+    "framer-motion": "^11.11.9",
     "hamburger-react": "^2.5.0",
     "lucide-react": "^0.446.0",
     "moment": "^2.30.1",

diff --git a/website/pages/docs/5.0/2-implementing-core-features/10-copy-cut-paste.mdx b/website/pages/docs/5.0/2-implementing-core-features/10-copy-cut-paste.mdx
@@ -218,6 +218,7 @@ const ReactGridExample = () => {
   return (
     <div>
       <ReactGrid
+        id="cut-copy-paste-example"
         rows={rows}
         columns={columns}
         cells={cells}
@@ -334,6 +335,10 @@ const handlePaste = (
   const doc = parser.parseFromString(html, "text/html");
 
   const rows = doc.querySelectorAll("tr");
+
+  // Prevent the default paste behavior - no action will be performed
+    if (rows.length === 0) return true;
+
   const firstRowCells = rows[0].querySelectorAll("td");
 
   if (rows.length === 1 && firstRowCells.length === 1) {

diff --git a/website/pages/docs/5.0/2-implementing-core-features/4-sticky.mdx b/website/pages/docs/5.0/2-implementing-core-features/4-sticky.mdx
@@ -19,15 +19,12 @@ Sticky rows and columns can be enabled by adding dedicated `ReactGrid` component
 
 All of these properties are numeric and determine the number of columns or rows sticky next to the grid's edges.
 
-#### How to make columns and rows sticky?
-
-1. Use the properties mentioned in the introduction to set the number of sticky ranges at each edge.
-
 ---
 
-### Live example
+<div style={{paddingBottom: 25}}>
+  ### Live example
+</div>
 
----
 
 import LiveCode from "@/nextra/components/LiveCode.tsx";
 import React, { useState } from "react";

diff --git a/website/pages/docs/5.0/2-implementing-core-features/8-cell-span.mdx b/website/pages/docs/5.0/2-implementing-core-features/8-cell-span.mdx
@@ -177,7 +177,6 @@ const ReactGridExample = () => {
 
   return (
       <ReactGrid
-        id="spanned-cells-example"
         columns={columns}
         rows={rows}
         stickyTopRows={1}