Skip to content

Commit

Permalink
Website: Add search to article category page. (#22997)
Browse files Browse the repository at this point in the history 
Closes: #22952

Changes:
- Removed the categories from the article landing page.
- Updated the announcements article category page and article landing
page to have a search bar
  • Loading branch information
@eashaw
eashaw authored Oct 18, 2024
1 parent db30ee1 commit 726889b
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 111 deletions.
95 changes: 40 additions & 55 deletions website/assets/js/pages/articles/articles.page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,53 +16,51 @@ parasails.registerPage('articles', {
beforeMount: function() {

// Using the category to articles,

if (this.category === 'all') {
// if the category is set to 'all', we'll show the articles landing page and set `isArticlesLandingPage` to true
this.isArticlesLandingPage = true;
} else {
switch(this.category) {
// If a specific category was provided, we'll set the articleCategory and categoryDescription.
case 'success-stories':
this.articleCategory = 'Success stories';
this.categoryDescription = 'Read about how others are using Fleet and osquery.';
break;
case 'securing':
this.articleCategory = 'Security';
this.categoryDescription = 'Learn more about how we secure Fleet.';
break;
case 'releases':
this.articleCategory = 'Releases';
this.categoryDescription = 'Read about the latest release of Fleet.';
break;
case 'engineering':
this.articleCategory = 'Engineering';
this.categoryDescription = 'Read about engineering at Fleet and beyond.';
break;
case 'guides':
this.articleCategory = 'Guides';
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.';
break;
case 'podcasts':
this.articleCategory = 'Podcasts';
this.categoryDescription = 'Listen to the Future of Device Management podcast';
break;
case 'report':
this.articleCategory = 'Reports';
this.categoryDescription = '';
break;
}
switch(this.category) {
// If a specific category was provided, we'll set the articleCategory and categoryDescription.
case 'success-stories':
this.articleCategory = 'Success stories';
this.categoryDescription = 'Read about how others are using Fleet and osquery.';
break;
case 'securing':
this.articleCategory = 'Security';
this.categoryDescription = 'Learn more about how we secure Fleet.';
break;
case 'releases':
this.articleCategory = 'Releases';
this.categoryDescription = 'Read about the latest release of Fleet.';
break;
case 'engineering':
this.articleCategory = 'Engineering';
this.categoryDescription = 'Read about engineering at Fleet and beyond.';
break;
case 'guides':
this.articleCategory = 'Guides';
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.';
break;
case 'podcasts':
this.articleCategory = 'Podcasts';
this.categoryDescription = 'Listen to the Future of Device Management podcast';
break;
case 'report':
this.articleCategory = 'Reports';
this.categoryDescription = '';
break;
case 'all':
this.articleCategory = '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(this.category === 'guides') {
if(['Articles', 'Announcements', 'Guides'].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',
Expand All @@ -73,7 +71,7 @@ parasails.registerPage('articles', {
debug: false,
clickAnalytics: true,
searchParameters: {
facetFilters: ['section:guides']
facetFilters: ['section:articles']
},
});
}
Expand All @@ -97,19 +95,6 @@ parasails.registerPage('articles', {
}
});
},

filterBy: function(filter) {
if(filter !== 'all') {
this.selectedArticles = this.articles.filter((article)=>{
if(article.meta['category'] === filter) {
return article;
}
});
} else {
this.sortArticlesByDate();
}
this.filter = filter;
},
clickCopyRssLink: function(articleCategory) {
let rssButton = $('a[purpose="rss-button"]');
if(typeof navigator.clipboard !== 'undefined' && rssButton) {
Expand Down
2 changes: 2 additions & 0 deletions website/views/layouts/layout.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,7 @@
<a purpose="mobile-dropdown-link" href="/announcements">News</a>
<a purpose="mobile-dropdown-link" href="/podcasts">Podcasts</a>
<a purpose="mobile-dropdown-link" href="/articles">Articles</a>
<a purpose="mobile-dropdown-link" href="/success-stories">Success stories</a>
<span>COMPANY</span>
<div purpose="indented-mobile-links">
<a purpose="mobile-dropdown-link" href="/handbook">Handbook</a>
Expand Down Expand Up @@ -247,6 +248,7 @@
<a class="dropdown-item" href="/announcements">News</a>
<a class="dropdown-item" href="/podcasts">Podcasts</a>
<a class="dropdown-item" href="/articles">Articles</a>
<a class="dropdown-item" href="/success-stories">Success stories</a>
<span class="muted dropdown-header">COMPANY</span>
<a class="dropdown-item" href="/handbook">Handbook</a>
<a class="dropdown-item" href="/logos">Logos/artwork</a>
Expand Down
90 changes: 34 additions & 56 deletions website/views/pages/articles/articles.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
<div id="articles" v-cloak>
<div style="max-width: 1200px;" class="container-fluid mx-auto" purpose="page-container">
<div v-if="category !== 'guides'">
<div purpose="categories-and-search" class="d-flex flex-lg-row flex-column justify-content-lg-between justify-content-md-center justify-content-start" v-if="isArticlesLandingPage">
<div purpose="categories" class="d-flex flex-lg-row flex-column justify-content-start">
<div purpose="category-filter" :class="[ filter === 'all' ? 'selected' : '']" @click="filterBy('all')">All</div>
<div purpose="category-filter" :class="[ filter === 'engineering' ? 'selected' : '']" @click="filterBy('engineering')">Engineering</div>
<div purpose="category-filter" :class="[ filter === 'security' ? 'selected' : '']" @click="filterBy('security')">Security</div>
<div purpose="category-filter" :class="[ filter === 'announcements' ? 'selected' : '']" @click="filterBy('announcements')">Announcements</div>
<div purpose="category-filter" :class="[ filter === 'guides' ? 'selected' : '']" @click="filterBy('guides')">Guides</div>
<div purpose="category-filter" :class="[ filter === 'success stories' ? 'selected' : '']" @click="filterBy('success stories')">Success stories</div>
<div purpose="category-filter" :class="[ filter === 'podcasts' ? 'selected' : '']" @click="filterBy('podcasts')">Podcasts</div>
<div purpose="category-filter" :class="[ filter === 'releases' ? 'selected' : '']" @click="filterBy('releases')">Releases</div>
</div>
</div>
<div purpose="category-title" v-else>
<h1>{{articleCategory}}</h1>
<div class="d-flex flex-sm-row flex-column justify-content-between">

<p>{{categoryDescription}}</p>
<a purpose="rss-button" class="px-0 px-sm-2 pt-sm-1" @click="clickCopyRssLink(category)" target="_blank"><span>Subscribe</span></a>
<div purpose="category-title">
<div class="d-flex flex-md-row flex-column justify-content-between align-items-md-center">
<div class="d-flex flex-column justify-content-between">
<h1>{{articleCategory}}</h1>
<p>{{categoryDescription}}</p>
</div>
<div purpose="search" id="docsearch-query" v-if="['Articles', 'Announcements', 'Guides'].includes(articleCategory)">
<div purpose="disabled-search" class="d-flex w-100">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-0 bg-transparent pl-3" >
<img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
</span>
</div>
<div class="form-control border-0 ">
<input class="docsearch-input pr-1"
placeholder="Search" aria-label="Search"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div purpose="articles" class="card-deck d-flex justify-content-center">
<div purpose="articles" class="card-deck d-flex justify-content-center" v-if="articleCategory !== 'Guides'">
<div purpose="article-card" class="card" v-for="article in selectedArticles">
<a purpose="article-card-link" :href="article.url">
<img style="width: 100%; height: auto;" :src="[article.meta.articleImageUrl ? article.meta.articleImageUrl : '/images/blog-fleet-logo-white-background-800x450@2x.png']" alt="Article hero image">
Expand All @@ -42,46 +45,21 @@
<div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
</div>
</div>
</div>
<div purpose="guides-category-page" v-else>
<div purpose="category-title">
<div class="d-flex flex-md-row flex-column justify-content-between align-items-md-center">
<div class="d-flex flex-column justify-content-between">
<h1>Guides</h1>
<p>Learn more about how to use Fleet to accomplish your goals.</p>
</div>
<div purpose="search" id="docsearch-query">
<div purpose="disabled-search" class="d-flex w-100">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-0 bg-transparent pl-3" >
<img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
</span>
</div>
<div class="form-control border-0 ">
<input class="docsearch-input pr-1"
placeholder="Search" aria-label="Search"
/>
</div>
<div purpose="guides-category-page" v-else>
<div purpose="guides" class="card-columns">
<div purpose="guide-card" class="card" v-for="article in selectedArticles">
<a :href="article.url">
<div purpose="article-card-body" class="card-body d-flex flex-column">
<div purpose="article-title"><h5>{{article.meta.articleTitle}}</h5></div>
<p class="small" v-if="article.meta.description">{{article.meta.description}}</p>
<div purpose="article-details" class="d-flex mt-auto flex-row align-items-center">
<js-timestamp :at="article.meta.publishedOn" format="timeago" always-show-year="true"></js-timestamp>
</div>
</div>
</a>
</div>
</div>
</div>
<div purpose="guides" class="card-columns">
<div purpose="guide-card" class="card" v-for="article in selectedArticles">
<a :href="article.url">
<div purpose="article-card-body" class="card-body d-flex flex-column">
<div purpose="article-title"><h5>{{article.meta.articleTitle}}</h5></div>
<p class="small" v-if="article.meta.description">{{article.meta.description}}</p>
<div purpose="article-details" class="d-flex mt-auto flex-row align-items-center">
<js-timestamp :at="article.meta.publishedOn" format="timeago" always-show-year="true"></js-timestamp>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

</div>
Expand Down

0 comments on commit 726889b

Please sign in to comment.