├── LICENSE ├── README.md ├── tidy.css ├── tidy.js ├── tidy.min.js ├── tidyUrl.js └── tidyUrl.min.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Stephan Ango 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bookmarklets for a tidier web experience. 2 | 3 | ## Tidy Reader 4 | 5 | Uses Mozilla's [Readability](https://github.com/mozilla/readability) library to tidy up a page for easy reading. 6 | 7 | To install copy/paste the [minified code](https://github.com/kepano/tidy/blob/main/tidy.min.js) into a bookmark. You can also [go to my website](https://stephanango.com/tidy) to install via drag and drop. 8 | 9 | ## Tidy URL 10 | 11 | Removes unnecessary cruft in URLs such as UTM parameters and copies the link to your clipboard. This removes tracking info and makes links nicer to share. 12 | 13 | To install copy/paste the [minified code](https://github.com/kepano/tidy/blob/main/tidyUrl.min.js) into a bookmark. You can also [go to my website](https://stephanango.com/tidyurl) to install via drag and drop. 14 | -------------------------------------------------------------------------------- /tidy.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: dark) { 2 | :root { 3 | --background: #222; 4 | --text: white; 5 | --text-muted: #999; 6 | } 7 | } 8 | 9 | @media (prefers-color-scheme: light) { 10 | :root { 11 | --background: white; 12 | --text: black; 13 | --text-muted: #666; 14 | } 15 | } 16 | 17 | * { 18 | font-family: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", Segoe UI, Helvetica, Arial, 19 | sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 20 | } 21 | 22 | code, pre { 23 | font-family: IBM Plex Mono, monospace; 24 | font-size: calc(1rem + 0.5vw); 25 | } 26 | 27 | html { 28 | box-sizing: border-box; 29 | width: 100%; 30 | height: 100%; 31 | font-size: 62.5%; 32 | background-color: var(--background) !important; 33 | } 34 | 35 | body { 36 | font-size: calc(1.6rem + 0.5vw); 37 | line-height: 1.8; 38 | margin: 0 auto; 39 | width: 40em; 40 | max-width: 88%; 41 | color: var(--text); 42 | background-color: var(--background); 43 | } 44 | 45 | .page { 46 | margin: 2rem auto; 47 | background: var(--background); 48 | padding: 0 0 20rem 0; 49 | } 50 | 51 | h1 { 52 | font-size: 44px !important; 53 | letter-spacing: -0.5px !important; 54 | line-height: 46px !important; 55 | margin: 22px 0 15px 0 !important; 56 | } 57 | 58 | h2 { 59 | font-size: 35px; 60 | line-height: 38px; 61 | font-weight: bold; 62 | } 63 | 64 | h3 { 65 | font-size: inherit; 66 | font-weight: bold; 67 | border-bottom: 1px solid #333; 68 | } 69 | 70 | ul { 71 | margin: 1rem; 72 | } 73 | 74 | ol { 75 | margin: 1rem; 76 | } 77 | 78 | video, 79 | img { 80 | max-width: 100%; 81 | } 82 | 83 | a { 84 | color: var(--text); 85 | text-decoration: underline; 86 | } 87 | a:visited { 88 | opacity: 0.6; 89 | color: var(--text-muted); 90 | } 91 | 92 | blockquote { 93 | margin: 0; 94 | padding: 0.1em 0 0.1em 2em; 95 | border-left: 2px solid #ccc; 96 | color: var(--text-muted); 97 | } 98 | 99 | pre { 100 | background-color: #ccc; 101 | padding: 1rem; 102 | } 103 | 104 | code { 105 | color: var(--text-muted); 106 | } 107 | 108 | pre > code { 109 | color: #333; 110 | } -------------------------------------------------------------------------------- /tidy.js: -------------------------------------------------------------------------------- 1 | javascript: (function() { 2 | console.log('start'); 3 | var jsCode = document.createElement('script'); 4 | jsCode.setAttribute('src', 'https://cdn.rawgit.com/mozilla/readability/8525c6af/Readability.js'); 5 | window.tidyHtml = (function() { 6 | var loc = document.location; 7 | var uri = { 8 | spec: loc.href, 9 | host: loc.host, 10 | prePath: loc.protocol + '//' + loc.host, 11 | scheme: loc.protocol.substr(0, loc.protocol.indexOf(':')), 12 | pathBase: loc.protocol + '//' + loc.host + loc.pathname.substr(0, loc.pathname.lastIndexOf('/') + 1) 13 | }; 14 | var article = new Readability(uri, document).parse(); 15 | document.children[0].innerHTML = article.content; 16 | var styles = `@media (prefers-color-scheme: dark) {:root {--background: #222;--text: white;--text-muted: #999;}}@media (prefers-color-scheme: light) {:root {--background: white;--text: black;--text-muted: #666;}}* {font-family: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;}code, pre {font-family: IBM Plex Mono, monospace;font-size: calc(1rem + 0.5vw);}html {box-sizing: border-box;width: 100%;height: 100%;font-size: 62.5%;background-color: var(--background) !important;}body {font-size: calc(1.6rem + 0.5vw);line-height: 1.8;margin: 0 auto;width: 40em;max-width: 88%;color: var(--text);background-color: var(--background);}.page {margin: 2rem auto;background: var(--background);padding: 0 0 20rem 0;}h1 {font-size: 44px !important;letter-spacing: -0.5px !important;line-height: 46px !important;margin: 22px 0 15px 0 !important;}h2 {font-size: 35px;line-height: 38px;font-weight: bold;}h3 {font-size: inherit;font-weight: bold;border-bottom: 1px solid #333;}ul {margin: 1rem;}ol {margin: 1rem;}video, img {max-width: 100%;}a {color: var(--text);text-decoration: underline;}a:visited {opacity: 0.6;color: var(--text-muted);}blockquote {margin: 0;padding: 0.1em 0 0.1em 2em;border-left: 2px solid #ccc;color: var(--text-muted);}pre {background-color: #ccc;padding: 1rem;}code {color: var(--text-muted);}pre > code {color: #333;}` 17 | var tidyStyle = document.createElement("style") 18 | tidyStyle.innerText = styles 19 | document.head.appendChild(tidyStyle) 20 | }); 21 | jsCode.onload = tidyHtml; 22 | document.body.appendChild(jsCode); 23 | }()); -------------------------------------------------------------------------------- /tidy.min.js: -------------------------------------------------------------------------------- 1 | javascript:(function()%7Bjavascript%3A%20(function()%20%7B%0A%20%20%20%20console.log('start')%3B%0A%20%20%20%20var%20jsCode%20%3D%20document.createElement('script')%3B%0A%20%20%20%20jsCode.setAttribute('src'%2C%20'https%3A%2F%2Fcdn.rawgit.com%2Fmozilla%2Freadability%2F8525c6af%2FReadability.js')%3B%0A%20%20%20%20window.tidyHtml%20%3D%20(function()%20%7B%0A%20%20%20%20%20%20%20%20var%20loc%20%3D%20document.location%3B%0A%20%20%20%20%20%20%20%20var%20uri%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20spec%3A%20loc.href%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20host%3A%20loc.host%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20prePath%3A%20loc.protocol%20%2B%20'%2F%2F'%20%2B%20loc.host%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20scheme%3A%20loc.protocol.substr(0%2C%20loc.protocol.indexOf('%3A'))%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20pathBase%3A%20loc.protocol%20%2B%20'%2F%2F'%20%2B%20loc.host%20%2B%20loc.pathname.substr(0%2C%20loc.pathname.lastIndexOf('%2F')%20%2B%201)%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20var%20article%20%3D%20new%20Readability(uri%2C%20document).parse()%3B%0A%20%20%20%20%20%20%20%20document.children%5B0%5D.innerHTML%20%3D%20article.content%3B%0A%20%20%20%20%20%20%20%20var%20tidyStyle%20%3D%20document.createElement('link')%3B%0A%20%20%20%20%20%20%20%20tidyStyle.setAttribute('href'%2C%20'https%3A%2F%2Fkepano.s3.amazonaws.com%2Ftidy.css')%3B%0A%20%20%20%20%20%20%20%20tidyStyle.setAttribute('rel'%2C%20'stylesheet')%3B%0A%20%20%20%20%20%20%20%20document.head.appendChild(tidyStyle)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%20%20jsCode.onload%20%3D%20tidyHtml%3B%0A%20%20%20%20document.body.appendChild(jsCode)%3B%0A%7D())%3B%7D)()%3B -------------------------------------------------------------------------------- /tidyUrl.js: -------------------------------------------------------------------------------- 1 | javascript:(function(){ 2 | const url = window.location.href; 3 | const tidyUrl = url.split('?')[0]; 4 | navigator.clipboard.writeText(tidyUrl).then(function() { 5 | window.location.href = tidyUrl; 6 | }).catch(function() { 7 | window.location.href = tidyUrl; 8 | }); 9 | })(); -------------------------------------------------------------------------------- /tidyUrl.min.js: -------------------------------------------------------------------------------- 1 | javascript:(function()%7Bjavascript%3A(function()%7B%0A%20%20const%20url%20%3D%20window.location.href%3B%0A%20%20const%20tidyUrl%20%3D%20url.split('%3F')%5B0%5D%3B%0A%20%20navigator.clipboard.writeText(tidyUrl).then(function()%20%7B%0A%20%20%20%20window.location.href%20%3D%20tidyUrl%3B%0A%20%20%7D).catch(function()%20%7B%0A%20%20%20%20window.location.href%20%3D%20tidyUrl%3B%0A%20%20%7D)%3B%0A%7D)()%3B%7D)()%3B --------------------------------------------------------------------------------