Skip to content

Commit fb12740

Browse files
author
Tim Bannister
committed
Add cncf-landscape shortcode
and adjust /partners/ to use it.
1 parent 7b2d09a commit fb12740

File tree

2 files changed

+67
-49
lines changed

2 files changed

+67
-49
lines changed

‎content/en/partners/_index.html

Lines changed: 4 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
---
88

99
<section id="users">
10-
<main class="main-section">
1110
<h5>Kubernetes works with partners to create a strong, vibrant codebase that supports a spectrum of complementary platforms.</h5>
1211
<div class="col-container">
1312
<div class="col-nav">
@@ -17,7 +16,7 @@ <h5>
1716
</h5>
1817
<br>Vetted service providers with deep experience helping enterprises successfully adopt Kubernetes.
1918
<br><br><br>
20-
<button class="button" id="kcsp" onclick="updateSrc(this.id)">See KCSP Partners</button>
19+
<button class="button landscape-trigger landscape-default" data-landscape-types="kubernetes-certified-service-provider" id="kcsp">See KCSP Partners</button>
2120
<br><br>Interested in becoming a
2221
<a href="https://www.cncf.io/certification/kcsp/">KCSP</a>?
2322
</center>
@@ -28,7 +27,7 @@ <h5>
2827
<b>Certified Kubernetes Distributions, Hosted Platforms, and Installers</b>
2928
</h5>Software conformance ensures that every vendor’s version of Kubernetes supports the required APIs.
3029
<br><br><br>
31-
<button class="button" id="conformance" onclick="updateSrc(this.id)">See Conformance Partners</button>
30+
<button class="button landscape-trigger" data-landscape-types="certified-kubernetes-distribution,certified-kubernetes-hosted,certified-kubernetes-installer" id="conformance">See Conformance Partners</button>
3231
<br><br>Interested in becoming
3332
<a href="https://www.cncf.io/certification/software-conformance/">Kubernetes Certified</a>?
3433
</center>
@@ -40,57 +39,13 @@ <h5>
4039
</h5>
4140
<br>Vetted training providers who have deep experience in cloud native technology training.
4241
<br><br><br>
43-
<button class="button" id="ktp" onclick="updateSrc(this.id)">See KTP Partners</button>
42+
<button class="button landscape-trigger" data-landscape-types="kubernetes-training-partner" id="ktp">See KTP Partners</button>
4443
<br><br>Interested in becoming a
4544
<a href="https://www.cncf.io/certification/training/">KTP</a>?
4645
</center>
4746
</div>
4847
</div>
49-
<script crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
50-
<script type="text/javascript">
51-
52-
var defaultLink = "https://landscape.cncf.io/category=kubernetes-certified-service-provider&format=card-mode&grouping=category&embed=yes";
53-
var firstLink = "https://landscape.cncf.io/category=certified-kubernetes-distribution,certified-kubernetes-hosted,certified-kubernetes-installer&format=card-mode&grouping=category&embed=yes";
54-
var secondLink = "https://landscape.cncf.io/category=kubernetes-training-partner&format=card-mode&grouping=category&embed=yes";
55-
56-
function updateSrc(buttonId) {
57-
if (buttonId == "kcsp") {
58-
$("#landscape").attr("src", defaultLink);
59-
window.location.hash = "#kcsp";
60-
}
61-
if (buttonId == "conformance") {
62-
$("#landscape").attr("src", firstLink);
63-
window.location.hash = "#conformance";
64-
}
65-
if (buttonId == "ktp") {
66-
$("#landscape").attr("src", secondLink);
67-
window.location.hash = "#ktp";
68-
}
69-
}
70-
71-
// Automatically load the correct iframe based on the URL fragment
72-
document.addEventListener("DOMContentLoaded", function () {
73-
var showContent = "kcsp";
74-
if (window.location.hash) {
75-
console.log("hash is:", window
76-
.location
77-
.hash
78-
.substring(1));
79-
showContent = window
80-
.location
81-
.hash
82-
.substring(1);
83-
}
84-
updateSrc(showContent);
85-
});
86-
</script>
87-
<body>
88-
<div id="frameHolder">
89-
<iframe frameborder="0" id="landscape" scrolling="no" src="" style="width: 1px; min-width: 100%" title="CNCF Landscape"></iframe>
90-
<script src="https://landscape.cncf.io/iframeResizer.js"></script>
91-
</div>
92-
</body>
93-
</main>
48+
{{< cncf-landscape helpers=true >}}
9449
</section>
9550

9651
<style>

‎layouts/shortcodes/cncf-landscape.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{{ $helpers := .Get "helpers" }}
2+
{{ if not (or (eq $helpers true) (eq $helpers false)) }}
3+
{{ errorf "must set helpers to a boolean" }}
4+
{{ else }}
5+
<!-- CNCF Landscape helpers -->
6+
7+
{{ if $helpers }}
8+
<script>
9+
function updateLandscapeSource(button,shouldUpdateFragment) {
10+
console.log({button: button,shouldUpdateFragment: shouldUpdateFragment});
11+
try {
12+
if(shouldUpdateFragment) {
13+
window.location.hash = "#"+button.id;
14+
// hash change handler will call us again with shouldUpdateFragment set false
15+
} else {
16+
var landscapeElements = document.querySelectorAll("#landscape");
17+
let categories=button.dataset.landscapeTypes;
18+
let link = "https://landscape.cncf.io/category="+encodeURIComponent(categories)+"&format=card-mode&grouping=category&embed=yes";
19+
landscapeElements[0].src = link;
20+
}
21+
}
22+
catch(err) {
23+
console.log({message: "error handling Landscape switch", error: err})
24+
}
25+
}
26+
27+
// Automatically load the correct iframe based on the URL fragment
28+
document.addEventListener("DOMContentLoaded", function () {
29+
let hashChangeHandler = () => {
30+
if (window.location.hash) {
31+
let selectedTriggerElements = document.querySelectorAll(".landscape-trigger"+window.location.hash);
32+
if (selectedTriggerElements.length == 1) {
33+
landscapeSource = selectedTriggerElements[0];
34+
console.log("Updating Landscape source based on fragment:", window
35+
.location
36+
.hash
37+
.substring(1));
38+
updateLandscapeSource(landscapeSource,false);
39+
}
40+
}
41+
}
42+
var landscapeTriggerElements = document.querySelectorAll(".landscape-trigger");
43+
landscapeTriggerElements.forEach(element => {
44+
element.onclick = function() {
45+
updateLandscapeSource(element,true);
46+
};
47+
});
48+
var landscapeDefaultElements = document.querySelectorAll(".landscape-trigger.landscape-default");
49+
if (landscapeDefaultElements.length == 1) {
50+
let defaultLandscapeSource = landscapeDefaultElements[0];
51+
updateLandscapeSource(defaultLandscapeSource,false);
52+
}
53+
window.addEventListener("hashchange", hashChangeHandler, false);
54+
/* handle initially-set fragment */
55+
hashChangeHandler();
56+
});
57+
</script>
58+
{{- end -}}
59+
<div id="frameHolder">
60+
<iframe frameborder="0" id="landscape" scrolling="no" src="" style="width: 1px; min-width: 100%" title="CNCF Landscape"></iframe>
61+
<script src="https://landscape.cncf.io/iframeResizer.js"></script>
62+
</div>
63+
{{- end -}}

0 commit comments

Comments
 (0)