YAML Markdown Page Summary Bookmarklet

YAML Markdown Page Summary is a browser bookmarklet that creates a summary of the currently viewed page.

The output text is split into header and body sections, with header properties marked up in YAML and the body in markdown.

I use this bookmarklet to create stub posts for a static site generator, e. g. this page you're reading right now. The header properties are compatible with logya, my generator of choice, I may be biased...

It shouldn't be too hard though to adjust them for use with jekyll, pelican et al.

Drag to add the bookmarklet to your bookmarks bar

YAML Markdown Page Summary

javascript:void(function(){var g,a,t,d,u,q,n,k,s,v,f,e,r,m,o,A,h,w,j,x,c,b,y,z,l;f=function(i){var p;p=document.querySelector('meta[property="og:'+i+'"]');if(p===null){p=document.querySelector('meta[name="'+i+'"]')}if(p&&p.content){return p.content}};v=function(i,p){return i+": '"+p+"'"};A=f("title");if(!A){A=document.title}h="/"+A.toLowerCase().replace(/\W+/g,"-")+"/";k=document.location.href;t=f("description");n=[];q=f("image");if(q){n.push(q)}w=f("video");g=document.querySelectorAll('img:not([src=""])');for(c=0,y=g.length;c<y;c++){u=g[c];if(u.src.match("https?://"&&(u.width*u.height>40000))){n.push(u.src)}}m=[];l=document.getElementsByTagName("p");for(b=0,z=l.length;b<z;b++){r=l[b];if(r.textContent){m.push(r.textContent.trim())}}d=[];d.push(v("title",A));d.push(v("url",h));d.push(v("link",k));if(t){d.push(v("description",t))}if(n.length>0){d.push(v("image",n[0]))}if(w){d.push(v("video",w))}e=new Date();d.push(v("created",e.toISOString()));j="---\nCONTENT\ntemplate: page.html\n---\n";s=j.replace("CONTENT",d.join("\n"))+m.join("\n\n");x=document.createElement("div");x.id="ymdps";x.setAttribute("style","position:relative;padding:20px;border:5px solid #eee;width:80%;margin-left:10%;");a=document.createElement("button");a.setAttribute("style","position:absolute;top:5px;right:5px;cursor:pointer;font-weight:bold;");a.setAttribute("onclick","javascript:document.getElementById('ymdps').remove();");a.textContent="Close preview";o=document.createElement("textarea");o.setAttribute("style","width:98%;height:600px;margin:1%;");o.textContent=s;x.appendChild(a);x.appendChild(o);document.body.insertBefore(x,document.body.firstChild);window.scroll(0,0)}).call(this);

You can get the MIT licensed source code on GitHub.

And this is how it looks when creating a preview of this page:

YAML Markdown Preview

Featured Merch

No Class No State Functional Programmer Propaganda Parody

Latest Posts

Featured Book

Subscribe to RSS Feed

This post was written by Ramiro Gómez (@yaph) and published on August 22, 2013. Subscribe to the Geeksta RSS feed to be informed about new posts.

Tags: bookmarklet markdown yaml

Disclosure: External links on this website may contain affiliate IDs, which means that I earn a commission if you make a purchase using these links. This allows me to offer hopefully valuable content for free while keeping this website sustainable. For more information, please see the disclosure section on the about page.

Share post: Facebook LinkedIn Reddit Twitter

YAML Markdown Page Summary Bookmarklet

Featured Merch

Latest Posts

Featured Book

Merchandise