Makes a descriptive URL for the current page.
To install, visit http://bl.ocks.org/d/4532260
Makes a descriptive URL for the current page.
To install, visit http://bl.ocks.org/d/4532260
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(); |
<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! | |
![Screenshot for descriptive-url.bookmarklet.js](http://dl-web.dropbox.com/u/8325927/screenshots/NJTPYR-2013.1.14-14.36.png) | |
## 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> |