fleet/website/views/pages/articles/articles.ejs
Eric 75ffd8b12f
Website: Update login/register flow, add Fleet UI background to /try and /login (#39290)
Closes: https://github.com/fleetdm/fleet/issues/36465
Closes: https://github.com/fleetdm/fleet/issues/36467
Related to: https://github.com/fleetdm/confidential/issues/14254

Changes:
- Updated "Try it yourself" links to go to the `/try` page (Which
redirects users who aren't logged in to the /login page)
- Removed the `<signup-modal>` and `<signup-button>` components
- Removed the route for the /register page, and added a redirect to go
to /login
- Updated the /login page to have the signup form, and to match the
latest wireframes
- Updated the /try page to have a fake Fleet UI as a background
(previously an image)
2026-02-10 12:32:49 -06:00

113 lines
6.4 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="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="/customers">Case studies</a>
<a href="/guides">Guides</a>
<a href="/articles">Blog</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>Lets 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() %>