mirror of
https://github.com/fleetdm/fleet
synced 2026-05-22 08:28:52 +00:00
Add search to fleetdm.com/handbook (#2545)
* uncommented searchbar, live search config * update docsearch config * Remove second search bar, adjust layout of page to work with a single search bar * lint fix * Update basic-handbook.less
This commit is contained in:
eashaw
GitHub
parent
56aee3b582
commit
b56b44b1c8
4 changed files with 47 additions and 56 deletions
|
|
@ -96,6 +96,9 @@ parasails.registerPage('basic-documentation', {
|
|||
indexName: 'fleetdm',
|
||||
inputSelector: (this.isDocsLandingPage ? '#docsearch-query-landing' : '#docsearch-query'),
|
||||
debug: false,
|
||||
algoliaOptions: {
|
||||
'facetFilters': ['tags:docs']
|
||||
},
|
||||
});
|
||||
|
||||
// Handle hashes in urls when coming from an external page.
|
||||
|
|
|
|||
|
|
@ -23,6 +23,18 @@ parasails.registerPage('basic-handbook', {
|
|||
|
||||
mounted: async function() {
|
||||
|
||||
// Algolia DocSearch
|
||||
docsearch({
|
||||
apiKey: '8c492befdb9f5b5166253a0f8eeb789d',
|
||||
indexName: 'fleetdm',
|
||||
inputSelector: '#docsearch-query',
|
||||
debug: false,
|
||||
clickAnalytics: true,
|
||||
algoliaOptions: {
|
||||
'facetFilters': ['tags:handbook']
|
||||
},
|
||||
});
|
||||
|
||||
this.subtopics = (() => {
|
||||
let subtopics;
|
||||
if(!this.isHandbookLandingPage){
|
||||
|
|
|
|||
|
|
@ -58,27 +58,15 @@
|
|||
} &:focus {
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
[purpose='breadcrumbs'] {
|
||||
padding-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
|
||||
p, a, strong {
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='mobile-breadcrumbs'] {
|
||||
line-height: 24px;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
p, strong {
|
||||
font-size: 12px;
|
||||
}
|
||||
a {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
&.active {
|
||||
color: @core-vibrant-blue;
|
||||
|
|
@ -299,7 +287,9 @@
|
|||
.handbook-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
[purpose='search'] {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
[purpose='right-sidebar'] {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
|
|
|
|||
72
website/views/pages/handbook/basic-handbook.ejs
vendored
72
website/views/pages/handbook/basic-handbook.ejs
vendored
|
|
@ -1,45 +1,8 @@
|
|||
<div id="basic-handbook" v-cloak>
|
||||
<div purpose="handbook-template" style="max-width: 1000px;" class="container-fluid p-0 px-lg-3 mb-5">
|
||||
<div class="d-flex flex-column flex-md-row pt-lg-4 pb-lg-4 m-0">
|
||||
<div purpose="mobile-breadcrumbs-container" class="d-flex justify-content-lg-between p-0 pt-4 pb-lg-2 m-0">
|
||||
<div purpose="mobile-breadcrumbs" class="d-block d-md-none">
|
||||
<div class="d-flex" v-if="breadcrumbs.length > 1">
|
||||
<a :href="'/' + breadcrumbs[0]" class="pr-3">
|
||||
{{breadcrumbs[0] === 'handbook' ? 'Introduction' : breadcrumbs[0]}}
|
||||
</a>
|
||||
<div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length === 3">
|
||||
<img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png" />
|
||||
<a :href="'/' + breadcrumbs[0] + '/' + breadcrumbs[1]" class="px-3">
|
||||
{{getTitleFromUrl(breadcrumbs[1])}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length > 1">
|
||||
<img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/>
|
||||
<p class="px-3 m-0">
|
||||
{{thisPage.title}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<strong>Introduction</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div purpose="search" class="d-block d-md-none">
|
||||
<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 id="docsearch-query-landing" disabled class="docsearch-input pr-1"
|
||||
placeholder="Search the handbook..." aria-label="Search the handbook"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div purpose="right-sidebar" class="order-md-last pb-3 pb-lg-0 pr-xl-0 right-sidebar" v-if="!thisPage.title.includes('FAQ')">
|
||||
|
||||
<div purpose="right-sidebar" class="order-md-last d-none d-md-block pb-3 pb-lg-0 pr-xl-0 right-sidebar">
|
||||
<div purpose="maintainer" class="mb-lg-3">
|
||||
<h4>Maintained by:</h4>
|
||||
<img class="maintainer-image" alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
|
||||
|
|
@ -55,8 +18,10 @@
|
|||
</div>
|
||||
<div class="border-bottom py-3 d-flex d-md-none"></div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column pl-lg-5 handbook-content">
|
||||
<div purpose="breadcrumbs" class="d-none d-md-flex m-0 align-items-center breadcrumbs">
|
||||
|
||||
<div purpose="breadcrumbs" class="d-flex m-0 align-items-center breadcrumbs">
|
||||
<div class="d-flex" v-if="breadcrumbs.length > 1">
|
||||
<a :href="'/' + breadcrumbs[0]" class="pr-3">
|
||||
{{breadcrumbs[0] === 'handbook' ? 'Introduction' : breadcrumbs[0]}}
|
||||
|
|
@ -78,7 +43,8 @@
|
|||
<strong>Introduction</strong>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div purpose="search" class="d-none d-md-flex">
|
||||
|
||||
<div purpose="search" class="d-flex">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text border-0 bg-transparent pl-3" >
|
||||
|
|
@ -86,13 +52,32 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="form-control border-0 ">
|
||||
<input id="docsearch-query-landing" disabled class="docsearch-input pr-1"
|
||||
<input id="docsearch-query" class="docsearch-input pr-1"
|
||||
placeholder="Search the handbook..." aria-label="Search the handbook"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div purpose="right-sidebar" class="d-block d-md-none pb-3 pb-lg-0 pr-xl-0 right-sidebar">
|
||||
<div purpose="maintainer" class="mb-lg-3">
|
||||
<h4>Maintained by:</h4>
|
||||
<img class="maintainer-image" alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
|
||||
<a style="margin-top: 24px;" :href="'https://github.com/fleetdm/fleet/tree/main/handbook/'+thisPage.sectionRelativeRepoPath"> Edit this page</a>
|
||||
</div>
|
||||
<h4 class="font-weight-bold pb-2 m-0 mb-2" v-if="!_.isEmpty(subtopics)">On this page:</h4>
|
||||
<div purpose="subtopics">
|
||||
<ul class="p-0 m-0">
|
||||
<li v-for="(subtopic, index) in subtopics" class="subtopic" :key="index">
|
||||
<a :href="subtopic.url" :class="_isCurrentSection(subtopic, this.window.location) ? 'active' : 'pl-md-3'" @click="forceRender()">{{subtopic.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="border-bottom py-3 d-flex d-md-none"></div>
|
||||
</div>
|
||||
|
||||
<div purpose="content" id="body-content" class="content" parasails-has-no-page-script>
|
||||
|
||||
<%- partial(
|
||||
path.relative(
|
||||
path.dirname(__filename),
|
||||
|
|
@ -105,6 +90,7 @@
|
|||
)
|
||||
)
|
||||
) %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue