Update/zesty docs content

.github/workflows/ci.yml

@@ -37,7 +37,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [18, 20, 21]
+        node-version: [20]
     runs-on: ${{ matrix.os }}
     needs: install-dependencies
 
@@ -64,7 +64,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [18,20,21]
+        node-version: [20]
     runs-on: ${{ matrix.os }}
     needs: install-dependencies
 
@@ -91,7 +91,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [18,20,21]
+        node-version: [20]
     runs-on: ${{ matrix.os }}
     needs: install-dependencies
 

.github/workflows/pr_lint.yml

@@ -0,0 +1,20 @@
+
+name: Zesty Website CI Dev
+
+on:
+  pull_request:
+    types: [opened, synchronize,edited]
+    branches: [stage, accounts, production, dev]
+  workflow_dispatch:
+
+
+jobs:
+  pr_lint:
+    name: Check PR Title 
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          validateSingleCommit: true

package.json

@@ -2,7 +2,7 @@
   "name": "zesty-website",
   "author": "Zesty.io Platform Inc.",
   "email": "[email protected]",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",

src/components/accounts/ui/header/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Grid, Stack, Typography } from '@mui/material';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
-const Index = ({ title, description, children }) => {
+const Index = ({ title, description, info, children }) => {
   return (
     <Grid item xs={12} px={4} py={3}>
       <Stack direction={{ xs: 'column', md: 'row' }}>
@@ -11,7 +11,10 @@ const Index = ({ title, description, children }) => {
             <Typography variant="h4" data-testid={title}>
               {title}
             </Typography>
-            <HelpOutlineIcon color="disabled" titleAccess={description} />
+            <HelpOutlineIcon
+              color="disabled"
+              titleAccess={info || description}
+            />
           </Stack>
           <Stack>
             <Typography variant="body2" color="text.secondary">

src/lib/ga/index.js

@@ -12,3 +12,15 @@ export const event = ({ action, params }) => {
   console.log('fire gtag', action, params);
   //window.gtag('event', action, params)
 };
+
+export function pushDataLayer(data) {
+  if (typeof window.dataLayer !== 'undefined') {
+    window.dataLayer.push({
+      event: 'btn_click',
+      buttonText: data?.buttonText,
+      currentPage: window?.location.pathname,
+      targetPage: data?.path,
+      ...data,
+    });
+  }
+}

src/pages/docs/index.js

@@ -47,6 +47,7 @@ const DocsPage = (props) => {
             borderBottom: `1px solid ${theme.palette.zesty.whiteGray}`,
             gap: 2,
             position: 'relative',
+            zIndex: 1,
           }}
         >
           <Box
@@ -72,6 +73,7 @@ const DocsPage = (props) => {
               bottom: 10,
               right: -10,
               opacity: 0.2,
+              zIndex: -1,
             }}
           />
           <Typography
@@ -103,7 +105,7 @@ const DocsPage = (props) => {
           <Box>
             <Grid container spacing={2}>
               {cardData.map((item, index) => (
-                <Grid item sm={12} md={4} key={index}>
+                <Grid item sm={12} md={4} width="100%" key={index}>
                   <Card
                     variant="outlined"
                     sx={{

src/pages/instances/[zuid]/domains.js

@@ -195,6 +195,7 @@ export default function Domains() {
   const headerProps = {
     title: 'Domain',
     description: `Manage your Domains`,
+    info: 'This page allows you to perform several actions related to your desired domains, such as deleting them, managing their settings, and controlling the settings that can impact your selected instance.',
   };
   const domainListingProps = {
     liveDomains,

src/pages/instances/[zuid]/locales.js

@@ -191,6 +191,7 @@ export default function Locales() {
   const headerProps = {
     title: 'Locales',
     description: 'Manage your languages',
+    info: 'When a Zesty.io Content Instance is created, it uses English as the default language. It is possible to add more languages to a Zesty.io Content Instance. Multi-lang content is premium feature of Zesty.io, reach out to your account manager to learn more.',
   };
   return (
     <InstanceContainer>

src/views/accounts/instances/Apis.js

@@ -488,6 +488,7 @@ export const Apis = ({
   const headerProps = {
     title: 'Apis',
     description: `Manage your API's`,
+    info: `The API of Zesty.io is a set of tools and protocols that allow developers to easily integrate Zesty.io's content management and delivery capabilities into their own applications and websites.`,
   };
 
   return (

src/views/accounts/instances/Settings.js

@@ -267,6 +267,7 @@ export const Settings = ({
   const headerProps = {
     title: 'Settings',
     description: `Manage your Settings`,
+    info: 'On this page, you can perform searches, export data, and execute actions to configure certain settings related to your instance that can impact its overall functionality.',
   };
 
   return (

src/views/accounts/instances/Teams.js

@@ -333,6 +333,7 @@ const Main = ({
   const headerProps = {
     title: 'Teams',
     description: `Manage your Teams`,
+    info: 'This page allows you to oversee your teams in this table if you possess the necessary authorization to do so.',
   };
 
   const Nodata = () => {

src/views/accounts/instances/Usage.js

@@ -261,6 +261,7 @@ const Main = ({ zuid, usage, loading }) => {
   const headerProps = {
     title: 'Usage',
     description: `View your usage`,
+    info: 'This page allows you to view the total number of requests you have made and the amount of data transferred, known as bandwidth. Additionally, you have the option to export this report for your team to review.',
   };
   const tableProps = {
     zuid,

src/views/accounts/instances/Users.js

@@ -311,6 +311,7 @@ const Index = ({
   const headerProps = {
     title: 'Users',
     description: 'Manage your users and their permissions',
+    info: 'This page allows you to oversee and manage your users in the provided table if you have the necessary authorization, and you can view a list of all users in your instance.',
   };
 
   return (

src/views/zesty/Demo.js

@@ -40,6 +40,7 @@ import revampTheme from 'theme/revampTheme';
 import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
 import Link from 'next/link';
 import { G2Awards, Logos } from 'revamp/ui/GetDemoSection';
+import { pushDataLayer } from 'lib/ga';
 
 const Demo = ({ content }) => {
   const theme = useTheme();
@@ -90,6 +91,12 @@ function EngageTypeCards({ cardData }) {
             <Grid
               key={item}
               component={Link}
+              onClick={() =>
+                pushDataLayer({
+                  buttonText: item?.button_text || '',
+                  targetPage: item.button_link || '#',
+                })
+              }
               href={item.button_link || '#'}
               sx={{ textDecoration: 'none' }}
               item

src/views/zesty/ZestyDoc.js

@@ -118,7 +118,7 @@ const ZestyDoc = (props) => {
 }
 
   p img {
-    width: 100%;
+    max-width: 100%;
   }
 
   `;
@@ -206,9 +206,9 @@ const ZestyDoc = (props) => {
                   </Typography>
                 </Stack>
                 <Stack width={1} height={1}>
-                  <div
+                  <Box
                     dangerouslySetInnerHTML={{ __html: content?.content }}
-                  ></div>
+                  ></Box>
                 </Stack>
               </Stack>
             </Grid>