diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index c36fb9ff9a..04901beabe 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -32,6 +32,17 @@ jobs: env: NODE_OPTIONS: "--max-old-space-size=8192 --max-http-header-size=8192" run: yarn build + deploy-to-review: + uses: SumoLogic/sumologic-documentation/.github/workflows/build_and_deploy.yml@main + with: + hostname: https://d2t1s0ah22jxsa.cloudfront.net + base_url: /${{ github.ref_name }}/ + environment: review/${{ github.ref_name }} + secrets: + S3_BUCKET_NAME: ${{ secrets.REVIEW_S3_BUCKET_NAME }} + CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.REVIEW_CLOUDFRONT_DISTRIBUTION_ID }} + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} spellcheck: runs-on: ubuntu-latest steps: diff --git a/.github/workflows/review.yml b/.github/workflows/review.yml new file mode 100644 index 0000000000..bb9610b7a2 --- /dev/null +++ b/.github/workflows/review.yml @@ -0,0 +1,16 @@ +name: deploy-to-review + +on: workflow_dispatch + +jobs: + deploy-to-review: + uses: SumoLogic/sumologic-documentation/.github/workflows/build_and_deploy.yml@main + with: + hostname: https://d2t1s0ah22jxsa.cloudfront.net + base_url: /${{ github.ref_name }}/ + environment: review/${{ github.ref_name }} + secrets: + S3_BUCKET_NAME: ${{ secrets.REVIEW_S3_BUCKET_NAME }} + CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.REVIEW_CLOUDFRONT_DISTRIBUTION_ID }} + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} diff --git a/docusaurus.config.js b/docusaurus.config.js index 2faad7d480..2a732bd12f 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -271,12 +271,6 @@ module.exports = { return `https://github.com/SumoLogic/sumologic-documentation/issues/new?title=${query}`; }, }, - announcementBar: { - id: 'copilot', - content: 'Check out 🤖 Sumo Logic Copilot, our new AI-powered logs assistant!', - backgroundColor: '#D3BAF7', - textColor: '#000', - }, prism: { theme: lightCodeTheme, darkTheme: darkCodeTheme, diff --git a/package.json b/package.json index 9efba1e80f..32b6aa7ba5 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "@fortawesome/react-fontawesome": "^0.2.2", "@mdx-js/node-loader": "^3.0.0", "@mdx-js/react": "^3.0.0", + "@mui/icons-material": "^6.3.1", "@mui/lab": "^5.0.0-alpha.108", "@mui/material": "^5.16.7", "@mui/system": "^5.16.7", diff --git a/src/css/sumo.scss b/src/css/sumo.scss index 9f2a4c29e6..c5124ceb16 100644 --- a/src/css/sumo.scss +++ b/src/css/sumo.scss @@ -227,6 +227,11 @@ html[data-theme='light'] { min-width: 100px; } +/* Berry chatbot inline height */ +#inline-berry-chatbot-container iframe { + height: 600px !important; +} + //GitHub icon .header-github-link:hover { opacity: 0.6; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4fa5bd335c..5ab7277afe 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,50 +1,189 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import Layout from '@theme/Layout'; -import { Box, Button, Container, Grid, Stack, Tab, Tabs, Typography } from '@mui/material'; +import { Box, Button, Container, Grid, Stack, Tab, Tabs, Typography, Switch } from '@mui/material'; import { TabContext, TabPanel } from '@mui/lab'; +import { LightMode, DarkMode } from '@mui/icons-material'; // <-- Icons import bgImage from '../../static/img/hero-secondary-background.webp'; import heroImage from '../../static/img/hero-secondary-graphic.webp'; import SumoLogicDocsLogo from '../../static/img/sumo-logic-docs.svg'; import { Feature } from '../components/Feature'; import { features } from '../helper/features'; -import ErrorBoundary from '../components/ErrorBoundary'; // Import the ErrorBoundary component +import ErrorBoundary from '../components/ErrorBoundary'; export const Home = () => { const [tab, setTab] = useState('0'); + // Track whether we're in dark mode: + const [isDark, setIsDark] = useState(false); + + const questions = [ + '✨ timestamps', + '✨ how do you write a log search query?', + '✨ how do I set up alerts?', + '✨ what types of logs can I analyze?', + '✨ what is copilot?', + '✨ cloud siem', + '✨ how do I change my password?', + '✨ what is the parse operator?' + ]; + + useEffect(() => { + if (!document.getElementById('berry-widget-script')) { + const script = document.createElement('script'); + script.id = 'berry-widget-script'; + script.src = 'https://www.berryapp.io/js/berry-widget.min.js'; + script.async = true; + document.head.appendChild(script); + + script.onload = () => { + const widgetJwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE3MjU5NDg5MTcsImV4cCI6MTc0MTYwODkxNywiYXVkIjoiV2lkZ2V0SW5pdGlhbGl6YXRpb24iLCJvcmdhbml6YXRpb25JZCI6NjN9.oJEGkGq1q3uFD66J916f_ZBrqQjPHP9orUOKFxInG38'; + window.Berry.init({ + token: widgetJwt, + primaryColor: '#021b9a', + position: { side: 'right', offsetX: 25, offsetY: 100 }, + isOpenByDefault: true, + botUrlPath: 'nova', + showNewChat: true, + parentElementId: 'inline-berry-chatbot-container', + // If we want to start in dark mode by default, uncomment: + // colorMode: 'dark', + }); + }; + + script.onerror = () => console.error('Failed to load Berry widget script'); + } + }, []); + + // Send a question to Berry: + const handleQuestionClick = (question) => { + if (window.Berry) { + if (window.Berry.sendMessage) { + window.Berry.sendMessage(question); + } + if (window.Berry.open) { + window.Berry.open(); + } + } + }; + + // Toggle Berry's theme on switch change: + const handleToggle = (event) => { + const newValue = event.target.checked; // true = dark mode, false = light mode + setIsDark(newValue); + + if (window.Berry && window.Berry.update) { + window.Berry.update({ + colorMode: newValue ? 'dark' : 'light' + }); + } + }; + return ( - {/* Header */} - - + {/* Suggested Questions */} + + + + {/* Hero */} { }} height='100%' > - + { {/* Main */} - {/* Product Guides */} { { label: 'Other Solutions', }, - ].map(({ label, ...rest }, index) => ( + ].map(({ label }, index) => ( { fontWeight: 'bold', }} value={String(index)} - {...rest} /> ))} - {features.map((feature, index) => tab === String(index) && ( - - {feature.map((config) => ( - - - - ))} - + {features.map((feature, index) => ( + tab === String(index) && ( + + {feature.map((config) => ( + + + + ))} + + ) ))} - diff --git a/yarn.lock b/yarn.lock index d0b0058aa8..f095b14a69 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1038,7 +1038,7 @@ core-js-pure "^3.30.2" regenerator-runtime "^0.14.0" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.25.9", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.25.9", "@babel/runtime@^7.26.0", "@babel/runtime@^7.8.4": version "7.26.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1" integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw== @@ -2370,6 +2370,13 @@ resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz#182a325a520f7ebd75de051fceabfc0314cfd004" integrity sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ== +"@mui/icons-material@^6.3.1": + version "6.3.1" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-6.3.1.tgz#f28b5ecc3a4d8e8be389f9e9e5738759c7a98240" + integrity sha512-nJmWj1PBlwS3t1PnoqcixIsftE+7xrW3Su7f0yrjPw4tVjYrgkhU0hrRp+OlURfZ3ptdSkoBkalee9Bhf1Erfw== + dependencies: + "@babel/runtime" "^7.26.0" + "@mui/lab@^5.0.0-alpha.108": version "5.0.0-alpha.170" resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.170.tgz#4519dfc8d1c51ca54fb9d8b91b95a3733d07be16"