☰

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

Από την 20/07/2018. Δείτε την τελευταία έκδοση.

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