Skip to content

Commit

Permalink
Website: Add search and breadcrumbs to article template page (#22171)
Browse files Browse the repository at this point in the history 
Closes: #15857
Closes: #21850

Changes:
- Updated the article page template to include a search input and
breadcrumb links.
  • Loading branch information
@eashaw
eashaw authored Sep 18, 2024
1 parent 36ea5cc commit 721ed30
Show file tree
Hide file tree
Showing 4 changed files with 211 additions and 29 deletions.
1 change: 1 addition & 0 deletions website/api/controllers/articles/view-basic-article.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ module.exports = {
pageImageForMeta: thisPage.meta.articleImageUrl || undefined,
articleCategorySlug,
currentSection,
algoliaPublicKey: sails.config.custom.algoliaPublicKey,
};

}
Expand Down
14 changes: 14 additions & 0 deletions website/assets/js/pages/articles/basic-article.page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,20 @@ parasails.registerPage('basic-article', {
let startValue = parseInt(ol.getAttribute('start'), 10) - 1;
ol.style.counterReset = 'custom-counter ' + startValue;
});
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',
apiKey: this.algoliaPublicKey,
indexName: 'fleetdm',
container: '#docsearch-query',
placeholder: 'Search',
debug: false,
clickAnalytics: true,
searchParameters: {
facetFilters: ['section:docs']
},
});
}
},

// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
Expand Down
147 changes: 143 additions & 4 deletions website/assets/styles/pages/articles/basic-article.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,126 @@
width: 100%;
}

[purpose='breadcrumbs-and-search'] {
padding-top: 64px;
max-width: 1072px;
margin: auto;
font-size: 14px;
[purpose='breadcrumbs'] {
margin-right: 24px;
}
[purpose='search'] {
// Note: We're using classes here to override the default Docsearch styles;
button {
width: 100%;
cursor: text;
margin: 0;
}
.DocSearch-Button {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border: 1px solid @core-fleet-black-25;
background-color: #FFF;
padding: 6px;
height: 36px;
margin: 0;
width: 256px;
}
.DocSearch-Button:hover {
box-shadow: none;
border: 1px solid @core-fleet-black-25;
color: @core-fleet-black-50;
}
.DocSearch-Search-Icon {
margin-left: 10px;
height: 16px;
width: 16px;
color: @core-fleet-black-50;
stroke-width: 3px;
}
.DocSearch-Button-Keys {
display: none;
}
.input-group:focus-within {
border: 1px solid @core-vibrant-blue;
}
.DocSearch-Button-Placeholder {
font-size: 16px;
font-weight: 400;
padding-left: 12px;
}
[purpose='disabled-search'] {
input {
padding-top: 6px;
padding-bottom: 6px;
border: none;
} &::placeholder {
font-size: 16px;
line-height: 24px;
color: #8B8FA2;
}
.input-group {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border: 1px solid @core-fleet-black-25;
background: #FFF;
}
.input-group:focus-within {
border: 1px solid @core-vibrant-blue;
}
.form-control {
border-radius: 6px;
padding: 6px;
height: 36px;
margin: 0;
width: 212px;
}
.docsearch-input:focus-visible {
outline: none;
}
.ds-input:focus {
outline: rgba(0, 0, 0, 0);
}
.input-group-text {
color: @core-fleet-black-50;
}
.form-control {
height: 36px;
padding: 0px;
font-size: 16px;
} &:focus {
border: none;
}
}
}

[purpose='breadcrumbs-category'] {
color: #8B8FA2;
text-transform: capitalize;
margin-right: 8px;
&:hover {
color: #192147;
text-decoration: none;
}
}
[purpose='breadcrumbs-title'] {
margin-left: 8px;
}

}
[purpose='article-container'] {
max-width: 800px;
margin: auto;
display: flex;
flex-direction: column;

}
[purpose='article-title'] {
padding-top: 80px;
padding-top: 64px;
margin-bottom: 28px;
h1 {
margin-bottom: 4px;
Expand Down Expand Up @@ -107,8 +225,8 @@
}
}
[purpose='article-content'] {
padding-top: 24px;
padding-bottom: 24px;
padding-top: 40px;
padding-bottom: 40px;
word-wrap: break-word;
h1:first-of-type {
display: none;
Expand All @@ -126,8 +244,13 @@
padding: 24px 0px 16px 0px;
}
a {
color: @core-vibrant-blue;
color: @core-fleet-black-75;
word-break: break-word;
text-decoration: underline;
text-underline-offset: 2px;
&:hover {
color: @core-fleet-black-75;
}
}
h2 {
font-size: 24px;
Expand Down Expand Up @@ -429,6 +552,18 @@
[purpose='article-content'] {
padding-bottom: 0px;
}
[purpose='breadcrumbs-and-search'] {
[purpose='breadcrumbs'] {
margin-bottom: 24px;
margin-right: auto;
}
[purpose='search'] {
width: 100%;
.DocSearch-Button {
width: 100%;
}
}
}
}

@media (max-width: 769px) {
Expand All @@ -449,6 +584,10 @@
margin-bottom: 16px;
}
}
[purpose='breadcrumbs-and-search'] {
padding-top: 32px;

}

}
@media (max-width: 576px) {
Expand Down
78 changes: 53 additions & 25 deletions website/views/pages/articles/basic-article.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,60 @@
<div id="basic-article" v-cloak>
<div style="max-width: 800px;" class="container-fluid px-0">
<div purpose="article-title">
<h1><%=thisPage.meta.articleTitle %></h1>
<h2 v-if="articleHasSubtitle && articleSubtitle !== undefined">{{articleSubtitle}}</h2>
</div>
<div class="d-flex flex-sm-row flex-column justify-content-between align-items-sm-center">
<div purpose="article-details" class="d-flex flex-row align-items-center">
<span><js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
<span class="px-2">|</span>
<img style="height: 28px; width: 28px; border-radius: 100%;" alt="The author's GitHub profile picture" :src="'https://github.com/'+thisPage.meta.authorGitHubUsername+'.png?size=200'">
<p class="pl-2 font-weight-bold"><%=thisPage.meta.authorFullName %></p>
<div class="container-fluid px-0">
<div purpose="breadcrumbs-and-search" class="d-flex flex-lg-row flex-column justify-content-between align-items-lg-center align-items-start">
<div purpose="breadcrumbs" class="d-flex flex-row align-items-start">
<div>
<a purpose="breadcrumbs-category" :href="'/'+articleCategorySlug">{{articleCategorySlug}}</a>/
</div>
<div purpose="breadcrumbs-title">
<span>{{thisPage.meta.articleTitle}}</span>
</div>
</div>
<div class="d-flex flex-row align-items-center justify-content-sm-end pt-3 pt-sm-1">
<a purpose="rss-button" @click="clickCopyRssLink(articleCategorySlug)"><span>Subscribe</span></a>
<a purpose="edit-button" class="d-flex flex-row align-items-center text-nowrap" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/articles/'+thisPage.sectionRelativeRepoPath"><img alt="A pencil icon" src="/images/pencil-16x16@2x.png">Edit page</a>
<div purpose="search" id="docsearch-query" class="d-flex">
<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 the handbook"
/>
</div>
</div>
</div>
</div>
</div>
<div purpose="article-content" class="d-flex flex-column" parasails-has-no-page-script>
<%- partial(path.relative(path.dirname(__filename), path.resolve( sails.config.appPath, path.join(sails.config.builtStaticContent.compiledPagePartialsAppPath, thisPage.htmlId)))) %>
</div>
<hr>
<div purpose="bottom-cta" class="d-block">
<h3 style="font-size: 24px; line-height: 32px;">Get started</h3>
<div class="d-flex flex-sm-row flex-column align-items-center">
<a href="/register" class="d-flex btn btn-primary justify-content-center align-items-center" purpose="next-steps-button">
Start now
</a>
<animated-arrow-button class="ml-sm-4" href="/contact">Talk to us</animated-arrow-button>
<div purpose="article-container">
<div purpose="article-title">
<h1><%=thisPage.meta.articleTitle %></h1>
<h2 v-if="articleHasSubtitle && articleSubtitle !== undefined">{{articleSubtitle}}</h2>
</div>
<div class="d-flex flex-sm-row flex-column justify-content-between align-items-sm-center">
<div purpose="article-details" class="d-flex flex-row align-items-center">
<span><js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
<span class="px-2">|</span>
<img style="height: 28px; width: 28px; border-radius: 100%;" alt="The author's GitHub profile picture" :src="'https://github.com/'+thisPage.meta.authorGitHubUsername+'.png?size=200'">
<p class="pl-2 font-weight-bold"><%=thisPage.meta.authorFullName %></p>
</div>
<div class="d-flex flex-row align-items-center justify-content-sm-end pt-3 pt-sm-1">
<a purpose="rss-button" @click="clickCopyRssLink(articleCategorySlug)"><span>Subscribe</span></a>
<a purpose="edit-button" class="d-flex flex-row align-items-center text-nowrap" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/articles/'+thisPage.sectionRelativeRepoPath"><img alt="A pencil icon" src="/images/pencil-16x16@2x.png">Edit page</a>
</div>
</div>
<div purpose="article-content" class="d-flex flex-column" parasails-has-no-page-script>
<%- partial(path.relative(path.dirname(__filename), path.resolve( sails.config.appPath, path.join(sails.config.builtStaticContent.compiledPagePartialsAppPath, thisPage.htmlId)))) %>
</div>
<hr>
<div purpose="bottom-cta" class="d-block">
<h3 style="font-size: 24px; line-height: 32px;">Get started</h3>
<div class="d-flex flex-sm-row flex-column align-items-center">
<a href="/register" class="d-flex btn btn-primary justify-content-center align-items-center" purpose="next-steps-button">
Start now
</a>
<animated-arrow-button class="ml-sm-4" href="/contact">Talk to us</animated-arrow-button>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 721ed30

Please sign in to comment.