fleet/website/views/pages/docs/basic-documentation.ejs
Eric 309297182a
Website: Add HubSpot chat widget and replace calendly links (#11677)
Closes: https://github.com/fleetdm/confidential/issues/2699
Changes: 
- Removed the Papercups chat widget.
- Changed the "Talk to an expert" buttons on the website to open the
HubSpot chat widget.
- Updated the Fleet Sandbox registration page to link to the MDM setup
docs.
- Changed the earliest supported versions of iOS and Safari the Fleet
website support to v11.

After this PR is merged, we will need to activate the new chat flow in
HubSpot.
2023-05-12 19:07:50 -05:00

271 lines
14 KiB
Text
Vendored

<div id="basic-documentation" v-cloak>
<div purpose="docs-landing-page" v-if="isDocsLandingPage">
<div style="max-width: 948px;" class="container-fluid p-0 px-3 px-sm-4 py-5 mb-5 mx-auto">
<div class="text-center">
<h1 class="pt-5">Fleet documentation</h1>
<p class="mb-2">Welcome to the documentation for Fleet, the lightweight telemetry platform for servers and workstations.</p>
<!-- <p class="mb-0"><strong>v4.0.1 </strong><a href="https://github.com/fleetdm/fleet/releases">changelog</a></p> -->
<!-- TODO automatically display latest release version or come up with some other way to present this that doesn't rely on knowing the version number -->
</div>
<div purpose="search" class="d-flex p-0 mt-5">
<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" class="docsearch-input pr-1"
placeholder="Search the docs..." aria-label="Search the docs"
v-model="inputTextValue" @keydown.self="delayInput(setSearchString, 400, 'defaultTimer')()" />
</div>
</div>
</div>
<div purpose="cta-cards">
<div class="container-fluid d-flex flex-column flex-sm-row justify-content-sm-between p-0 pt-4 mt-3">
<div class="container-fluid d-flex flex-column flex-md-row justify-content-center align-items-center py-3 m-0 mr-sm-1 cta-card" @click="clickCTA('/install')">
<img class="cta-image" alt="Install Fleet" src="/images/install-fleet-140x72@2x.png"/>
<div class="text-center text-md-left cta-text">
<p class="font-weight-bold p-0 pl-md-4 pt-2 pt-md-0 m-0">Install osquery and Fleet</p>
<a class="p-0 pl-md-4 pt-2 pt-md-0 arrow" href="/install">
Get started
<img class="d-inline mb-1" style="height: 16px; width: auto;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
</a>
</div>
</div>
<div class="container-fluid d-flex flex-column flex-md-row justify-content-center align-items-center py-3 m-0 ml-sm-1 mt-3 mt-sm-0 cta-card" @click="clickCTA('slack')">
<img class="cta-image" alt="Fleet support" src="/images/fleet-support-140x72@2x.png"/>
<div class="text-center text-md-left cta-text">
<p class="font-weight-bold p-0 pl-md-4 pt-2 pt-md-0 m-0">Can't find what you need?</p>
<a class="p-0 pl-md-4 pt-2 pt-md-0 arrow">
Support
<img class="d-inline mb-1" style="height: 16px; width: auto;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
</a>
</div>
</div>
</div>
</div>
<div purpose="docs-tree">
<div class="container-fluid d-flex flex-column flex-sm-row justify-content-sm-between p-0 px-4">
<div v-for="page in findPagesByUrl()">
<div style="max-width: 300px;" class="container-fluid justify-content-start align-items-center p-0 px-2 pt-4 m-0 mt-3">
<h3 class="mb-4">{{page.title}}</h3>
<ul style="list-style: none;" class="p-0 m-0">
<li class="mb-2" v-for="subpage in findPagesByUrl(page.url)">
<a :href="subpage.url">{{subpage.title}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div purpose="docs-template" style="max-width: 1200px;" class="container-fluid px-lg-3 mb-5">
<div purpose="breadcrumbs-and-search" class="conainer-fluid d-flex flex-column flex-lg-row justify-content-lg-between p-0 pt-4 pb-lg-2 m-0 breadcrumbs-search">
<div purpose="breadcrumbs" class="d-none d-lg-flex p-0 m-0 align-items-center breadcrumbs">
<a :href="'/' + breadcrumbs[0]" class="pr-3" v-if="breadcrumbs.length > 1">
{{breadcrumbs[0] === 'docs' ? 'Documentation' : 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 purpose="search" class="d-flex p-0 mb-2 mb-lg-0">
<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" class="docsearch-input pr-1"
placeholder="Search the docs..." aria-label="Search the docs"
v-model="inputTextValue" @keydown.self="delayInput(setSearchString, 400, 'defaultTimer')()" />
</div>
</div>
</div>
<div purpose="mobile-docs-nav" class="d-flex-block d-lg-none">
<div class="d-flex flex-column d-lg-none p-0 m-0 justify-content-start align-items-center">
<button purpose="docs-nav-button" class="btn btn-block d-flex align-items-center docs-nav-button" type="button" @click="toggleDocsNav">
<span class="pr-2 m-0">Docs</span>
<img class="my-auto" style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/>
<span class="font-weight-bold px-2 m-0">{{thisPage.title}}</span>
<img style="width: 6px; height: 9px;" class="ml-auto my-auto" alt="right chevron" src="/images/chevron-right-6x9@2x.png" v-if="!showDocsNav"/>
<img style="width: 9px; height: 6px;" class="ml-auto my-auto" alt="down chevron" src="/images/chevron-down-9x6@2x.png" v-else/>
</button>
</div>
<div class="border-bottom" v-if="!showDocsNav"></div>
<div class="d-flex px-0 border-bottom mobile-docs-nav" v-if="showDocsNav">
<div class="container-fluid px-0 pt-4">
<ul class="px-0 mb-0">
<li class="px-0 mb-2" v-for="page in findPagesByUrl()" :key="page.title">
<a :href="page.url" class="font-weight-bold">
{{page.title}}
</a>
<ul class="px-0 pt-3 mb-0" v-if="!_.isEmpty(findPagesByUrl(page.url))">
<li class="px-0 mb-2" v-for="subpage in findPagesByUrl(page.url)">
<a :href="subpage.url" :class="subpage.title === thisPage.title ? 'topic active' : 'topic'">
{{subpage.title}}
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<h1 purpose="page-title" class="d-flex d-lg-none py-4 m-0"><%= thisPage.title %></h1>
<div purpose="edit-button-container">
<div purpose="edit-button">
<a :href="'https://github.com/fleetdm/fleet/edit/main/docs/'+thisPage.sectionRelativeRepoPath" target="_blank"><i class="fa fa-pencil"></i>Edit page</a>
</div>
</div>
<div class="container-fluid d-flex flex-column flex-lg-row p-0 pt-lg-4 pb-lg-4 m-0">
<div purpose="left-sidebar" class="d-none d-lg-flex flex-column text-left pl-0 pr-4 left-sidebar">
<ul class="p-0 pb-2 m-0 left-nav">
<li v-for="page in findPagesByUrl()" :key="page.title">
<a :href="page.url" class="font-weight-bold pb-3">{{page.title}}</a>
<div class="pt-2" v-if="isCurrentSection(page)">
<ul class="p-0 mb-2">
<li v-for="subpage in findPagesByUrl(page.url)" :key="subpage.title">
<a :href="subpage.url" :class="subpage.title === thisPage.title ? 'topic active' : 'topic'">
{{subpage.title}}
</a>
</li>
</ul>
</div>
</li>
</ul>
<a class="font-weight-bold py-3" target="_blank" href="https://github.com/fleetdm/fleet/releases">Releases</a>
<a href="/support" class="btn btn-block btn-sm btn-primary">Support</a>
<div purpose="right-sidebar-buttons">
<div class="d-none d-lg-block" purpose="demo-cta">
<a class="d-flex align-items-center justify-content-center" @click="clickOpenChatWidget()">
<div class="d-flex flex-column align-items-center">
<img style="height: auto; width: 47px; margin-bottom: 8px;" alt="Target and configure specific devices" src="/images/docs-cta-icon-47x38@2x.png">
<p class="mb-2 text-center">Target and configure specific devices</p>
<span>
Talk to an expert <img purpose="right-arrow" class="d-inline" style="height: 16px; width: auto; margin-bottom: 2px;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
</span>
</div>
</a>
</div>
<div>
<div purpose="premium-cta" style="background: #E59CC4;" v-if="currentDocsSection === 'using-fleet' || currentDocsSection === 'contributing'">
<div purpose="docs-cta-image" class="d-flex justify-content-center">
<img alt="A computer next to a coffee cup" src="/images/docs-premium-cta-computer-125x134@2x.png">
</div>
<p>Even more control with <span>Fleet Premium</span></p>
<a purpose="premium-cta-btn" href="/upgrade">Learn more</a>
</div>
<div purpose="premium-cta" style="background: #A182DF;" v-else-if="currentDocsSection === 'deploying'">
<div purpose="docs-cta-image" class="d-flex justify-content-center">
<img alt="A telephone in a glass display case" src="/images/docs-premium-cta-telephone-125x134@2x.png">
</div>
<p>Expertise on-demand with <span>Fleet Premium</span></p>
<a purpose="premium-cta-btn" href="/upgrade">Learn more</a>
</div>
</div>
</div>
</div>
<div purpose="right-sidebar" class="order-first order-lg-last p-0 pb-2 pb-lg-0 pr-lg-0 right-sidebar" v-if="!thisPage.title.includes('FAQ')">
<p class="font-weight-bold pb-2 m-0 mb-2" v-if="!_.isEmpty(subtopics)">On this page:</p>
<div purpose="subtopics" v-if="!_.isEmpty(subtopics)">
<ul class="p-0 m-0">
<!-- <li v-for="(subtopic, index) in subtopics" :class="pl-lg-2 pb-3 pb-1g-2 subtopic" :key="index">
<a :class="getActiveSubtopicClass(currentLocation, subtopic.url)" :href="subtopic.url">{{subtopic.title}}</a>
</li> -->
<li v-for="(subtopic, index) in subtopics" class="pl-lg-3 pb-3 pb-lg-2 subtopic" :key="index">
<a :href="subtopic.url">{{subtopic.title}}</a>
</li>
<li class="d-lg-none pl-lg-3 subtopic">
<a href="/support">Help and feedback</a>
</li>
</ul>
</div>
<div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm">
<a class="d-flex align-items-center justify-content-center" href="https://kqphpqst851.typeform.com/to/ZfA3sOu0" target="_blank">
<div class="d-flex flex-column align-items-center">
<img style="height: auto; width: 47px; margin-bottom: 8px;" alt="A very nice Fleet branded shirt" src="/images/fleet-shirt-60x55@2x.png">
<p class="mb-0">Request Fleet swag</p>
<span>
It's free <img purpose="right-arrow" class="d-inline" style="height: 16px; width: auto; margin-bottom: 2px;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
</span>
</div>
</a>
</div>
</div>
<div purpose="content" id="body-content" class="d-flex flex-column px-lg-5 content" 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 class="d-block" purpose="slack-cta">
<h3 class="pt-0" style="font-size: 24px; line-height: 28px;">Need more help?</h3>
<div class="d-sm-flex">
<a href="/slack" target="_blank" class="d-flex btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-sm-0" purpose="next-steps-button">
<img class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>
Ask the community on Slack
</a>
</div>
</div>
<div class="d-block" purpose="improve-docs">
<h3 class="pt-0 pb-4 m-0" style="font-size: 24px; line-height: 28px;">Did we miss anything?</h3>
<p>
If you notice something we've missed or could be improved on, please follow <a :href="'https://github.com/fleetdm/fleet/edit/main/docs/'+thisPage.sectionRelativeRepoPath" target="_blank">this link</a> and submit a pull request to the Fleet repo.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>