Add dynamic sidebar ad data fetching

src/theme/DocItem/TOC/Desktop/index.js

@@ -7,6 +7,8 @@ import IconClose from '@theme/Icon/Close';
 import styles from './styles.module.css'
 import Feedback from '../../../../components/Feedback';
 
+const AD_DATA_ENDPOINT = 'https://cms.clickhouse-dev.com:1337/api/docs-ad'
+
 export default function DocItemTOCDesktop() {
   const {toc, frontMatter} = useDoc();
   const [isClosed, setClosed] = useState(() => {
@@ -15,6 +17,63 @@ export default function DocItemTOCDesktop() {
     }
     return false;
   });
+  const [title, setTitle] = useState(null);
+  const [description, setDescription] = useState(null);
+  const [href, setHref] = useState(null);
+  const [label, setLabel] = useState(null);
+  const [tag, setTag] = useState(null);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const fetchAdData = async () => {
+        const cacheKey = 'doc-cloud-card-banner-attributes';
+        let attributes = {};
+
+        // Get cached ad data from session
+        if (window.sessionStorage.getItem(cacheKey)) {
+          try {
+            attributes = JSON.parse(window.sessionStorage.getItem(cacheKey));
+          } catch (e) {
+            console.log('Failed to parse cached ad attributes', e);
+          }
+        }
+
+        // Fetch new ad data if not in session
+        if (
+            !attributes
+            || !attributes.hasOwnProperty('title')
+            || !attributes.hasOwnProperty('description')
+            || !attributes.hasOwnProperty('href')
+            || !attributes.hasOwnProperty('label')
+            || !attributes.hasOwnProperty('tag')
+        ) {
+          try {
+            const response = await window.fetch(AD_DATA_ENDPOINT);
+            const { data } = await response.json();
+
+            if (data && typeof data === 'object' && data.hasOwnProperty('attributes')) {
+              attributes = data.attributes;
+              window.sessionStorage.setItem(cacheKey, JSON.stringify(attributes));
+            }
+          } catch (e) {
+            console.log('Failed to fetch ad content', e);
+          }
+        }
+
+        return attributes;
+      }
+
+      // Set ad states
+      fetchAdData().then(attributes => {
+        setTitle(attributes?.title || null);
+        setDescription(attributes?.description || null);
+        setHref(attributes?.href || null);
+        setLabel(attributes?.label || null);
+        setTag(attributes?.tag || null)
+      })
+
+    }
+  }, [setTitle, setDescription, setHref, setLabel, setTag]);
 
   return (
     <div className={clsx(styles.docTOCContainer, 'theme-doc-toc-desktop-container')}>
@@ -29,10 +88,10 @@ export default function DocItemTOCDesktop() {
       </div>
 
       {
-        !isClosed && (
+        !isClosed && title && description && href && label && (
           <div className={styles.docCloudCard}>
             <div className={styles.docCloudCardHeader}>
-              <h6>Try ClickHouse Cloud for FREE</h6>
+              <h6>{title}</h6>
               <button
                 className={styles.docCloudClose}
                 onClick={() => {
@@ -42,8 +101,8 @@ export default function DocItemTOCDesktop() {
                 <IconClose color="var(--ifm-color-emphasis-600)" width={10} height={10}/>
               </button>
             </div>
-            <p className={styles.docCloudCardContent}>Separation of storage and compute, automatic scaling, built-in SQL console, and lots more. $300 in free credits when signing up.</p>
-            <a href='https://console.clickhouse.cloud/signUp?loc=doc-card-banner' className={clsx(styles.docCloudCardLink, 'click-button primary-btn')}>Try it for Free</a>
+            <p className={styles.docCloudCardContent}>{description}</p>
+            <a href={href} className={clsx(styles.docCloudCardLink, 'click-button primary-btn')}>{label}</a>
           </div>
         )
       }