mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 08:55:24 +00:00
Website: add <call-to-action> component (#6244)
* Website: add <call-to-action> component * Lint fixes
This commit is contained in:
Eric
GitHub
parent
286637f123
commit
73db2ae15e
19
website/assets/images/call-to-action-banner-background.svg
vendored
Normal file
19
website/assets/images/call-to-action-banner-background.svg
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
<svg width="900" height="281" viewBox="0 0 900 281" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M900.364 -126.394C675.48 -218.028 520.872 -227.072 436.54 -153.528C310.054 -43.2121 385.927 18.7557 290.715 161.043C195.504 303.33 12.0844 194.592 -105.326 281.917C-183.6 340.136 -197.377 641.088 -146.656 745.353L900.364 746.945V-126.394Z" fill="url(#paint0_linear_4372_12320)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1054.37 91.2689C829.482 -0.364415 674.874 -9.40902 590.542 64.1351C464.055 174.451 539.929 236.421 444.717 378.706C349.505 520.99 166.086 412.255 48.6753 499.571C-29.5985 557.796 -43.3752 639.041 7.34524 743.306L1054.37 710.841V91.2689Z" fill="url(#paint1_linear_4372_12320)" fill-opacity="0.8"/>
|
||||
<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M1441.28 76.14C1216.39 -15.4933 1061.78 -24.5379 977.453 49.0062C850.966 159.322 926.84 221.29 831.628 363.577C736.416 505.864 552.997 397.126 435.586 484.442C357.313 542.667 343.536 623.912 394.256 728.177L1441.28 725.52V76.14Z" fill="url(#paint2_linear_4372_12320)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_4372_12320" x1="855.433" y1="331.447" x2="409.921" y2="-327.879" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3F2B6F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#3F2B6F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_4372_12320" x1="1007.71" y1="740.06" x2="561.531" y2="80.5799" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3F2B6F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#3F2B6F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_4372_12320" x1="902.809" y1="-0.111328" x2="902.807" y2="728.177" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AE6DDF"/>
|
||||
<stop offset="1" stop-color="#6A67FE"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
115
website/assets/js/components/call-to-action.component.js
vendored
Normal file
115
website/assets/js/components/call-to-action.component.js
vendored
Normal file
@ -0,0 +1,115 @@
|
||||
/**
|
||||
* <call-to-action>
|
||||
* -----------------------------------------------------------------------------
|
||||
* A customizeable call to action.
|
||||
*
|
||||
* @type {Component}
|
||||
*
|
||||
* -----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
parasails.registerComponent('callToAction', {
|
||||
// ╔═╗╦═╗╔═╗╔═╗╔═╗
|
||||
// ╠═╝╠╦╝║ ║╠═╝╚═╗
|
||||
// ╩ ╩╚═╚═╝╩ ╚═╝
|
||||
props: [
|
||||
'title', // Required: The title of this call-to-action
|
||||
'text', // Required: The text of the call to action
|
||||
'primaryButtonText', // Required: The text of the call to action's button
|
||||
'primaryButtonHref', // Required: the url that the call to action button leads
|
||||
'secondaryButtonText', // Optional: if provided with a `secondaryButtonHref`, a second button will be added to the call to action with this value as the button text
|
||||
'secondaryButtonHref', // Optional: if provided with a `secondaryButtonText`, a second button will be added to the call to action with this value as the href
|
||||
],
|
||||
|
||||
// ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗
|
||||
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
|
||||
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
|
||||
data: function (){
|
||||
let callToActionTitle = '';
|
||||
let callToActionText = '';
|
||||
let calltoActionPrimaryBtnText = '';
|
||||
let calltoActionPrimaryBtnHref = '';
|
||||
let calltoActionSecondaryBtnText = '';
|
||||
let calltoActionSecondaryBtnHref = '';
|
||||
|
||||
return {
|
||||
callToActionTitle,
|
||||
callToActionText,
|
||||
calltoActionPrimaryBtnText,
|
||||
calltoActionPrimaryBtnHref,
|
||||
calltoActionSecondaryBtnText,
|
||||
calltoActionSecondaryBtnHref
|
||||
};
|
||||
},
|
||||
|
||||
// ╦ ╦╔╦╗╔╦╗╦
|
||||
// ╠═╣ ║ ║║║║
|
||||
// ╩ ╩ ╩ ╩ ╩╩═╝
|
||||
template: `
|
||||
<div>
|
||||
<div purpose="cta-content" class="text-white text-center">
|
||||
<div purpose="cta-title">{{callToActionTitle}}</div>
|
||||
<div purpose="cta-text">{{callToActionText}}</div>
|
||||
</div>
|
||||
<div purpose="cta-buttons" class="mx-auto d-flex flex-sm-row flex-column justify-content-center">
|
||||
<a purpose="primary-button" :class="[ secondaryButtonHref ? 'mr-sm-4 ml-sm-0' : '']" class="text-white d-sm-flex align-items-center justify-content-center btn btn-primary mx-auto":href="calltoActionPrimaryBtnHref">{{calltoActionPrimaryBtnText}}</a>
|
||||
<span class="d-flex" v-if="secondaryButtonHref && secondaryButtonText">
|
||||
<a purpose="secondary-button" class="btn btn-lg text-white btn-white mr-2 pl-0 mx-auto mx-sm-0 mt-2 mt-sm-0" target="_blank" :href="calltoActionSecondaryBtnHref">{{calltoActionSecondaryBtnText}}</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
|
||||
// ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
|
||||
// ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
|
||||
beforeMount: function() {
|
||||
|
||||
},
|
||||
mounted: async function() {
|
||||
if (this.title) {
|
||||
this.callToActionTitle = this.title;
|
||||
} else {
|
||||
throw new Error('Incomplete usage of <call-to-action>: Please provide a `title` example: title="Secure laptops & servers"');
|
||||
}
|
||||
if (this.text) {
|
||||
this.callToActionText = this.text;
|
||||
} else {
|
||||
throw new Error('Incomplete usage of <call-to-action>: Please provide a `text` example: text="Get up and running with a test environment of Fleet within minutes"');
|
||||
}
|
||||
if (this.primaryButtonText) {
|
||||
this.calltoActionPrimaryBtnText = this.primaryButtonText;
|
||||
} else {
|
||||
throw new Error('Incomplete usage of <call-to-action>: Please provide a `primaryButtonText`. example: primary-button-text="Get started"');
|
||||
}
|
||||
if (this.primaryButtonHref) {
|
||||
this.calltoActionPrimaryBtnHref = this.primaryButtonHref;
|
||||
} else {
|
||||
throw new Error('Incomplete usage of <call-to-action>: Please provide a `primaryButtonHref` example: primary-button-href="/get-started?try-it-now"');
|
||||
}
|
||||
if (this.secondaryButtonText) {
|
||||
this.calltoActionSecondaryBtnText = this.secondaryButtonText;
|
||||
}
|
||||
if (this.secondaryButtonHref) {
|
||||
this.calltoActionSecondaryBtnHref = this.secondaryButtonHref;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
title: function(unused) { throw new Error('Changes to `title` are not currently supported in <call-to-action>!'); },
|
||||
text: function(unused) { throw new Error('Changes to `text` are not currently supported in <call-to-action>!'); },
|
||||
primaryButtonText: function(unused) { throw new Error('Changes to `primaryButtonText` are not currently supported in <call-to-action>!'); },
|
||||
primaryButtonHref: function(unused) { throw new Error('Changes to `primaryButtonHref` are not currently supported in <call-to-action>!'); },
|
||||
secondaryButtonText: function(unused) { throw new Error('Changes to `secondaryButtonText` are not currently supported in <call-to-action>!'); },
|
||||
secondaryButtonHref: function(unused) { throw new Error('Changes to `secondaryButtonHref` are not currently supported in <call-to-action>!'); },
|
||||
},
|
||||
beforeDestroy: function() {
|
||||
//…
|
||||
},
|
||||
|
||||
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
|
||||
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
|
||||
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
|
||||
methods: {
|
||||
//…
|
||||
}
|
||||
});
|
||||
88
website/assets/styles/components/call-to-action.component.less
vendored
Normal file
88
website/assets/styles/components/call-to-action.component.less
vendored
Normal file
@ -0,0 +1,88 @@
|
||||
|
||||
/**
|
||||
* <call-to-action>
|
||||
*
|
||||
* App-wide styles for our <call-to-action> component.
|
||||
*/
|
||||
[parasails-component='call-to-action'] {
|
||||
background-image: url('/images/call-to-action-banner-background.svg');
|
||||
background-position-x: center;
|
||||
background-size: cover;
|
||||
background-color: #192147;
|
||||
padding: 60px 90px;
|
||||
border-radius: 16px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
[purpose='cta-content'] {
|
||||
color: #FFF;
|
||||
margin-bottom: 24px;
|
||||
[purpose='cta-title'] {
|
||||
font-weight: 900;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
[purpose='cta-text'] {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='cta-buttons'] {
|
||||
[purpose='primary-button'] {
|
||||
padding: 16px 63px;
|
||||
}
|
||||
[purpose='secondary-button'] {
|
||||
.btn-animated-arrow-red();
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 991px) {
|
||||
padding: 60px 45px;
|
||||
[purpose='cta-content'] {
|
||||
[purpose='cta-title'] {
|
||||
font-weight: 900;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
[purpose='cta-text'] {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
[purpose='cta-buttons'] {
|
||||
[purpose='primary-button'] {
|
||||
padding: 16px 63px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 576px) {
|
||||
padding: 60px 24px;
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
[purpose='cta-buttons'] {
|
||||
[purpose='primary-button'] {
|
||||
padding: 16px 63px;
|
||||
}
|
||||
}
|
||||
[purpose='cta-content'] {
|
||||
|
||||
[purpose='cta-title'] {
|
||||
font-weight: 900;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
[purpose='cta-text'] {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
website/assets/styles/importer.less
vendored
1
website/assets/styles/importer.less
vendored
@ -23,6 +23,7 @@
|
||||
@import 'components/modal.component.less';
|
||||
@import 'components/cloud-error.component.less';
|
||||
@import 'components/bar-chart.component.less';
|
||||
@import 'components/call-to-action.component.less';
|
||||
|
||||
// Per-page styles
|
||||
@import 'pages/homepage.less';
|
||||
|
||||
1
website/scripts/build-static-content.js
vendored
1
website/scripts/build-static-content.js
vendored
@ -200,6 +200,7 @@ module.exports = {
|
||||
// > • What about images referenced in markdown files? :: They need to be referenced using an absolute URL src-- e.g.  See also https://github.com/fleetdm/fleet/issues/706#issuecomment-884641081 for reasoning.
|
||||
// > • What about GitHub-style emojis like `:white_check_mark:`? :: Use actual unicode emojis instead. Need to revisit this? Visit https://github.com/fleetdm/fleet/pull/1380/commits/19a6e5ffc70bf41569293db44100e976f3e2bda7 for more info.
|
||||
let mdString = await sails.helpers.fs.read(pageSourcePath);
|
||||
mdString = mdString.replace(/(<call-to-action[\s\S]+[^>\n+])\n+(>)/g, '$1$2'); // « Removes any newlines that might exist before the closing `>` when the <call-to-action> compontent is added to markdown files.
|
||||
mdString = mdString.replace(/(```)([a-zA-Z0-9\-]*)(\s*\n)/g, '$1\n' + '<!-- __LANG=%' + '$2' + '%__ -->' + '$3'); // « Based on the github-flavored markdown's language annotation, (e.g. ```js```) add a temporary marker to code blocks that can be parsed post-md-compilation when this is HTML. Note: This is an HTML comment because it is easy to over-match and "accidentally" add it underneath each code block as well (being an HTML comment ensures it doesn't show up or break anything). For more information, see https://github.com/uncletammy/doc-templater/blob/2969726b598b39aa78648c5379e4d9503b65685e/lib/compile-markdown-tree-from-remote-git-repo.js#L198-L202
|
||||
let htmlString = await sails.helpers.strings.toHtml(mdString);
|
||||
htmlString = (// « Add the appropriate class to the `<code>` based on the temporary "LANG" markers that were just added above
|
||||
|
||||
Loading…
Reference in New Issue
Block a user