☰

Greasy Fork is available in English.

npmjs.com visual tweaks

Styles npmjs.com README pages similarly to GitHub's (font, size, colors, but not syntax highlighting), and makes the content wider

As of 04.05.2018. See ბოლო ვერსია.

  1. // ==UserScript==
  2. // @name         npmjs.com visual tweaks
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.7.9
  5. // @description  Styles npmjs.com README pages similarly to GitHub's (font, size, colors, but not syntax highlighting), and makes the content wider
  6. // @author       joeytwiddle
  7. // @copyright    2018, Paul "Joey" Clark (http://neuralyte.org/~joey)
  8. // @license      MIT
  9. // @match        https://www.npmjs.com/*
  10. // @grant        GM_addStyle
  11. // ==/UserScript==
  12.  
  13. // Motivation: I didn't like the visual context switching between reading Github READMEs and npm READMEs, so I made READMEs on npm look similar to READMEs on Github.
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     const floatTheSidebar = true;
  19.  
  20.     // I want to scale down the fonts and everything else a bit.  This was an easy way to do that.
  21.     //GM_addStyle('.container { transform: scale(0.92); transform-origin: 50% 0; }');
  22.  
  23.     // Fill (almost) the whole width of the screen, like Wide-Github does.
  24.     //GM_addStyle('.container { width: 98%; max-width: 100%; }');
  25.     GM_addStyle("#top { max-width: 100%; }");
  26.     // OK not the entire width.  Stop the width when it starts to look ugly.
  27.     GM_addStyle("#top { max-width: 1500px; }");
  28.  
  29.     // Set fonts like GitHub
  30.     GM_addStyle('#readme { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Source Sans Pro", "Lucida Grande", sans-serif; }');
  31.     GM_addStyle('#readme { font-family: line-height: 1.5;}');
  32.     //GM_addStyle('pre, code, kbd, samp { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }');
  33.     // Set fonts how I like them (configurable through browser)
  34.     //GM_addStyle('pre, code, kbd, samp { font-family: monospace; }');
  35.     // I don't know why, but "monospace" shrinks the font considerably on my Linux, whilst "monospace,monospace" does not.
  36.     // Also "monospace,monospace" is what the site itself adopted on 2018/3/22.  This rule will just ensure it stays this way!
  37.     GM_addStyle('pre, code, kbd, samp { font-family: monospace,monospace; }');
  38.  
  39.     // Set font sizes like GitHub
  40.     // A snippet of code appearing within a paragraph
  41.     GM_addStyle('code { font-size: 85%; }');
  42.     // A line of code on its own
  43.     GM_addStyle('pre > code { font-size: 100%; }');
  44.     // A block of code
  45.     GM_addStyle('pre { font-size: 82%; line-height: 1.4; }');
  46.  
  47.     // Darker text
  48.     if (navigator.userAgent.match(/Mac OS X/)) {
  49.         // Weirdly, on Mac, the font strokes on npmjs.com appear slightly thinner than those on Github, for a reason I cannot understand.  To compensate, I use a darker color.
  50.         GM_addStyle('.markdown p, .markdown li { color: #111; }');
  51.     } else {
  52.         // Github 2016 (my preference)
  53.         GM_addStyle('.markdown p, .markdown li { color: #333; }');
  54.         // Github 2017
  55.         //GM_addStyle('.markdown p, .markdown li { color: #24292e; }');
  56.     }
  57.  
  58.     // The boxes around inline code snippets
  59.     GM_addStyle('code { border-radius: 3px; padding: 0.2em 0.4em !important; }');
  60.  
  61.     // Links should be normal weight (npm makes them bolder)
  62.     GM_addStyle('.markdown p a, .markdown li a { font-weight: initial; }');
  63.  
  64.     // Padding around code blocks and snippets
  65.     // A snippet of code appearing within a paragraph
  66.     GM_addStyle('code { padding: 0.2em 0.2em; }');
  67.     // A line of code on its own
  68.     GM_addStyle('pre > code { padding: 1em 2em; }');
  69.  
  70.     // Reduce the large padding inside code blocks to be more like Github's
  71.     GM_addStyle('pre { padding: 1.1rem !important; }');
  72.  
  73.     // Lighter background on code blocks and snippets
  74.     GM_addStyle('.vistweaks .markdown .highlight, .vistweaks .markdown code, .vistweaks .markdown pre { background-color: #f6f8fa; }');
  75.  
  76.     // More of a gap after each paragraph?  Wasn't actually needed.  The problem was wrapping due to insufficient width.
  77.     //GM_addStyle('div, .highlight { padding-bottom: 20px; }');
  78.  
  79.     // Thicker font for section headers
  80.     GM_addStyle('.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { font-weight: 600; }');
  81.  
  82.     // Use the npm font for section headers, even though we aren't using it for main text.  (This is a divergence from Github's markdown scheme.)
  83.     //GM_addStyle(".markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif; }");
  84.  
  85.     // There was absolutely no padding on the new styling.  At low widths, the text could touch the edge of the screen.  No thanks!
  86.     //GM_addStyle(".markdown { padding-left: 1em; padding-right: 1em; }");
  87.     // Better to do it for the whole content, including the tabs across the top
  88.     //GM_addStyle("#top { padding-left: 1em; padding-right: 1em; }");
  89.     // At larger widths we can enjoy greater padding
  90.     GM_addStyle("#top { padding-left: 2%; padding-right: 2%; }");
  91.  
  92.     // Make the sidebar look like a hovering card
  93.     // Sadly this now reaches all the way down to the bottom of the README
  94.     GM_addStyle(".package__rightSidebar___9dMXo { padding: 0.9em 1.8em 0.1em 1.8em !important; margin-top: 2.75rem; }");
  95.     //GM_addStyle(".package__rightSidebar___9dMXo { box-shadow: 0 0 8px 0 #00000033; }");
  96.     GM_addStyle(".package__rightSidebar___9dMXo { border: 1px solid #0002 }");
  97.     // This widens the gap between the two panels, so the shadow doesn't overlap too much
  98.     GM_addStyle(".markdown { padding-right: 0.5em; }");
  99.     // This graph does not scale down well to low resolutions, with or without our changes.  I will wait and see if they fix that.
  100.  
  101.     // This is one way of increasing the specificity of our selectors
  102.     // It could also be used to toggle our tweaks on and off
  103.     // But I have not yet added it to the selectors above
  104.     document.body.classList.add("vistweaks");
  105.  
  106.     // Drop the huge margins above section titles
  107.     GM_addStyle(".vistweaks .markdown h1, .vistweaks .markdown h2, .vistweaks .markdown h3, .vistweaks .markdown h4, .vistweaks .markdown h5, .vistweaks .markdown h6 { margin-top: 1em; padding-top: 0; }");
  108.  
  109.     // Indent lists
  110.     GM_addStyle(".vistweaks .markdown ul, .vistweaks .markdown ol { padding-left: 2em; }");
  111.  
  112.     if (floatTheSidebar) {
  113.         var checkTheSidebar = function () {
  114.             const mainLeftPanel = document.querySelector('.package__main___3By_B');
  115.             if (!mainLeftPanel) return;
  116.  
  117.             const readmeElement = document.querySelector('#readme');
  118.             if (!readmeElement) return;
  119.  
  120.             const sidebarElement = document.querySelector('.package__rightSidebar___9dMXo');
  121.             if (!sidebarElement) return;
  122.             if (sidebarElement.parentNode.classList.contains('visual-tweaks-userscript-sidebar-container')) {
  123.                 //console.log("We have already handled this sidebar");
  124.                 return;
  125.             }
  126.  
  127.             mainLeftPanel.classList.remove('w-two-thirds-ns');
  128.             mainLeftPanel.classList.remove('mr3-ns');
  129.  
  130.             const sidebarContainer = document.createElement('div');
  131.             sidebarContainer.className = 'visual-tweaks-userscript-sidebar-container';
  132.             sidebarContainer.style.float = 'right';
  133.             sidebarContainer.style.background = 'white';
  134.             sidebarContainer.style.paddingLeft = '3em';
  135.             sidebarContainer.style.paddingBottom = '3em';
  136.             // Move the width from the sidebar to the container
  137.             sidebarElement.classList.remove('w-third-ns');
  138.             sidebarContainer.classList.add('w-third-ns');
  139.             sidebarContainer.appendChild(sidebarElement);
  140.             GM_addStyle(".markdown { padding-right: 0; }");
  141.             // Clear the existing margin.  Leave a small margin for the shadow.
  142.             GM_addStyle(".mr3-ns { margin-right: 4px; }");
  143.             //readmeElement.appendChild(sidebarElement);
  144.             readmeElement.parentNode.insertBefore(sidebarContainer, readmeElement);
  145.  
  146.             // BUG: At low resolutions, normally the sidebar will break to below the readme.  But with our changes, the sidebar appears above the readme!
  147.  
  148.             // If an image appears above the fold, and it takes 100% of the width, then it will cause the document to push down below the floating sidebar
  149.             // For an example of such a page: https://www.npmjs.com/package/passport
  150.             // Of course this rule will apply to all images, even those later down on the page
  151.             GM_addStyle(".vistweaks .markdown img { max-width: 66%; }");
  152.         };
  153.  
  154.         checkTheSidebar();
  155.  
  156.         new MutationObserver(mutations => checkTheSidebar()).observe(document.body, { childList: true, subtree: true });
  157.     }
  158. })();