☰

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

2018/05/04のページです。最新版はこちら

このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください 
  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. })();