Add an option for classic search (#142018)

Fixes https://github.com/pytorch/tutorials/issues/3143

Pull Request resolved: https://github.com/pytorch/pytorch/pull/142018
Approved by: https://github.com/albanD

docs/source/_static/css/custom.css

@@ -32,9 +32,7 @@
 }
 
 .survey-link {
-  padding-top: 10px;
   color: #262626;
-  text-align: center
 }
 
 .pytorch-left-menu-search .survey-link a {
@@ -44,3 +42,104 @@
 }
 
 /* End of classes needed for the survey banner*/
+
+
+/* search radio button*/
+input[type="radio"] {
+    accent-color: #ee4c2c;
+}
+.gsst_b {
+    display: none;
+}
+#gsc-i-id1 {
+    height: 1.5rem;
+    text-indent: 12px !important;
+    font-size: 1rem !important;
+    font-family: "FreightSansi";
+    background-image: url(../images/search-icon.svg) !important;
+    background-repeat: no-repeat !important;
+    background-size: 18px 18px !important;
+    background-position: 5px 0px !important;
+    padding-left: 20px !important;
+}
+#gsc-i-id1::placeholder {
+  font-family: 'FreightSans';
+  font-size: 1rem;
+  color: #262626;
+}
+.gsc-control-cse {
+   padding: 0 !important;
+   border-radius: 0px !important;
+   border: none !important;;
+   overflow: hidden;
+}
+#___gcse_0 {
+    height: 44px !important;
+    padding: 0 !important;
+}
+
+@media (max-width: 768px) {
+  #___gcse_0 {
+    height: 34px !important;
+  }
+}
+
+table.gsc-search-box td.gsc-input {
+    padding-right: 0 !important;
+}
+table.gsc-search-box td {
+    height: 44px;
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+@media (max-width: 768px) {
+  table.gsc-search-box td {
+    height: 34px;
+  }
+}
+
+.gsc-search-button-v2 {
+    display: none;
+}
+.gs_id50 {
+    width: 308px;
+}
+
+.gsib_a {
+    padding: 0px 8px 4px 9px !important;
+}
+.gsc-input-box {
+    border-radius: 0px !important;
+    border: none !important;
+}
+
+@media (max-width: 768px) {
+  .gsc-input-box {
+     padding-top: 0px;
+     padding-bottom: 0px;
+  }
+}
+
+@media (max-width: 768px) {
+   .searchbox {
+     height: 34px;
+}
+
+
+form.gsc-search-box {
+    margin-bottom 0px;
+}
+
+.pytorch-left-menu-search input[type=text] {
+    background-image: url("../images/search-icon.svg");
+}
+
+.gsc-overflow-hidden {
+  overflow: visible !important;
+}
+
+.form#searchForm {
+  padding-bottom: 0;
+  margin-bottom: 0;
+}

docs/source/_templates/layout.html

@@ -28,10 +28,74 @@
     <div class="version">
       <a href='https://pytorch.org/docs/versions.html'>{{ version }} &#x25BC</a>
     </div>
-     <div class="searchbox">
+    <div id="searchBox">
-        <script async src="https://cse.google.com/cse.js?cx=e65585f8c3ea1440e"></script>
+    <div class="searchbox" id="googleSearchBox">
-        <div class="gcse-search"></div>
+      <script async src="https://cse.google.com/cse.js?cx=e65585f8c3ea1440e"></script>
-     </div>
+      <div class="gcse-search"></div>
+    </div>
+    <div id="sphinxSearchBox" style="display: none;">
+      <div role="search">
+        <form id="rtd-search-form" class="wy-form" action="{{ pathto('search') }}" method="get">
+          <input type="text" name="q" placeholder="Search Docs" />
+          <input type="hidden" name="check_keywords" value="yes" />
+          <input type="hidden" name="area" value="default" />
+        </form>
+      </div>
+    </div>
+  </div>
+  <form id="searchForm">
+    <label style="margin-bottom: 1rem">
+      <input type="radio" name="searchType" value="google" checked>
+      Google Search
+    </label>
+    <label style="margin-bottom: 1rem">
+      <input type="radio" name="searchType" value="sphinx">
+      Classic Search
+    </label>
+  </form>
+
+  <script>
+     document.addEventListener('DOMContentLoaded', function() {
+      const searchForm = document.getElementById('searchForm');
+      const googleSearchBox = document.getElementById('googleSearchBox');
+      const sphinxSearchBox = document.getElementById('sphinxSearchBox');
+      // Function to toggle search box visibility
+      function toggleSearchBox(searchType) {
+        googleSearchBox.style.display = searchType === 'google' ? 'block' : 'none';
+        sphinxSearchBox.style.display = searchType === 'sphinx' ? 'block' : 'none';
+      }
+      // Determine the default search type
+      let defaultSearchType;
+      const currentUrl = window.location.href;
+      if (currentUrl.startsWith('https://pytorch.org/docs/stable')) {
+        // For the stable documentation, default to Google
+        defaultSearchType = localStorage.getItem('searchType') || 'google';
+      } else {
+        // For any other version, including docs-preview, default to Sphinx
+        defaultSearchType = 'sphinx';
+      }
+      // Set the default search type
+      document.querySelector(`input[name="searchType"][value="${defaultSearchType}"]`).checked = true;
+      toggleSearchBox(defaultSearchType);
+      // Event listener for changes in search type
+      searchForm.addEventListener('change', function(event) {
+        const selectedSearchType = event.target.value;
+        localStorage.setItem('searchType', selectedSearchType);
+        toggleSearchBox(selectedSearchType);
+      });
+      // Set placeholder text for Google search box
+      window.onload = function() {
+        var placeholderText = "Search Docs";
+        var googleSearchboxText = document.querySelector("#gsc-i-id1");
+        if (googleSearchboxText) {
+          googleSearchboxText.placeholder = placeholderText;
+          googleSearchboxText.style.fontFamily = 'FreightSans';
+          googleSearchboxText.style.fontSize = "1.2rem";
+          googleSearchboxText.style.color = '#262626';
+        }
+      };
+    });
+  </script>
      <!--temporarily add a link to survey -->
      <div class="survey-link">
        <p><i class="fas fa-poll" aria-hidden="true">&nbsp </i><a href="https://forms.gle/tdrnwJhaQ9tUePxz9">Share Your Feedback</a> about our new search</p>