On fleetdm.com, add stubbed "Get started" page (#570)

- Add action, template stub, and stylesheet for "Get started" page
- Add new styles for site header
- Update feature comparison to indicate agent autoupdates are now available!
This commit is contained in:
noahtalerman
2021-03-31 16:08:36 -07:00
committed by GitHub
parent 83d608962a
commit 85b31a3523
10 changed files with 131 additions and 7 deletions
@@ -0,0 +1,27 @@
module.exports = {
friendlyName: 'View get started',
description: 'Display "Get started" page.',
exits: {
success: {
viewTemplatePath: 'pages/get-started'
}
},
fn: async function () {
// Respond with view.
return {};
}
};
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9633 0.5C5.3578 0.5 0 5.8578 0 12.4633C0 17.7477 3.44954 22.2248 8.14679 23.8394C8.73394 23.9128 8.95413 23.5459 8.95413 23.2523C8.95413 22.9587 8.95413 22.2248 8.95413 21.1972C5.65138 21.9312 4.91743 19.5826 4.91743 19.5826C4.40367 18.1881 3.59633 17.8211 3.59633 17.8211C2.49541 17.0872 3.66972 17.0872 3.66972 17.0872C4.84404 17.1606 5.50459 18.3349 5.50459 18.3349C6.6055 20.1697 8.29358 19.656 8.95413 19.3624C9.02752 18.555 9.3945 18.0413 9.68807 17.7477C7.04587 17.4541 4.25688 16.4266 4.25688 11.8028C4.25688 10.4817 4.69725 9.45413 5.50459 8.57339C5.43119 8.35321 4.99083 7.1055 5.65138 5.49083C5.65138 5.49083 6.6789 5.19725 8.95413 6.73853C9.90826 6.44495 10.9358 6.37156 11.9633 6.37156C12.9908 6.37156 14.0183 6.51835 14.9725 6.73853C17.2477 5.19725 18.2752 5.49083 18.2752 5.49083C18.9358 7.1055 18.4954 8.35321 18.422 8.64679C19.156 9.45413 19.6697 10.555 19.6697 11.8761C19.6697 16.5 16.8807 17.4541 14.2385 17.7477C14.6789 18.1147 15.0459 18.8486 15.0459 19.9495C15.0459 21.5642 15.0459 22.8119 15.0459 23.2523C15.0459 23.5459 15.2661 23.9128 15.8532 23.8394C20.6239 22.2248 24 17.7477 24 12.4633C23.9266 5.8578 18.5688 0.5 11.9633 0.5Z" fill="#192147"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

+1
View File
@@ -24,6 +24,7 @@
// Per-page styles
@import 'pages/homepage.less';
@import 'pages/get-started.less';
@import 'pages/dashboard/welcome.less';
@import 'pages/entrance/signup.less';
@import 'pages/entrance/confirmed-email.less';
+75 -1
View File
@@ -16,7 +16,7 @@ html, body {
padding-bottom: @footer-height;
}
[purpose='page-header'] {
[purpose='page-header'].homepage-header {
position: absolute;
left: 0;
right: 0;
@@ -24,15 +24,89 @@ html, body {
color: #ffffff;
cursor: default !important;//lesshint-disable-line importantRule
font-family: @navigation-font;
font-weight: @bold;
}
// .header-btn[aria-expanded='true'] {
// color: #6a67fe;
// }
.header-link {
color: #ffffff;
font-weight: @bold;
svg {
path {
fill: #ffffff;
}
}
}
.header-link:hover {
color: #6a67fe;
svg {
path {
fill: #6a67fe;
}
}
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-color: #ffffff;
}
.collapsing {
opacity: 0;
}
.collapse.show {
opacity: 1;
pointer-events: auto;
}
.collapse {
opacity: 0;
}
.mobile-menu-item {
color: #192147;
border-radius: 4px;
text-decoration: none;
}
.mobile-menu-item:hover {
background-color: #f1f0ff;
font-weight: @bold;
}
.mobile-menu-item:active {
background-color: #f1f0ff;
font-weight: @bold;
}
}
[purpose='page-header'].header {
position: absolute;
left: 0;
right: 0;
border-bottom: 1px solid #e2e4ea;
.header-btn {
color: #192147;
cursor: default !important;//lesshint-disable-line importantRule
font-family: @navigation-font;
font-weight: @bold;
}
// .header-btn[aria-expanded='true'] {
// color: #6a67fe;
// }
.header-link {
color: #192147;
font-weight: @bold;
}
.header-link:hover {
color: #6a67fe;
svg {
path {
fill: #6a67fe;
}
}
}
.mobile-menu {
position: fixed;
@@ -0,0 +1,3 @@
#get-started {
}
+1
View File
@@ -18,6 +18,7 @@ module.exports.policies = {
'view-homepage-or-redirect': true,
'view-faq': true,
'view-contact': true,
'view-get-started': true,
'legal/view-terms': true,
'legal/view-privacy': true,
'deliver-contact-form-message': true,
+4 -2
View File
@@ -13,7 +13,7 @@ module.exports.routes = {
// ╦ ╦╔═╗╔╗ ╔═╗╔═╗╔═╗╔═╗╔═╗
// ║║║║╣ ╠╩╗╠═╝╠═╣║ ╦║╣ ╚═╗
// ╚╩╝╚═╝╚═╝╩ ╩ ╩╚═╝╚═╝╚═╝
'GET /': { action: 'view-homepage-or-redirect' },
'GET /': { action: 'view-homepage-or-redirect', locals: { page: 'homepage' } },
'/blog': 'https://medium.com/fleetdm',
@@ -31,9 +31,11 @@ module.exports.routes = {
'/company/about': '/blog', // FUTURE: brief "about" page explaining the origins of the company
'/company/stewardship': 'https://github.com/fleetdm/fleet', // FUTURE: page about how we approach open source and our commitments to the community
'GET /company/contact': { action: 'view-contact' },
'GET /company/contact': { action: 'view-contact', locals: { page: 'contact' } },
'GET /get-started': { action: 'view-get-started', locals: { page: 'get-started' } },
'/try-fleet': 'https://github.com/fleetdm/fleet/blob/master/README.md',
// '/try-fleet': '/get-started', FUTURE: uncomment this line and delete the line above to allow navigation to the get-started page
'/documentation': 'https://github.com/fleetdm/fleet/tree/master/docs',
'/contribute': 'https://github.com/fleetdm/fleet/tree/master/docs/3-Contribution',
'/hall-of-fame': 'https://github.com/fleetdm/fleet/pulse',
+12 -2
View File
@@ -46,12 +46,20 @@
<link rel="stylesheet" href="/dependencies/fontawesome.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/mixins-and-variables/typography.css">
<link rel="stylesheet" href="/styles/pages/get-started.css">
<!--STYLES END-->
</head>
<body>
<div purpose="page-wrap">
<div style="max-width: 1440px" class="container-fluid d-flex justify-content-between align-items-center pt-3 pb-3 px-4 px-sm-5" purpose="page-header">
<% /* The homepage-header on the homepage has unique styles and images */ %>
<% if (page === 'homepage') { %>
<div style="max-width: 1440px" class="homepage-header container-fluid d-flex justify-content-between align-items-center pt-3 pb-3 px-4 px-sm-5" purpose="page-header">
<img alt="Fleet logo" src="/images/logo-white-162x92@2x.png" style="height: 92px; width: 162px;"/>
<% /* The header on all pages other than the homepage have the same images and styles */ %>
<% } else { %>
<div style="max-width: 1440px" class="header container-fluid d-flex justify-content-between align-items-center px-4 px-sm-5" purpose="page-header">
<img alt="Fleet logo" src="/images/logo-blue-162x92@2x.png" style="height: 92px; width: 162px;"/>
<% } %>
<div class="d-flex d-lg-none">
<button style="font-size: 16px; text-decoration: none;" class="header-btn btn btn-link d-flex align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<span class="mr-2">Menu</span>
@@ -96,7 +104,9 @@
<a target="_blank" href="/blog" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none;line-height: 23px;">Blog</a>
<!-- <a href="/company/contact" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none;line-height: 23px;">Contact</a> -->
<a target="_blank" href="https://github.com/fleetdm/fleet" class="header-link d-flex align-items-center px-3 py-2" style=" text-decoration: none;line-height: 23px;">
<img alt="A white octocat icon representing the GitHub brand." src="/images/github-mark-white-24x24@2x.png" style="width: 24px;" />
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9633 0.5C5.3578 0.5 0 5.8578 0 12.4633C0 17.7477 3.44954 22.2248 8.14679 23.8394C8.73394 23.9128 8.95413 23.5459 8.95413 23.2523C8.95413 22.9587 8.95413 22.2248 8.95413 21.1972C5.65138 21.9312 4.91743 19.5826 4.91743 19.5826C4.40367 18.1881 3.59633 17.8211 3.59633 17.8211C2.49541 17.0872 3.66972 17.0872 3.66972 17.0872C4.84404 17.1606 5.50459 18.3349 5.50459 18.3349C6.6055 20.1697 8.29358 19.656 8.95413 19.3624C9.02752 18.555 9.3945 18.0413 9.68807 17.7477C7.04587 17.4541 4.25688 16.4266 4.25688 11.8028C4.25688 10.4817 4.69725 9.45413 5.50459 8.57339C5.43119 8.35321 4.99083 7.1055 5.65138 5.49083C5.65138 5.49083 6.6789 5.19725 8.95413 6.73853C9.90826 6.44495 10.9358 6.37156 11.9633 6.37156C12.9908 6.37156 14.0183 6.51835 14.9725 6.73853C17.2477 5.19725 18.2752 5.49083 18.2752 5.49083C18.9358 7.1055 18.4954 8.35321 18.422 8.64679C19.156 9.45413 19.6697 10.555 19.6697 11.8761C19.6697 16.5 16.8807 17.4541 14.2385 17.7477C14.6789 18.1147 15.0459 18.8486 15.0459 19.9495C15.0459 21.5642 15.0459 22.8119 15.0459 23.2523C15.0459 23.5459 15.2661 23.9128 15.8532 23.8394C20.6239 22.2248 24 17.7477 24 12.4633C23.9266 5.8578 18.5688 0.5 11.9633 0.5Z" fill="#192147"/>
</svg>
<span class="ml-2">GitHub</span>
</a>
</div>
+3
View File
@@ -0,0 +1,3 @@
<div id="get-started">
</div>
+2 -2
View File
@@ -721,7 +721,7 @@
<div class="col-6 col-md-8 d-flex">
<img alt="a bullet point ellipse" src="/images/ellipse-6x8@2x.png" class="mt-2" style="width: 6.4px; height: 8px;"/>
<p class="ml-2 my-0">
Osquery agent autoupdates*
Osquery agent autoupdates†
</p>
</div>
<div class="col-3 col-md-2">
@@ -735,7 +735,7 @@
<div class="col-6 col-md-8 d-flex">
<img alt="a bullet point ellipse" src="/images/ellipse-6x8@2x.png" class="mt-2" style="width: 6.4px; height: 8px;"/>
<p class="ml-2 my-0">
Self-hosted agent autoupdates*
Self-hosted agent autoupdates†
</p>
</div>
<div class="col-3 col-md-2">