This partial is useful for placing within context of a blog post. It will list all the relevant attributes of the post.
To setup the partial is automatic if its within context of a blog article template. Simply allowing the features on the partial.
For the social links the relevant JS libraries must be loaded and initiated. Also include the correct directives for the social links required.
= codeBlender "detail", "molecule", { author: true, cal: true, comment: true, more: true, name: "docs", social: true, tags: true }
<div class='blogDetail'>
<ul class='blogDetail__details list-inline'>
<li>
<span class='fa fa-calendar'></span>
<time datetime='2016-04-08T00:00:00Z' itemprop='datePublished' pubdate>
2016-04-08
,
</time>
</li>
<li>
<span class='fa fa-user'></span>
by
<span itemprop='author' itemptype='http://schema.org/Person' itemscope>
<a class='blogDetail__author' itemprop='url' rel='author'>
<span itemprop='name'>DryKISS</span>
</a>
</span>
</li>
<li>
<span class='fa fa-clock-o'></span>
Read time: 03 min
</li>
<li>
<span class='fa fa-comment'></span>
X Comments
</li>
</ul>
<div class='blogDetail__tags'>
<a href="/docs/tag/blog.html" class="label blogDetail__tag label-info" itemprop="keywords">blog
</a>
</div>
<div class='blogDetail__social'>
<span class='blogDetail__shareText'>Share this article</span>
<a href="javascript:;" class="facebookShareButton" data-url="http://codeblender.net/molecule/detail/detail.html"><span class='fa fa-facebook-square fa-2x'></span>
</a>
<a href="https://twitter.com/intent/tweet?url=http://codeblender.net/molecule/detail/detail.html"><span class='fa fa-twitter-square fa-2x'></span>
</a>
<a href="https://www.pinterest.com/pin/create/button/" data-pin-description="test this out" data-pin-do="buttonPin" data-pin-custom="true"><span class='fa fa-pinterest-square fa-2x'></span>
</a>
</div>
</div>
| Title | URL |
|---|---|
| Middleman blogging | http://middlemanapp.com/blogging |
| Schema | http://schema.org/BlogPosting |
| Structured data | https://developers.google.com/structured-data/ |
| Microdata | http://www.designhive.com/blog/using-schemaorg-microdata |
| Schema Markup | https://gist.github.com/gregrickaby/5917114 |
| Blog Footer | http://bootsnipp.com/snippets/featured/blog-post-footer |
| Task | Date |
|---|---|
| Social elements need to be called via a Directive | |
| Need to be able to put in a test article to test the detail module | |
| Consider putting the tags in a DL / LI | |
| Should link up the Author to show articles by Authors name - finish of link | |
| Include more social link options | |
| Add in social links - Twitter / Google+ | |
| Need to distinguish the types of Articles / Posts and change template accordingly and microdata, i.e. event | |
| Tags should scale with a reveal on the end - use overflow or bootstrap collapse | |
| Maybe move this partial into a more inclusive Blog section | |
| Link Up Date, Author and Comments | |
| Docs page not showing any data - add locals to show these |