fleet/website/views/pages/docs/basic-documentation.ejs
Eric 601189d38c
Website: Update docs CTA classes and styles (#20386)
Changes:
- Added a unique class to the CTA at the bottom of docs pages.
2024-07-11 12:21:22 -05:00

243 lines
13 KiB
Text
Vendored
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 management platform for laptops and servers.</p>
</div>
<div purpose="search" id="docsearch-query-landing" 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 class="docsearch-input pr-1"
placeholder="Search the docs..." aria-label="Search the docs"
/>
</div>
</div>
</div>
<p purpose="support-link">Can't find what you're looking for? <a href="/support">Support</a></p>
<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" id="docsearch-query" 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 class="docsearch-input pr-1"
placeholder="Search the docs..." aria-label="Search the docs"
v-model="inputTextValue"/>
</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">{{getTitleFromUrl(breadcrumbs[1])}}</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 pb-3">
<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>
<div purpose="expanded-nav" class="pt-3" v-if="isCurrentSection(page)">
<ul class="p-0 pl-2 mb-2" v-if="!_.isEmpty(findPagesByUrl(page.url))">
<div purpose="nav-section" v-for="(section, sectionName) of findAndSortNavSectionsByUrl(page.url)" :key="sectionName" v-if="sectionName !== 'hidden'">
<p purpose="nav-section-title" v-if="sectionName !== 'Uncategorized' && sectionName !== 'TBD'">{{sectionName}}</p>
<li v-for="subpage in section" :key="subpage.title">
<a :href="subpage.url" :class="subpage.title === thisPage.title ? 'topic active' : 'topic'">
{{subpage.title}}
</a>
</li>
</div>
</ul>
</div>
</li>
</ul>
<ul class="px-0 mb-0 pt-3" purpose="mobile-docs-nav-other-links">
<li class="px-0 mb-3"><a href="/tables">Data tables</a></li>
<li class="px-0 mb-3"><a href="/queries"><%= ['eo-it', 'mdm'].includes(primaryBuyingSituation) ? 'Device health checks' : 'Built-in queries' %></a></li>
<li class="px-0 mb-3"><a href="https://github.com/fleetdm/fleet/releases" target="_blank">Releases</a></li>
<li class="px-0 mb-3"><a href="/support">Support</a></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">
<a :purpose="thisPage.title !== 'FAQ' ? 'edit-button' : 'faq-edit-button'" :href="'https://github.com/fleetdm/fleet/edit/main/docs/'+thisPage.sectionRelativeRepoPath" target="_blank">
<i class="fa fa-pencil"></i>Edit page
</a>
</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-3 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 purpose="expanded-nav" class="pt-3" v-if="isCurrentSection(page)">
<ul class="p-0 pl-2 mb-2">
<div purpose="nav-section" v-for="(section, sectionName) of findAndSortNavSectionsByUrl(page.url)" :key="sectionName" v-if="sectionName !== 'hidden'">
<p purpose="nav-section-title" v-if="sectionName !== 'Uncategorized' && sectionName !== 'TBD'">{{sectionName}}</p>
<li v-for="subpage in section" :key="subpage.title">
<a :href="subpage.url" :class="subpage.title === thisPage.title ? 'topic active' : 'topic'">
{{subpage.title}}
</a>
</li>
</div>
</ul>
</div>
</li>
</ul>
<a class="pt-4 pb-3" target="_blank" href="/tables">Data tables</a>
<a class="pb-3" target="_blank" href="/queries"><%= ['eo-it', 'mdm'].includes(primaryBuyingSituation) ? 'Device health checks' : 'Built-in queries' %></a>
<a class="pb-3" target="_blank" href="https://github.com/fleetdm/fleet/releases">Releases</a>
<a class="pb-3" target="_blank" href="/support">Support</a>
<div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm">
<a class="d-flex align-items-center justify-content-center" @click="clickSwagRequestCTA()">
<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="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>
<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 purpose="docs-start-cta" class="d-flex flex-column flex-sm-row justify-content-between">
<div purpose="docs-start-cta-image" class="col-sm-6 col-md-5 col-lg-6"></div>
<div purpose="docs-start-cta-content" class="d-flex flex-column justify-content-center text-center">
<% if(!me){ %>
<h2>Try it out</h2>
<p>See what Fleet can do</p>
<a purpose="continue-button" class="btn btn-primary docs-cta-continue-button" href="/register">Start now</a>
<% } else if (['2 - Aware', '3 - Intrigued', '4 - Has use case'].includes(me.psychologicalStage)) {%>
<h2>Tried Fleet yet?</h2>
<p>Continue getting started with Fleet</p>
<a purpose="continue-button" class="btn btn-primary docs-cta-continue-button" href="/start">Continue</a>
<% } else if (me.psychologicalStage === '5 - Personally confident') {%>
<h2>Feeling confident?</h2>
<p>Get set up with Fleet</p>
<a purpose="continue-button" class="btn btn-primary docs-cta-continue-button" href="/start">Continue</a>
<% } else if (me.psychologicalStage === '6 - Has team buy-in') {%>
<h2>Talk to the team</h2>
<p>Lets get you set up!</p>
<a purpose="continue-button" class="btn btn-primary docs-cta-continue-button" href="/start">Continue</a>
<%}%>
</div>
</div>
</div>
</div>
</div>
<div purpose="back-to-top-button-container">
<div purpose="back-to-top-button" nohightlight @click="clickScrollToTop">
<p class="mb-0"><img alt="An arrow pointing up" class="d-inline" src="/images/icon-arrow-up-12x13@2x.png">Back to top</p>
</div>
</div>
</div>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>