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 0000000000..f179725580 Binary files /dev/null and b/website/assets/images/social-share-icon-hacker-news-20x20@2x.png differ diff --git a/website/assets/images/social-share-icon-linkedin-20x20@2x.png b/website/assets/images/social-share-icon-linkedin-20x20@2x.png new file mode 100644 index 0000000000..50e8dd305d Binary files /dev/null and b/website/assets/images/social-share-icon-linkedin-20x20@2x.png differ 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 0000000000..0f3c56b865 Binary files /dev/null and b/website/assets/images/social-share-icon-twitter-20x20@2x.png differ 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 +