From ba100dab024c336fd06dfddff8143932ad8ebfda Mon Sep 17 00:00:00 2001 From: olegt-codefresh Date: Mon, 9 Jun 2025 13:08:00 +0300 Subject: [PATCH 1/5] CR-29590 --- README.md | 21 +--- _includes/scripts.html | 105 +------------------ assets/js/src/argohub-redirect.js | 165 ++++++++++++++++++++++++------ 3 files changed, 138 insertions(+), 153 deletions(-) diff --git a/README.md b/README.md index c9f8d3937..d3c86afae 100644 --- a/README.md +++ b/README.md @@ -71,24 +71,13 @@ By default, users are redirected from the Enterprise segment to the GitOps (Argo For more details, refer to the "Auto Redirect from Enterprise to ArgoHub Collection" section below. -#### To switch segments in production: +#### Switching Between Segments -- To switch to the GitOps segment, log in to Codefresh and switch to an account with the GitOps type. This will clear the Enterprise cookie. -- To switch to the Enterprise segment, log in to Codefresh and switch to an account with any other type. This will set the Enterprise cookie. +- Use the segment selector in the documentation header. +- Use a cookie to automatically switch segments (production only): -#### To switch segments in local development: - -In the local documentation site (`http://localhost:3131/`), open the console in developer tools and inject the appropriate cookie: - -- **Switch to Enterprise Segment:** - ```js - document.cookie = 'cfdoctype=enterprise; SameSite=Strict; Domain=localhost; Max-age=2592000; Path=/'; - ``` - -- **Switch to GitOps Segment:** - ```js - document.cookie = 'cfdoctype=enterprise; SameSite=Strict; Domain=localhost; Max-age=0; Path=/'; - ``` + - **To switch to the GitOps segment:** Log in to Codefresh and switch to an account with the GitOps type. This will set the GitOps cookie. + - **To switch to the Enterprise segment:** Log in to Codefresh and switch to an account with any other type. This will clear the GitOps cookie. ### Reusing Existing Documents diff --git a/_includes/scripts.html b/_includes/scripts.html index 295a842a4..49a151e32 100644 --- a/_includes/scripts.html +++ b/_includes/scripts.html @@ -59,8 +59,7 @@ - - - diff --git a/assets/js/src/argohub-redirect.js b/assets/js/src/argohub-redirect.js index 0ed89b62d..0e1e2732a 100644 --- a/assets/js/src/argohub-redirect.js +++ b/assets/js/src/argohub-redirect.js @@ -1,58 +1,157 @@ -const enterpriseDocumentationCookie = "cfdoctype=enterprise"; -const ARGOHUB_MAIN_PATH = `/${SITE_GITOPS_COLLECTION}/`; -const enterpriseDocTypeLockKey = "enterpriseDocTypeLock"; +const GITOPS_DOC_COOKIE = 'cfdoctype=gitops' +const IS_GITOPS_DOC_COOKIE_SET = document.cookie.includes(GITOPS_DOC_COOKIE) -function checkIfEnterpriseDocumentationCookieSet() { - return document.cookie.includes(enterpriseDocumentationCookie); -} +handleRedirect() async function getArgoHubRedirectURL(currentPath) { - currentPath = currentPath.replace(SITE_BASE_URL, ""); + currentPath = currentPath.replace(SITE_BASE_URL, '') - const redirectMap = await fetchRedirectMap(); + const redirectMap = await fetchRedirectMap() - const newPath = redirectMap[currentPath]; - if (!newPath) return null; + const newPath = redirectMap[currentPath] + if (!newPath) return null const newURL = - newPath === ARGOHUB_MAIN_PATH + newPath === `/${SITE_GITOPS_COLLECTION}/` ? `${location.href}${SITE_GITOPS_COLLECTION}` - : location.href.replace(currentPath, newPath); + : location.href.replace(currentPath, newPath) - return newURL; + return newURL } async function handleRedirect() { - if (shouldSkipRedirect()) return; + if (SITE_IS_GITOPS_COLLECTION || !IS_GITOPS_DOC_COOKIE_SET) return - const argoHubRedirectURL = await getArgoHubRedirectURL(location.pathname); - if (!argoHubRedirectURL) return; + const argoHubRedirectURL = await getArgoHubRedirectURL(location.pathname) + if (!argoHubRedirectURL) return - location.href = argoHubRedirectURL; + location.href = argoHubRedirectURL } async function fetchRedirectMap() { - const response = await fetch( - `${SITE_BASE_URL}/assets/js/src/argohub-redirect-mapping.json` - ); + const response = await fetch(`${SITE_BASE_URL}/assets/js/src/argohub-redirect-mapping.json`) if (!response.ok) { - throw new Error("Failed to fetch the collections redirect map."); + throw new Error('Failed to fetch the collections redirect map.') + } + return response.json() +} + +function setGitOpsDocumentationCookie() { + const maxAge = 2592000 + configureGitOpsDocumentationCookie(maxAge) +} + +function removeGitOpsDocumentationCookie() { + configureGitOpsDocumentationCookie(0) +} + +function configureGitOpsDocumentationCookie(maxAge) { + let cookie = `${GITOPS_DOC_COOKIE}; Max-Age=${maxAge}; Path=/; SameSite=Strict` + + if (location.protocol === 'https:') { + cookie += '; Secure' + } + + if (location.hostname.endsWith('.codefresh.io')) { + cookie += '; Domain=.codefresh.io' + } + + document.cookie = cookie +} + +function toggleSegmentDropdown() { + const select = document.querySelector('.custom-select') + select.classList.toggle('open') +} + +function handleDropdownKeydown(event) { + const select = document.querySelector('.custom-select') + const options = select.querySelectorAll('.option') + const isOpen = select.classList.contains('open') + + switch (event.key) { + case 'Enter': + case ' ': + event.preventDefault() + toggleSegmentDropdown() + break + case 'ArrowDown': + event.preventDefault() + if (!isOpen) toggleSegmentDropdown() + options[0].focus() + break + case 'Escape': + if (isOpen) toggleSegmentDropdown() + break } - return response.json(); } -function isEnterpriseLockPresent() { - const enterpriseDocTypeLock = localStorage.getItem(enterpriseDocTypeLockKey); - return !!enterpriseDocTypeLock; +function handleOptionKeydown(event, option, selectedValue) { + const select = document.querySelector('.custom-select') + const options = select.querySelectorAll('.option') + const currentIndex = Array.from(options).indexOf(option) + + switch (event.key) { + case 'Enter': + case ' ': + event.preventDefault() + selectSegmentOption(option, selectedValue) + break + case 'ArrowDown': + event.preventDefault() + if (currentIndex < options.length - 1) { + options[currentIndex + 1].focus() + } + break + case 'ArrowUp': + event.preventDefault() + if (currentIndex > 0) { + options[currentIndex - 1].focus() + } + break + case 'Escape': + select.classList.remove('open') + select.querySelector('.select-display').focus() + break + } } -function shouldSkipRedirect() { - return true; // Redirect temporarily disabled. Will be re-enabled with a new cookie-based mechanism. - // return ( - // isEnterpriseLockPresent() || - // SITE_IS_GITOPS_COLLECTION || - // checkIfEnterpriseDocumentationCookieSet() - // ); +async function selectSegmentOption(option, selectedValue) { + const selectDisplay = document.querySelector('.select-display') + + selectDisplay.textContent = option.textContent + + const redirectMap = await fetchRedirectMap() + + const pathname = window.location.pathname + const currentPath = pathname.replace(SITE_BASE_URL, '') + + if (selectedValue === 'enterprise') { + removeGitOpsDocumentationCookie() + + const enterprisePath = Object.keys(redirectMap).find((key) => redirectMap[key] === currentPath) + + if (enterprisePath) { + window.location.href = `${SITE_BASE_URL}${enterprisePath}` + } else { + window.location.href = `${SITE_BASE_URL}/` + } + } else if (selectedValue === 'gitops') { + setGitOpsDocumentationCookie() + + const gitOpsPath = redirectMap[currentPath] + + if (gitOpsPath) { + window.location.href = `${SITE_BASE_URL}${gitOpsPath}` + } else { + window.location.href = `${SITE_BASE_URL}/${SITE_GITOPS_COLLECTION}/` + } + } } -handleRedirect(); +document.addEventListener('click', (e) => { + const select = document.querySelector('.custom-select') + if (!select.contains(e.target)) { + select.classList.remove('open') + } +}) From ac333f472aad021a5e523c97786f0f8e7d6b2106 Mon Sep 17 00:00:00 2001 From: olegt-codefresh Date: Mon, 9 Jun 2025 15:57:14 +0300 Subject: [PATCH 2/5] After review fix --- README.md | 25 +++++++++++++++++++------ _includes/scripts.html | 2 +- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d3c86afae..a65e44770 100644 --- a/README.md +++ b/README.md @@ -64,16 +64,17 @@ No actions required - the new content will be automatically reflected in both Ar ### Switching Between GitOps (ArgoHub) and Enterprise Segments -By default, users are redirected from the Enterprise segment to the GitOps (ArgoHub) segment. +By default, users are redirected from the Enterprise segment to the GitOps (ArgoHub) segment. #### Example: + - Accessing https://codefresh.io/docs/ will redirect to https://codefresh.io/docs/gitops/ For more details, refer to the "Auto Redirect from Enterprise to ArgoHub Collection" section below. #### Switching Between Segments -- Use the segment selector in the documentation header. +- Use the segment dropdown menu in the page header to select a segment. - Use a cookie to automatically switch segments (production only): - **To switch to the GitOps segment:** Log in to Codefresh and switch to an account with the GitOps type. This will set the GitOps cookie. @@ -118,12 +119,24 @@ The ArgoHub home page and all pages within the ArgoHub collection are excluded f - Commandbar HelpHub Search (managed via Commandbar Content Manager). - Search engines that support the `noindex` rule, such as Google. -#### Commandbar's HelpHub and Copilot Content Sync +### Auto-Redirect: Enterprise to ArgoHub Collection + +The documentation site automatically redirects users from any Enterprise page to the corresponding GitOps (ArgoHub) page when the GitOps cookie is present. + +#### Redirect Logic -Commandbar synchronizes the documentation site content using a crawler. However, the Auto Redirect mechanism prevents the crawler from accessing all Enterprise pages (see the "Auto Redirect from Enterprise to ArgoHub Collection" section for details). To address this issue, the Commandbar team configured the crawler to include the `cfdoctype` cookie, enabling it to access all documentation pages and bypass the redirect. +```mermaid +flowchart LR + A[Enterprise Page] --> B{GitOps Cookie Present?} + B -->|No| C[Stay on Enterprise Page] + B -->|Yes| D[Redirect to GitOps Page] +``` -### Auto Redirect from Enterprise to ArgoHub Collection +```mermaid +flowchart LR + A[GitOps Page] --> B[Stay on GitOps Page] +``` -When the GitOps client adds an ArgoHub system type cookie, the Documentation site will detect it and initiate an automatic redirect. If you open any page from the enterprise collection, the site will check for an equivalent document in the ArgoHub collection and redirect you there if one exists. +#### Redirect Mapping Redirect links between the Enterprise and ArgoHub collections are stored in the `argohub-redirect-mapping.json` file. Running `npm run link` automatically updates the file, eliminating the need for manual updates. diff --git a/_includes/scripts.html b/_includes/scripts.html index 49a151e32..c692d4740 100644 --- a/_includes/scripts.html +++ b/_includes/scripts.html @@ -59,7 +59,7 @@