diff --git a/website/api/controllers/articles/view-articles.js b/website/api/controllers/articles/view-articles.js index a8396e18f2..fe3389ae19 100644 --- a/website/api/controllers/articles/view-articles.js +++ b/website/api/controllers/articles/view-articles.js @@ -47,8 +47,9 @@ module.exports = { return page; } }); - articles = _.sortBy(articles, 'meta.publishedOn'); } + // Sort articles in descending order by publish date. + articles = _.sortByOrder(articles, 'meta.publishedOn', 'DESC'); let pageTitleForMeta = 'Fleet blog'; let pageDescriptionForMeta = 'Read the latest articles written by Fleet.'; diff --git a/website/assets/js/pages/articles/articles.page.js b/website/assets/js/pages/articles/articles.page.js index a24be4a2d8..a62fdb0c25 100644 --- a/website/assets/js/pages/articles/articles.page.js +++ b/website/assets/js/pages/articles/articles.page.js @@ -55,12 +55,10 @@ parasails.registerPage('articles', { this.categoryDescription = 'Read the latest articles from the Fleet team and community.'; break; } - // Sorting articles on the page based on their 'publishedOn' date. - this.sortArticlesByDate(); }, mounted: async function() { - if(['Articles', 'Announcements', 'Guides'].includes(this.articleCategory)) { + if(['Articles', 'Announcements', 'Guides', 'Releases'].includes(this.articleCategory)) { 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', @@ -83,32 +81,5 @@ parasails.registerPage('articles', { // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ methods: { - - sortArticlesByDate: function() { - - this.selectedArticles = this.articles.sort((a, b)=>{ - if (a.meta['publishedOn'] > b.meta['publishedOn']) { - return -1; - } - if (b.meta['publishedOn'] > a.meta['publishedOn']){ - return 1; - } - }); - }, - clickCopyRssLink: function(articleCategory) { - let rssButton = $('a[purpose="rss-button"]'); - if(typeof navigator.clipboard !== 'undefined' && rssButton) { - // If this heading has already been clicked and still has the copied class we'll just ignore this click - if(!$(rssButton).hasClass('copied')) { - navigator.clipboard.writeText('https://fleetdm.com/rss/'+articleCategory); - // Add the copied class to the header to notify the user that the link has been copied. - $(rssButton).addClass('copied'); - // Remove the copied class 5 seconds later, so we can notify the user again if they re-cick on this heading - setTimeout(()=>{$(rssButton).removeClass('copied');}, 5000); - } - } else { - window.open('https://fleetdm.com/rss/'+articleCategory, '_blank'); - } - }, } }); diff --git a/website/assets/styles/pages/articles/articles.less b/website/assets/styles/pages/articles/articles.less index 056dc778fe..4a852f6840 100644 --- a/website/assets/styles/pages/articles/articles.less +++ b/website/assets/styles/pages/articles/articles.less @@ -32,7 +32,6 @@ } [purpose='category-title'] { padding-bottom: 40px; - margin-right: 25px; p { margin-bottom: 0px; } @@ -62,6 +61,8 @@ line-height: 21px; text-decoration: none; width: 168px; + margin-right: 8px; + height: 37px; img { width: 16px; height: 16px; @@ -200,7 +201,79 @@ } } + [purpose='article-row'] { + padding: 24px 0px; + border-bottom: 1px solid #E2E4EA; + cursor: pointer; + text-decoration: none; + color: unset; + [purpose='animated-arrow'] { + margin-left: 32px; + stroke-width: 2px; + height: 12px; + width: 12px; + fill: none; + // stroke: #FF5C83; « Note: this is overridden by the arrow-color prop; + } + [purpose='arrow-line'] { + opacity: 0; + transition: opacity 10ms ease-out; + } + [purpose='chevron'] { + transition: transform 200ms ease-out; + } + &:hover { + text-decoration: none; + [purpose='button-text'] { + color: @core-fleet-black; + } + [purpose='arrow-line'] { + opacity: 1; + transition: opacity 300ms ease-out; + } + [purpose='chevron'] { + transform: translateX(5px); + } + } + [purpose='publish-date'] { + font-size: 12px; + padding-top: 8px; + [parasails-component='js-timestamp'] { + font-size: 12px; + } + } + } + [purpose='article-link'] { + color: unset; + text-decoration: none; + + &:hover { + text-decoration: none; + } + } + [purpose='article-name'] { + margin-bottom: 0px; + text-decoration: none; + color: #192147; + font-size: 16px; + font-weight: 800; + line-height: 24px; + } + [purpose='article-description'] { + color: #515774; + /* Body SM (FKA Card text) */ + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 21px; /* 150% */ + p { + margin-top: 8px; + margin-bottom: 8px; + + } + } [purpose='articles'] { width: 100%; max-width: 100%; @@ -356,9 +429,6 @@ [purpose='page-container'] { padding: 64px 32px; } - [purpose='category-title'] { - margin-right: 20px; - } [purpose='guide-card'] { max-width: unset; } @@ -401,7 +471,13 @@ width: 100%; } } + [purpose='changelog-button'] { + margin-left: 0px; + margin-bottom: 16px; + width: 100%; + } [purpose='category-title'] { + margin-right: 0px; p { margin-bottom: 16px; } diff --git a/website/views/pages/articles/articles.ejs b/website/views/pages/articles/articles.ejs index b364651621..a48018d6d8 100644 --- a/website/views/pages/articles/articles.ejs +++ b/website/views/pages/articles/articles.ejs @@ -1,34 +1,53 @@
-
-
+
+

{{articleCategory}}

{{categoryDescription}}

-