☰

npmjs.com visual tweaks

Makes READMEs on npmjs.com look more like READMEs on GitHub (font, size, padding, some colors); also makes the content wider

As of 2019-09-26. See the latest version.

How to install

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

How to install

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!) 

  1. // ==UserScript==
  2. // @name         npmjs.com visual tweaks
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0.1
  5. // @description  Makes READMEs on npmjs.com look more like READMEs on GitHub (font, size, padding, some colors); also makes the content wider
  6. // @author       joeytwiddle
  7. // @copyright    2018-2019, 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.     // This allows the README to expand to the full width below the info sidebar
  19.     const floatTheSidebar = true;
  20.     const allowWiderContent = true;
  21.     const useOldGithubColors = false;
  22.     const makeLinksBlue = true;
  23.  
  24.     //const readmePrefix = '.readme__readme___tmT33';
  25.     //const readmePrefix = '.markdown__markdown___3yof6';
  26.     const readmePrefix = '#readme';
  27.  
  28.     // I want to scale down the fonts and everything else a bit.  This was an easy way to do that.
  29.     //GM_addStyle('.container { transform: scale(0.92); transform-origin: 50% 0; }');
  30.  
  31.     if (allowWiderContent) {
  32.         // The default behaviour is to max out at 1200px, but I am happy for the README to grow a little bit larger.  (Same with my Wide-Github)
  33.         //GM_addStyle('.container { width: 98%; max-width: 100%; }');
  34.         // .package__root___22JkW
  35.         GM_addStyle(`
  36.             /* Override the default, to expand fully (with a small margin) */
  37.             .vistweaks #top {
  38.                 min-width: 100%;
  39.                 max-width: 100%;
  40.             }
  41.             /* But max out at 1500 */
  42.             @media screen and (min-width: 1500px) {
  43.                 .vistweaks #top {
  44.                     min-width: 1500px;
  45.                     max-width: 1500px;
  46.                 }
  47.             }
  48.         `);
  49.     }
  50.  
  51.     // Set fonts like GitHub
  52.     GM_addStyle('.vistweaks #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; }');
  53.     GM_addStyle('#readme { font-family: line-height: 1.5;}');
  54.     //GM_addStyle('pre, code, kbd, samp { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }');
  55.     // Set fonts how I like them (configurable through browser)
  56.     //GM_addStyle('pre, code, kbd, samp { font-family: monospace; }');
  57.     // I don't know why, but "monospace" shrinks the font considerably on my Linux, whilst "monospace,monospace" does not.
  58.     // Also "monospace,monospace" is what the site itself adopted on 2018/3/22.  This rule will just ensure it stays this way!
  59.     GM_addStyle(`.vistweaks ${readmePrefix} pre, .vistweaks ${readmePrefix} code, .vistweaks ${readmePrefix} kbd, .vistweaks ${readmePrefix} samp { font-family: monospace,monospace; }`);
  60.  
  61.     // Set font sizes like GitHub
  62.     GM_addStyle(`.vistweaks ${readmePrefix} p { font-size: 16px; line-height: 1m5; }`);
  63.     GM_addStyle(`
  64.         /*
  65.         @media screen and (min-width: 30em) {
  66.           .vistweaks ${readmePrefix} {
  67.             font-size: 0.8rem;
  68.           }
  69.         }
  70.         */
  71.         .vistweaks ${readmePrefix} h1 {
  72.             padding-bottom: 0.3em;
  73.             font-size: 2em;
  74.             border-bottom: 1px solid #eaecef
  75.         }
  76.         .vistweaks ${readmePrefix} h2 {
  77.             padding-bottom: 0.3em;
  78.             font-size: 1.5em;
  79.             border-bottom: 1px solid #eaecef
  80.         }
  81.         .vistweaks ${readmePrefix} h3 {
  82.             font-size: 1.25em
  83.         }
  84.         .vistweaks ${readmePrefix} h4 {
  85.             font-size: 1em
  86.         }
  87.         .vistweaks ${readmePrefix} h5 {
  88.             font-size: 0.875em
  89.         }
  90.         .vistweaks ${readmePrefix} h6 {
  91.             font-size: 0.85em;
  92.             color: #6a737d
  93.         }
  94.         /* Code blocks inside a header do not shrink */
  95.         .vistweaks ${readmePrefix} h1 tt,
  96.         .vistweaks ${readmePrefix} h1 code,
  97.         .vistweaks ${readmePrefix} h2 tt,
  98.         .vistweaks ${readmePrefix} h2 code,
  99.         .vistweaks ${readmePrefix} h3 tt,
  100.         .vistweaks ${readmePrefix} h3 code,
  101.         .vistweaks ${readmePrefix} h4 tt,
  102.         .vistweaks ${readmePrefix} h4 code,
  103.         .vistweaks ${readmePrefix} h5 tt,
  104.         .vistweaks ${readmePrefix} h5 code,
  105.         .vistweaks ${readmePrefix} h6 tt,
  106.         .vistweaks ${readmePrefix} h6 code {
  107.             font-size: inherit;
  108.             /* This is a fix because 600 is not thick enough for the monospace font we introduced */
  109.             /* font-weight: 800; */
  110.             /* Using the Github mandated font is a better fix */
  111.             font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
  112.         }
  113.         /* Remove the hard-coded link sizing */
  114.         .vistweaks ${readmePrefix} ul li a {
  115.             font-size: inherit;
  116.         }
  117.     `);
  118.     // A snippet of code appearing within a paragraph
  119.     // A line of code on its own
  120.     GM_addStyle(`.vistweaks ${readmePrefix} pre { line-height: 1.5; }`);
  121.     GM_addStyle(`.vistweaks ${readmePrefix} code { line-height: 1.5; }`);
  122.     GM_addStyle(`.vistweaks ${readmePrefix} pre { font-size: 85%; }`);
  123.     GM_addStyle(`.vistweaks ${readmePrefix} code { font-size: 85%; }`);
  124.     GM_addStyle(`.vistweaks ${readmePrefix} pre code { font-size: inherit; }`);
  125.     // A block of code
  126.     //GM_addStyle('.vistweaks pre { font-size: 82%; line-height: 1.4; }');
  127.  
  128.     // Darker text, and blue links instead of red links
  129.     // Weirdly, on Mac, the font strokes on npmjs.com appear thinner than those on Github, for a reason I cannot understand.
  130.     // To compensate, I use a darker color for text, and for links, I also shift the hue towards purple.  Far out!
  131.     const onMac = !!navigator.userAgent.match(/Mac OS X/);
  132.     const textColor = useOldGithubColors ? onMac ? '#111' : '#333' : onMac ? 'hsl(210, 12%, 5%)' : '#24292e';
  133.     const linkColor = useOldGithubColors ? onMac ? 'hsl(214, 77%, 32%)' : 'rgb(64, 120, 192)' : onMac ? 'hsl(222, 100%, 37%)' : '#0366d6';
  134.     GM_addStyle(`.vistweaks .markdown p, .vistweaks .markdown li { color: ${textColor}; }`);
  135.     if (makeLinksBlue) {
  136.         GM_addStyle(`.vistweaks ${readmePrefix} a, .vistweaks ${readmePrefix} ul li a { color: ${linkColor}; }`);
  137.     }
  138.  
  139.     // The boxes around inline code snippets
  140.     GM_addStyle('.vistweaks code { border-radius: 3px; padding: 0.2em 0.4em !important; }');
  141.  
  142.     // Links should be normal weight (npm makes them bolder)
  143.     GM_addStyle('.vistweaks .markdown p a, .vistweaks .markdown li a { font-weight: initial; }');
  144.  
  145.     // Padding around code blocks and snippets
  146.     // A snippet of code appearing within a paragraph
  147.     GM_addStyle('.vistweaks code { padding: 0.2em 0.2em; }');
  148.     // A line of code on its own
  149.     GM_addStyle('.vistweaks pre > code { padding: 1em 2em; }');
  150.  
  151.     // Reduce the large padding inside code blocks to be more like Github's
  152.     GM_addStyle('.vistweaks pre { padding: 1.1rem !important; }');
  153.  
  154.     // Lighter background on code blocks and snippets
  155.     GM_addStyle('.vistweaks .markdown .highlight, .vistweaks .markdown code, .vistweaks .markdown pre { background-color: #f6f8fa; }');
  156.  
  157.     // More of a gap after each paragraph?  Wasn't actually needed.  The problem was wrapping due to insufficient width.
  158.     //GM_addStyle('div, .highlight { padding-bottom: 20px; }');
  159.  
  160.     // Thicker font for section headers
  161.     GM_addStyle('.vistweaks .markdown h1, .vistweaks .markdown h2, .vistweaks .markdown h3, .vistweaks .markdown h4, .vistweaks .markdown h5, .vistweaks .markdown h6 { font-weight: 600; }');
  162.  
  163.     // 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.)
  164.     //GM_addStyle(".markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif; }");
  165.  
  166.     // There was absolutely no padding on the new styling.  At low widths, the text could touch the edge of the screen.  No thanks!
  167.     //GM_addStyle(".markdown { padding-left: 1em; padding-right: 1em; }");
  168.     // Better to do it for the whole content, including the tabs across the top
  169.     //GM_addStyle("#top { padding-left: 1em; padding-right: 1em; }");
  170.     // At larger widths we can enjoy greater padding
  171.     GM_addStyle(".vistweaks #top { padding-left: 2%; padding-right: 2%; }");
  172.  
  173.     // Make the sidebar look like a hovering card
  174.     // Sadly this now reaches all the way down to the bottom of the README
  175.     GM_addStyle(".vistweaks .package__rightSidebar___9dMXo { padding: 0.9em 1.8em 0.1em 1.8em !important; margin-top: 2.75rem; }");
  176.     //GM_addStyle(".package__rightSidebar___9dMXo { box-shadow: 0 0 8px 0 #00000033; }");
  177.     GM_addStyle(".vistweaks .package__rightSidebar___9dMXo { border: 1px solid #0002 }");
  178.     // This widens the gap between the two panels, so the shadow doesn't overlap too much
  179.     GM_addStyle(".vistweaks .markdown { padding-right: 0.5em; }");
  180.     // This graph does not scale down well to low resolutions, with or without our changes.  I will wait and see if they fix that.
  181.  
  182.     // This is one way of increasing the specificity of our selectors
  183.     // It could also be used to toggle our tweaks on and off
  184.     // But I have not yet added it to the selectors above
  185.     document.body.classList.add("vistweaks");
  186.  
  187.     // Drop the huge margins above section titles
  188.     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; }");
  189.  
  190.     // Indent lists
  191.     GM_addStyle(".vistweaks .markdown ul, .vistweaks .markdown ol { padding-left: 2em; }");
  192.  
  193.     // Bugfix: strong changes the text colour, but that sucks if the strong is inside a link.
  194.     // Using `a *` instead of `a strong` just in case there are other problems like this.
  195.     GM_addStyle(`.vistweaks ${readmePrefix} a * { color: inherit; }`);
  196.  
  197.     if (floatTheSidebar) {
  198.         var checkTheSidebar = function () {
  199.             const mainLeftPanel = document.querySelector('._6620a4fd');
  200.             if (!mainLeftPanel) return;
  201.  
  202.             const readmeElement = document.querySelector('#readme');
  203.             if (!readmeElement) return;
  204.  
  205.             const sidebarElement = document.querySelector('.fdbf4038');
  206.             if (!sidebarElement) return;
  207.             if (sidebarElement.parentNode.classList.contains('visual-tweaks-userscript-sidebar-container')) {
  208.                 //console.log("We have already handled this sidebar");
  209.                 return;
  210.             }
  211.  
  212.             mainLeftPanel.classList.remove('w-two-thirds-l');
  213.             //mainLeftPanel.querySelector('section').classList.remove('mr3-ns');
  214.  
  215.             // If there is nothing forcing the main pane to fill the width, then it won't.
  216.             // That looks odd, because the floated sidebar will now not appear next to the right edge.
  217.             // Example (a page without an image): https://www.npmjs.com/package/eslint-plugin-styled-components
  218.             // So we force the main content to fill the available width.
  219.             mainLeftPanel.style.width = '100%';
  220.             mainLeftPanel.style.maxWidth = '100%';
  221.  
  222.             const sidebarContainer = document.createElement('div');
  223.             sidebarContainer.className = 'visual-tweaks-userscript-sidebar-container';
  224.             sidebarContainer.style.float = 'right';
  225.             sidebarContainer.style.background = 'white';
  226.             sidebarContainer.style.paddingLeft = '3em';
  227.             sidebarContainer.style.paddingBottom = '3em';
  228.             // Move the width from the sidebar to the container
  229.             sidebarElement.classList.remove('w-third-l');
  230.             sidebarContainer.classList.add('w-third-l');
  231.             sidebarContainer.appendChild(sidebarElement);
  232.             GM_addStyle(".vistweaks .markdown { padding-right: 0; }");
  233.             // Clear the existing margin.  Leave a small margin for the shadow.
  234.             GM_addStyle(".vistweaks .mr3-ns { margin-right: 4px; }");
  235.             // Give the info card equal padding at the top and bottom
  236.             GM_addStyle(".vistweaks .package__rightSidebar___9dMXo { padding-top: 1em !important; padding-bottom: 1em !important; }");
  237.             //readmeElement.appendChild(sidebarElement);
  238.             readmeElement.parentNode.insertBefore(sidebarContainer, readmeElement);
  239.  
  240.             // BUG: At low resolutions, normally the sidebar will break to below the readme.  But with our changes, the sidebar appears above the readme!
  241.  
  242.             // 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
  243.             // For an example of such a page: https://www.npmjs.com/package/passport
  244.             // To fix it, we set a max width on images
  245.             // Of course this rule will apply to all images, even those later down on the page
  246.             // npmjs have now set their own max, so we can remove this
  247.             GM_addStyle(".vistweaks .markdown img { max-width: 66%; }");
  248.         };
  249.  
  250.         // On Firefox, this causes two sidebars to appear!
  251.         // Presumably because it runs again below
  252.         //checkTheSidebar();
  253.  
  254.         // Keep checking, in case we go to a new page
  255.         new MutationObserver(mutations => checkTheSidebar()).observe(document.body, { childList: true, subtree: true });
  256.     }
  257. })();