Merge branch 'main' into main-uk-wip

Author: Andygol

OWNERS_ALIASES

@@ -127,6 +127,7 @@ aliases:
     - inductor
     - nasa9084
     - Okabe-Junya
+    - t-inu
   sig-docs-ja-reviews: # PR reviews for Japanese content
     - atoato88
     - b1gb4by

assets/js/custom-search.js

@@ -0,0 +1,139 @@
+document.querySelector('html').classList.add('search');
+
+document.addEventListener('DOMContentLoaded', function() {
+  let searchTerm = new URLSearchParams(window.location.search).get('q');
+  let fetchingElem = document.getElementById('bing-results-container');
+
+  if (!searchTerm) {
+    if (fetchingElem) fetchingElem.style.display = 'none';
+  }
+});
+
+window.renderGoogleSearchResults = () => {
+  const cx = '013288817511911618469:elfqqbqldzg';
+  const gcse = document.createElement('script');
+  gcse.type = 'text/javascript';
+  gcse.async = true;
+  gcse.src = (document.location.protocol === 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
+  const s = document.getElementsByTagName('script')[0];
+  s.parentNode.insertBefore(gcse, s);
+}
+
+window.renderPageFindSearchResults = () => {
+  let urlParams = new URLSearchParams(window.location.search);
+  let searchTerm = urlParams.get("q") || "";
+  let sidebarSearch = document.querySelector('#search-results-search');
+  if (sidebarSearch) {
+    sidebarSearch.remove();
+  }
+  document.getElementById('search').style.display = 'block';
+  let pagefind = new PagefindUI({ element: "#search", showImages: false });
+  if (searchTerm) {
+    pagefind.triggerSearch(searchTerm);
+  }
+
+  document.querySelector("#search input").addEventListener("input", function() {
+    const inputValue = this.value;
+    const queryStringVar = "q";
+    updateQueryString(queryStringVar, inputValue);
+  });
+}
+
+function updateQueryString(key, value) {
+  const baseUrl = window.location.href.split("?")[0];
+  const queryString = window.location.search.slice(1);
+  const urlParams = new URLSearchParams(queryString);
+
+  if (urlParams.has(key)) {
+    urlParams.set(key, value);
+  } else {
+    urlParams.append(key, value);
+  }
+
+  const newUrl = baseUrl + "?" + urlParams.toString();
+  // Update the browser history (optional)
+  history.replaceState(null, '', newUrl);
+}
+
+// China Verification.
+const path = "path=/;";
+let d = new Date()
+d.setTime(d.getTime() + (7 * 24 * 60 * 60 * 1000))
+let expires = "expires=" + d.toUTCString()
+
+function getCookie(name) {
+  const value = "; " + document.cookie;
+  const parts = value.split("; " + name + "=");
+  if (parts.length === 2) return parts.pop().split(";").shift();
+  else return "";
+}
+
+async function checkBlockedSite(url) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => {
+    controller.abort();
+  }, 5000); // Timeout set to 5000ms (5 seconds)
+
+  try {
+    const response = await fetch(url, { method: 'HEAD', mode: 'no-cors', signal: controller.signal });
+    // If we reach this point, the site is accessible (since mode: 'no-cors' doesn't allow us to check response.ok)
+    clearTimeout(timeout);
+    return false;
+  } catch (error) {
+    // If an error occurs, it's likely the site is blocked
+    return true;
+  }
+}
+
+async function loadSearch() {
+  if (getCookie("can_google") === "") {
+    const isGoogleBlocked = await checkBlockedSite("https://www.google.com/favicon.ico");
+    if ( isGoogleBlocked ) {
+      // Google is blocked.
+      document.cookie = "can_google=false;" + path + expires
+      window.renderPageFindSearchResults()
+    } else {
+      // Google is not blocked.
+      document.cookie = "can_google=true;" + path + expires
+      window.renderGoogleSearchResults()
+    }
+  } else if (getCookie("can_google") === "false") {
+    window.renderPageFindSearchResults()
+  } else {
+    window.renderGoogleSearchResults()
+  }
+}
+
+(function ($) {
+  "use strict";
+
+  const Search = {
+    init: function () {
+      $(document).ready(function () {
+        // Fill the search input form with the current search keywords
+        const searchKeywords = new URLSearchParams(location.search).get('q');
+        if (searchKeywords !== null && searchKeywords !== '') {
+          const searchInput = document.querySelector('.td-search-input');
+          searchInput.focus();
+          searchInput.value = searchKeywords;
+        }
+
+        // Set a keydown event
+        $(document).on("keypress", ".td-search-input", function (e) {
+          if (e.keyCode !== 13) {
+            return;
+          }
+
+          const query = $(this).val();
+          document.location = $(this).data('search-page') + "?q=" + query;
+
+          return false;
+        });
+      });
+    },
+  };
+
+  Search.init();
+})(jQuery);
+
+window.onload = loadSearch;

assets/js/search.js

@@ -462,16 +462,6 @@ $video-section-height: 200px;
   }
 }
 
-// Add logo to CNCF section
-section#cncf {
-  padding-top: 60px;
-  padding-bottom: 140px;
-  background-image: url(/images/cncf-color.svg);
-  background-position: center 100px;
-  background-repeat: no-repeat;
-  background-size: 300px;
-}
-
 // OCEAN NODES
 #oceanNodes, .td-home .k8s-overview {
 

assets/scss/_base.scss

@@ -340,6 +340,32 @@ input[type="search"]{
 }
 
 
+.cncf-logo-details {
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
+  align-items: center;
+
+  p {
+    text-align: center;
+    font-size: 1.2rem;
+  }
+
+  a {
+    color: inherit;
+    background: transparent;
+    text-decoration: underline; // exception from usual convention
+  }
+
+  picture {
+    display: block;
+    > * {
+      min-height: 4em;
+      width: calc(clamp(20em,18em + 20mm,100vw));
+    }
+  }
+}
+
 /* FOOTER */
 footer {
   background-color: #202020;
@@ -469,6 +495,91 @@ footer {
   }
 }
 
+// Home page dark-mode
+@media (prefers-color-scheme: dark) {
+  body.cid-home {
+    main {
+      background-color: $dark-bg-color-2;
+      color:$dark-text-color-1;
+
+      section:not(#video):not(#cncf) {
+        background-color: $dark-bg-color-1;
+        color:$dark-text-color-1;
+      }
+
+      section#video #desktopShowVideoButton {
+        background-color: $dark-bg-color-1;
+      }
+
+      section#video #desktopShowVideoButton {
+        color: $white;
+        background-color: $primary;
+
+        &:hover {
+          color: $primary;
+          background-color: $white;
+        }
+
+        &::before {
+          border-color: transparent transparent transparent $white;
+        }
+
+        &:hover::before {
+          border-color: transparent transparent transparent $primary;
+        }
+      }
+
+      section#video #desktopKCButton:hover {
+        background-color: $dark-bg-color-1;
+      }
+
+      section#cncf {
+        background-color: $dark-bg-color-2;
+      }
+
+      section.features-container .k8s-features-heading {
+        color: $white;
+        background-color: $dark-bg-color-1;
+      }
+
+      section.features-container > div > .feature-box {
+        background-color: $dark-bg-color-2;
+        color:$dark-text-color-1;
+
+        h3 a, h4 a, h5 a {
+          color: $white;
+          background: transparent;
+        }
+
+        h3 a:hover, h4 a:hover, h5 a:hover {
+          text-decoration: underline;
+        }
+      }
+
+      .search-bar {
+        background-color: #d3d3d3;
+        color: #ffffff;
+        > * {
+          color: #ffffff;
+        }
+      }
+
+      input.search-input, input.email {
+        background-color: #D3D3D3 !important;
+        color: #000 !important;
+      }
+
+      input.search-input::placeholder, input.email::placeholder{
+        color: #000;
+      }
+
+      #mc_embed_signup_scroll input.email {
+        color: #ffffff !important;
+        background-color: #a9a9a9 !important;
+      }
+    }
+  }
+}
 
 /* COMMUNITY */
 

assets/scss/_custom.scss

@@ -163,16 +163,6 @@ div.feature-state-notice {
   background-color: rgba(255, 255, 255, 0.25);
 }
 
-/* Sidebar menu */
-#td-sidebar-menu {
-  #m-docs span, small {
-    visibility: hidden;
-  }
-  #m-docs small {
-    visibility: collapse; // if supported
-  }
-}
-
 /* Styles for CVE table */
 table tr.cve-status-open, table tr.cve-status-unknown {
   > td.cve-item-summary {

assets/scss/_documentation.scss

@@ -27,3 +27,9 @@ $tooltip-font-size: 1rem;
 $tooltip-padding: 5px 8px;
 $tooltip-border-radius: 6px;
 $tooltip-font-weight: 400;
+
+// light / dark mode support
+$dark-bg-color-1: #303030;
+$dark-bg-color-2: #4f4f4f;
+$dark-text-color-1: #ffffff;
+$dark-text-color-2: #3371e3;

assets/scss/_variables_project.scss

@@ -6,8 +6,6 @@
   priority: 1.0
 ---
 
-{{< site-searchbar >}}
-
 {{< blocks/section class="k8s-overview" >}}
 {{% blocks/feature image="flower" id="feature-primary" %}}
 [Kubernetes]({{< relref "/docs/concepts/overview/" >}}), also known as K8s, is an open source system for automating deployment, scaling, and management of containerized applications.