fleet/website/views/pages/docs/basic-documentation.ejs

<div id="basic-documentation" v-cloak>
  <div purpose="page-container">
    <div purpose="page-content">
    <docs-nav-and-search search-filter="docs" current-section="docs" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
    <div purpose="mobile-table-of-contents" class="d-flex d-lg-none" @click="clickOpenMobileDocsNav()">
      <img src="/images/icon-hamburger-menu-16x14@2x.png" alt="click to open the table of contents." >
      <p class="mb-0"><%= thisPage.title %></p>
    </div>

    <div purpose="docs-template" class="container-fluid p-0">
      <h1 purpose="page-title" class="d-flex d-lg-none py-4 m-0"><%= thisPage.title %></h1>
      <div purpose="edit-button-container">
          <a purpose="edit-button" :href="'https://github.com/fleetdm/fleet/edit/main/docs/'+thisPage.sectionRelativeRepoPath" target="_blank" no-icon>
            <i class="fa fa-pencil"></i>Edit page
          </a>
      </div>

      <div purpose="content-and-desktop-sidebars" class="d-flex flex-column flex-lg-row">
        <div class="d-flex flex-column">
        <div purpose="left-sidebar" class="d-none d-lg-flex flex-column text-left left-sidebar">
          <div purpose="left-sidebar-links">
            <div v-for="page in findPagesByUrl()" :key="page.title">
              <p purpose="section-title">{{page.title}}</p>
              <div purpose="expanded-nav">
                <a :href="subpage.url" purpose="subpage-link" :class="subpage.title === thisPage.title ? 'topic active' : 'topic'" v-for="subpage in findPagesByUrl(page.url)" :key="subpage.title">
                  {{subpage.title}}
                </a>
              </div>
            </div>
          </div>
          <a purpose="subpage-link" href="/new-license" no-icon>Get your license</a>
          <a purpose="subpage-link" href="/docs/contributing" target="_blank" no-icon>Contribute</a>
          <a purpose="subpage-link" href="/releases" no-icon>Release notes</a>
          <a purpose="subpage-link" href="/support" no-icon>Support</a>
          <a purpose="subpage-link" href="/contact">Get a demo</a>
          <a purpose="subpage-link" href="/better">“Why is Fleet on my computer?”</a>
        </div>
        <div class="d-none d-lg-block left-cta" purpose="swag-cta" v-if="showSwagForm && ['REST API', 'Fleet server configuration'].includes(thisPage.title)">
          <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 right-sidebar" v-if="!thisPage.title.includes('FAQ')">
          <div class="d-none d-lg-block">
            <p purpose="subtopics-heading" class="font-weight-bold" v-if="!_.isEmpty(subtopics)">On this page:</p>
            <div purpose="subtopics" v-if="!_.isEmpty(subtopics)">
              <a purpose="subtopic-link" v-for="(subtopic, index) in subtopics" :href="subtopic.url">{{subtopic.title}}</a>
              <div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm && !['REST API', 'Fleet server configuration'].includes(thisPage.title)">
                <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>
          <div class="d-block d-lg-none" v-if="!_.isEmpty(subtopics)">
            <div purpose="mobile-custom-select" class="d-flex flex-row justify-content-between" @click="clickOpenMobileSubtopicsNav()">
              <div><p class="mb-0">On this page</p></div>
              <div><img src="/images/icon-select-arrows-16x16@2x.png" alt="click to open the table of contents"></div>
            </div>
          </div>
        </div>



        <div purpose="content" id="body-content" class="d-flex flex-column 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'].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 === '4 - Has use case') {%>
              <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 (['5 - Personally confident', '6 - Has team buy-in'].includes(me.psychologicalStage)) {%>
                <h2>Talk to the team</h2>
                <p>Let’s 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>
  </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 purpose="table-of-contents-modal">
  <modal v-if="modal === 'table-of-contents'" @close="closeModal()">
    <div purpose="modal-links">
      <div  purpose="modal-docs-links">
      <div v-for="page in findPagesByUrl()" :key="page.title">
        <p purpose="section-title">{{page.title}}</p>
        <div purpose="expanded-nav">
          <a purpose="modal-nav-link" :href="subpage.url" :class="subpage.title === thisPage.title ? 'active' : ''"   v-for="subpage in findPagesByUrl(page.url)" :key="subpage.title">
            {{subpage.title}}
          </a>
        </div>
      </div>
      </div>
      <a purpose="modal-nav-link" target="_blank" href="/new-license" no-icon>Get your license</a>
      <a purpose="modal-nav-link" href="/docs/contributing" target="_blank" no-icon>Contribute</a>
      <a purpose="modal-nav-link" href="/releases" no-icon>Release notes</a>
      <a purpose="modal-nav-link" href="/support" no-icon>Support</a>
      <a purpose="modal-nav-link" href="/contact">Get a demo</a>
      <a purpose="modal-nav-link" href="/better">“Why is Fleet on my computer?”</a>
    </div>
  </modal>
  </div>
  <div purpose="subtopics-modal">
    <modal v-if="modal === 'subtopics'" @close="closeModal()">
      <p class="font-weight-bold pb-2 m-0 mb-2" v-if="!_.isEmpty(subtopics)">On this page:</p>
      <div purpose="modal-links">
        <a v-for="subtopic in subtopics" purpose="modal-nav-link"  class="d-block" :href="subtopic.url" @click="closeModal()">{{subtopic.title}}</a>
      </div>
    </modal>
  </div>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>