mirror of
https://github.com/fleetdm/fleet
synced 2026-05-20 23:48:52 +00:00
Website: Add search to article category page. (#22997)
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
This commit is contained in:
Eric
GitHub
parent
db30ee1bd5
commit
726889bed1
3 changed files with 76 additions and 111 deletions
|
|
@ -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',
|
||||
|
|
@ -73,7 +71,7 @@ parasails.registerPage('articles', {
|
|||
debug: false,
|
||||
clickAnalytics: true,
|
||||
searchParameters: {
|
||||
facetFilters: ['section:guides']
|
||||
facetFilters: ['section:articles']
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
2
website/views/layouts/layout.ejs
vendored
2
website/views/layouts/layout.ejs
vendored
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
90
website/views/pages/articles/articles.ejs
vendored
90
website/views/pages/articles/articles.ejs
vendored
|
|
@ -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 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="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>
|
||||
</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">
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue