fleet/website/views/pages/query-library.ejs

<div id="query-library" v-cloak>

  <div purpose="page-container">
    <div purpose="page-content">
      <docs-nav-and-search search-filter="queries" current-section="queries" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
      <div purpose="search-and-headline" class="d-flex flex-md-row flex-column justify-content-between align-items-md-center align-items-start">
        <div purpose="page-headline" class="d-flex flex-column">
          <h2>Queries</h2>
          <p>A collection of optional queries you can run anytime. Contributions welcome <a target="_blank" href="https://github.com/fleetdm/fleet/edit/main/docs/queries.yml" no-icon>over on GitHub.</a></p>
        </div>
      </div>
      <div purpose="platform-filters" :class="[bowser.windows ? 'detected-windows' : '']" class="d-flex justify-content-center">
        <div purpose="platform-filter" :class="[selectedPlatform === 'macos' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('macos')">
          <h1 class="d-flex align-items-center">
          <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
          <span class="d-none d-sm-inline">Apple</span>
          </h1>
        </div>
        <div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
          <h1 class="d-flex align-items-center">
            <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
            <span class="d-none d-sm-inline">Linux</span>
          </h1>
        </div>
        <div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
          <h1 class="d-flex align-items-center">
            <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
            <span class="d-none d-sm-inline">Windows</span>
          </h1>
        </div>
      </div>
      <div purpose="selected-queries">
        <div v-if="selectedPlatform === 'macos'">
          <% // macOS policies (server-side-rendered)
            for(let query of macOsQueries) {
          %>
          <div purpose="policy" class="d-flex flex-lg-row flex-column justify-content-between">
            <div purpose="policy-name-and-description" class="d-flex flex-column">
              <div class="d-flex flex-column">
                <p purpose="policy-name"><a href="/queries/<%- query.slug%>"><%- query.name %></a></p>
              </div>
              <div purpose="policy-description"><p><%- query.description %></p></div>
              <div purpose="read-more-link"><animated-arrow-button arrow-color="#192147" href="/queries/<%- query.slug%>">Read more</animated-arrow-button></div>
            </div>
          </div>
          <% } %>
        </div>
        <div v-else-if="selectedPlatform === 'linux'">
          <% // Linux policies (server-side-rendered)
            for(let query of linuxQueries) {
          %>
          <div purpose="policy" class="d-flex flex-lg-row flex-column justify-content-between">
            <div purpose="policy-name-and-description" class="d-flex flex-column">
              <div class="d-flex flex-column">
                <p purpose="policy-name"><a href="/queries/<%- query.slug%>"><%- query.name %></a></p>
              </div>
              <div purpose="policy-description"><p><%- query.description %></p></div>
              <div purpose="read-more-link"><animated-arrow-button arrow-color="#192147" href="/queries/<%- query.slug%>">Read more</animated-arrow-button></div>
            </div>
          </div>
          <% } %>
        </div>
        <div v-else-if="selectedPlatform === 'windows'">
          <% // Windows policies (server-side-rendered)
            for(let query of windowsQueries) {
          %>
          <div purpose="policy" class="d-flex flex-lg-row flex-column justify-content-between">
            <div purpose="policy-name-and-description" class="d-flex flex-column">
              <div class="d-flex flex-column">
                <p purpose="policy-name"><a href="/queries/<%- query.slug%>"><%- query.name %></a></p>
              </div>
              <div purpose="policy-description"><p><%- query.description %></p></div>
              <div purpose="read-more-link"><animated-arrow-button arrow-color="#192147" href="/queries/<%- query.slug%>">Read more</animated-arrow-button></div>
            </div>
          </div>
          <% } %>
        </div>
      </div>
    </div>
  </div>
</div>


<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>