graphql-docs 5.1.0 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c2c88bc1065c52ba30b33a2dc65ddc2c72c61e4e20d0d001f09492cce5f24ea
-  data.tar.gz: 76fa1d45d5953b8a9ac9cfa38a97b3c6a33f5daf6880a113a90c37a623e9bf19
+  metadata.gz: cd0680cb4e1d09c704fe10170e4f48340b845a96ec6a91420a1b379cf7b217fd
+  data.tar.gz: dde6edd6ff1dc7c70eab9495cb7f27aacfa3e770815f8bd26c7ddbb71cc05793
 SHA512:
-  metadata.gz: bf384c8d7749b01cfa3f78c578e6af5e9196cbc002eb6106bcedc2fd1b26197c7ea08160be3fd84017a078e455b845a9af290abce67829712200009af1039da8
-  data.tar.gz: adb18b1a5f02041c86ca0a314765efdf59ab992cf7b766796a8560491d1878b7045d695fbc38bd7c74ed7f02957b72fc05196521d1fabe883b1e021ada29570e
+  metadata.gz: 71424bfe5ab2367fa0c1ac4721104dab9eda558b593293dbc46d6097bd01bfc1670a45adb4a75456f980ebb7f22eaf5b30485b3c2a2fb7b6cc7ee24e91d2bad6
+  data.tar.gz: a1ac5a15d011d9f750c15745a92e3d88a1035a729fd4a9486b159a7fa263e7a0226e3340fe262fa8624428a63d452c884ba60d262b7c51e33109b83cc3700d61

data/.github/workflows/tests.yml

@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        ruby-version: [3.4.0-preview2, 3.3, 3.2, 3.1]
+        ruby-version: [3.4, 3.3, 3.2, 3.1]
 
     steps:
       - uses: actions/checkout@v2

data/CHANGELOG.md

@@ -4,6 +4,10 @@ A concise overview of the public-facing changes to the gem from version to versi
 
 ## Unreleased
 
+## v5.2.0 - 2025-02-09
+
+- Add search filter to sidebar. Thanks @denisahearn!
+
 ## v5.1.0 - 2024-12-09
 
 - List queries in the sidebar, similar to mutations. See https://github.com/brettchalupa/graphql-docs/pull/156. Thanks @denisahearn!

data/CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contribuing Guide
+# Contributing Guide
 
 Contributions to this project are welcome. If you have an idea for a bigger change, [open an issue first](https://github.com/brettchalupa/graphql-docs/issues/new/choose) and we can discuss it.
 

data/README.md

@@ -222,6 +222,15 @@ After checking out the repo, run `bin/setup` to install dependencies. Then, run
 `bin/rake test` to run the tests. You can also run `bin/console` for
 an interactive prompt that will allow you to experiment.
 
+### Releasing a new version of the gem
+
+1. Update CHANGELOG.md
+2. Bump the version in `lib/graphql-docs/version.rb`
+3. Make a commit and tag it with `git commit -a vX.X.X`
+4. Push the commit and tags to GitHub: `git push origin main && git push --tags`
+5. Build the gem: `gem build`
+6. Push the gem to RubyGems.org: `gem push graphql-docs-X.X.X.gem`
+
 ## Sample Site
 
 Clone this repository and run:

data/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss

@@ -69,6 +69,38 @@
       }
     }
   }
+  #search {
+    display: flex;
+    position: relative;
+    align-items: center;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 0.01em 16px;
+    margin-bottom: 20px;
+
+    img {
+      position: absolute;
+      left: 10px;
+      height: 16px;
+      width: 16px;
+    }
+
+    input {
+      height: 24px;
+      line-height: 1.5;
+      width: 100%;
+      padding-left: 15px;
+      background-color: transparent;
+      color: #444;
+      border: none;
+      font-size: 14px;
+      font-family: 'ProximaNova-Semibold';
+    }
+
+    input:focus {
+      outline: none;
+    }
+  }
 }
 
 #sidebar-mobile {

data/lib/graphql-docs/layouts/assets/images/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" />
+</svg>

data/lib/graphql-docs/layouts/default.html

@@ -9,16 +9,71 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.2/anchor.min.js"></script>
     <script>
 
-    // Add anchors on DOMContentLoaded
     document.addEventListener("DOMContentLoaded", function(event) {
+      // Add anchors
       anchors.options = {
         placement: 'left',
         visible: 'hover',
         icon: '¶'
       };
       anchors.add('h2, h3, h4, h5, h6, .anchored');
+
+      // Add listener for search filter input
+      const sidebarDiv = document.getElementById('sidebar');
+      const searchDiv = sidebarDiv.querySelector('#search')
+
+      if (searchDiv) {
+        const searchInput = searchDiv.querySelector('input');
+        const menuElements = sidebarDiv.querySelectorAll('ul.menu-root');
+
+        const listener = debounce((event) => {
+          const searchValue = event.target.value;
+          applySearchFilter(searchValue, menuElements)
+        }, 500);
+
+        searchInput.addEventListener('input', listener);
+      }
     });
 
+    function debounce(func, wait) {
+      let timeout;
+
+      return function executedFunction(...args) {
+        const later = () => {
+          clearTimeout(timeout);
+          func(...args);
+        };
+
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+      };
+    }
+
+    function applySearchFilter(searchValue, menuElements) {
+      menuElements.forEach(menuElement => {
+        const listElements = menuElement.getElementsByTagName('li');
+        let hasVisibleElements = false;
+        Array.from(listElements).forEach(listElement => {
+          let contains = true
+          if (searchValue.length > 0) {
+            const anchorElement = listElement.querySelector('a');
+            const textContent = anchorElement.innerText;
+            contains = textContent.toLowerCase().includes(searchValue.toLowerCase());
+          }
+
+          // Hide the list element if its text does not contain the search value
+          listElement.style.display = contains ? '' : 'none';
+
+          if (contains) {
+            hasVisibleElements = true;
+          }
+        });
+
+        // Hide the entire menu if none of the list items are visible
+        const menuParentElement = menuElement.closest('li')
+        menuParentElement.style.display = hasVisibleElements ? '' : 'none';
+      });
+    }
     </script>
   </head>
   <body>

data/lib/graphql-docs/layouts/includes/sidebar.html

@@ -1,3 +1,7 @@
+<div id="search">
+  <img src="<%= base_url %>/assets/images/search.svg">
+  <input autocomplete="off" placeholder="Search" />
+</div>
 <ul class="categories">
   <li>
     <ul class="menu-root">

data/lib/graphql-docs/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module GraphQLDocs
-  VERSION = '5.1.0'
+  VERSION = '5.2.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: graphql-docs
 version: !ruby/object:Gem::Version
-  version: 5.1.0
+  version: 5.2.0
 platform: ruby
 authors:
 - Brett Chalupa
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-12-10 00:00:00.000000000 Z
+date: 2025-02-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: graphql
@@ -322,6 +322,7 @@ files:
 - lib/graphql-docs/layouts/assets/images/graphiql.png
 - lib/graphql-docs/layouts/assets/images/menu.png
 - lib/graphql-docs/layouts/assets/images/navbar.png
+- lib/graphql-docs/layouts/assets/images/search.svg
 - lib/graphql-docs/layouts/assets/webfonts/2C4B9D_B_0.eot
 - lib/graphql-docs/layouts/assets/webfonts/2C4B9D_B_0.ttf
 - lib/graphql-docs/layouts/assets/webfonts/2C4B9D_B_0.woff
@@ -384,7 +385,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.16
+rubygems_version: 3.3.27
 signing_key:
 specification_version: 4
 summary: Easily generate beautiful documentation from your GraphQL schema.