Bump js-yaml from 4.1.0 to 4.1.1

Bumps [js-yaml](https://github.com/nodeca/js-yaml) from 4.1.0 to 4.1.1.
- [Changelog](https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md)
- [Commits](https://github.com/nodeca/js-yaml/compare/4.1.0...4.1.1)

---
updated-dependencies:
- dependency-name: js-yaml
  dependency-version: 4.1.1
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.aider*
+.env

groups/home/bootstrap3/Vue3-v.4.html

@@ -13,7 +13,7 @@
   <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
     <div id="s-lg-index-cols">
       <div id="app1">
-        <!-- vue app -->
+        <!-- vue app1 -->
         <div class="row">
           <div id="obsolete_browser_alert"></div>
           <div class="col-xs-12" id="header-div">
@@ -70,13 +70,12 @@
               data-target=".bs-example-modal-sm"
             >
               <span id="corona-alert-text"
-                >No fines on KBCC books checked out before the pandemic! Just
+                >Starting 9/16, study room keys will need to be checked out at the circulation desk.</span
-                return them to any CUNY Library.</span
               >
             </div>
           </div>
           <!-- end of header div -->
-          <!-- Modal -->
+          <!-- Modal 
           <div
             class="modal fade bs-example-modal-sm"
             tabindex="-1"
@@ -102,8 +101,8 @@
                   </h4>
                 </div>
               </div>
-            </div>
+            </div
-          </div>
+          </div> -->
           <!-- End of modal -->
         </div>
         <!-- end of row -->
@@ -126,14 +125,14 @@
         </div>
         <div class="col-sm-4">
           <div class="nav-by-jumbotron">
-            <a class="ga-by-jumbotron">
+            <a class="ga-by-jumbotron ga-by-jumbotron-rooms">
               <div class="nav-divs-by-jumbotron" id="bookastudyroom">
                 <h2><button id="eq_32886">Book A Study Room</button></h2>
               </div>
             </a>
             <a
               href="https://library.kbcc.cuny.edu/az.php"
-              class="ga-by-jumbotron"
+              class="ga-by-jumbotron ga-by-jumbotron-databases"
             >
               <div class="nav-divs-by-jumbotron">
                 <h2>Databases</h2>
@@ -141,18 +140,18 @@
             </a>
             <a
               href="https://library.kbcc.cuny.edu/guides"
-              class="ga-by-jumbotron"
+              class="ga-by-jumbotron ga-by-jumbotron-guides"
             >
               <div class="nav-divs-by-jumbotron">
                 <h2>Research Guides</h2>
               </div>
             </a>
             <a
-              href="https://kbcc-cuny.libwizard.com/f/feedback"
+              href="https://kbcc-cuny.libanswers.com/faq/357033"
-              class="ga-by-jumbotron"
+              class="ga-by-jumbotron ga-by-jumbotron-print"
             >
               <div class="nav-divs-by-jumbotron">
-                <h2>Send Us Feedback</h2>
+                <h2>How Do I Print?</h2>
               </div>
             </a>
           </div>
@@ -196,7 +195,7 @@
                     </li>
                     <li>
                       <a
-                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129"
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8156195890006129"
                         class="ga-library-links"
                       >
                         Comic Books & Graphic Novels
@@ -298,7 +297,7 @@
                 href="https://twitter.com/KBCCLibrary"
                 target="_blank"
               >
-                <i aria-hidden="true" class="fab fa-twitter"></i>
+                <i aria-hidden="true" class="fa-brands fa-x-twitter"></i>
               </a>
               <a
                 aria-label="Instagram"
@@ -350,7 +349,7 @@
             <a
               href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365"
             >
-              Log in to LibApps
+              LibApps
             </a>
             |
             <a

groups/home/bootstrap3/Vue3-v.5-css.html

@@ -16,7 +16,7 @@
   }
 
   /* style slide out chat */
-  #lcs_slide_out_button-23558 {
+  #lcs_slide_out_button-21944 {
     font-size: 1.5em;
   }
 
@@ -78,15 +78,17 @@
   }
 
   /* style alert */
-  #corona-alert {
+  #hours-content-container {    /* this id comes from the components libguide */
+    background-color: var(--kbccblue);
+    color: #fff;
     text-align: center;
-    background-color: #faf870;
-    padding: 5px 50px;
-    cursor: pointer;
-  }
-  #corona-alert-text {
-    color: var(--text);
     font-size: 1.5em;
+    padding: 4px;
+    margin: -10px -11px -30px -11px;
+    border-radius: 3px;
+  }
+  #hours-content-container > a {
+    color: #fff
   }
 
   /* style navbar */
@@ -149,19 +151,39 @@
     text-align: center;
     margin-top: -40px;
   }
+  #app2 {
+    margin: auto;
+    width: 80%;
+  }
   #onesearch-header {
     font-size: 10em;
     margin-bottom: 0;
   }
-  .zero-margin {
+  .form-width {
-    margin-left: -2px;
+    width: 100%;
-    margin-right: -2px;
   }
-
   .zero-margin {
     margin: -2px;
   }
-
+  #radios {
+    float: left;
+  }
+  .radiocontainer {
+     margin-left: 10px;
+  }
+  .radiocontainer {
+    display: inline-block;
+  }
+  #booksradio, #articlesradio, #everythingradio {
+    margin-right: 3px;
+  }
+  #advanced {
+    float: right;
+    margin-top: 10px;
+  }
+  #advanced > strong > a {
+    color: black;
+  }
   /* add flex so that blue box-shadows line up */
   #flex-search-form {
     display: flex;
@@ -173,13 +195,13 @@
   }
 
   /* shadow for the search bar */
-  #blue-border1 {
+  #blue-border2 {
     box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
       -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
   }
-  #blue-border2 {
+  /*#blue-border2 {
     box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
-  }
+  }*/
   #blue-border3 {
     box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
       5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
@@ -257,6 +279,25 @@
     outline: 0;
   }
 
+  /* make the slick arrows bigger; adjust margin and padding around big arrows */
+  .slick-prev:before, .slick-next:before {
+    font-size: 40px !important;
+  }
+  .slick-prev:before {
+    margin-left: -30px;
+  }
+  button.slick-next.slick-arrow, button.slick-prev.slick-arrow {
+    height: 40px !important;
+    width: 40px !important;
+  }
+  button.slick-next.slick-arrow {
+    padding-top: 3px;
+  }
+  button.slick-prev.slick-arrow {
+    padding: 3px;
+    padding-left: 30px;
+  }
+
   /* style to make all imported boxes floating */
   .s-lib-box-title {
     display: none;
@@ -292,7 +333,7 @@
   .fancy-caret {
     display: inline-block;
     margin-left: 8px;
-    color: var(--kbccblue);
+    color: var(--kbccorange);
   }
   .open > a > .fancy-caret {
     margin-bottom: -4px;
@@ -340,9 +381,6 @@
     nav.navbar-default.main-nav-container {
       margin-top: -20px;
     }
-    .form-width {
-      width: 40%;
-    }
     .nav-by-jumbotron {
       margin-top: 40px !important;
     }
@@ -363,16 +401,37 @@
     }
   }
 
+  @media only screen and (max-width: 472px) {
+    #app2 { margin-bottom: 65px; }
+    #radios > label, #radios > div > label { margin-bottom: -5px; }
+  }
+
+  @media only screen and (max-width: 360px) {
+    #app2 { margin-bottom: 85px; }
+  }
+
+  @media only screen and (max-width: 992px) {
+    #advanced {
+      display: none;
+    }
+  }
+
   @media only screen and (max-width: 768px) {
     #login-text {
       display: none;
     }
+    #radios, #advanced {
+      margin-top: -8px;
+   }
     #defineYourSearch {
       display: none;
     }
   }
 
   @media only screen and (min-width: 768px) {
+    #radios {
+      margin-top: 8px;
+    }
     .nav-by-jumbotron {
       margin-top: 0 !important;
     }
@@ -417,9 +476,6 @@
       max-width: 100%;
       max-height: 350px;
     }
-    .form-width {
-      width: 340px;
-    }
   }
 
   @media only screen and (min-width: 1200px) {
@@ -443,143 +499,6 @@
   });
 </script>
 
-<!-- polyfills to make .forEach and .includes work in IE10 and IE11 -->
-<script type="text/javascript">
-  if (window.NodeList && !NodeList.prototype.forEach) {
-    NodeList.prototype.forEach = Array.prototype.forEach;
-  }
-
-  String.prototype.includes = function (match) {
-    return this.indexOf(match) !== -1;
-  };
-</script>
-
-<!-- script to make OneSearch dropdown work -->
-<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
-<script type="text/javascript">
-  function customizeSearch(facet) {
-    // re-render the dropdown menu with the current pick
-    document.getElementById("dropdownMenu1").innerHTML =
-      facet + ' <span class="caret"></span>';
-    document
-      .getElementById("primoQueryTemp")
-      .setAttribute("placeholder", "Enter search term here");
-
-    // reset any previously selected facets
-    document
-      .querySelectorAll(".deleteWithDropdownChange")
-      .forEach(function (e) {
-        e.remove();
-      });
-    document
-      .getElementById("formToAppendInputsTo")
-      .setAttribute(
-        "action",
-        "https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
-      );
-    document.getElementById("tabSetting").setAttribute("value", "Everything");
-    document
-      .getElementById("SearchScopeSetting")
-      .setAttribute("value", "IZ_CI_AW");
-
-    // add the facet that matches the user's dropdown selection
-    if (facet === "Books") {
-      document
-        .getElementById("formToAppendInputsTo")
-        .insertAdjacentHTML(
-          "afterbegin",
-          '<input name="facet" value="rtype,include,books" type="hidden" class="deleteWithDropdownChange" />'
-        );
-    } else if (facet === "Articles") {
-      document
-        .getElementById("formToAppendInputsTo")
-        .insertAdjacentHTML(
-          "afterbegin",
-          '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" class="deleteWithDropdownChange" />'
-        );
-    } else if (facet === "Videos") {
-      document
-        .getElementById("formToAppendInputsTo")
-        .insertAdjacentHTML(
-          "afterbegin",
-          '<input name="facet" value="rtype,include,videos" type="hidden" class="deleteWithDropdownChange" />'
-        );
-    } else if (facet === "Journals") {
-      document
-        .getElementById("formToAppendInputsTo")
-        .setAttribute(
-          "action",
-          "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch"
-        );
-      document
-        .getElementById("tabSetting")
-        .setAttribute("value", "jsearch_slot");
-    } else if (facet === "Newspapers") {
-      document
-        .getElementById("formToAppendInputsTo")
-        .setAttribute(
-          "action",
-          "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch"
-        );
-    } else if (facet === "Reserves") {
-      document
-        .getElementById("tabSetting")
-        .setAttribute("value", "CourseReserves");
-      document
-        .getElementById("SearchScopeSetting")
-        .setAttribute("value", "CourseReserves");
-    } else {
-      console.log("no match");
-    }
-
-    // store the facet, for use on page reload
-    sessionStorage.facet = facet;
-  }
-
-  // if the stored facet exists on page load, render the dropdown with that facet, then clear the stored facet
-  function sessionFunction() {
-    if (sessionStorage.facet && sessionStorage.searchTerms) {
-      stored_terms = sessionStorage.searchTerms;
-      document.getElementById("primoQueryTemp").value = stored_terms;
-      stored_facet = sessionStorage.facet;
-      customizeSearch(stored_facet);
-    }
-    sessionStorage.clear();
-  }
-</script>
-
-<!-- OneSearch widget script from OLS, modified -->
-<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
-<script type="text/javascript">
-  function addPrimoQuery(e) {
-    // prevent the user from submitting the form if no dropdown item has been selected. Added by ME.
-    e.preventDefault();
-    e.stopPropagation();
-    if (
-      document.getElementById("dropdownMenu1").innerHTML.includes("Define") ===
-      true
-    ) {
-      $("#dropdownMenu1").trigger("click.bs.dropdown.data-api");
-      document.getElementById("primoQueryTemp").value = "";
-      document
-        .getElementById("primoQueryTemp")
-        .setAttribute("placeholder", "Please make a selection");
-      return true;
-    }
-
-    // save the search terms, for use on page reload
-    sessionStorage.searchTerms =
-      document.getElementById("primoQueryTemp").value;
-
-    // original OLS widget
-    document.getElementById("primoQuery").value =
-      "any,contains," +
-      document.getElementById("primoQueryTemp").value.replace(/[,]/g, " ");
-    // If you changed the form name at the top, change it below to match
-    document.forms.searchPrimoForm1.submit();
-  }
-</script>
-
 <!-- If browser is pre-ES6, show a warning-->
 <script>
   window.isES6 = false;
@@ -619,9 +538,6 @@
 
 <script type="text/javascript">
   window.onload = function () {
-    <!-- run the sessionStorage stuff on load -->
-    sessionFunction();
-
     <!-- display the error message if feature detection flags old browser -->
     if (window.isES6 == false) {
       document.getElementById("obsolete_browser_alert").innerHTML =
@@ -635,3 +551,4 @@
   src="https://kit.fontawesome.com/4c28f38a07.js"
   crossorigin="anonymous"
 ></script>
+

groups/home/bootstrap3/Vue3-v.5.html

@@ -1,4 +1,23 @@
 <body class="s-lib-public-body">
+  <style>
+    /* Accessible focus indicators for primary navigation elements */
+    #hamburger:focus,
+    #hamburger:focus-visible,
+    #login-div:focus,
+    #login-div:focus-visible,
+    .searchmenu:focus,
+    .searchmenu:focus-visible,
+    .nav-jumbotron-link:focus,
+    .nav-jumbotron-link:focus-visible,
+    /* OneSearch widget (central search form) */
+    .onesearch-jumbotron input:focus,
+    .onesearch-jumbotron input:focus-visible,
+    .onesearch-jumbotron button:focus,
+    .onesearch-jumbotron button:focus-visible {
+      outline: 3px solid #0056b3; /* high-contrast blue */
+      outline-offset: 2px;
+    }
+  </style>
   <!-- Google Tag Manager (noscript) -->
   <noscript>
     <iframe
@@ -12,8 +31,8 @@
   <!-- BEGIN: content -->
   <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
     <div id="s-lg-index-cols">
-      <div id="app">
+      <div id="app1">
-        <!-- vue app -->
+        <!-- vue app1 -->
         <div class="row">
           <div id="obsolete_browser_alert"></div>
           <div class="col-xs-12" id="header-div">
@@ -34,16 +53,17 @@
                 aria-labelledby="hamburger"
                 id="hamburger-ul"
               >
-                <li>
+                <li
+                  v-for="item in hamburger"
+                  v-bind:key="item.id"
+                >
                   <a
-                    v-for="item in hamburger"
-                    v-bind:key="item.id"
                     class="searchmenu"
                     v-bind:aria-label="item.description"
                     v-bind:href="item.link"
                     v-bind:target="item.target_blank"
                   >
-                    <menus-component v-bind:item="item"></menus-component>
+                    <hamburger-component v-bind:item="item"></hamburger-component>
                   </a>
                 </li>
               </ul>
@@ -63,214 +83,44 @@
               alt="Kibbee Library logo"
               src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
             />
-            <div
+            {{content_box_33471502}}
-              id="corona-alert"
-              type="button"
-              data-toggle="modal"
-              data-target=".bs-example-modal-sm"
-            >
-              <span id="corona-alert-text"
-                >No fines on KBCC books checked out before the pandemic! Just
-                return them to any CUNY Library.</span
-              >
-            </div>
           </div>
           <!-- end of header div -->
-          <!-- Modal -->
-          <div
-            class="modal fade bs-example-modal-sm"
-            tabindex="-1"
-            role="dialog"
-            aria-labelledby="myModalLabel"
-          >
-            <div class="modal-dialog modal-sm" role="document">
-              <div class="modal-content" style="border-radius: 3px">
-                <div class="modal-body">
-                  <button
-                    type="button"
-                    class="close"
-                    data-dismiss="modal"
-                    aria-label="Close"
-                    style="padding: 5px 5px 12px 12px"
-                  >
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                  <h4 class="modal-title" id="myModalLabel">
-                    Before returning books to another CUNY library, please make
-                    sure you have updated your vaccine information to Cleared4
-                    or checked rules for visiting that campus.
-                  </h4>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- End of modal -->
         </div>
         <!-- end of row -->
         <div class="row" id="hamburger-alternative">
           <div class="col-xs-12">
-            <nav class="navbar navbar-default main-nav-container">
+            <navig-component v-bind:navlistofmenus="navlistofmenus"></navig-component>
-              <div class="container-fluid">
-                <ul class="nav navbar-nav" id="navbar-center">
-                  <li
-                    v-for="(navmenu, navkey) in navListOfMenus"
-                    class="dropdown main-nav-dropdown"
-                  >
-                    <nav-component
-                      v-bind:navmenu="navmenu"
-                      v-bind:navkey="navkey"
-                    ></nav-component>
-                  </li>
-                </ul>
-              </div>
-              <!-- end of container-fluid -->
-            </nav>
-            <!-- end of main-nav-container -->
           </div>
           <!-- end of col-xs-12 -->
         </div>
         <!--end of row-->
       </div>
-      <!--end of Vue app-->
+      <!--end of Vue app1-->
     </div>
     <div class="container" style="margin-top: 14px">
       <div class="row kbcc-background-image">
         <div class="col-sm-8">
-          <form
+          <div id="app2" style="clear: both;">
-            class="form-inline onesearch-jumbotron"
+            <onesearch-component></onesearch-component>
-            name="searchPrimoForm1"
+          </div><!-- end of Vue app2 -->
-            role="search"
-            method="get"
-            action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
-            onsubmit="addPrimoQuery();"
-            enctype="application/x-www-form-urlencoded; charset=utf-8"
-            id="formToAppendInputsTo"
-          >
-            <!-- default is "everything"  option suggested from OLS widget builder -->
-            <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
-            <input
-              name="tab"
-              value="Everything"
-              type="hidden"
-              id="tabSetting"
-            />
-            <input
-              name="search_scope"
-              value="IZ_CI_AW"
-              type="hidden"
-              id="SearchScopeSetting"
-            />
-            <input name="mode" value="basic" type="hidden" />
-            <input name="highlight" value="true" type="hidden" />
-            <input name="displayMode" value="full" type="hidden" />
-            <input name="bulkSize" value="10" type="hidden" />
-            <input name="dum" value="true" type="hidden" />
-            <input name="displayField" value="all" type="hidden" />
-            <input name="pcAvailabiltyMode" value="false" type="hidden" />
-            <input name="query" id="primoQuery" type="hidden" />
-            <h1 id="onesearch-header">
-              <a
-                href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en"
-              >
-                <img
-                  class="image-fail onesearchsubmit"
-                  src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png"
-                  alt="OneSearch"
-                />
-              </a>
-            </h1>
-            <div class="form-group" id="flex-search-form">
-              <div class="dropdown input-group zero-margin" id="blue-border1">
-                <button
-                  class="btn btn-default dropdown-toggle"
-                  type="button"
-                  id="dropdownMenu1"
-                  data-toggle="dropdown"
-                  aria-haspopup="true"
-                  aria-expanded="true"
-                  aria-label="Define Your Search"
-                >
-                  <span id="defineYourSearch">Define Your Search </span>
-                  <span class="caret"></span>
-                </button>
-                <ul
-                  class="dropdown-menu fade dropdown-margin"
-                  aria-labelledby="dropdownMenu1"
-                >
-                  <li>
-                    <a class="searchmenu" onclick="customizeSearch('Books')">
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Books</strong>
-                      </div>
-                    </a>
-                    <a class="searchmenu" onclick="customizeSearch('Articles')">
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Articles (Peer reviewed)</strong>
-                      </div>
-                    </a>
-                    <a class="searchmenu" onclick="customizeSearch('Reserves')">
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Course reserves</strong>
-                      </div>
-                    </a>
-                    <a
-                      class="searchmenu"
-                      onclick="customizeSearch('Newspapers')"
-                    >
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Newspapers and magazines</strong>
-                      </div>
-                    </a>
-                    <a class="searchmenu" onclick="customizeSearch('Journals')">
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Journals</strong>
-                      </div>
-                    </a>
-                    <a
-                      href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced"
-                      class="searchmenu"
-                    >
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Advanced search</strong>
-                      </div>
-                    </a>
-                  </li>
-
-                  <li></li>
-                </ul>
-              </div>
-              <label class="sr-only" for="primoQueryTemp">Search terms</label>
-              <div class="input-group zero-margin form-width" id="blue-border2">
-                <input
-                  class="form-control form-width inherit-height-from-flex"
-                  name="queryTemp"
-                  id="primoQueryTemp"
-                  type="search"
-                  value=""
-                  placeholder="Enter search term here"
-                />
-              </div>
-              <div class="input-group zero-margin" id="blue-border3">
-                <input
-                  type="submit"
-                  class="btn btn-default form-control onesearchsubmit inherit-height-from-flex"
-                  value="Search"
-                  onclick="return addPrimoQuery(event);"
-                />
-              </div>
-            </div>
-          </form>
         </div>
         <div class="col-sm-4">
           <div class="nav-by-jumbotron">
-            <a class="ga-by-jumbotron">
+            <a
+              id="eq_32886"
+              href="#"
+              class="ga-by-jumbotron ga-by-jumbotron-rooms nav-jumbotron-link"
+              aria-label="Book A Study Room"
+              role="button"
+            >
               <div class="nav-divs-by-jumbotron" id="bookastudyroom">
-                <h2><button id="eq_32886">Book A Study Room</button></h2>
+                <h2>Book A Study Room</h2>
               </div>
             </a>
             <a
               href="https://library.kbcc.cuny.edu/az.php"
-              class="ga-by-jumbotron"
+              class="ga-by-jumbotron ga-by-jumbotron-databases"
             >
               <div class="nav-divs-by-jumbotron">
                 <h2>Databases</h2>
@@ -278,18 +128,18 @@
             </a>
             <a
               href="https://library.kbcc.cuny.edu/guides"
-              class="ga-by-jumbotron"
+              class="ga-by-jumbotron ga-by-jumbotron-guides"
             >
               <div class="nav-divs-by-jumbotron">
                 <h2>Research Guides</h2>
               </div>
             </a>
             <a
-              href="https://kbcc-cuny.libwizard.com/f/feedback"
+              href="https://library.kbcc.cuny.edu/faq"
-              class="ga-by-jumbotron"
+              class="ga-by-jumbotron ga-by-jumbotron-print"
             >
               <div class="nav-divs-by-jumbotron">
-                <h2>Send Us Feedback</h2>
+                <h2>FAQ</h2>
               </div>
             </a>
           </div>
@@ -317,15 +167,15 @@
                     </li>
                     <li>
                       <a
-                        href="https://library.kbcc.cuny.edu/ebooks"
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8155422080006129"
                         class="ga-library-links"
                       >
-                        Find eTextbooks and eBooks
+                        2024-2025 Textbooks
                       </a>
                     </li>
                     <li>
                       <a
-                        href="https://library.kbcc.cuny.edu/video"
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150905740006129"
                         class="ga-library-links"
                       >
                         Streaming Video
@@ -333,10 +183,10 @@
                     </li>
                     <li>
                       <a
-                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129"
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8156195890006129"
                         class="ga-library-links"
                       >
-                        Comic Books & Graphic Novels
+                        Comic Books &amp; Graphic Novels
                       </a>
                     </li>
                   </ul>
@@ -345,7 +195,7 @@
                   <ul class="link-list">
                     <li>
                       <a
-                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
+                        href="http://kbcc.ezproxy.cuny.edu/login?url=https://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
                         target="_blank"
                         class="ga-library-links"
                       >
@@ -383,14 +233,6 @@
               </div>
             </div>
           </div>
-          <div class="panel panel-default hide-body-border">
-            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title">
-                <h2>Today's Library Hours</h2>
-              </span>
-            </div>
-            <div class="panel-body">{{content_box_29248590}}</div>
-          </div>
         </div>
         <div class="col-md-5 col-lg-6">
           <div class="panel panel-default hide-body-border">
@@ -430,13 +272,6 @@
                 reference.desk@kbcc.cuny.edu
               </a>
               <br />
-              <a
-                aria-label="Twitter"
-                href="https://twitter.com/KBCCLibrary"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-twitter"></i>
-              </a>
               <a
                 aria-label="Instagram"
                 href="https://www.instagram.com/kbcclibrary/"
@@ -487,7 +322,7 @@
             <a
               href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365"
             >
-              Log in to LibApps
+              LibApps
             </a>
             |
             <a
@@ -535,11 +370,10 @@
   <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
 
   <!-- add Vue scripts -->
-  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> --><!-- development -->
+  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> development -->
-  <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
+  <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script><!-- production -->
-  <!--production -->
   <script
     type="text/javascript"
-    src="https://libapps.s3.amazonaws.com/sites/2365/include/main2.js"
+    src="https://libapps.s3.amazonaws.com/sites/2365/include/main5.js"
   ></script>
 </body>

groups/home/bootstrap3/Vue3-v.6-css.html

@@ -77,16 +77,36 @@
     margin-left: 5px;
   }
 
-  /* style alert */
+  /* Accessible focus indicators for primary navigation elements */
-  #corona-alert {
+  #hamburger:focus,
-    text-align: center;
+  #hamburger:focus-visible,
-    background-color: #faf870;
+  #login-div:focus,
-    padding: 5px 50px;
+  #login-div:focus-visible,
-    cursor: pointer;
+  .searchmenu:focus,
+  .searchmenu:focus-visible,
+  .nav-jumbotron-link:focus,
+  .nav-jumbotron-link:focus-visible,
+  /* OneSearch widget (central search form) */
+  .onesearch-jumbotron input:focus,
+  .onesearch-jumbotron input:focus-visible,
+  .onesearch-jumbotron button:focus,
+  .onesearch-jumbotron button:focus-visible {
+    outline: 3px solid #0056b3; /* high-contrast blue */
+    outline-offset: 2px;
   }
-  #corona-alert-text {
+
-    color: var(--text);
+  /* style alert */
+  #hours-content-container {    /* this id comes from the components libguide */
+    background-color: var(--kbccblue);
+    color: #fff;
+    text-align: center;
     font-size: 1.5em;
+    padding: 4px;
+    margin: -10px -11px -30px -11px;
+    border-radius: 3px;
+  }
+  #hours-content-container > a {
+    color: #fff
   }
 
   /* style navbar */
@@ -149,19 +169,39 @@
     text-align: center;
     margin-top: -40px;
   }
+  #app2 {
+    margin: auto;
+    width: 80%;
+  }
   #onesearch-header {
     font-size: 10em;
     margin-bottom: 0;
   }
-  .zero-margin {
+  .form-width {
-    margin-left: -2px;
+    width: 100%;
-    margin-right: -2px;
   }
-
   .zero-margin {
     margin: -2px;
   }
-
+  #radios {
+    float: left;
+  }
+  .radiocontainer {
+     margin-left: 10px;
+  }
+  .radiocontainer {
+    display: inline-block;
+  }
+  #booksradio, #articlesradio, #everythingradio {
+    margin-right: 3px;
+  }
+  #advanced {
+    float: right;
+    margin-top: 10px;
+  }
+  #advanced > strong > a {
+    color: black;
+  }
   /* add flex so that blue box-shadows line up */
   #flex-search-form {
     display: flex;
@@ -173,19 +213,22 @@
   }
 
   /* shadow for the search bar */
-  #blue-border1 {
+  #blue-border2 {
     box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
       -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
   }
-  #blue-border2 {
+  /*#blue-border2 {
     box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
-  }
+  }*/
   #blue-border3 {
     box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
       5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
   }
 
   /* style for nav by the jumbotron */
+	.kbcc-background-image > .col-sm-4 {
+		margin-top: 10px;
+	}
   .nav-divs-by-jumbotron {
     text-align: center;
     padding: 6px;
@@ -214,6 +257,20 @@
     cursor: pointer;
   }
 
+  /* Ensure nav-jumbotron buttons match link width */
+  .nav-jumbotron-link.btn-link {
+    display: block;
+    width: 100%;
+    padding: 0;        /* remove default Bootstrap padding */
+    border: none;      /* ensure no extra border height */
+    background: none;  /* keep background controlled by inner div */
+  }
+
+  /* Remove default heading margin for uniform button height */
+  #bookastudyroom-heading {
+    margin: 0px;
+  }
+
   /* style link list */
   .link-list {
     font-size: 1.7em;
@@ -257,6 +314,25 @@
     outline: 0;
   }
 
+  /* make the slick arrows bigger; adjust margin and padding around big arrows */
+  .slick-prev:before, .slick-next:before {
+    font-size: 40px !important;
+  }
+  .slick-prev:before {
+    margin-left: -30px;
+  }
+  button.slick-next.slick-arrow, button.slick-prev.slick-arrow {
+    height: 40px !important;
+    width: 40px !important;
+  }
+  button.slick-next.slick-arrow {
+    padding-top: 3px;
+  }
+  button.slick-prev.slick-arrow {
+    padding: 3px;
+    padding-left: 30px;
+  }
+
   /* style to make all imported boxes floating */
   .s-lib-box-title {
     display: none;
@@ -292,7 +368,7 @@
   .fancy-caret {
     display: inline-block;
     margin-left: 8px;
-    color: var(--kbccblue);
+    color: var(--kbccorange);
   }
   .open > a > .fancy-caret {
     margin-bottom: -4px;
@@ -340,9 +416,6 @@
     nav.navbar-default.main-nav-container {
       margin-top: -20px;
     }
-    .form-width {
-      width: 40%;
-    }
     .nav-by-jumbotron {
       margin-top: 40px !important;
     }
@@ -363,16 +436,38 @@
     }
   }
 
+  @media only screen and (max-width: 472px) {
+    #app2 { margin-bottom: 65px; }
+    #radios > label, #radios > div > label { margin-bottom: -5px; }
+  }
+
+  @media only screen and (max-width: 360px) {
+    #app2 { margin-bottom: 85px; }
+  }
+
+  @media only screen and (max-width: 992px) {
+    #advanced {
+      display: none;
+    }
+  }
+
   @media only screen and (max-width: 768px) {
     #login-text {
       display: none;
     }
+    #radios, #advanced {
+      margin-top: -8px;
+      margin-bottom: 50px;
+   }
     #defineYourSearch {
       display: none;
     }
   }
 
   @media only screen and (min-width: 768px) {
+    #radios {
+      margin-top: 8px;
+    }
     .nav-by-jumbotron {
       margin-top: 0 !important;
     }
@@ -397,6 +492,9 @@
       float: right;
       clear: both;
     }
+    .libapps.whiteahrefs {
+      margin-top: -10px;
+    }
   }
 
   @media only screen and (min-width: 1px) and (max-width: 992px) {
@@ -417,9 +515,6 @@
       max-width: 100%;
       max-height: 350px;
     }
-    .form-width {
-      width: 340px;
-    }
   }
 
   @media only screen and (min-width: 1200px) {
@@ -443,143 +538,6 @@
   });
 </script>
 
-<!-- polyfills to make .forEach and .includes work in IE10 and IE11 -->
-<script type="text/javascript">
-  if (window.NodeList && !NodeList.prototype.forEach) {
-    NodeList.prototype.forEach = Array.prototype.forEach;
-  }
-
-  String.prototype.includes = function (match) {
-    return this.indexOf(match) !== -1;
-  };
-</script>
-
-<!-- script to make OneSearch dropdown work -->
-<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
-<script type="text/javascript">
-  function customizeSearch(facet) {
-    // re-render the dropdown menu with the current pick
-    document.getElementById("dropdownMenu1").innerHTML =
-      facet + ' <span class="caret"></span>';
-    document
-      .getElementById("primoQueryTemp")
-      .setAttribute("placeholder", "Enter search term here");
-
-    // reset any previously selected facets
-    document
-      .querySelectorAll(".deleteWithDropdownChange")
-      .forEach(function (e) {
-        e.remove();
-      });
-    document
-      .getElementById("formToAppendInputsTo")
-      .setAttribute(
-        "action",
-        "https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
-      );
-    document.getElementById("tabSetting").setAttribute("value", "Everything");
-    document
-      .getElementById("SearchScopeSetting")
-      .setAttribute("value", "IZ_CI_AW");
-
-    // add the facet that matches the user's dropdown selection
-    if (facet === "Books") {
-      document
-        .getElementById("formToAppendInputsTo")
-        .insertAdjacentHTML(
-          "afterbegin",
-          '<input name="facet" value="rtype,include,books" type="hidden" class="deleteWithDropdownChange" />'
-        );
-    } else if (facet === "Articles") {
-      document
-        .getElementById("formToAppendInputsTo")
-        .insertAdjacentHTML(
-          "afterbegin",
-          '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" class="deleteWithDropdownChange" />'
-        );
-    } else if (facet === "Videos") {
-      document
-        .getElementById("formToAppendInputsTo")
-        .insertAdjacentHTML(
-          "afterbegin",
-          '<input name="facet" value="rtype,include,videos" type="hidden" class="deleteWithDropdownChange" />'
-        );
-    } else if (facet === "Journals") {
-      document
-        .getElementById("formToAppendInputsTo")
-        .setAttribute(
-          "action",
-          "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch"
-        );
-      document
-        .getElementById("tabSetting")
-        .setAttribute("value", "jsearch_slot");
-    } else if (facet === "Newspapers") {
-      document
-        .getElementById("formToAppendInputsTo")
-        .setAttribute(
-          "action",
-          "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch"
-        );
-    } else if (facet === "Reserves") {
-      document
-        .getElementById("tabSetting")
-        .setAttribute("value", "CourseReserves");
-      document
-        .getElementById("SearchScopeSetting")
-        .setAttribute("value", "CourseReserves");
-    } else {
-      console.log("no match");
-    }
-
-    // store the facet, for use on page reload
-    sessionStorage.facet = facet;
-  }
-
-  // if the stored facet exists on page load, render the dropdown with that facet, then clear the stored facet
-  function sessionFunction() {
-    if (sessionStorage.facet && sessionStorage.searchTerms) {
-      stored_terms = sessionStorage.searchTerms;
-      document.getElementById("primoQueryTemp").value = stored_terms;
-      stored_facet = sessionStorage.facet;
-      customizeSearch(stored_facet);
-    }
-    sessionStorage.clear();
-  }
-</script>
-
-<!-- OneSearch widget script from OLS, modified -->
-<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
-<script type="text/javascript">
-  function addPrimoQuery(e) {
-    // prevent the user from submitting the form if no dropdown item has been selected. Added by ME.
-    e.preventDefault();
-    e.stopPropagation();
-    if (
-      document.getElementById("dropdownMenu1").innerHTML.includes("Define") ===
-      true
-    ) {
-      $("#dropdownMenu1").trigger("click.bs.dropdown.data-api");
-      document.getElementById("primoQueryTemp").value = "";
-      document
-        .getElementById("primoQueryTemp")
-        .setAttribute("placeholder", "Please make a selection");
-      return true;
-    }
-
-    // save the search terms, for use on page reload
-    sessionStorage.searchTerms =
-      document.getElementById("primoQueryTemp").value;
-
-    // original OLS widget
-    document.getElementById("primoQuery").value =
-      "any,contains," +
-      document.getElementById("primoQueryTemp").value.replace(/[,]/g, " ");
-    // If you changed the form name at the top, change it below to match
-    document.forms.searchPrimoForm1.submit();
-  }
-</script>
-
 <!-- If browser is pre-ES6, show a warning-->
 <script>
   window.isES6 = false;
@@ -619,9 +577,6 @@
 
 <script type="text/javascript">
   window.onload = function () {
-    <!-- run the sessionStorage stuff on load -->
-    sessionFunction();
-
     <!-- display the error message if feature detection flags old browser -->
     if (window.isES6 == false) {
       document.getElementById("obsolete_browser_alert").innerHTML =

groups/home/bootstrap3/Vue3-v.6.html

@@ -12,8 +12,8 @@
   <!-- BEGIN: content -->
   <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
     <div id="s-lg-index-cols">
-      <div id="app">
+      <div id="app1">
-        <!-- vue app -->
+        <!-- vue app1 -->
         <div class="row">
           <div id="obsolete_browser_alert"></div>
           <div class="col-xs-12" id="header-div">
@@ -34,16 +34,17 @@
                 aria-labelledby="hamburger"
                 id="hamburger-ul"
               >
-                <li>
+                <li
+                  v-for="item in hamburger"
+                  v-bind:key="item.id"
+                >
                   <a
-                    v-for="item in hamburger"
-                    v-bind:key="item.id"
                     class="searchmenu"
                     v-bind:aria-label="item.description"
                     v-bind:href="item.link"
                     v-bind:target="item.target_blank"
                   >
-                    <menus-component v-bind:item="item"></menus-component>
+                    <hamburger-component v-bind:item="item"></hamburger-component>
                   </a>
                 </li>
               </ul>
@@ -63,214 +64,44 @@
               alt="Kibbee Library logo"
               src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
             />
-            <div
+            {{content_box_33471502}}
-              id="corona-alert"
-              type="button"
-              data-toggle="modal"
-              data-target=".bs-example-modal-sm"
-            >
-              <span id="corona-alert-text"
-                >No fines on KBCC books checked out before the pandemic! Just
-                return them to any CUNY Library.</span
-              >
-            </div>
           </div>
           <!-- end of header div -->
-          <!-- Modal -->
-          <div
-            class="modal fade bs-example-modal-sm"
-            tabindex="-1"
-            role="dialog"
-            aria-labelledby="myModalLabel"
-          >
-            <div class="modal-dialog modal-sm" role="document">
-              <div class="modal-content" style="border-radius: 3px">
-                <div class="modal-body">
-                  <button
-                    type="button"
-                    class="close"
-                    data-dismiss="modal"
-                    aria-label="Close"
-                    style="padding: 5px 5px 12px 12px"
-                  >
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                  <h4 class="modal-title" id="myModalLabel">
-                    Before returning books to another CUNY library, please make
-                    sure you have updated your vaccine information to Cleared4
-                    or checked rules for visiting that campus.
-                  </h4>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- End of modal -->
         </div>
         <!-- end of row -->
         <div class="row" id="hamburger-alternative">
           <div class="col-xs-12">
-            <nav class="navbar navbar-default main-nav-container">
+            <navig-component v-bind:navlistofmenus="navlistofmenus"></navig-component>
-              <div class="container-fluid">
-                <ul class="nav navbar-nav" id="navbar-center">
-                  <li
-                    v-for="(navmenu, navkey) in navListOfMenus"
-                    class="dropdown main-nav-dropdown"
-                  >
-                    <nav-component
-                      v-bind:navmenu="navmenu"
-                      v-bind:navkey="navkey"
-                    ></nav-component>
-                  </li>
-                </ul>
-              </div>
-              <!-- end of container-fluid -->
-            </nav>
-            <!-- end of main-nav-container -->
           </div>
           <!-- end of col-xs-12 -->
         </div>
         <!--end of row-->
       </div>
-      <!--end of Vue app-->
+      <!--end of Vue app1-->
     </div>
     <div class="container" style="margin-top: 14px">
       <div class="row kbcc-background-image">
         <div class="col-sm-8">
-          <form
+          <div id="app2" style="clear: both;">
-            class="form-inline onesearch-jumbotron"
+            <onesearch-component></onesearch-component>
-            name="searchPrimoForm1"
+          </div><!-- end of Vue app2 -->
-            role="search"
-            method="get"
-            action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
-            onsubmit="addPrimoQuery();"
-            enctype="application/x-www-form-urlencoded; charset=utf-8"
-            id="formToAppendInputsTo"
-          >
-            <!-- default is "everything"  option suggested from OLS widget builder -->
-            <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
-            <input
-              name="tab"
-              value="Everything"
-              type="hidden"
-              id="tabSetting"
-            />
-            <input
-              name="search_scope"
-              value="IZ_CI_AW"
-              type="hidden"
-              id="SearchScopeSetting"
-            />
-            <input name="mode" value="basic" type="hidden" />
-            <input name="highlight" value="true" type="hidden" />
-            <input name="displayMode" value="full" type="hidden" />
-            <input name="bulkSize" value="10" type="hidden" />
-            <input name="dum" value="true" type="hidden" />
-            <input name="displayField" value="all" type="hidden" />
-            <input name="pcAvailabiltyMode" value="false" type="hidden" />
-            <input name="query" id="primoQuery" type="hidden" />
-            <h1 id="onesearch-header">
-              <a
-                href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en"
-              >
-                <img
-                  class="image-fail onesearchsubmit"
-                  src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png"
-                  alt="OneSearch"
-                />
-              </a>
-            </h1>
-            <div class="form-group" id="flex-search-form">
-              <div class="dropdown input-group zero-margin" id="blue-border1">
-                <button
-                  class="btn btn-default dropdown-toggle"
-                  type="button"
-                  id="dropdownMenu1"
-                  data-toggle="dropdown"
-                  aria-haspopup="true"
-                  aria-expanded="true"
-                  aria-label="Define Your Search"
-                >
-                  <span id="defineYourSearch">Define Your Search </span>
-                  <span class="caret"></span>
-                </button>
-                <ul
-                  class="dropdown-menu fade dropdown-margin"
-                  aria-labelledby="dropdownMenu1"
-                >
-                  <li>
-                    <a class="searchmenu" onclick="customizeSearch('Books')">
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Books</strong>
-                      </div>
-                    </a>
-                    <a class="searchmenu" onclick="customizeSearch('Articles')">
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Articles (Peer reviewed)</strong>
-                      </div>
-                    </a>
-                    <a class="searchmenu" onclick="customizeSearch('Reserves')">
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Course reserves</strong>
-                      </div>
-                    </a>
-                    <a
-                      class="searchmenu"
-                      onclick="customizeSearch('Newspapers')"
-                    >
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Newspapers and magazines</strong>
-                      </div>
-                    </a>
-                    <a class="searchmenu" onclick="customizeSearch('Journals')">
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Journals</strong>
-                      </div>
-                    </a>
-                    <a
-                      href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced"
-                      class="searchmenu"
-                    >
-                      <div class="highlight-menu-item bigger-fancy-text">
-                        <strong>Advanced search</strong>
-                      </div>
-                    </a>
-                  </li>
-
-                  <li></li>
-                </ul>
-              </div>
-              <label class="sr-only" for="primoQueryTemp">Search terms</label>
-              <div class="input-group zero-margin form-width" id="blue-border2">
-                <input
-                  class="form-control form-width inherit-height-from-flex"
-                  name="queryTemp"
-                  id="primoQueryTemp"
-                  type="search"
-                  value=""
-                  placeholder="Enter search term here"
-                />
-              </div>
-              <div class="input-group zero-margin" id="blue-border3">
-                <input
-                  type="submit"
-                  class="btn btn-default form-control onesearchsubmit inherit-height-from-flex"
-                  value="Search"
-                  onclick="return addPrimoQuery(event);"
-                />
-              </div>
-            </div>
-          </form>
         </div>
         <div class="col-sm-4">
           <div class="nav-by-jumbotron">
-            <a class="ga-by-jumbotron">
+            <button
+              id="eq_32886"
+              type="button"
+              class="ga-by-jumbotron ga-by-jumbotron-rooms nav-jumbotron-link btn-link"
+              style="display:block;width:100%;"
+              aria-label="Book A Study Room"
+            >
               <div class="nav-divs-by-jumbotron" id="bookastudyroom">
-                <h2><button id="eq_32886">Book A Study Room</button></h2>
+                <h2 id="bookastudyroom-heading">Book A Study Room</h2>
               </div>
-            </a>
+            </button>
             <a
               href="https://library.kbcc.cuny.edu/az.php"
-              class="ga-by-jumbotron"
+              class="ga-by-jumbotron ga-by-jumbotron-databases"
             >
               <div class="nav-divs-by-jumbotron">
                 <h2>Databases</h2>
@@ -278,18 +109,18 @@
             </a>
             <a
               href="https://library.kbcc.cuny.edu/guides"
-              class="ga-by-jumbotron"
+              class="ga-by-jumbotron ga-by-jumbotron-guides"
             >
               <div class="nav-divs-by-jumbotron">
                 <h2>Research Guides</h2>
               </div>
             </a>
             <a
-              href="https://kbcc-cuny.libwizard.com/f/feedback"
+              href="https://library.kbcc.cuny.edu/faq"
-              class="ga-by-jumbotron"
+              class="ga-by-jumbotron ga-by-jumbotron-print"
             >
               <div class="nav-divs-by-jumbotron">
-                <h2>Send Us Feedback</h2>
+                <h2>FAQ</h2>
               </div>
             </a>
           </div>
@@ -317,15 +148,15 @@
                     </li>
                     <li>
                       <a
-                        href="https://library.kbcc.cuny.edu/ebooks"
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8155422080006129"
                         class="ga-library-links"
                       >
-                        Find eTextbooks and eBooks
+                        2024-2025 Textbooks
                       </a>
                     </li>
                     <li>
                       <a
-                        href="https://library.kbcc.cuny.edu/video"
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150905740006129"
                         class="ga-library-links"
                       >
                         Streaming Video
@@ -333,10 +164,10 @@
                     </li>
                     <li>
                       <a
-                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129"
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8156195890006129"
                         class="ga-library-links"
                       >
-                        Comic Books & Graphic Novels
+                        Comic Books &amp; Graphic Novels
                       </a>
                     </li>
                   </ul>
@@ -345,7 +176,7 @@
                   <ul class="link-list">
                     <li>
                       <a
-                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
+                        href="http://kbcc.ezproxy.cuny.edu/login?url=https://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
                         target="_blank"
                         class="ga-library-links"
                       >
@@ -383,14 +214,6 @@
               </div>
             </div>
           </div>
-          <div class="panel panel-default hide-body-border">
-            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title">
-                <h2>Today's Library Hours</h2>
-              </span>
-            </div>
-            <div class="panel-body">{{content_box_29248590}}</div>
-          </div>
         </div>
         <div class="col-md-5 col-lg-6">
           <div class="panel panel-default hide-body-border">
@@ -426,17 +249,6 @@
               <a href="tel:+1-718-368-5632">718-368-5632</a>
             </div>
             <div class="whiteahrefs">
-              <a href="https://kbcc-cuny.libwizard.com/f/reference">
-                reference.desk@kbcc.cuny.edu
-              </a>
-              <br />
-              <a
-                aria-label="Twitter"
-                href="https://twitter.com/KBCCLibrary"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-twitter"></i>
-              </a>
               <a
                 aria-label="Instagram"
                 href="https://www.instagram.com/kbcclibrary/"
@@ -487,7 +299,7 @@
             <a
               href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365"
             >
-              Log in to LibApps
+              LibApps
             </a>
             |
             <a
@@ -532,14 +344,13 @@
   </div>
 
   <!-- LibChat widget script -->
-  <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=212334892d13e5887f44a2763092678b"></script>
+  <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
 
   <!-- add Vue scripts -->
-  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> --><!-- development -->
+  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> development -->
-  <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
+  <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script><!-- production -->
-  <!--production -->
   <script
     type="text/javascript"
-    src="https://libapps.s3.amazonaws.com/sites/2365/include/main2.js"
+    src="https://libapps.s3.amazonaws.com/sites/2365/include/main6.js"
   ></script>
 </body>

groups/home/bootstrap3/src/main4.js

@@ -298,7 +298,7 @@ const app1 = createApp({
               id: 5,
             },
             {
-              link: "https://www.bkstr.com/kingsboroughccstore/home",
+              link: "https://kbcc.textbookx.com/institutional/index.php",
               icon: "fas fa-cash-register fa-fw bigger-icon",
               description: "KBCC Bookstore",
               target_blank: "_blank",
@@ -310,7 +310,7 @@ const app1 = createApp({
           id: 2,
           data: [
             {
-              link: "http://kbcc.cuny.illiad.oclc.org/illiad/logon.html",
+              link: "https://kbcc-cuny.illiad.oclc.org/illiad/logon.html",
               icon: "fas fa-books fa-fw bigger-icon",
               description: "Interlibrary Loan",
               target_blank: "_blank",
@@ -331,7 +331,7 @@ const app1 = createApp({
               id: 3,
             },
             {
-              link: "https://kbcc-cuny.libwizard.com/f/bookrequest",
+              link: "https://kbcc-cuny.libanswers.com/form?queue_id=6967",
               icon: "fas fa-shopping-basket fa-fw bigger-icon",
               description: "Suggest a Book for Purchase",
               target_blank: "",
@@ -377,6 +377,13 @@ const app1 = createApp({
               target_blank: "",
               id: 4,
             },
+            {
+              link: "https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB",
+              icon: "fa-solid fa-star fa-fw bigger-icon",
+              description: "Featured Collections",
+              target_blank: "",
+              id: 5,
+            },
           ],
         },
         "Location & Hours": {

groups/home/bootstrap3/src/main5.js

@@ -0,0 +1,395 @@
+const hamburgerComponent = {
+  template: `<div class="bigger-fancy-text">
+    <i v-bind:class="item.icon" aria-hidden="true"></i>
+    <strong>{{ item.description }}</strong>
+  </div>`,
+  props: ["item"],
+};
+
+const navigComponent = {
+  template: `<nav class="navbar navbar-default main-nav-container">
+    <div class="container-fluid">
+      <ul class="nav navbar-nav" id="navbar-center">
+        <li v-for="(navmenu, navkey) in navlistofmenus"
+            v-bind:key="navmenu.id"
+            class="dropdown main-nav-dropdown"
+        >
+          <a>
+            <a class="dropdown-toggle ga-main-navbar"
+               data-toggle="dropdown"
+               role="button"
+               aria-haspopup="true"
+               aria-expanded="false"
+            >
+              <div class="caret-text">{{ navkey }}</div>
+              <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
+            </a>
+            <ul class="dropdown-menu fade dropdown-margin">
+              <li>
+                <a v-for="item in navmenu.data"
+                   v-bind:key="item.id"
+                   class="searchmenu"
+                   v-bind:aria-label="item.description"
+                   v-bind:href="item.link"
+                   v-bind:target="item.target_blank"
+                >
+                  <div class="bigger-fancy-text">
+                    <i v-bind:class="item.icon" aria-hidden="true"></i>
+                    <strong>{{ item.description }}</strong>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>`,
+  props: ["navlistofmenus"],
+};
+
+const onesearchComponent = {
+  template: `<form class="form-inline onesearch-jumbotron"
+      name="searchPrimoForm1"
+      ref="oneSearchForm"
+      role="search"
+      method="get"
+      action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
+      enctype="application/x-www-form-urlencoded; charset=utf-8"
+  >
+    <!-- default is "everything"  option suggested from OLS widget builder -->
+    <input name="facet" :value="facet" type="hidden"/>
+    <input name="mfacet" :value="mfacet" type="hidden" />
+    <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
+    <input name="tab" value="Everything" type="hidden" />
+    <input name="search_scope" value="IZ_CI_AW" type="hidden" />
+    <input name="mode" value="basic" type="hidden" />
+    <input name="highlight" value="true" type="hidden" />
+    <input name="displayMode" value="full" type="hidden" />
+    <input name="bulkSize" value="10" type="hidden" />
+    <input name="dum" value="true" type="hidden" />
+    <input name="displayField" value="all" type="hidden" />
+    <input name="pcAvailabiltyMode" value="false" type="hidden" />
+    <input name="query" ref="primoQueryString" type="hidden" />
+    <h1 id="onesearch-header">
+        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
+            <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
+        </a>
+    </h1>
+    <div class="form-group" id="flex-search-form">
+        <label class="sr-only" for="primoQueryTemp">Search terms</label>
+        <div class="input-group zero-margin form-width" id="blue-border2">
+            <input class="form-control inherit-height-from-flex"
+                   name="queryTemp"
+                   id="primoQueryTemp"
+                   ref="primoQueryTempString"
+                   type="search"
+                   v-model="searchstring"
+                   placeholder="Enter search term here"
+             />
+        </div>
+        <div class="input-group zero-margin" id="blue-border3">
+            <input type="submit"
+                   class="btn btn-default form-control onesearchsubmit inherit-height-from-flex"
+                   value="Search"
+                   @click.stop.prevent="submitSearch"
+            />
+        </div>
+    </div>
+    <div id="radios">
+        <input type="radio" 
+               name="radio1"
+               id="booksradio"
+               @click="selectradio('rtype,include,books', '')"
+        >
+        <label for="booksradio">Books</label>
+        <div class="radiocontainer">
+            <input type="radio"
+                   name="radio1"
+                   id="articlesradio"
+                   @click="selectradio('tlevel,include,peer_reviewed', 'rtype,include,articles,1')"
+            >
+            <label for="articlesradio">Articles (Peer reviewed)</label>
+        </div>
+        <div class="radiocontainer">
+            <input type="radio"
+                   name="radio1"
+                   id="everythingradio"
+                   @click="selectradio('', '')"
+            >
+            <label for="everythingradio">Everything</label>
+        </div>
+    </div>
+    <div id="advanced">
+        <strong>
+            <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced">Advanced</a>
+        </strong>
+    </div>
+</form>`,
+  methods: {
+    selectradio(radiooutputfacet, radiooutputmfacet) {
+      this.facet = radiooutputfacet; // store the data from the radio selection
+      this.mfacet = radiooutputmfacet;
+    },
+    submitSearch() {
+      this.$refs.primoQueryString.value = `any,contains,${this.$refs.primoQueryTempString.value.replace(
+        /[,]/g,
+        " "
+      )}`; // vueified OLS widget code
+      this.$refs.oneSearchForm.submit(); // submit the form
+    },
+  },
+  data() {
+    return {
+      facet: "", // initialize the data from the radio selection
+      mfacet: "",
+    };
+  },
+};
+
+const { createApp } = Vue;
+
+const app1 = createApp({
+  components: {
+    "navig-component": navigComponent,
+    "hamburger-component": hamburgerComponent,
+  },
+  data() {
+    return {
+      hamburger: [
+        {
+          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
+          icon: "fas fa-search fa-fw bigger-icon",
+          description: "OneSearch",
+          target_blank: "",
+          id: 1,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/az.php",
+          icon: "fas fa-database fa-fw bigger-icon",
+          description: "Databases A to Z",
+          target_blank: "",
+          id: 2,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/guides",
+          icon: "fas fa-telescope fa-fw bigger-icon",
+          description: "Research Guides",
+          target_blank: "",
+          id: 3,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/faq",
+          icon: "fas fa-question-circle fa-fw bigger-icon",
+          description: "FAQ",
+          target_blank: "",
+          id: 4,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/calendar",
+          icon: "fas fa-clock fa-fw bigger-icon",
+          description: "Library Hours",
+          target_blank: "",
+          id: 5,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/sitemap",
+          icon: "fas fa-location-arrow fa-fw bigger-icon",
+          description: "Site Map",
+          target_blank: "",
+          id: 6,
+        },
+      ],
+      navlistofmenus: {
+        "Find It": {
+          id: 1,
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/az.php",
+              icon: "fas fa-database fa-fw bigger-icon",
+              description: "Databases A to Z",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
+              icon: "fas fa-newspaper fa-fw bigger-icon",
+              description: "Newspaper Search",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
+              icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
+              description: "Course Reserves",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
+              icon: "fas fa-book fa-fw bigger-icon",
+              description: "Search for Specific Journals",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/academicworks",
+              icon: "fas fa-archive fa-fw bigger-icon",
+              description: "CUNY Academic Works",
+              target_blank: "_blank",
+              id: 5,
+            },
+            {
+              link: "https://kbcc.textbookx.com/institutional/index.php",
+              icon: "fas fa-cash-register fa-fw bigger-icon",
+              description: "KBCC Bookstore",
+              target_blank: "_blank",
+              id: 6,
+            },
+          ],
+        },
+        Services: {
+          id: 2,
+          data: [
+            {
+              link: "https://kbcc-cuny.illiad.oclc.org/illiad/logon.html",
+              icon: "fas fa-books fa-fw bigger-icon",
+              description: "Interlibrary Loan",
+              target_blank: "_blank",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
+              icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
+              description: "Book a Library Instruction Session",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/mediaservices",
+              icon: "fas fa-photo-video fa-fw bigger-icon",
+              description: "Media Services",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://kbcc-cuny.libanswers.com/form?queue_id=6967",
+              icon: "fas fa-shopping-basket fa-fw bigger-icon",
+              description: "Suggest a Book for Purchase",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
+              icon: "fas fa-bookmark fa-fw bigger-icon",
+              description: "Suggest an Item to Add to Reserves",
+              target_blank: "",
+              id: 5,
+            },
+          ],
+        },
+        "About Us": {
+          id: 3,
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/about-us/directory",
+              icon: "fas fa-address-book fa-fw bigger-icon",
+              description: "Faculty & Staff Directory",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/newarrivals",
+              icon: "far fa-mail-bulk fa-fw bigger-icon",
+              description: "New Arrivals",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/about-us/liaisons",
+              icon: "fas fa-theater-masks fa-fw bigger-icon",
+              description: "Subject Liaisons",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/social",
+              icon: "far fa-hashtag fa-fw bigger-icon",
+              description: "Social Media",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB",
+              icon: "fa-solid fa-star fa-fw bigger-icon",
+              description: "Featured Collections",
+              target_blank: "",
+              id: 5,
+            },
+          ],
+        },
+        "Location & Hours": {
+          id: 4,
+          data: [
+            {
+              link: "https://tour.kingsborough.edu/",
+              icon: "fas fa-map-marked-alt fa-fw bigger-icon",
+              description: "Campus Map",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/calendar",
+              icon: "fas fa-clock fa-fw bigger-icon",
+              description: "Library Hours",
+              target_blank: "",
+              id: 2,
+            },
+          ],
+        },
+        Help: {
+          id: 5,
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/askalibrarian",
+              icon: "fas fa-book-reader fa-fw bigger-icon",
+              description: "Ask A Librarian",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/faq",
+              icon: "fas fa-question-circle fa-fw bigger-icon",
+              description: "FAQ",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/guides",
+              icon: "fas fa-telescope fa-fw bigger-icon",
+              description: "Research Guides and Tutorials",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/ENGLISH24",
+              icon: "fas fa-question fa-fw bigger-icon",
+              description: "How to Use the Library",
+              target_blank: "",
+              id: 4,
+            },
+          ],
+        },
+      },
+    };
+  },
+});
+app1.mount("#app1");
+
+const app2 = createApp({
+  components: {
+    "onesearch-component": onesearchComponent,
+  },
+});
+app2.mount("#app2");
+

groups/home/bootstrap3/src/main6.js

@@ -0,0 +1,400 @@
+const hamburgerComponent = {
+  template: `<div class="bigger-fancy-text">
+    <i v-bind:class="item.icon" aria-hidden="true"></i>
+    <strong>{{ item.description }}</strong>
+  </div>`,
+  props: ["item"],
+};
+
+const navigComponent = {
+  template: `<nav class="navbar navbar-default main-nav-container">
+    <div class="container-fluid">
+      <ul class="nav navbar-nav" id="navbar-center">
+        <li v-for="(navmenu, navkey) in navlistofmenus"
+            v-bind:key="navmenu.id"
+            class="dropdown main-nav-dropdown"
+        >
+          <a>
+            <a class="dropdown-toggle ga-main-navbar"
+               data-toggle="dropdown"
+               role="button"
+               aria-haspopup="true"
+               aria-expanded="false"
+            >
+              <div class="caret-text">{{ navkey }}</div>
+              <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
+            </a>
+            <ul class="dropdown-menu fade dropdown-margin">
+              <li>
+                <a v-for="item in navmenu.data"
+                   v-bind:key="item.id"
+                   class="searchmenu"
+                   v-bind:aria-label="item.description"
+                   v-bind:href="item.link"
+                   v-bind:target="item.target_blank"
+                >
+                  <div class="bigger-fancy-text">
+                    <i v-bind:class="item.icon" aria-hidden="true"></i>
+                    <strong>{{ item.description }}</strong>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>`,
+  props: ["navlistofmenus"],
+};
+
+const onesearchComponent = {
+  template: `<form class="form-inline onesearch-jumbotron"
+      name="searchPrimoForm1"
+      ref="oneSearchForm"
+      role="search"
+      method="get"
+      action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
+      enctype="application/x-www-form-urlencoded; charset=utf-8"
+  >
+    <!-- default is "everything"  option suggested from OLS widget builder -->
+    <input name="facet" :value="facet" type="hidden"/>
+    <input name="mfacet" :value="mfacet" type="hidden" />
+    <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
+    <input name="tab" value="Everything" type="hidden" />
+    <input name="search_scope" value="IZ_CI_AW" type="hidden" />
+    <input name="mode" value="basic" type="hidden" />
+    <input name="highlight" value="true" type="hidden" />
+    <input name="displayMode" value="full" type="hidden" />
+    <input name="bulkSize" value="10" type="hidden" />
+    <input name="dum" value="true" type="hidden" />
+    <input name="displayField" value="all" type="hidden" />
+    <input name="pcAvailabiltyMode" value="false" type="hidden" />
+    <input name="query" ref="primoQueryString" type="hidden" />
+    <h1 id="onesearch-header">
+        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
+            <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
+        </a>
+    </h1>
+    <div class="form-group" id="flex-search-form">
+        <label class="sr-only" for="primoQueryTemp">Search terms</label>
+        <div class="input-group zero-margin form-width" id="blue-border2">
+            <input class="form-control inherit-height-from-flex"
+                   name="queryTemp"
+                   id="primoQueryTemp"
+                   ref="primoQueryTempString"
+                   type="search"
+                   v-model="searchstring"
+                   aria-label="Search terms"
+                   placeholder="Enter search term here"
+             />
+        </div>
+        <div class="input-group zero-margin" id="blue-border3">
+            <input type="submit"
+                   class="btn btn-default form-control onesearchsubmit inherit-height-from-flex"
+                   value="Search"
+                   @click.stop.prevent="submitSearch"
+            />
+        </div>
+    </div>
+    <fieldset id="radios">
+        <legend class="sr-only">Limit search to</legend>
+
+        <input type="radio" 
+               name="radio1"
+               id="booksradio"
+               @click="selectradio('rtype,include,books', '')"
+        >
+        <label for="booksradio">Books</label>
+
+        <div class="radiocontainer">
+            <input type="radio"
+                   name="radio1"
+                   id="articlesradio"
+                   @click="selectradio('tlevel,include,peer_reviewed', 'rtype,include,articles,1')"
+            >
+            <label for="articlesradio">Articles (Peer reviewed)</label>
+        </div>
+
+        <div class="radiocontainer">
+            <input type="radio"
+                   name="radio1"
+                   id="everythingradio"
+                   @click="selectradio('', '')"
+            >
+            <label for="everythingradio">Everything</label>
+        </div>
+    </fieldset>
+    <div id="advanced">
+        <strong>
+            <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced">Advanced</a>
+        </strong>
+    </div>
+</form>`,
+  methods: {
+    selectradio(radiooutputfacet, radiooutputmfacet) {
+      this.facet = radiooutputfacet; // store the data from the radio selection
+      this.mfacet = radiooutputmfacet;
+    },
+    submitSearch() {
+      this.$refs.primoQueryString.value = `any,contains,${this.$refs.primoQueryTempString.value.replace(
+        /[,]/g,
+        " "
+      )}`; // vueified OLS widget code
+      this.$refs.oneSearchForm.submit(); // submit the form
+    },
+  },
+  data() {
+    return {
+      facet: "", // initialize the data from the radio selection
+      mfacet: "",
+    };
+  },
+};
+
+const { createApp } = Vue;
+
+const app1 = createApp({
+  components: {
+    "navig-component": navigComponent,
+    "hamburger-component": hamburgerComponent,
+  },
+  data() {
+    return {
+      hamburger: [
+        {
+          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
+          icon: "fas fa-search fa-fw bigger-icon",
+          description: "OneSearch",
+          target_blank: "",
+          id: 1,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/az.php",
+          icon: "fas fa-database fa-fw bigger-icon",
+          description: "Databases A to Z",
+          target_blank: "",
+          id: 2,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/guides",
+          icon: "fas fa-telescope fa-fw bigger-icon",
+          description: "Research Guides",
+          target_blank: "",
+          id: 3,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/faq",
+          icon: "fas fa-question-circle fa-fw bigger-icon",
+          description: "FAQ",
+          target_blank: "",
+          id: 4,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/calendar",
+          icon: "fas fa-clock fa-fw bigger-icon",
+          description: "Library Hours",
+          target_blank: "",
+          id: 5,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/sitemap",
+          icon: "fas fa-location-arrow fa-fw bigger-icon",
+          description: "Site Map",
+          target_blank: "",
+          id: 6,
+        },
+      ],
+      navlistofmenus: {
+        "Find It": {
+          id: 1,
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/az.php",
+              icon: "fas fa-database fa-fw bigger-icon",
+              description: "Databases A to Z",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
+              icon: "fas fa-newspaper fa-fw bigger-icon",
+              description: "Newspaper Search",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
+              icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
+              description: "Course Reserves",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
+              icon: "fas fa-book fa-fw bigger-icon",
+              description: "Search for Specific Journals",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/academicworks",
+              icon: "fas fa-archive fa-fw bigger-icon",
+              description: "CUNY Academic Works",
+              target_blank: "_blank",
+              id: 5,
+            },
+            {
+              link: "https://kbcc.textbookx.com/institutional/index.php",
+              icon: "fas fa-cash-register fa-fw bigger-icon",
+              description: "KBCC Bookstore",
+              target_blank: "_blank",
+              id: 6,
+            },
+          ],
+        },
+        Services: {
+          id: 2,
+          data: [
+            {
+              link: "https://kbcc-cuny.illiad.oclc.org/illiad/logon.html",
+              icon: "fas fa-books fa-fw bigger-icon",
+              description: "Interlibrary Loan",
+              target_blank: "_blank",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
+              icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
+              description: "Book a Library Instruction Session",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/mediaservices",
+              icon: "fas fa-photo-video fa-fw bigger-icon",
+              description: "Media Services",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://kbcc-cuny.libanswers.com/form?queue_id=6967",
+              icon: "fas fa-shopping-basket fa-fw bigger-icon",
+              description: "Suggest a Book for Purchase",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
+              icon: "fas fa-bookmark fa-fw bigger-icon",
+              description: "Suggest an Item to Add to Reserves",
+              target_blank: "",
+              id: 5,
+            },
+          ],
+        },
+        "About Us": {
+          id: 3,
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/about-us/directory",
+              icon: "fas fa-address-book fa-fw bigger-icon",
+              description: "Faculty & Staff Directory",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/newarrivals",
+              icon: "far fa-mail-bulk fa-fw bigger-icon",
+              description: "New Arrivals",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/about-us/liaisons",
+              icon: "fas fa-theater-masks fa-fw bigger-icon",
+              description: "Subject Liaisons",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/social",
+              icon: "far fa-hashtag fa-fw bigger-icon",
+              description: "Social Media",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB",
+              icon: "fa-solid fa-star fa-fw bigger-icon",
+              description: "Featured Collections",
+              target_blank: "",
+              id: 5,
+            },
+          ],
+        },
+        "Location & Hours": {
+          id: 4,
+          data: [
+            {
+              link: "https://tour.kingsborough.edu/",
+              icon: "fas fa-map-marked-alt fa-fw bigger-icon",
+              description: "Campus Map",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/calendar",
+              icon: "fas fa-clock fa-fw bigger-icon",
+              description: "Library Hours",
+              target_blank: "",
+              id: 2,
+            },
+          ],
+        },
+        Help: {
+          id: 5,
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/askalibrarian",
+              icon: "fas fa-book-reader fa-fw bigger-icon",
+              description: "Ask A Librarian",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/faq",
+              icon: "fas fa-question-circle fa-fw bigger-icon",
+              description: "FAQ",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/guides",
+              icon: "fas fa-telescope fa-fw bigger-icon",
+              description: "Research Guides and Tutorials",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/ENGLISH24",
+              icon: "fas fa-question fa-fw bigger-icon",
+              description: "How to Use the Library",
+              target_blank: "",
+              id: 4,
+            },
+          ],
+        },
+      },
+    };
+  },
+});
+app1.mount("#app1");
+
+const app2 = createApp({
+  components: {
+    "onesearch-component": onesearchComponent,
+  },
+});
+app2.mount("#app2");
+

groups/home/bootstrap5/az/css.html

@@ -0,0 +1,45 @@
+<style>
+#bannercontainer {
+        width: %100;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: -20px;
+}
+
+@media only screen and (min-width: 1px) {
+        #newbanner {
+                width: 80%;
+        }
+} 
+
+@media only screen and (min-width: 992px) {
+        #newbanner {
+                width: 60%;
+        }
+}
+
+/* tighten up elements at the top of the AtoZ */
+#s-lib-public-header-desc { margin-top: -30px; }
+#s-lib-public-main-searchbar { margin-top: -20px; }
+
+/* change search button color to Kingsborough orange */
+.btn-primary, .btn-primary:hover, .btn-primary:active { border-color: #ff4e00 !important; background-color: #ff4e00 !important; }
+
+/* change the background color of the header */
+.navbar-expand-lg { background-color: #003466 !important; }
+
+/* change the background color of the header on mobile */ 
+#az-public-mobile-filters { background-color: #003466; } 
+
+/* make the text in the header white, so that it shows up on the dark blue background */
+.select2 { background-color: white; }
+.collapsible, .s-lg-az-reset { color: white !important; }
+
+/* make nav items bigger */
+textarea::placeholder, input::placeholder, .select2-selection__choice__display { font-size: 1.3em !important; }
+.select2-container { overflow: visible; }
+#col-search > .w-100 > input:not(:placeholder-shown) { font-size: 1em !important } /* fix text size on filled out text box */
+</style>

groups/home/bootstrap5/az/js.html

@@ -0,0 +1,6 @@
+<script>
+// to add a bootstrap width class to the text input on the nav
+let myItem = document.getElementById("col-search")
+let child = myItem.firstElementChild;
+child.setAttribute("class", "w-100")
+</script>

groups/minimum-viable/index1.html

@@ -96,7 +96,7 @@
                       <a
                         class="searchmenu"
                         aria-label="KBCC Bookstore"
-                        href="https://www.bkstr.com/kingsboroughccstore/home"
+                        href="https://kbcc.textbookx.com/institutional/index.php"
                         target="_blank">
                         <div class="bigger-fancy-text">
                           <i
@@ -159,7 +159,7 @@
                       <a
                         class="searchmenu"
                         aria-label="Suggest a Book for Purchase"
-                        href="https://kbcc-cuny.libwizard.com/f/bookrequest">
+                        href="https://kbcc-cuny.libanswers.com/form?queue_id=6967">
                         <div class="bigger-fancy-text">
                           <i
                             class="fas fa-shopping-basket fa-fw bigger-icon"
@@ -239,6 +239,17 @@
                           <strong>Social Media</strong>
                         </div>
                       </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Featured Collections"
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fa-solid fa-star fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Featured Collections</strong>
+                        </div>
+                      </a>
                     </li>
                   </ul>
                 </li>

misc/system-wide-js-css.html

@@ -1,134 +1,167 @@
-<style>
+<!-- Google Tag Manager -->
-  /* Fix the color of the "Search" button on the subject pages */
+<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-  form .btn.btn-info {
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    background-color: #003466;
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    border: 1px solid #003466;
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-  }
+})(window,document,'script','dataLayer','GTM-NXHWQX3');</script>
+<!-- End Google Tag Manager -->
 
-  /* Make the badges KBCC blue so they doesn't clash
+<style>
+
+/* Fix the color of the "Search" button on the subject pages */
+form .btn.btn-info {
+    background-color:#003466;
+    border:1px solid #003466;
+}
+
+/* Make the badges KBCC blue so they doesn't clash
 .s-lg-az-result-badge-new, .s-lg-az-result-badge-popular, .s-lg-az-result-badge-featured {
     background-color:#003466;
 } */
 
-  /* CSS to target buttons on the LibGuides homepage more specifically.
+
+/* CSS to target buttons on the LibGuides homepage more specifically.
     These had been broken by a LibGuides update, 9/6/2016 */
 
-  .s-lg-hp-btn-section,
+.s-lg-hp-btn-section, .s-lg-hp-btn-section:hover, .s-lg-hp-btn-section:focus {
-  .s-lg-hp-btn-section:hover,
+    background-color:#003466;
-  .s-lg-hp-btn-section:focus {
+    border:1px solid #003466;
-    background-color: #003466;
+}
-    border: 1px solid #003466;
-  }
 
-  /* temporary rule to keep non-working links to librarians pages from displaying on the guides -> course guides page */
+/* temporary rule to keep non-working links to librarians pages from displaying on the guides -> course guides page */
-  .s-lg-guide-info-account {
+.s-lg-guide-info-account {
-    display: none;
+    display:none;
-  }
+}
 
-  /* styling the header on the main page */
+/* styling the header on the main page */
-  #s-lg-hp-nav {
+#s-lg-hp-nav {     
-    background: url(https://www1.kingsborough.edu/photo_album/kcc_campus_06/images/KG_Kibbee_3_jpg.jpg); /* does not seem to work well with .png files */
+    background:url(https://www1.kingsborough.edu/photo_album/kcc_campus_06/images/KG_Kibbee_3_jpg.jpg); /* does not seem to work well with .png files */ 
-    background-color: #258;
+    background-color:#258;     
-    background-size: 100%;
+    background-size:100%;     
-    height: 190px;
+    height:190px;
-  }
+}
 
-  #s-lg-hp-nav-bottom {
+#s-lg-hp-nav-bottom {
-    background-color: rgba(255, 255, 255, 0.55);
+    background-color:rgba(255,255,255,0.55); 
-    border-radius: 0;
+    border-radius:0;
-  }
+} 
 
-  #nav-spacer {
+#nav-spacer {
-    height: 55px;
+    height:55px;
-    width: 400px;
+    width:400px;
-  }
+}
 
-  #nav-title-spacer {
+#nav-title-spacer {
-    height: 42px;
+    height:42px; 
-    width: 400px;
+    width:400px; 
-    padding: 0px 0px 0px 20px;
+    padding:0px 0px 0px 20px; 
-    margin-bottom: 10px;
+    margin-bottom:10px;
-    background-color: rgba(0, 0, 0, 0.65);
+    background-color:rgba(0,0,0,0.65);
-    color: white;
+    color:white;
-  }
+}
 
-  /* makes the heading smaller on very small screens */
+/* makes the heading smaller on very small screens */
 
-  @media (max-width: 455px) {
+@media (max-width: 455px) {
     h1 {
-      font-size: 25px;
+        font-size: 25px;
     }
-    #nav-title-spacer {
+   #nav-title-spacer {
-      width: inherit;
+        width: inherit;
     }
-  }
+}
 
-  /* Making the pills the right color */
+/* Making the pills the right color */
 
-  a.label.label-info:hover {
+a.label.label-info:hover {
-    background-color: #003466;
+    background-color:#003466;
-  }
+} 
 
-  .label-info {
+.label-info {
-    background-color: #003466;
+   background-color:#003466;
-  }
+}
 
-  /* new nav pills styling (11/17/2016) */
+/* new nav pills styling (11/17/2016) */
 
-  .s-lg-index-nav-btn.active > .btn {
+.s-lg-index-nav-btn.active > .btn {
-    background-color: #003466;
+   background-color:#003466;
-  }
+}
 
-  .s-lg-index-nav-btn.active > .btn:focus {
+.s-lg-index-nav-btn.active > .btn:focus {
-    background-color: #003466;
+   background-color:#003466;
-  }
+}
 
-  .s-lg-index-nav-btn.active > .btn:hover {
+.s-lg-index-nav-btn.active > .btn:hover {
-    background-color: #003466;
+   background-color:#003466;
-  }
+}
 
-  ul.nav.nav-pills > .s-lg-index-nav-btn.active > button.btn:focus {
+ul.nav.nav-pills > .s-lg-index-nav-btn.active > button.btn:focus {
     outline: none;
-  }
+}
 
-  /* not sure what these are for */
+/* not sure what these are for */
-  #spacer {
+#spacer {
-    height: 30px;
+        height:30px;
-  }
+}
 
-  #s-lib-bc {
+#s-lib-bc {
-    clear: both;
+       clear:both;
-  }
+}
 
-  /* alternate fonts included to accommodate computers that do not have the defaults */
+/* alternate fonts included to accommodate computers that do not have the defaults */
-  body {
+body {
-    font-family: arial, sans-serif;
+        font-family: arial, sans-serif;
-  }
+}
 
-  /* add a bit of space above the blue "Go To A-Z List" button on the LibGuides homepage*/
+/* add a bit of space above the blue "Go To A-Z List" button on the LibGuides homepage*/
-  a[href^="/az.php"].btn.btn-info.s-lg-hp-btn-section {
+a[href^="/az.php"].btn.btn-info.s-lg-hp-btn-section {
-    margin-top: 9px;
+       margin-top:9px;
-  }
+}
 
-  /* new banner 6/27/2021 */
+/* new banner 6/27/2021 */
-  #bannercontainer {
+#bannercontainer {
-    width: %100;
+        width: %100;
-    display: flex;
+        display: flex;
-    flex-direction: row;
+        flex-direction: row;
-    flex-wrap: wrap;
+        flex-wrap: wrap;
-    justify-content: center;
+        justify-content: center;
-    align-items: center;
+        align-items: center;
-  }
+}
 
-  @media only screen and (min-width: 1px) {
+@media only screen and (min-width: 1px) {
-    #newbanner {
+        #newbanner {
-      width: 80%;
+                width: 80%;
-    }
+        }
-  }
+} 
 
-  @media only screen and (min-width: 992px) {
+@media only screen and (min-width: 992px) {
-    #newbanner {
+        #newbanner {
-      width: 60%;
+                width: 60%;
-    }
+        }
-  }
+}
+</style>
+
+<!-- scripts to replace Email Me buttons in profiles with LibAnswers widgets -->
+<script>
+$(document).ready(function() { 
+  try {
+    document.querySelector("[id^='s-lib-profile-email-']").innerHTML = "<div id='s-la-widget-19393'></div>"
+  } catch (error) {
+    console.log("Email Me button not found on this page. No action taken. This is just a warning...")
+  };
+});
+</script>
+<script src="https://kbcc-cuny.libanswers.com/1.0/widgets/19393"></script>
+
+<!-- global style to replace Email Me buttons in profiles with LibAnswers widgets -->
+<style>
+#s-la-widget-19393 { 
+       margin-bottom: 8px; 
+}
+
+#s-la-widget-19393 > button {
+       background-color: #003466;
+       border: #003466;
+       color: #fff;
+}
 </style>

package-lock.json

@@ -1513,10 +1513,11 @@
       "dev": true
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },