mirror of
https://github.com/fleetdm/fleet
synced 2026-05-16 13:38:43 +00:00
1cedb151de
Closes: https://github.com/fleetdm/confidential/issues/11063 Changes: - Added a navigation sidebar to article category pages. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a sidebar to the articles page with navigation links and a dynamic call-to-action section that adapts based on user status. * Added a new two-column layout, displaying articles alongside the sidebar. * **Style** * Enhanced sidebar and article section styling, including a new sidebar call-to-action component. * Improved responsive design for better usability on smaller screens. * **Refactor** * Updated category labeling from "Announcements" to "News" with revised descriptions. * Disabled the previous card-based article layout. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
113 lines
6.3 KiB
Text
Vendored
113 lines
6.3 KiB
Text
Vendored
<div id="articles" v-cloak>
|
||
<div style="max-width: 1200px;" class="container-fluid mx-auto" purpose="page-container">
|
||
<div purpose="category-title">
|
||
<div class="d-flex flex-md-row flex-column justify-content-between align-items-md-end">
|
||
<div class="d-flex flex-column justify-content-between align-self-start float-left">
|
||
<h1>{{articleCategory}}</h1>
|
||
<p>{{categoryDescription}}</p>
|
||
</div>
|
||
<div purpose="search-and-releases-button" class="d-flex flex-md-row flex-column">
|
||
<div class="d-flex flex-column align-self-md-end" v-if="category === 'releases'">
|
||
<a purpose="changelog-button" href="https://github.com/fleetdm/fleet/releases" target="_blank" no-icon><img alt="GitHub logo" src="/images/logo-github-dark-24x24@2x.png"/>View changelog</a>
|
||
</div>
|
||
<div purpose="search" id="docsearch-query" v-if="['articles', 'announcements', 'guides', 'releases'].includes(category)">
|
||
<div purpose="disabled-search" class="d-flex w-100">
|
||
<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" aria-label="Search"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div purpose="sidebar-and-articles">
|
||
<div purpose="sidebar">
|
||
<div purpose="nav-links">
|
||
<a href="/announcements">News</a>
|
||
<a href="/testimonials">Case studies</a>
|
||
<a href="/articles">Articles</a>
|
||
<a href="/releases">Releases</a>
|
||
</div>
|
||
<div purpose="sidebar-cta">
|
||
<a href="<% if(typeof me === 'undefined') {%>/register<% } else { %>/start<% } %>">
|
||
<div purpose="cta-image"></div>
|
||
<div purpose="cta-text">
|
||
<% if(typeof me === 'undefined'){ %>
|
||
<h4>Try it out</h4>
|
||
<p>See what Fleet can do</p>
|
||
<a purpose="cta-button" class="btn btn-primary docs-cta-continue-button" href="/register">Start now</a>
|
||
<% } else if (['2 - Aware', '3 - Intrigued'].includes(me.psychologicalStage)) {%>
|
||
<h4>Tried Fleet yet?</h4>
|
||
<p>Continue getting started with Fleet</p>
|
||
<a purpose="cta-button" class="btn btn-primary" href="/start">Continue</a>
|
||
<% } else if (me.psychologicalStage === '4 - Has use case') {%>
|
||
<h4>Feeling confident?</h4>
|
||
<p>Get set up with Fleet</p>
|
||
<a purpose="cta-button" class="btn btn-primary" hredf="/start">Continue</a>
|
||
<% } else if (['5 - Personally confident', '6 - Has team buy-in'].includes(me.psychologicalStage)) {%>
|
||
<h4>Talk to the team</h4>
|
||
<p>Let’s get you set up!</p>
|
||
<a purpose="cta-button" class="btn btn-primary" href="/start">Continue</a>
|
||
<%}%>
|
||
<div purpose="cta-platform-icons" class="d-flex flex-row justify-content-between align-items-center">
|
||
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS" />
|
||
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows" />
|
||
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux" />
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div purpose="article-rows">
|
||
<a :href="article.url" purpose="article-row" class="d-flex flex-lg-row flex-row justify-content-between" v-for="article in articles">
|
||
<div purpose="article-name-and-description" class="d-flex flex-column">
|
||
<div class="d-flex flex-column">
|
||
<p purpose="article-name">{{article.meta.articleTitle}}</p>
|
||
</div>
|
||
<div purpose="article-description" v-if="article.meta.description"><p>{{article.meta.description}}</p></div>
|
||
<div purpose="publish-date"><js-timestamp format="billing" :at="article.meta.publishedOn"></js-timestamp></div>
|
||
</div>
|
||
<div class="d-flex flex-column justify-content-center">
|
||
<svg purpose="animated-arrow" style="stroke: #192147;" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
|
||
<path purpose="arrow-line" d="M1 6H9" stroke-width="2" stroke-linecap="round"/>
|
||
<path purpose="chevron" d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- <div purpose="articles" class="card-deck d-flex justify-content-center" v-else>
|
||
<div purpose="article-card" class="card" v-for="article in articles">
|
||
<a purpose="article-card-link" :href="article.url">
|
||
<img style="width: 100%; height: auto;" :src="[article.meta.articleImageUrl ? article.meta.articleImageUrl : '/images/blog-fleet-logo-white-background-800x450@2x.png']" alt="Article hero image">
|
||
</a>
|
||
<div purpose="article-card-body" class="card-body d-flex flex-column">
|
||
<p purpose="category-name" class="pb-2 mb-0">{{article.meta.category}}</p>
|
||
<a purpose="article-title" :href="article.url"><h5>{{article.meta.articleTitle}}</h5></a>
|
||
<div purpose="article-details" class="d-flex mt-auto flex-row align-items-center">
|
||
<img alt="The author's GitHub profile picture" style="height: 32px; width: 32px; border-radius: 100%;" :src="'https://github.com/'+article.meta.authorGitHubUsername+'.png?size=200'">
|
||
<p class="pl-2 font-weight-bold">{{article.meta.authorFullName}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
|
||
</div>
|
||
<div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
|
||
</div>
|
||
<div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
|
||
</div>
|
||
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
|