From 3468ae4e5cc4358677bff6076ca0720114d4b164 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 9 May 2025 15:11:12 -0500
Subject: [PATCH] Website: move swag CTA on docs pages. (#29019)

Closes: #28949

Changes:
- Moved the swag CTA to the right sidebar on documentation pages
---
 .../js/pages/docs/basic-documentation.page.js       |  2 +-
 .../styles/pages/docs/basic-documentation.less      |  9 +++++++++
 website/views/pages/docs/basic-documentation.ejs    | 13 ++++++++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/website/assets/js/pages/docs/basic-documentation.page.js b/website/assets/js/pages/docs/basic-documentation.page.js
index 5554acac36..68d8705a7f 100644
--- a/website/assets/js/pages/docs/basic-documentation.page.js
+++ b/website/assets/js/pages/docs/basic-documentation.page.js
@@ -285,7 +285,7 @@ parasails.registerPage('basic-documentation', {
 
     handleScrollingInDocumentation: function () {
       let rightNavBar = document.querySelector('div[purpose="right-sidebar"]');
-      let swagCta = document.querySelector('div[purpose="swag-cta"]');
+      let swagCta = document.querySelector('div[purpose="swag-cta"].left-cta');
       let backToTopButton = document.querySelector('div[purpose="back-to-top-button"]');
       let scrollTop = window.pageYOffset;
       let windowHeight = window.innerHeight;
diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less
index 60c07467f1..94bd3f193d 100644
--- a/website/assets/styles/pages/docs/basic-documentation.less
+++ b/website/assets/styles/pages/docs/basic-documentation.less
@@ -1035,6 +1035,15 @@
           transition-property: max-height;
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-duration: 500ms;
+          [purpose='swag-cta'] {
+            width: 190px;
+            position: static;
+            a {
+              &:hover {
+                background: none;
+              }
+            }
+          }
           a {
             display: block;
             color: #515774;
diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs
index 3d30a3521e..ed2f7c5597 100644
--- a/website/views/pages/docs/basic-documentation.ejs
+++ b/website/views/pages/docs/basic-documentation.ejs
@@ -35,7 +35,7 @@
           <a purpose="subpage-link" href="/contact">Take a tour</a>
           <a purpose="subpage-link" href="/better">“Why is Fleet on my computer?”</a>
         </div>
-        <div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm">
+        <div class="d-none d-lg-block left-cta" purpose="swag-cta" v-if="showSwagForm && ['REST API', 'Fleet server configuration'].includes(thisPage.title)">
           <a class="d-flex align-items-center justify-content-center" @click="clickSwagRequestCTA()">
             <div class="d-flex flex-column align-items-center">
             <img style="height: auto; width: 47px; margin-bottom: 8px;" alt="A very nice Fleet branded shirt" src="/images/fleet-shirt-60x55@2x.png">
@@ -53,6 +53,17 @@
             <p purpose="subtopics-heading" class="font-weight-bold">On this page:</p>
             <div purpose="subtopics" v-if="!_.isEmpty(subtopics)">
               <a purpose="subtopic-link" v-for="(subtopic, index) in subtopics" :href="subtopic.url">{{subtopic.title}}</a>
+              <div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm && !['REST API', 'Fleet server configuration'].includes(thisPage.title)">
+                <a class="d-flex align-items-center justify-content-center" @click="clickSwagRequestCTA()">
+                  <div class="d-flex flex-column align-items-center">
+                  <img style="height: auto; width: 47px; margin-bottom: 8px;" alt="A very nice Fleet branded shirt" src="/images/fleet-shirt-60x55@2x.png">
+                    <p class="mb-0">Request Fleet swag</p>
+                    <span>
+                      It's free <img purpose="right-arrow" class="d-inline" style="height: 16px; width: auto; margin-bottom: 2px;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
+                    </span>
+                  </div>
+                </a>
+              </div>
             </div>
           </div>
           <div class="d-block d-lg-none" >