crossplane
/
docs
mirror of https://github.com/crossplane/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add new prompt to join Slack workspace 

Signed-off-by: Connor Chan <connorjosephchan@gmail.com>
This commit is contained in:
Connor Chan 2020-10-29 16:31:17 -07:00
parent 56fa62e6ad
commit 0a0043f4ed
No known key found for this signature in database
GPG Key ID: C61FF92DDE2DA2A6
3 changed files with 128 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/footer.html
View File

@ -23,6 +23,7 @@
<a href="https://www.linuxfoundation.org/trademark-usage/">Trademark Usage</a> page.
</p>
</div>
<script src="{{ "/js/slack-popup.js" | relative_url }}"></script>
{% if page.layout == 'docs' %}
<script src="{{ "/js/anchor.js" | relative_url }}"></script>
<script>

25
images/slack-logo.svg Normal file
View File

@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" width="138" height="37" viewBox="0 0 138 37">
<g fill="none" fill-rule="evenodd">
<g fill-rule="nonzero">
<g>
<g fill="#000">
<path d="M.139 27.336L1.858 23.3c1.858 1.402 4.325 2.13 6.766 2.13 1.802 0 2.939-.7 2.939-1.765-.028-2.972-10.787-.645-10.87-8.103-.028-3.785 3.3-6.701 8.014-6.701 2.8 0 5.601.7 7.597 2.299l-1.608 4.121c-1.83-1.177-4.104-2.018-6.267-2.018-1.47 0-2.44.7-2.44 1.598.028 2.916 10.87 1.318 10.98 8.44 0 3.868-3.243 6.588-7.902 6.588-3.41 0-6.544-.813-8.928-2.552M66.105 21.841c-.86 1.514-2.468 2.552-4.326 2.552-2.745 0-4.963-2.243-4.963-5.02 0-2.775 2.218-5.018 4.963-5.018 1.858 0 3.466 1.038 4.326 2.552l4.742-2.664c-1.775-3.196-5.186-5.383-9.068-5.383-5.74 0-10.398 4.71-10.398 10.514 0 5.804 4.659 10.514 10.398 10.514 3.91 0 7.293-2.159 9.068-5.383l-4.742-2.664zM19.355.14H25.289V29.495H19.355zM73.176.14L73.176 29.495 79.11 29.495 79.11 20.692 86.153 29.495 93.75 29.495 84.794 19.037 93.085 9.28 85.82 9.28 79.11 17.383 79.11.14zM42.924 21.897c-.86 1.43-2.634 2.496-4.63 2.496-2.746 0-4.964-2.243-4.964-5.02 0-2.775 2.218-5.018 4.963-5.018 1.997 0 3.771 1.122 4.63 2.58v4.962zm0-12.617v2.384c-.97-1.655-3.383-2.804-5.906-2.804-5.213 0-9.317 4.654-9.317 10.486 0 5.832 4.104 10.542 9.317 10.542 2.523 0 4.935-1.15 5.906-2.804v2.383h5.934V9.28h-5.934z" transform="translate(-536 -388) translate(536 388.5) translate(44 .5)"/>
</g>
<g>
<g fill="#E01E5A">
<path d="M7.605 3.805c0 1.985-1.65 3.588-3.69 3.588C1.872 7.393.223 5.79.223 3.805c0-1.984 1.65-3.588 3.69-3.588h3.69v3.588zM9.45 3.805c0-1.984 1.65-3.588 3.69-3.588 2.041 0 3.69 1.604 3.69 3.588v8.97c0 1.985-1.649 3.588-3.69 3.588-2.04 0-3.69-1.603-3.69-3.588v-8.97z" transform="translate(-536 -388) translate(536 388.5) translate(0 .5) translate(0 17.94)"/>
</g>
<g fill="#36C5F0">
<path d="M13.14 7.339c-2.04 0-3.69-1.604-3.69-3.588S11.1.163 13.14.163c2.041 0 3.69 1.604 3.69 3.588V7.34h-3.69zM13.14 9.16c2.041 0 3.69 1.604 3.69 3.588s-1.649 3.588-3.69 3.588H3.886c-2.04 0-3.69-1.604-3.69-3.588s1.65-3.588 3.69-3.588h9.254z" transform="translate(-536 -388) translate(536 388.5) translate(0 .5)"/>
</g>
<g fill="#2EB67D">
<path d="M9.478 12.748c0-1.984 1.65-3.588 3.69-3.588 2.041 0 3.69 1.604 3.69 3.588s-1.649 3.588-3.69 3.588h-3.69v-3.588zM7.633 12.748c0 1.984-1.65 3.588-3.69 3.588-2.042 0-3.691-1.604-3.691-3.588V3.751c0-1.984 1.65-3.588 3.69-3.588 2.041 0 3.69 1.604 3.69 3.588v8.997z" transform="translate(-536 -388) translate(536 388.5) translate(0 .5) translate(18.452)"/>
</g>
<g fill="#ECB22E">
<path d="M3.942 9.187c2.041 0 3.69 1.604 3.69 3.588 0 1.985-1.649 3.588-3.69 3.588-2.04 0-3.69-1.603-3.69-3.588V9.187h3.69zM3.942 7.393c-2.04 0-3.69-1.603-3.69-3.588 0-1.984 1.65-3.588 3.69-3.588h9.254c2.041 0 3.69 1.604 3.69 3.588 0 1.985-1.649 3.588-3.69 3.588H3.942z" transform="translate(-536 -388) translate(536 388.5) translate(0 .5) translate(18.452 17.94)"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

102
js/slack-popup.js Normal file
View File

@ -0,0 +1,102 @@
(function () {
function setDismissed() {
window.localStorage.setItem('dismissedSlackPopup', 'true');
}
function checkDismissed() {
return window.localStorage.getItem('dismissedSlackPopup') === 'true';
}
function hidePopup() {
// IE fix
document.querySelector('.slack-popup-container').innerHTML = '';
if (document.querySelector('.slack-popup-container') !== null) {
document.querySelector('.slack-popup-container').remove();
}
if (document.querySelector('.modal-overlay') !== null) {
document.querySelector('.modal-overlay').remove();
}
}
function showPopup() {
if (document.querySelector('.modal-overlay') === null) {
var overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.onclick = function () {
hidePopup();
};
document.querySelector('body').appendChild(overlay);
}
if (document.querySelector('.slack-popup-container') === null) {
var popup = document.createElement('div');
popup.role = 'dialog';
popup.tabIndex = '-1';
popup.className = 'slack-popup-container';
var popupHeader = document.createElement('div');
popupHeader.className = 'slack-popup-header';
var truckImage = document.createElement('img');
truckImage.alt = 'Crossplane truck';
truckImage.className = 'slack-popup-truck';
truckImage.src = '/images/crossplane-truck.svg';
popupHeader.appendChild(truckImage);
popup.appendChild(popupHeader);
var popupBody = document.createElement('div');
popupBody.className = 'slack-popup-body';
var slackLogo = document.createElement('img');
slackLogo.src = '/images/slack-logo.svg';
var headerText = document.createElement('h2');
headerText.innerText = 'Get answers quick on our Slack channel';
var bodyText = document.createElement('p');
bodyText.innerText =
'Hi there! Did you know we have an official Slack Channel? It’s the easiest way to get help and when you join you will be directly connected with our vibrant community.';
var btnWrap = document.createElement('div');
btnWrap.className = 'slack-popup-btn-wrapper';
var ctaBtn = document.createElement('a');
ctaBtn.classList.add('slack-popup-button', 'slack-popup-cta');
ctaBtn.href = 'https://slack.crossplane.io/';
ctaBtn.innerHTML = '<img src="/images/slack-white.svg" /><span>Join Crossplane Slack</span>';
var dismissBtn = document.createElement('a');
dismissBtn.classList.add('slack-popup-button', 'slack-popup-dismiss');
dismissBtn.innerText = 'I’m not interested in joining';
dismissBtn.onclick = function () {
hidePopup();
};
btnWrap.appendChild(ctaBtn);
btnWrap.appendChild(dismissBtn);
var popupStyles = document.createElement('style');
popupStyles.innerHTML =
'.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(23,43,77,.45);z-index:100}.slack-popup-container{position:fixed;z-index:110;width:500px;height:600px;left:50%;top:50%;background:#fff;border-radius:10px;transform:translate(-50%,-50%);box-shadow:rgba(80,90,114,.7) 0 2px 5px 0;outline:0;color:#183d54}.slack-popup-container .slack-popup-header{height:147px;background-color:#183d54;position:relative;border-radius: 10px 10px 0 0;}.slack-popup-container .slack-popup-truck{width:231px;height:212px;position:absolute;top:-50px;left:50%;margin-left:-115.5px}.slack-popup-container .slack-popup-body{padding:40px}.slack-popup-container .slack-popup-body>img{width:138px;height:36px}.slack-popup-container .slack-popup-body{text-align:center}.slack-popup-container .slack-popup-body h2{line-height:40px;margin-top:20px;font-weight:900}.slack-popup-container .slack-popup-body p{font-size:16px;line-height:30px}.slack-popup-container .slack-popup-btn-wrapper .slack-popup-button{display:block;width:300px;cursor:pointer;border-radius:20px;padding:10px 0;text-decoration:none}.slack-popup-container .slack-popup-btn-wrapper .slack-popup-cta{background:#3bbdc4;color:#fff;margin:0 auto 10px auto}.slack-popup-container .slack-popup-btn-wrapper .slack-popup-cta img{height:20px;width:20px;margin-right:15px;vertical-align:text-top}.slack-popup-container .slack-popup-btn-wrapper .slack-popup-dismiss{color:#929394;border:1px solid #dcdcde;margin:0 auto} @media (max-width:48em){.slack-popup-container{width:320px!important;height:390px!important}.slack-popup-container .slack-popup-header{height:70px!important}.slack-popup-container .slack-popup-header .slack-popup-truck{width:115px;height:106px;top:-25px;margin-left:-52.5px}.slack-popup-container .slack-popup-body{padding:20px}.slack-popup-container .slack-popup-body>img{width:80px!important;height:auto!important}.slack-popup-container .slack-popup-body h2{line-height:20px!important;margin-top:10px!important;font-size:20px}.slack-popup-container .slack-popup-body p{font-size:12px!important;line-height:21px!important}.slack-popup-container .slack-popup-body .slack-popup-btn-wrapper .slack-popup-button{width:220px;font-size:12px}.slack-popup-container .slack-popup-btn-wrapper .slack-popup-cta img{height:12px;width:12px;margin-right:10px}}';
popupBody.appendChild(slackLogo);
popupBody.appendChild(headerText);
popupBody.appendChild(bodyText);
popupBody.appendChild(btnWrap);
popupBody.appendChild(popupStyles);
popup.appendChild(popupBody);
document.querySelector('body').appendChild(popup);
}
}
setTimeout(function () {
if (!checkDismissed()) {
showPopup();
setDismissed();
}
}, 30000);
})();