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

Merge pull request #23210 from sftim/20200816_add_cncf_landscape_shortcode 

Add cncf-landscape shortcode
This commit is contained in:
Kubernetes Prow Robot 2020-09-15 10:52:08 -07:00 committed by GitHub
parent 34e2e454f3 fb127402c6
commit c7dbfdd317
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
content/en/partners/_index.html
View File

@ -7,7 +7,6 @@ cid: partners
---
<section id="users">
<main class="main-section">
<h5>Kubernetes works with partners to create a strong, vibrant codebase that supports a spectrum of complementary platforms.</h5>
<div class="col-container">
<div class="col-nav">
@ -17,7 +16,7 @@ cid: partners
</h5>
<br>Vetted service providers with deep experience helping enterprises successfully adopt Kubernetes.
<br><br><br>
<button class="button" id="kcsp" onclick="updateSrc(this.id)">See KCSP Partners</button>
<button class="button landscape-trigger landscape-default" data-landscape-types="kubernetes-certified-service-provider" id="kcsp">See KCSP Partners</button>
<br><br>Interested in becoming a
<a href="https://www.cncf.io/certification/kcsp/">KCSP</a>?
</center>
@ -28,7 +27,7 @@ cid: partners
<b>Certified Kubernetes Distributions, Hosted Platforms, and Installers</b>
</h5>Software conformance ensures that every vendor’s version of Kubernetes supports the required APIs.
<br><br><br>
<button class="button" id="conformance" onclick="updateSrc(this.id)">See Conformance Partners</button>
<button class="button landscape-trigger" data-landscape-types="certified-kubernetes-distribution,certified-kubernetes-hosted,certified-kubernetes-installer" id="conformance">See Conformance Partners</button>
<br><br>Interested in becoming
<a href="https://www.cncf.io/certification/software-conformance/">Kubernetes Certified</a>?
</center>
@ -40,57 +39,13 @@ cid: partners
</h5>
<br>Vetted training providers who have deep experience in cloud native technology training.
<br><br><br>
<button class="button" id="ktp" onclick="updateSrc(this.id)">See KTP Partners</button>
<button class="button landscape-trigger" data-landscape-types="kubernetes-training-partner" id="ktp">See KTP Partners</button>
<br><br>Interested in becoming a
<a href="https://www.cncf.io/certification/training/">KTP</a>?
</center>
</div>
</div>
<script crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var defaultLink = "https://landscape.cncf.io/category=kubernetes-certified-service-provider&format=card-mode&grouping=category&embed=yes";
var firstLink = "https://landscape.cncf.io/category=certified-kubernetes-distribution,certified-kubernetes-hosted,certified-kubernetes-installer&format=card-mode&grouping=category&embed=yes";
var secondLink = "https://landscape.cncf.io/category=kubernetes-training-partner&format=card-mode&grouping=category&embed=yes";
function updateSrc(buttonId) {
if (buttonId == "kcsp") {
$("#landscape").attr("src", defaultLink);
window.location.hash = "#kcsp";
}
if (buttonId == "conformance") {
$("#landscape").attr("src", firstLink);
window.location.hash = "#conformance";
}
if (buttonId == "ktp") {
$("#landscape").attr("src", secondLink);
window.location.hash = "#ktp";
}
}
// Automatically load the correct iframe based on the URL fragment
document.addEventListener("DOMContentLoaded", function () {
var showContent = "kcsp";
if (window.location.hash) {
console.log("hash is:", window
.location
.hash
.substring(1));
showContent = window
.location
.hash
.substring(1);
}
updateSrc(showContent);
});
</script>
<body>
<div id="frameHolder">
<iframe frameborder="0" id="landscape" scrolling="no" src="" style="width: 1px; min-width: 100%" title="CNCF Landscape"></iframe>
<script src="https://landscape.cncf.io/iframeResizer.js"></script>
</div>
</body>
</main>
{{< cncf-landscape helpers=true >}}
</section>
<style>

63
layouts/shortcodes/cncf-landscape.html Normal file
View File

@ -0,0 +1,63 @@
{{ $helpers := .Get "helpers" }}
{{ if not (or (eq $helpers true) (eq $helpers false)) }}
{{ errorf "must set helpers to a boolean" }}
{{ else }}
<!-- CNCF Landscape helpers -->
{{ if $helpers }}
<script>
function updateLandscapeSource(button,shouldUpdateFragment) {
console.log({button: button,shouldUpdateFragment: shouldUpdateFragment});
try {
if(shouldUpdateFragment) {
window.location.hash = "#"+button.id;
// hash change handler will call us again with shouldUpdateFragment set false
} else {
var landscapeElements = document.querySelectorAll("#landscape");
let categories=button.dataset.landscapeTypes;
let link = "https://landscape.cncf.io/category="+encodeURIComponent(categories)+"&format=card-mode&grouping=category&embed=yes";
landscapeElements[0].src = link;
}
}
catch(err) {
console.log({message: "error handling Landscape switch", error: err})
}
}
// Automatically load the correct iframe based on the URL fragment
document.addEventListener("DOMContentLoaded", function () {
let hashChangeHandler = () => {
if (window.location.hash) {
let selectedTriggerElements = document.querySelectorAll(".landscape-trigger"+window.location.hash);
if (selectedTriggerElements.length == 1) {
landscapeSource = selectedTriggerElements[0];
console.log("Updating Landscape source based on fragment:", window
.location
.hash
.substring(1));
updateLandscapeSource(landscapeSource,false);
}
}
}
var landscapeTriggerElements = document.querySelectorAll(".landscape-trigger");
landscapeTriggerElements.forEach(element => {
element.onclick = function() {
updateLandscapeSource(element,true);
};
});
var landscapeDefaultElements = document.querySelectorAll(".landscape-trigger.landscape-default");
if (landscapeDefaultElements.length == 1) {
let defaultLandscapeSource = landscapeDefaultElements[0];
updateLandscapeSource(defaultLandscapeSource,false);
}
window.addEventListener("hashchange", hashChangeHandler, false);
/* handle initially-set fragment */
hashChangeHandler();
});
</script>
{{- end -}}
<div id="frameHolder">
<iframe frameborder="0" id="landscape" scrolling="no" src="" style="width: 1px; min-width: 100%" title="CNCF Landscape"></iframe>
<script src="https://landscape.cncf.io/iframeResizer.js"></script>
</div>
{{- end -}}