Makes a descriptive URL for the current page.
To install, visit http://bl.ocks.org/d/4532260
Last active
November 9, 2022 05:42
-
-
Save dergachev/4532260 to your computer and use it in GitHub Desktop.
descriptive-url.bookmarklet.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function descriptiveURL() { | |
| var headingText = document.title.replace(/\|.*$/, ''); // removes anything after a pipe, eg '| drupal.org' | |
| if (window.location.host == 'drupal.org') { | |
| headingText = headingText.replace(/^#[0-9]+: /, '') // for drupal.org, remove leading '#12345: ' from title | |
| } | |
| // adapted from https://github.com/riverside/friendurl/blob/master/jquery.friendurl.js | |
| headingText = headingText.toLowerCase() // change everything to lowercase | |
| .replace(/^\s+|\s+$/g, "") // trim leading and trailing spaces | |
| .replace(/[\s]+/g, "-") // change all spaces to a hyphen | |
| .replace(/[^a-z0-9_./-]+/g, "") // remove all non-cyrillic, non-numeric characters except: hyphen, underscore, period, slash | |
| .replace(/[-]+/g, "-") // replace multiple instances of the hyphen with a single instance | |
| .replace(/^-+|-+$/g, "") // trim leading and trailing hyphens | |
| .replace(/[-]+/g, '-'); | |
| // console.log(headingText); | |
| window.location.hash = headingText; | |
| } | |
| descriptiveURL(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <title>Descriptive URL bookmarklet</title> | |
| <head> | |
| <style type="text/css"> | |
| .button-wrapper { | |
| margin: 2em 0; | |
| } | |
| .inline-button, | |
| .button { | |
| /* base64 encoder: http://www.greywyvern.com/code/php/binary2base64 */ | |
| /* Source image: http://tiny.cc/public/images/default-favicon.ico */ | |
| background-image: url(data:image/vnd.microsoft.icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAAAAAAAA+/v8APn3+QCeTWQAcmh+APj5+gBVKksA9/X3APb29gD08vMA9/j5APT09gD7/PwA8/HyAPPz9QD6+/sA9fP1AGcwWQDy8vQAOB07APn6+gD49vcA2eryAPX19gCckqgA8/HzAPb19gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMTExMTExMTExMTExMAAAAGDQ0NDQ0NDQ0NDQ0GAAAAERkZGRkZGRkZGRkZEQAAAAMJCQkJCQkJCQkJCQMAAAADEg4SDhISEg4ODg4DAAAAAxAQEBAQEBAQEBAQAwAAAAMaGhoaGhoLFxcXGgMAAAADBwcHBwcHBwcHBwcDAAAAAxUVFRUVFRUVFRUVAwAAAAMCAgICAgICAgICAgMAAAAECgUKBQoKCgUWFhYEAAAABAUUBRQFBQUYGBgYBAAAAAQUDxQPFBQUGAgIFhgAAAAEDwEPAQ8PDxgIFhgAAAAABAEMAQwBAQEYFhgAAAAAABgYGBgYGBgYGBgAAAAAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACABwAAgA8AAIAfAAA=); | |
| background-repeat: no-repeat; | |
| background-color: #65a9d7; | |
| background-position: 10px center; | |
| padding: 10px 20px 10px 32px; | |
| border-radius: 8px; | |
| color: white; | |
| font-size: 18px; | |
| font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; | |
| text-decoration: none; | |
| } | |
| .inline-button { | |
| display: inline; | |
| background-color: transparent; | |
| padding-right: 3px; | |
| padding-left: 28px; | |
| font-size: 1em; | |
| background-size: 13px 13px; | |
| } | |
| .inline-button a { | |
| text-decoration: none; | |
| color: #65a9d7; | |
| } | |
| body { | |
| padding: 20px; | |
| font-family: Helvetica, Arial, sans-serif; | |
| font-size: .9em; | |
| color: #444; | |
| } | |
| p { | |
| line-height: 1.5em; | |
| margin: .5em 0 1em 0; | |
| } | |
| ul { | |
| line-height: 2em; | |
| list-style-type: none; | |
| padding-left: 1em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section data-markdown> | |
| # Descriptive URL bookmarklet | |
| The _Descriptive URL_ bookmarklet is helpful if the URL you would like to paste is too short. It makes a descriptive URL for the current page. | |
| To install the bookmarklet, drag this link to your bookmark toolbar: | |
| <div class="button-wrapper"> <a class="button" href="javascript:(function(){var s = document.createElement('script');s.src='https://gist.github.com/raw/4532260/descriptive-url.bookmarklet.js';document.body.appendChild(s);})();">Descriptive URL</a> </div> | |
| ## How to use it | |
| Go to a site with overly short URLs (see examples below), and click on the bookmarklet to append the page title to the end of the URL. Voila! | |
|  | |
| ## Where you might use it | |
| Here are some more examples of websites where it's useful: | |
| <ul> | |
| <li><a href="http://www.youtube.com/watch?v=v-pyuaThp-c#doodling-in-math-class-connecting-dots-youtube">http://www.youtube.com/watch?v=v-pyuaThp-c#doodling-in-math-class-connecting-dots-youtube</a></li> | |
| <li><a href="http://ihackernews.com/comments/5043231#hacker-news-mobile-devopssysadmin-cheatsheet">http://ihackernews.com/comments/5043231#hacker-news-mobile-devopssysadmin-cheatsheet</a></li> | |
| <li><a href="https://github.com/dergachev/chrome-xpath-link/issues/2#create-a-bookmarklet">https://github.com/dergachev/chrome-xpath-link/issues/2#create-a-bookmarklet</a></li> | |
| <li><a href="http://news.ycombinator.com/item?id=5043231#devopssysadmin-cheatsheet">http://news.ycombinator.com/item?id=5043231#devopssysadmin-cheatsheet</a></li> | |
| <li><a href="http://drupal.org/node/1427148#meta-how-should-joke-modules-be-handled">http://drupal.org/node/1427148#meta-how-should-joke-modules-be-handled</a></li> | |
| <li><a href="https://gist.github.com/4331769#rule-of-thirds-bookmarklet">https://gist.github.com/4331769#rule-of-thirds-bookmarklet</a></li> | |
| <li><a href="http://bl.ocks.org/4360892#u.s.-airports">http://bl.ocks.org/4360892#u.s.-airports</a></li> | |
| <li><a href="http://www.redmine.org/issues/12778#defect-12778-upgrade-to-rails-3.2.11-redmine">http://www.redmine.org/issues/12778#defect-12778-upgrade-to-rails-3.2.11-redmine</a></li> | |
| <li><a href="https://twitter.com/dergachev/status/290914183220981760#twitter-dergachev-remembering-aaron-swarz-the-...">https://twitter.com/dergachev/status/290914183220981760#twitter-dergachev-remembering-aaron-swarz-the-...</a></li> | |
| <li><a href="https://docs.google.com/spreadsheet/ccc?key=0AonYZs4MzlZbdERaRzgxaUcwYXVRZFpaR3ZrekREb2c&hl=en&authkey=CIretNoB#corruption-index">https://docs.google.com/spreadsheet/ccc?key=0AonYZs4MzlZbdERaRzgxaUcwYXVRZFpaR3ZrekREb2c&hl=en&authkey=CIretNoB#corruption-index</a></li> | |
| <li><a href="https://issues.apache.org/jira/browse/SOLR-4305#solr-4305-xss-vulnerability-in-solr-/admin/analysis.jsp-asf-jira">https://issues.apache.org/jira/browse/SOLR-4305#solr-4305-xss-vulnerability-in-solr-/admin/analysis.jsp-asf-jira</a></li> | |
| <li><a href="http://www.craigslist.org/about/best/inl/2434325556.html#best-of-craigslist-ugly-mean-cat-free">http://www.craigslist.org/about/best/inl/2434325556.html#best-of-craigslist-ugly-mean-cat-free</a></li> | |
| <li><a href="http://www.flickr.com/photos/54771108@N07/6959604522/#circus-clown">http://www.flickr.com/photos/54771108@N07/6959604522/#circus-clown</a></li> | |
| </ul> | |
| ## Get the source code | |
| To get the source code, visit <a href="https://gist.github.com/4532260#descriptive-url.bookmarklet.js">https://gist.github.com/4532260#descriptive-url.bookmarklet.js</a> | |
| <a href="https://gist.github.com/4532260"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a> | |
| </section> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script> | |
| <script> | |
| // adapted from http://blog.harakys.com/blog/2012/02/21/embed-markdown-into-your-html/ | |
| // see also https://gist.github.com/1343518 | |
| [].forEach.call( document.querySelectorAll('[data-markdown]'), function fn(elem){ | |
| var html = (new Showdown.converter()).makeHtml(elem.innerHTML); | |
| elem.innerHTML = html; | |
| }); | |
| </script> | |
| <script type="text/javascript"> | |
| var _gaq = _gaq || []; | |
| _gaq.push(['_setAccount', 'UA-37659053-1']); | |
| _gaq.push(['_setDomainName', 'ocks.org']); | |
| _gaq.push(['_trackPageview']); | |
| (function() { | |
| var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | |
| ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | |
| var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment