☰

PHP Documentation Sidebar

Add a sidebar to documentation pages on https://www.php.net/ to navigate through headers.

  1. // ==UserScript==
  2. // @name         PHP Documentation Sidebar
  3. // @namespace    https://www.php.net/
  4. // @version      1.2
  5. // @description  Add a sidebar to documentation pages on https://www.php.net/ to navigate through headers.
  6. // @author       Yi Wang
  7. // @match        https://www.php.net/manual/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Create the sidebar
  15.     const sidebar = document.createElement('div');
  16.     sidebar.style.position = 'fixed';
  17.     sidebar.style.left = '0';
  18.     sidebar.style.top = '60px';
  19.     sidebar.style.width = '200px';
  20.     sidebar.style.height = 'calc(100% - 60px)';
  21.     sidebar.style.overflowY = 'auto';
  22.     sidebar.style.backgroundColor = '#f9f9f9';
  23.     sidebar.style.padding = '10px';
  24.     sidebar.style.borderRight = '1px solid #ccc';
  25.     sidebar.style.zIndex = '1000';
  26.  
  27.     // Find all headers
  28.     const headers = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
  29.  
  30.     headers.forEach(header => {
  31.         // Ensure each header has an ID for linking
  32.         if (!header.id) {
  33.             header.id = 'header-' + Math.random().toString(36).substr(2, 9);
  34.         }
  35.  
  36.         // Create a link for each header
  37.         const link = document.createElement('a');
  38.         link.href = '#' + header.id;
  39.         link.textContent = header.textContent.replace('¶', '').trim();
  40.         link.style.display = 'block';
  41.         link.style.marginBottom = '5px';
  42.         link.style.textDecoration = 'none';
  43.         link.style.color = 'purple';
  44.  
  45.         // Add indentation based on header level
  46.         const level = parseInt(header.tagName.substring(1), 10);
  47.         link.style.paddingLeft = (level - 1) * 10 + 'px';
  48.  
  49.         sidebar.appendChild(link);
  50.     });
  51.  
  52.     document.body.appendChild(sidebar);
  53.  
  54.     // Adjust the main layout to accommodate the sidebar
  55.     document.body.style.marginLeft = '210px';
  56.  
  57. })();