From 1cedb151de93c3a13e56edeeb1817ab4af365c6b Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 9 Jul 2025 17:09:37 -0500 Subject: [PATCH] Website: add navigation sidebar to article category pages (#30664) Closes: https://github.com/fleetdm/confidential/issues/11063 Changes: - Added a navigation sidebar to article category pages. ## Summary by CodeRabbit * **New Features** * Introduced a sidebar to the articles page with navigation links and a dynamic call-to-action section that adapts based on user status. * Added a new two-column layout, displaying articles alongside the sidebar. * **Style** * Enhanced sidebar and article section styling, including a new sidebar call-to-action component. * Improved responsive design for better usability on smaller screens. * **Refactor** * Updated category labeling from "Announcements" to "News" with revised descriptions. * Disabled the previous card-based article layout. --- .../assets/js/pages/articles/articles.page.js | 8 +- .../styles/pages/articles/articles.less | 129 +++++++++++++++++- website/views/pages/articles/articles.ejs | 72 +++++++--- 3 files changed, 189 insertions(+), 20 deletions(-) diff --git a/website/assets/js/pages/articles/articles.page.js b/website/assets/js/pages/articles/articles.page.js index a62fdb0c25..29887c22fc 100644 --- a/website/assets/js/pages/articles/articles.page.js +++ b/website/assets/js/pages/articles/articles.page.js @@ -39,8 +39,8 @@ parasails.registerPage('articles', { this.categoryDescription = 'Learn more about how to use Fleet to accomplish your goals.'; break; case 'announcements': - this.articleCategory = 'Announcements'; - this.categoryDescription = 'The latest news from Fleet.'; + this.articleCategory = 'News'; + this.categoryDescription = 'The latest announcements from Fleet.'; break; case 'podcasts': this.articleCategory = 'Podcasts'; @@ -80,6 +80,8 @@ parasails.registerPage('articles', { // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ methods: { - + clickGotoStart: function() { + this.goto('/register'); + }, } }); diff --git a/website/assets/styles/pages/articles/articles.less b/website/assets/styles/pages/articles/articles.less index 4a852f6840..34b474e76f 100644 --- a/website/assets/styles/pages/articles/articles.less +++ b/website/assets/styles/pages/articles/articles.less @@ -117,6 +117,7 @@ } [purpose='search'] { + width: 256px; // Note: We're using classes here to override the default Docsearch styles; button { width: 100%; @@ -201,6 +202,111 @@ } } + [purpose='sidebar-and-articles'] { + display: flex; + flex-direction: row-reverse; + } + [purpose='sidebar'] { + margin-left: 16px; + min-width: 256px; + } + [purpose='nav-links'] { + display: flex; + flex-direction: column; + margin-top: 16px; + a { + margin-bottom: 12px; + display: block; + color: var(--text-text-brand, #192147); + + /* Body SM (FKA Card text) */ + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 142.857% */ + text-decoration: none; + } + } + + + + [purpose='sidebar-cta'] { + padding: 0px; + border-radius: 12px; + border: 1px solid #E2E4EA; + background: #FFF; + min-height: 290px; + text-align: center; + cursor: pointer; + margin-top: 24px; + margin-bottom: 8px; + max-width: 256px; + a { + text-decoration: none; + } + &:hover { + box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03); + } + [purpose='cta-image'] { + height: 145px; + background-image: url('/images/cloud-city-cta-256x145@2x.png'); + border-top-left-radius: 12px; + border-top-right-radius: 12px; + background-size: 100% 145px; + background-position: center bottom; + } + [purpose='cta-text'] { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0px 24px 24px 24px; + h4 { + color: #192147; + text-align: center; + font-size: 20px; + font-weight: 800; + line-height: 120%; + margin-bottom: 0px; + } + p { + color: #515774; + text-align: center; + font-size: 14px; + font-weight: 400; + line-height: 150%; + margin-bottom: 8px; + } + } + [purpose='cta-button'] { + display: flex; + width: 140px; + height: 36px; + padding: 16px 32px; + justify-content: center; + align-items: center; + color: #FFF; + text-align: center; + font-size: 14px; + font-weight: 700; + line-height: 150%; + margin-bottom: 16px; + } + [purpose='cta-platform-icons'] { + img { + height: 16px; + &:not(:last-of-type) { + margin-right: 16px; + } + } + } + } + + [purpose='article-rows'] { + padding-right: 32px; + width: 100%; + } [purpose='article-row'] { padding: 24px 0px; border-bottom: 1px solid #E2E4EA; @@ -400,7 +506,7 @@ } [purpose='category-title'] { padding-bottom: 40px; - margin-right: 35px; + // margin-right: 35px; } [purpose='articles'] { [purpose='article-card'] { @@ -446,6 +552,27 @@ } } } + [purpose='search'] { + width: 100%; + } + [purpose='sidebar-and-articles'] { + display: flex; + flex-direction: column; + } + [purpose='sidebar'] { + margin-left: 0px; + } + [purpose='article-rows'] { + padding-right: 0px; + width: 100%; + } + [purpose='nav-links'] { + margin-top: 0px; + margin-bottom: 40px; + } + [purpose='sidebar-cta'] { + display: none; + } [purpose='articles'] { [purpose='article-card'] { flex: 1 1 330px; diff --git a/website/views/pages/articles/articles.ejs b/website/views/pages/articles/articles.ejs index a48018d6d8..f567c6635c 100644 --- a/website/views/pages/articles/articles.ejs +++ b/website/views/pages/articles/articles.ejs @@ -29,24 +29,64 @@ -
- -
-
-

{{article.meta.articleTitle}}

+ +
+
+ +
+ +
+
+ <% if(typeof me === 'undefined'){ %> +

Try it out

+

See what Fleet can do

+ Start now + <% } else if (['2 - Aware', '3 - Intrigued'].includes(me.psychologicalStage)) {%> +

Tried Fleet yet?

+

Continue getting started with Fleet

+ Continue + <% } else if (me.psychologicalStage === '4 - Has use case') {%> +

Feeling confident?

+

Get set up with Fleet

+ Continue + <% } else if (['5 - Personally confident', '6 - Has team buy-in'].includes(me.psychologicalStage)) {%> +

Talk to the team

+

Let’s get you set up!

+ Continue + <%}%> +
+ macOS + Windows + Linux +
-

{{article.meta.description}}

-
+
-
- - - - -
- +
+
-
+