graphql-docs 5.2.0 → 6.0.0

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

@@ -7,7 +7,7 @@
     font-style: italic;
   }
   strong {
-    font-family: 'ProximaNova-Bold';
+    font-weight: 700;
   }
   h1 {
     margin: 15px 0;
@@ -22,7 +22,7 @@
     font-size: 1.5em;
     margin-top: 30px;
     padding-bottom: 10px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color);
     position: relative;
     .anchor {
       opacity: 0;
@@ -95,7 +95,7 @@
     line-height: 1.4em;
   }
   a {
-    color: #de4f4f;
+    color: var(--text-link);
   }
   img {
     max-width: 100%;
@@ -105,12 +105,13 @@
     font-size: 0.8em;
     line-height: 1.6em;
     padding: 1px 4px;
-    background-color: #eee;
+    background-color: var(--bg-code);
+    color: var(--text-code);
     margin: 0 2px;
   }
   blockquote {
     padding-left: 1.3em;
-    border-left: #eee solid 0.2em;
+    border-left: var(--border-color) solid 0.2em;
     font-style: italic;
   }
   blockquote.warning {
@@ -174,7 +175,7 @@
       margin: 0;
     }
     code {
-      background-color: #272822;
+      background-color: var(--bg-code-block);
       padding: 0;
       margin: 0;
     }
@@ -187,7 +188,7 @@
   .highlight.html {
     .code {
       &:after {
-        font-family: 'ProximaNova-Semibold';
+        font-weight: 600;
         position: absolute;
         top: 0;
         right: 0;
@@ -205,7 +206,7 @@
   .highlight.js {
     .code {
       &:after {
-        font-family: 'ProximaNova-Semibold';
+        font-weight: 600;
         position: absolute;
         top: 0;
         right: 0;
@@ -223,7 +224,7 @@
   .highlight.bash {
     .code {
       &:after {
-        font-family: 'ProximaNova-Semibold';
+        font-weight: 600;
         position: absolute;
         top: 0;
         right: 0;
@@ -241,7 +242,7 @@
   .highlight.css {
     .code {
       &:after {
-        font-family: 'ProximaNova-Semibold';
+        font-weight: 600;
         position: absolute;
         top: 0;
         right: 0;
@@ -259,7 +260,7 @@
   .highlight.jsx {
     .code {
       &:after {
-        font-family: 'ProximaNova-Semibold';
+        font-weight: 600;
         position: absolute;
         top: 0;
         right: 0;
@@ -453,20 +454,20 @@
     width: 100%;
     margin: 20px 0;
     tr {
-      border-top: 1px solid #eee;
+      border-top: 1px solid var(--border-color);
       &:nth-child(2n) {
-        background-color: #f8f8f8;
+        background-color: var(--bg-secondary);
       }
     }
     th {
-      font-family: 'ProximaNova-Semibold';
+      font-weight: 600;
       padding: 12px 13px;
-      border: 1px solid #eee;
+      border: 1px solid var(--border-color);
       vertical-align: middle;
       text-align: left;
     }
     td {
-      border: 1px solid #eee;
+      border: 1px solid var(--border-color);
       vertical-align: middle;
       padding: 6px 13px;
       font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -477,10 +478,10 @@
   .bottom-nav {
     height: 44px;
     margin: 30px 0 25px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color);
     padding-bottom: 25px;
     a {
-      font-family: 'ProximaNova-Semibold';
+      font-weight: 600;
       margin: 0 5px;
     }
   }
@@ -488,7 +489,7 @@
     text-align: center;
     a {
       color: #aaa;
-      font-family: 'ProximaNova-Semibold';
+      font-weight: 600;
       &:before {
         content: '';
         display: inline-block;

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

@@ -7,3 +7,10 @@
     font-weight: bold;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .deprecation-notice {
+    background: #3d1a0f;
+    color: #ffb499;
+  }
+}

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

@@ -1,21 +1,6 @@
-@import "//hello.myfonts.net/count/2c4b9d";
-@font-face {
-  font-family: 'ProximaNova-Light';
-  src: url("webfonts/2C4B9D_B_0.eot");
-  src: url("webfonts/2C4B9D_B_0.eot?#iefix") format('embedded-opentype'), url("webfonts/2C4B9D_B_0.woff2") format('woff2'), url("webfonts/2C4B9D_B_0.woff") format('woff'), url("webfonts/2C4B9D_B_0.ttf") format('truetype');
-}
-@font-face {
-  font-family: 'ProximaNova-Semibold';
-  src: url("webfonts/2C4B9D_C_0.eot");
-  src: url("webfonts/2C4B9D_C_0.eot?#iefix") format('embedded-opentype'), url("webfonts/2C4B9D_C_0.woff2") format('woff2'), url("webfonts/2C4B9D_C_0.woff") format('woff'), url("webfonts/2C4B9D_C_0.ttf") format('truetype');
-}
-@font-face {
-  font-family: 'ProximaNova-Regular';
-  src: url("webfonts/2C4B9D_D_0.eot");
-  src: url("webfonts/2C4B9D_D_0.eot?#iefix") format('embedded-opentype'), url("webfonts/2C4B9D_D_0.woff2") format('woff2'), url("webfonts/2C4B9D_D_0.woff") format('woff'), url("webfonts/2C4B9D_D_0.ttf") format('truetype');
-}
-@font-face {
-  font-family: 'ProximaNova-Bold';
-  src: url("webfonts/2C4B9D_E_0.eot");
-  src: url("webfonts/2C4B9D_E_0.eot?#iefix") format('embedded-opentype'), url("webfonts/2C4B9D_E_0.woff2") format('woff2'), url("webfonts/2C4B9D_E_0.woff") format('woff'), url("webfonts/2C4B9D_E_0.ttf") format('truetype');
-}
+// Modern system font stack - no webfonts needed!
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+$font-stack-light: $font-stack;
+$font-stack-regular: $font-stack;
+$font-stack-semibold: $font-stack;
+$font-stack-bold: $font-stack;

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

@@ -6,6 +6,12 @@
     text-decoration: none;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  #top-nav {
+    background-color: #0a0a0a;
+  }
+}
 #top-nav-links {
   list-style-type: none;
   position: absolute;
@@ -28,8 +34,8 @@
 #site-nav {
   position: relative;
   height: 70px;
-  background-color: #fff;
-  border-bottom: 1px solid #eee;
+  background-color: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
   padding: 14px 30px;
   a {
     vertical-align: bottom;

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

@@ -5,9 +5,9 @@
   left: 0;
   width: 100%;
   height: 40px;
-  background-color: #fff;
+  background-color: var(--bg-primary);
   display: none;
-  box-shadow: 0 0 4px rgba(0,0,0,0.25);
+  box-shadow: 0 0 4px var(--shadow-color);
   .menu-button {
     position: absolute;
     width: 24px;
@@ -30,6 +30,13 @@
     }
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  #mobile-header .menu-button {
+    filter: brightness(0) invert(1);
+  }
+}
+
 #mobile-shade {
   z-index: 1;
   display: none;
@@ -84,7 +91,7 @@
     left: 0;
     padding-top: 60px;
     border-right: none;
-    box-shadow: 0 0 4px rgba(0,0,0,0.25);
+    box-shadow: 0 0 4px var(--shadow-color);
     transition: transform 0.3s ease;
     transform: translate3d(-120%, 0, 0);
     display: block;

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

@@ -1,34 +1,56 @@
 .search-box {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    background: url("../assets/images/search.png") center no-repeat;
+    background-size: 20px;
+    pointer-events: none;
+    z-index: 1;
+  }
+
   input {
     width: 200px;
-    background-color: #fff;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
     outline: none;
-    font-family: 'ProximaNova-Regular';
+    font-family: inherit;
     font-size: 14px;
     padding: 7px 12px 6px 32px;
     border-radius: 20px;
-    border: 1px solid #ddd;
-    background: url("../assets/images/search.png") 8px 6px no-repeat;
-    background-size: 20px;
+    border: 1px solid var(--border-color-secondary);
     transition: border-color 0.25s ease;
     &:focus {
-      border-color: #de4f4f;
+      border-color: var(--text-link);
     }
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .search-box::before {
+    filter: brightness(0) invert(1);
+  }
+}
 .search-box.st-default-search-input {
   width: 200px;
-  background-color: #fff;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
   outline: none;
-  font-family: 'ProximaNova-Regular';
+  font-family: inherit;
   font-size: 14px;
   padding: 7px 12px 6px 32px;
   border-radius: 20px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border-color-secondary);
   background: url("../assets/images/search.png") 8px 6px no-repeat;
   background-size: 20px;
   transition: border-color 0.25s ease;
   &:focus {
-    border-color: #de4f4f;
+    border-color: var(--text-link);
   }
 }

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

@@ -1,5 +1,5 @@
 #sidebar {
-  background-color: #fff;
+  background-color: var(--bg-primary);
   position: fixed;
   z-index: 2;
   top: 30px;
@@ -11,8 +11,8 @@
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
-  font-family: 'ProximaNova-Semibold';
-  border-right: 1px solid #eee;
+  font-weight: 600;
+  border-right: 1px solid var(--border-color);
   font-size: 16px;
   line-height: 1.1em;
   &::-webkit-scrollbar {
@@ -22,14 +22,14 @@
     margin-bottom: 0.6em;
   }
   a {
-    color: #444;
+    color: var(--text-primary);
     text-decoration: none;
     &:hover {
-      color: #de4f4f;
+      color: var(--text-link);
     }
   }
   a.current {
-    color: #de4f4f;
+    color: var(--text-link);
   }
   a.H2 {
     font-weight: bold;
@@ -38,23 +38,23 @@
     >li {
       >p {
         margin-top: 1.5em;
-        border-top: 1px solid #eee;
+        border-top: 1px solid var(--border-color);
         text-transform: uppercase;
         padding-top: 1.2em;
         margin-bottom: 1em;
-        color: #999;
+        color: var(--text-secondary);
         font-size: 0.8em;
       }
     }
   }
   .sub-menu {
-    font-family: 'ProximaNova-Regular';
+    font-weight: 400;
     padding-left: 20px;
     margin: 0.6em 0;
     font-size: 14px;
     .active {
       position: relative;
-      color: #de4f4f;
+      color: var(--text-link);
       &:before {
         content: "";
         position: absolute;
@@ -65,7 +65,7 @@
         height: 0;
         border-top: 4px solid transparent;
         border-bottom: 4px solid transparent;
-        border-left: 6px solid #de4f4f;
+        border-left: 6px solid var(--text-link);
       }
     }
   }
@@ -73,16 +73,17 @@
     display: flex;
     position: relative;
     align-items: center;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-color-secondary);
     border-radius: 5px;
     padding: 0.01em 16px;
     margin-bottom: 20px;
 
-    img {
+    svg {
       position: absolute;
       left: 10px;
       height: 16px;
       width: 16px;
+      fill: currentColor;
     }
 
     input {
@@ -91,10 +92,10 @@
       width: 100%;
       padding-left: 15px;
       background-color: transparent;
-      color: #444;
+      color: var(--text-primary);
       border: none;
       font-size: 14px;
-      font-family: 'ProximaNova-Semibold';
+      font-weight: 600;
     }
 
     input:focus {
@@ -103,6 +104,12 @@
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  #sidebar #search svg {
+    filter: brightness(0) invert(1);
+  }
+}
+
 #sidebar-mobile {
   display: none;
   margin-bottom: 20px;

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

@@ -230,7 +230,7 @@ pre {
 }
 
 .highlight .hll { background-color: #49483e }
-pre  { background: #272822; color: #f8f8f2 }
+pre  { background: var(--bg-code-block); color: #f8f8f2 }
 .highlight .c { color: #75715e } /* Comment */
 .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
 .highlight .k { color: #66d9ef } /* Keyword */

data/lib/graphql-docs/layouts/assets/css/screen.scss

@@ -4,13 +4,48 @@
 @use "../_sass/_normalize.scss";
 @use "../_sass/_fonts";
 
+:root {
+  // Light mode (default)
+  --bg-primary: #fff;
+  --bg-secondary: #f8f8f8;
+  --bg-tertiary: #fafafa;
+  --bg-code: #eee;
+  --bg-code-block: #272822;
+  --text-primary: #444;
+  --text-secondary: #999;
+  --text-link: #de4f4f;
+  --text-code: #525252;
+  --border-color: #eee;
+  --border-color-secondary: #ddd;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    // Dark mode
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #252525;
+    --bg-tertiary: #2a2a2a;
+    --bg-code: #333;
+    --bg-code-block: #1e1e1e;
+    --text-primary: #e0e0e0;
+    --text-secondary: #888;
+    --text-link: #ff6b6b;
+    --text-code: #d4d4d4;
+    --border-color: #333;
+    --border-color-secondary: #444;
+    --shadow-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
 body {
-  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
   font-weight: 400;
-  color: #444;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
 }
 h1,
 h2,
@@ -18,8 +53,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'ProximaNova-Semibold';
-  font-weight: 200;
+  font-weight: 600;
 }
 em {
   font-style: italic;
@@ -37,7 +71,7 @@ em {
   left: 0;
   width: 100%;
   height: 100px;
-  font-family: 'ProximaNova-Semibold';
+  font-weight: 600;
 }
 
 @include meta.load-css('../_sass/_header');
@@ -48,3 +82,18 @@ em {
 @include meta.load-css('../_sass/_api-box');
 @include meta.load-css('../_sass/_syntax');
 @include meta.load-css('../_sass/_deprecations');
+
+// Sidebar resize handle
+.resize-handle {
+  position: fixed;
+  left: 300px; // Default sidebar width
+  top: 30px;
+  bottom: 0;
+  width: 10px;
+  cursor: ew-resize;
+  z-index: 3;
+  background-color: transparent;
+  &:hover {
+    background-color: var(--shadow-color);
+  }
+}

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

@@ -33,8 +33,82 @@
 
         searchInput.addEventListener('input', listener);
       }
+
+      // Resize sidebar functionality
+      initializeSidebarResize();
     });
 
+    function initializeSidebarResize() {
+      const sidebar = document.getElementById('sidebar');
+      if (!sidebar) {
+        return;
+      }
+
+      const minWidth = 200;
+      const maxWidth = 350;
+
+      // Restore saved width from sessionStorage
+      const savedWidth = sessionStorage.getItem('sidebarWidth');
+      if (savedWidth) {
+        sidebar.style.width = savedWidth;
+      }
+
+      // Create resize handle as a sibling to sidebar (not inside it)
+      const resizeHandle = document.createElement('div');
+      resizeHandle.className = 'resize-handle';
+
+      // Position handle at current sidebar width
+      if (savedWidth) {
+        resizeHandle.style.left = savedWidth;
+      }
+
+      // Insert after sidebar
+      sidebar.parentNode.insertBefore(resizeHandle, sidebar.nextSibling);
+
+      // Track resize state
+      let isResizing = false;
+      let startX = 0;
+      let startWidth = 0;
+
+      // Mouse down on handle
+      resizeHandle.addEventListener('mousedown', function(e) {
+        isResizing = true;
+        startX = e.clientX;
+        startWidth = sidebar.offsetWidth;
+
+        // Prevent text selection while dragging
+        e.preventDefault();
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'ew-resize';
+      });
+
+      // Mouse move
+      document.addEventListener('mousemove', function(e) {
+        if (!isResizing) return;
+
+        const dx = e.clientX - startX;
+        const newWidth = startWidth + dx;
+
+        // Apply constraints
+        if (newWidth >= minWidth && newWidth <= maxWidth) {
+          sidebar.style.width = newWidth + 'px';
+          resizeHandle.style.left = newWidth + 'px';
+        }
+      });
+
+      // Mouse up
+      document.addEventListener('mouseup', function() {
+        if (isResizing) {
+          isResizing = false;
+          document.body.style.userSelect = '';
+          document.body.style.cursor = '';
+
+          // Save the new width to sessionStorage
+          sessionStorage.setItem('sidebarWidth', sidebar.style.width);
+        }
+      });
+    }
+
     function debounce(func, wait) {
       let timeout;
 
@@ -93,7 +167,7 @@
       <!-- mobile only -->
       <div id="mobile-header">
         <a class="menu-button" onclick="document.body.classList.toggle('sidebar-open')"></a>
-        <a class="logo" href="<%= base_url.present? ? base_url : '/' %>">
+        <a class="logo" href="<%= base_url && !base_url.empty? ? base_url : '/' %>">
 
         </a>
       </div>

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

@@ -1,12 +1,14 @@
 <div id="search">
-  <img src="<%= base_url %>/assets/images/search.svg">
+  <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>
   <input autocomplete="off" placeholder="Search" />
 </div>
 <ul class="categories">
   <li>
     <ul class="menu-root">
       <li>
-        <a href="<%= base_url.present? ? base_url : '/' %>">GraphQL Reference</a>
+        <a href="<%= base_url && !base_url.empty? ? base_url : '/' %>">GraphQL Reference</a>
     </ul>
   </li>