fleet/website/assets/js/components/docs-nav-and-search.component.js
Eric 048fcd13ed
Website: Add controls library pages (#33143)
Related to: https://github.com/fleetdm/confidential/issues/10737

Changes:
- Added `docs/scripts.yml`, a YAML file that contains a list of scripts
- Added `docs/mdm-commands.yml`, a YAML file that contains Windows and
Apple MDM commands
- Added `/mdm-commands`, a page that contains a list of MDM commands for
Windows and Apple commands
- Added `/scripts`, a page that contains a list of scripts
- Updated the `<docs-nav-and-search>` component to have a link to the
controls library, and reordered the lists.
- Updated the build static content script to add the scripts and mdm
commands from scripts.yml and mdm-commands.yml to the website's
`builtStaticContent` configuration.
- Updated the layout of the os-settings page to match the latest
wireframes
2025-09-19 12:02:55 -05:00

108 lines
4.7 KiB
JavaScript
Vendored

/**
* <docs-nav-and-search>
* -----------------------------------------------------------------------------
* A navigation bar with a search box.
*
* @type {Component}
*
* -----------------------------------------------------------------------------
*/
parasails.registerComponent('docsNavAndSearch', {
// ╔═╗╦═╗╔═╗╔═╗╔═╗
// ╠═╝╠╦╝║ ║╠═╝╚═╗
// ╩ ╩╚═╚═╝╩ ╚═╝
props: [
'searchFilter',
'algoliaPublicKey',
'currentSection',
],
// ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: function (){
return {
//…
};
},
// ╦ ╦╔╦╗╔╦╗╦
// ╠═╣ ║ ║║║║
// ╩ ╩ ╩ ╩ ╩╩═╝
template: `
<div class="d-block">
<div class="d-flex flex-row w-100 justify-content-between">
<div purpose="nav-link-container" class="d-flex align-items-center">
<div purpose="docs-links" class="d-flex flex-row">
<a :class="[currentSection === 'docs' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/docs" style="text-decoration: none; text-decoration-line: none;">Get started</a>
<a :class="[currentSection === 'controls' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/os-settings" style="text-decoration: none; text-decoration-line: none;">Controls</a>
<a :class="[currentSection === 'vitals' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/vitals" style="text-decoration: none; text-decoration-line: none;">Vitals</a>
<a :class="[currentSection === 'queries' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/queries" style="text-decoration: none; text-decoration-line: none;">Queries</a>
<a :class="[currentSection === 'policies' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/policies" style="text-decoration: none; text-decoration-line: none;">Policies</a>
<a :class="[currentSection === 'software' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/software-catalog" style="text-decoration: none; text-decoration-line: none;">Software</a>
<a :class="[currentSection === 'tables' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/tables" style="text-decoration: none; text-decoration-line: none;">Data tables</a>
</div>
</div>
<div>
<div purpose="nav-bar-search" id="docsearch-query" class="d-flex" v-if="algoliaPublicKey">
<div purpose="disabled-search" class="d-flex">
<div class="input-group d-flex flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text border-0 bg-transparent" >
<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"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`,
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
// ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
// ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
beforeMount: function() {
//…
},
mounted: async function() {
let filterForSearch = {};
if(this.searchFilter){
let searchIndexesThatExist = ['docs', 'software', 'queries', 'vitals', 'policies', 'tables', 'handbook', 'software'];
if(!searchIndexesThatExist.includes(this.searchFilter)){
throw new Error(`Invalid 'searchFilter' value provided to <docs-nav-and-search> component. Please change the searchFilter value to one of: ${searchIndexesThatExist.join(', ')}`);
}
filterForSearch = {
'facetFilters': [`section:${this.searchFilter}`]
};
}
if(this.algoliaPublicKey) {
docsearch({
appId: 'NZXAYZXDGH',
apiKey: this.algoliaPublicKey,
indexName: 'fleetdm',
container: '#docsearch-query',
placeholder: 'Search',
debug: false,
searchParameters: filterForSearch,
});
}
},
beforeDestroy: function() {
//…
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
methods: {
//…
},
});