magu({}, [shareLink({
selector: 'share-link',
classNames: {
block: 'share-link__block',
section: 'share-link__section',
image: 'share-link__image',
meta: 'share-link__meta',
title: 'share-link__title',
description: 'share-link__description'
},
alternativeElement: `...`,
pageresOpts: {
crop: true,
scale: 0.23426,
filename: (() => {
if (process.env.NODE_ENV === 'dev') {
return '<%=url%>';
}
return '<%= date %> - <%= url %>-<%= size %><%= crop %>';
})()
},
imageSizes: ['1366x844'],
imageDest: null,
publicImageDir: '/'
})])
.process(`${__dirname}/markdown.md`)
.then(result => console.log(result.html));
<share-link href="https://github.com/"></share-link>
<share-link></share-link>
<script>
var style = document.createElement('style');
style.innerHTML = '.share-link__block{display:block;text-decoration:none;color:inherit}.share-link__section{min-height:8em;position:relative}.share-link__image {position:absolute;width:320px;height:100%;background-size:cover}.share-link__meta{font-size:.9em;padding:.5em 1em .5em calc(320px + .5em)}.share-link__title{font-weight:700}.share-link__description{font-size:.8em}';
document.head.appendChild(style);
</script>
<p>
<a class="share-link__block" href="https://github.com/">
<section class="share-link__section">
<div class="share-link__image" style="background-image: url(/2017-01-20 - github.com-1366x844-cropped.png)"></div>
<div class="share-link__meta">
<div class="share-link__title">How people build software · GitHub</div>
<p class="share-link__description"></p>
</div>
</section>
</a>
</p>