Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Website: Add search and breadcrumbs to article template page #22171

Merged
merged 3 commits into from
Sep 18, 2024
Merged

Website: Add search and breadcrumbs to article template page #22171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fccf106
Add search and breadcrumbs to article template
eashaw Sep 17, 2024
22c21d6
Merge branch 'main' into website-update-article-template-page
eashaw Sep 17, 2024
bc17a47
update mobile and disabled search styles
eashaw Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions website/api/controllers/articles/view-basic-article.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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/[email protected]">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/[email protected]">
</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/[email protected]">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
Loading