From 0ec10c4e711d5192a90f2f3579b0ce3bb79b5e29 Mon Sep 17 00:00:00 2001 From: Eric Date: Fri, 18 Oct 2024 01:48:07 -0500 Subject: [PATCH] Website: Add sidebar nav to article template. (#22992) Closes: #22037 Closes: #21281 Changes: - Added a sidebar nav to article pages with - links to headings (h2) in the article - links to /guides, /docs, and the REST API documentation - links to share the article on Twitter, LinkedIn, and Hacker News. --------- Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com> --- ...social-share-icon-hacker-news-20x20@2x.png | Bin 0 -> 498 bytes .../social-share-icon-linkedin-20x20@2x.png | Bin 0 -> 649 bytes .../social-share-icon-twitter-20x20@2x.png | Bin 0 -> 1274 bytes .../js/pages/articles/basic-article.page.js | 29 +++++- .../styles/pages/articles/basic-article.less | 95 +++++++++++++++--- .../views/pages/articles/basic-article.ejs | 93 ++++++++++++----- 6 files changed, 176 insertions(+), 41 deletions(-) create mode 100644 website/assets/images/social-share-icon-hacker-news-20x20@2x.png create mode 100644 website/assets/images/social-share-icon-linkedin-20x20@2x.png create mode 100644 website/assets/images/social-share-icon-twitter-20x20@2x.png diff --git a/website/assets/images/social-share-icon-hacker-news-20x20@2x.png b/website/assets/images/social-share-icon-hacker-news-20x20@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..f1797255807ae5703de8add612baaf771a2156d2 GIT binary patch literal 498 zcmV+D3W&HjP4IesRp<6L{jJZ&_U8|FLUpZv3#J$aM2ofhovLxW zbGsXny&U$810rst=`ZxD>Ntx*d)RMd&nh62WRc6BbwFIO)qYmBZc(>~{kB*?s4rtI z>h{pKtvymeG#F)((;g`xqFXGU9S+%}LJFu`Tw7gHzd7t7XmP zQV_8pZ%~lL&{CuoNW=qOe-!O1aWM)+E0CGIjAxb~L6P`L*Q@5C zTpB14Q<-V3t#ALl-Eo~HX%eDfXmw+oGt4moCqO!7P#_&13MRV_O5GFnzAA{z!i9aN zC`@JygKFIvw zOQ%i=!pDSKiy+r%CHlW}VzMu69~U3fF!@>8EQq+REOB>y$yFm@tgTiAK2_YcuPmW5 zR}M{ft4X4c6R+N#`<$}3KkSc9ep15JuBoN7S=$eOUjN>rH)oT1!p8~YXmz7AQHi1V zu8mFau_91qdrGv6JB6KnO8Bq#f!VCsIao_CRit#QPDAIv*d=MPmBqfv)@-(YJOev( zkY8@iF8!gY5}21tU|uSLd8q{E<&jg}@~MV6FG^rZew=HWI$7s|Wg|y{fy=Xbo8G#r j)k1ktzgh;-Xs3Mz>G`$mdZNHA00000NkvXXu0mjfSokF^ literal 0 HcmV?d00001 diff --git a/website/assets/images/social-share-icon-twitter-20x20@2x.png b/website/assets/images/social-share-icon-twitter-20x20@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..0f3c56b8653d861fef2b932b376360892e7451c0 GIT binary patch literal 1274 zcmV7TGkOV_cdPN zg|+Ppo&GF$!4@EE4M%{y5NtC{FE}T^wjcq%FK++jBHjm;U88n-un=rU@uaY}b4EXT zp{ZW0mRE-H;7wqQbtV_$>e2r3mwD{6=W2w;!PJWGW-X9zBE8|Q+7NmEIQ)30TcV$a z&|`}9xDRp2-PxPMF4Q0aIWMXXw39~$XCM&=8lYVFCt_F9OGSfhJ*t)~5Jrx5&-e`m zLT#4973cSZhN*8V*wB3Oq?OGrzotoV3k2-!+^s5qp?WXXjaR%)=(aeBE9C4_2CdE? zq~&Zd#+dbkb8=9J5LmiKhgO69&Jmh2=yv_bLxbL@;g6&^tq>=pOfd2Gn8+z!$L+*9 z{mp?0Sf+s6c`xgcCRttEJ@hBg>hbNNIEH5@z-%qKlX3}SAY}?Po6jz@-`@C(^mvC( zul0xa{m+Zf-Fl4Rt`FldKST1kIDhgiiPwbzqb{)5b~foEab+a`vy0m{B8qQk8xbmu zspL#v7X~Zp0$M2tGx*)~{kk>(B6mqc%dL(HAhA3q)3}BycU&A;kkC60x zH_V8mkVpq19^{C{7(=$tF+9I0qdc2k5Qm+H-$7ma4mdEKZ>uh%gIEV3j=@i ki6j;6-F)m$3_gE+0B7W*4`h!Y(*OVf07*qoM6N<$f_Uy`)Bpeg literal 0 HcmV?d00001 diff --git a/website/assets/js/pages/articles/basic-article.page.js b/website/assets/js/pages/articles/basic-article.page.js index 8a15643666..1bda775251 100644 --- a/website/assets/js/pages/articles/basic-article.page.js +++ b/website/assets/js/pages/articles/basic-article.page.js @@ -5,6 +5,7 @@ parasails.registerPage('basic-article', { data: { articleHasSubtitle: false, articleSubtitle: undefined, + subtopics: [], }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ @@ -14,7 +15,16 @@ parasails.registerPage('basic-article', { //… }, mounted: async function() { - //… + this.subtopics = (() => { + let subtopics = $('[purpose="article-content"]').find('h2.markdown-heading').map((_, el) => el); + subtopics = $.makeArray(subtopics).map((subheading) => { + return { + title: subheading.innerText, + url: $(subheading).find('a.markdown-link').attr('href'), + }; + }); + return subtopics; + })(); // If the article has a subtitle (an H2 immediatly after an H1), we'll set articleSubtitle to be the text of that heading this.articleHasSubtitle = $('[purpose="article-content"]').find('h1 + h2'); if(this.articleHasSubtitle.length > 0 && this.articleHasSubtitle[0].innerText) { @@ -25,6 +35,9 @@ parasails.registerPage('basic-article', { let startValue = parseInt(ol.getAttribute('start'), 10) - 1; ol.style.counterReset = 'custom-counter ' + startValue; }); + // Add an event listener to add a class to the right sidebar when the header is hidden. + window.addEventListener('scroll', this.handleScrollingInArticle); + if(this.algoliaPublicKey) {// Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the handbook search will be disabled. docsearch({ appId: 'NZXAYZXDGH', @@ -60,5 +73,19 @@ parasails.registerPage('basic-article', { window.open('https://fleetdm.com/rss/'+articleCategory, '_blank'); } }, + handleScrollingInArticle: function () { + let rightNavBar = document.querySelector('div[purpose="right-sidebar"]'); + let scrollTop = window.pageYOffset; + let windowHeight = window.innerHeight; + // Add/remove the 'header-hidden' class to the right sidebar to scroll it upwards with the website's header. + if (rightNavBar) { + if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) { + rightNavBar.classList.add('header-hidden'); + } else { + rightNavBar.classList.remove('header-hidden'); + } + } + this.scrollDistance = scrollTop; + }, } }); diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less index ad70251560..3268a844e5 100644 --- a/website/assets/styles/pages/articles/basic-article.less +++ b/website/assets/styles/pages/articles/basic-article.less @@ -1,5 +1,4 @@ #basic-article { - padding: 0px 24px 0px 24px; h1 { font-size: 36px; } @@ -9,9 +8,12 @@ border-top: 2px solid @core-vibrant-blue-15; width: 100%; } - + [purpose='page-container'] { + max-width: 1200px; + padding: 64px; + } [purpose='breadcrumbs-and-search'] { - padding-top: 64px; + // padding-top: 64px; max-width: 1072px; margin: auto; font-size: 14px; @@ -119,14 +121,56 @@ [purpose='breadcrumbs-title'] { margin-left: 8px; } - + } + [purpose='right-sidebar'] { + position: sticky; + margin-top: 64px; + top: 144px; + width: 256px; + font-size: 14px; + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; + a:not([purpose='edit-button']) { + margin-bottom: 8px; + display: block; + color: #515774; + &:hover { + text-decoration: none; + color: @core-fleet-black; + } + } + } + [purpose='docs-links'] { + a { + display: block; + } + } + [purpose='social-share-buttons'] { + padding-bottom: 24px; + margin-bottom: 24px; + border-bottom: 1px solid #E2E4EA; + a { + margin-right: 16px; + } + img { + height: 20px; + width: 20px; + } + } + [purpose='subtopics'] { + padding-bottom: 24px; + margin-bottom: 24px; + border-bottom: 1px solid #E2E4EA; + } + .header-hidden { // For scrolling the sidebar with the sticky header + transform: translateY(-80px); } [purpose='article-container'] { max-width: 800px; - margin: auto; + padding-right: 64px; display: flex; flex-direction: column; - } [purpose='article-title'] { padding-top: 64px; @@ -141,7 +185,6 @@ line-height: 32px; } } - [purpose='rss-button'] { padding: 4px 8px; display: inline; @@ -190,22 +233,24 @@ } [purpose='edit-button'] { - margin-left: 24px; + margin-top: 16px; img { width: 16px; height: 16px; display: inline; margin-right: 8px; } - padding: 4px 8px; + padding: 6px 8px; display: block; color: @core-fleet-black-75; text-decoration: none; font-size: 14px; line-height: 21px; border-radius: 6px; + width: 102px; + background: rgba(25, 33, 71, 0.05); &:hover { - background-color: rgba(25, 33, 71, 0.05); + background-color: rgba(25, 33, 71, 0.1); } &:active { background-color: rgba(25, 33, 71, 0.1); @@ -546,6 +591,24 @@ } @media (max-width: 991px) { + [purpose='page-container'] { + max-width: 1200px; + padding: 64px 32px; + } + [purpose='right-sidebar'] { + margin-top: 48px; + width: 100%; + } + .header-hidden { + transform: translateY(0); + } + [purpose='article-container'] { + max-width: 100%; + padding-right: 0px; + display: flex; + flex-direction: column; + + } [purpose='article-title'] { padding-top: 60px; } @@ -575,6 +638,9 @@ line-height: 38px; } } + [purpose='right-sidebar'] { + margin-top: 40px; + } [purpose='article-content'] { img { padding-bottom: 0px; @@ -584,13 +650,12 @@ margin-bottom: 16px; } } - [purpose='breadcrumbs-and-search'] { - padding-top: 32px; - - } } - @media (max-width: 576px) { + @media (max-width: 575px) { + [purpose='page-container'] { + padding: 32px 24px; + } [purpose='bottom-cta'] { [purpose='next-steps-button'] { width: 100%; diff --git a/website/views/pages/articles/basic-article.ejs b/website/views/pages/articles/basic-article.ejs index e72f85219d..292a276383 100644 --- a/website/views/pages/articles/basic-article.ejs +++ b/website/views/pages/articles/basic-article.ejs @@ -1,5 +1,5 @@
-
+
@@ -26,34 +26,77 @@
-
-
-

<%=thisPage.meta.articleTitle %>

-

{{articleSubtitle}}

-
-
-
- - | - The author's GitHub profile picture -

<%=thisPage.meta.authorFullName %>

+
+
+
+

<%=thisPage.meta.articleTitle %>

+

{{articleSubtitle}}

-
- Subscribe - A pencil iconEdit page +
+
+ + | + The author's GitHub profile picture +

<%=thisPage.meta.authorFullName %>

+
+
-
- <%- partial(path.relative(path.dirname(__filename), path.resolve( sails.config.appPath, path.join(sails.config.builtStaticContent.compiledPagePartialsAppPath, thisPage.htmlId)))) %> + +
+
+
+

Share

+
+ Share this article on Hacker News + Share this article on LinkedIn + Share this article on Twitter +
+
+ + +
+ Docs + REST API + Guides + A pencil iconEdit page +
+ +
-
-
-

Get started

-
- - Start now - - Talk to us +
+
+
+

<%=thisPage.meta.articleTitle %>

+

{{articleSubtitle}}

+
+
+
+ + | + The author's GitHub profile picture +

<%=thisPage.meta.authorFullName %>

+
+ +
+
+
+ <%- partial(path.relative(path.dirname(__filename), path.resolve( sails.config.appPath, path.join(sails.config.builtStaticContent.compiledPagePartialsAppPath, thisPage.htmlId)))) %> +
+
+
+

Get started

+
+ + Start now + + Talk to us +