comment-examples

From IndieWeb
Jump to: navigation, search

examples of mf2 marked-up comments

Sarven Capadisli : Please note that as of 2015-07-13T13:00:00Z, the examples below are based on remarks in mf2 draft properties or brainstorming discussions.

tantek.com

<h2 id="blinking-fever-comments">Comments</h2>
<p class="p-comment h-cite">
  <a class="u-author h-card" href="https://kylewm.com/">Kyle Mahan</a>:
  <span class="p-content p-name">
    I dig it. Kind of a cyberpunk version of “I Used to Love H.E.R.”
  </span>
  <a class="u-url" href="https://kylewm.com/2015/07/tantek-i-dig-it-kind-of-a-cyberpunk-version-of-i"><time class="dt-published">2015-07-09 13:22:56-07:00</time></a>
</p>

<p class="p-comment h-cite">
  <a class="u-author h-card" href="https://adactio.com/">Jeremy Keith</a>:
  <span class="p-content p-name">
    A heartbreaking tale of companionship, memory and loss.
  </span>
  <a class="u-url" href="https://adactio.com/links/9234"><time class="dt-published">2015-07-09 22:46:06</time></a>
</p>

ben.thatmustbe.me

<div class="comments">
  <div class="comment p-comment h-cite">
    <div class='comment_header'>
      <span class="minicard h-card vcard author p-author">
        <img class='comment_author' src="http://known.kevinmarks.com/file/9255656669173b7867ab839ee6556f9e" />
      </span>
      <a class="p-name fn value name u-url" href="http://known.kevinmarks.com/profile/kevinmarks" rel="nofollow" title="Kevin Marks" />
      Kevin Marks <!--  -->
    </a>

    <a href="http://known.kevinmarks.com/2015/would-micropub-chaining-work-with-silo-shims-too" class="u-url permalink"><time class="date dt-published" datetime="2015-07-10 04:08:33">July 10, 2015 4:08 AM</time></a>
    <span class="other-controls">
    </span>
  </div>
  <div class='comment_body p-content'>
    Would micropub chaining work with silo shims too?                </div>
  </div>
</div>
</div>

https://aaronparecki.com

<ul>
  <li class="p-comment h-cite" id="external_http_tantek_com_2015_192_t1_reply-post" data-url="http://tantek.com/2015/192/t1/reply-post"><div class="inner">    <div class="minicard h-card vcard author p-author">
    <div style="position: relative; width: 48px; height: 48px; float: left; margin-right: 6px;">
      <img class="photo logo u-photo" src="http://tantek.com/logo.jpg" alt="Tantek Çelik" width="48" />
    </div>
    <a href="http://tantek.com/" class="u-url">tantek.com</a>
    <a class="p-name fn value name" href="http://tantek.com/">Tantek Çelik</a>
  </div>
  <div class="quote-text"><div class="e-content p-name"><a href="http://aaronparecki.com">@aaronpk</a> re: <a href="https://aaronparecki.com/notes/2015/07/11/1/indiewebcamp"><span class="protocol">https://</span>aaronparecki.com/notes/2015/07/11/1/indiewebcamp</a>
    And here’s a reply to your post. Let’s see if it shows up on your post.</div></div><a href="http://tantek.com/2015/192/t1/reply-post" class="u-url"><time class="date dt-published" datetime="2015-07-11T12:56:00-07:00">July 11, 2015 12:56pm GMT-0700</time></a></div></li>                              <li class="p-comment h-cite" id="external_http_www_chreekat_net_reply_html" data-url="http://www.chreekat.net/reply.html"><div class="inner">    <div class="minicard h-card vcard author p-author">
    <div style="position: relative; width: 48px; height: 48px; float: left; margin-right: 6px;">
      <img class="photo logo u-photo" src="http://i.imgur.com/1UDGJSU.png" alt="Bryan Richter" width="48" />
    </div>
    <a href="http://www.chreekat.net" class="u-url">www.chreekat.net</a>
    <a class="p-name fn value name" href="http://www.chreekat.net">Bryan Richter</a>
  </div>
  <div class="quote-text"><div class="e-content p-name">Here is a reply to your post.</div></div><a href="http://www.chreekat.net/reply.html" class="u-url"><time class="date dt-published" datetime="2015-07-11T13:12:00-07:00">July 11, 2015 1:12pm GMT-0700</time></a></div></li>                              <li class="p-comment h-cite" id="external_http_donpark_org_blog_2015_07_11_indiewebcamp-2015" data-url="http://donpark.org/blog/2015/07/11/indiewebcamp-2015"><div class="inner">    <div class="minicard h-card vcard author p-author">
  <div style="position: relative; width: 48px; height: 48px; float: left; margin-right: 6px;">
    <img class="photo logo u-photo" src="/images/nouns/user.svg" alt="" width="48" />
  </div>
  <a href="Don Park" class="u-url">Don Park</a>
  <a class="p-name fn value name" href="Don Park"></a>
</div>
<div class="quote-text"><div class="e-content p-name">Greetings to IndieWebCamp participants!  Did you hear about the hungry time machine? It went back four seconds.
  In reply to aaronpk's indeiwebcamp note</div></div><a href="http://donpark.org/blog/2015/07/11/indiewebcamp-2015" class="u-url"><time class="date dt-published" datetime="2015-07-11T13:11:50-07:00">July 11, 2015 1:11pm GMT-0700</time></a></div></li>                              <li class="p-comment h-cite" id="external_http_wirres_net_article_articleview_8100_1_54_" data-url="http://wirres.net/article/articleview/8100/1/54/"><div class="inner">    <div class="minicard h-card vcard author p-author">
  <div style="position: relative; width: 48px; height: 48px; float: left; margin-right: 6px;">
    <img class="photo logo u-photo" src="http://root.wirres.net/03022687630_h2.jpg" alt="felix schwenzel" width="48" />
  </div>
  <a href="http://wirres.net" class="u-url">wirres.net</a>
  <a class="p-name fn value name" href="http://wirres.net">felix schwenzel</a>
</div>
<div class="quote-text"><div class="e-content p-name">why should i reply to your post?</div></div><a href="http://wirres.net/article/articleview/8100/1/54/" class="u-url"><time class="date dt-published" datetime="2015-07-11T23:36:30+02:00">July 11, 2015 11:36pm GMT+0200</time></a></div></li>                              <li class="p-comment h-cite" id="external_http_giudici_us_blog_0" data-url="http://giudici.us/blog/0"><div class="inner">    <div class="minicard h-card vcard author p-author">
<div style="position: relative; width: 48px; height: 48px; float: left; margin-right: 6px;">
  <img class="photo logo u-photo" src="http://giudici.us/static/_images/avatar_square.jpg" alt="Shaun Giudici" width="48" />
</div>
<a href="http://giudici.us" class="u-url">giudici.us</a>
<a class="p-name fn value name" href="http://giudici.us">Shaun Giudici</a>
</div>
<div class="quote-text"><div class="e-content p-name">Was helpful to follow the demo in real-time by reloading www.chreekat.net/reply.html
  In reply to: 
  <a href="https://aaronparecki.com/notes/2015/07/11/1/indiewebcamp"><span class="protocol">https://</span>aaronparecki.com/notes/2015/07/11/1/indiewebcamp</a></div></div><a href="Array" class="u-url"><time class="date dt-published" datetime="2015-07-11T19:45:00-07:00">July 11, 2015 7:45pm GMT-0700</time></a></div></li>              
  <a name="mentions"></a>
  <h4>Other Mentions</h4>
  <li class="p-comment h-cite" id="external_http_charlesreid1_com_wordpress_2015_07_howdy_" data-url="http://charlesreid1.com/wordpress/2015/07/howdy/"><div class="inner">    <div class="minicard h-card vcard author p-author">
    <div style="position: relative; width: 48px; height: 48px; float: left; margin-right: 6px;">
      <img class="photo logo u-photo" src="/images/nouns/user.svg" alt="Charles Reid" width="48" />
    </div>
    <a href="http://charlesreid1.com/wordpress/author/admin/" class="u-url">charlesreid1.com/wordpress/author/admin</a>
    <a class="p-name fn value name" href="http://charlesreid1.com/wordpress/author/admin/">Charles Reid</a>
  </div>
  <div class="quote-text"><div class="p-name"><a href="http://charlesreid1.com/wordpress/2015/07/howdy/">Howdy</a></div></div><a href="http://charlesreid1.com/wordpress/2015/07/howdy/" class="u-url"><span class="date">permalink</span></a></div></li>                                  <li class="h-cite nocontent" id="external_https_en_wikipedia_org_wiki_Wikipedia_Sandbox"><a href="https://en.wikipedia.org/wiki/Wikipedia:Sandbox">en.wikipedia.org/wiki/Wikipedia:Sandbox</a><a href="https://en.wikipedia.org/wiki/Wikipedia:Sandbox"><time class="date dt-published" datetime="2015-07-12T00:02:11+00:00">July 12, 2015 12:02am UTC</time></a></li>                                  <li class="h-cite nocontent" id="external_http_jaygreasley_github_io_"><a href="http://jaygreasley.github.io/">jaygreasley.github.io/</a><a href="http://jaygreasley.github.io/"><time class="date dt-published" datetime="2015-07-12T13:21:53+00:00">July 12, 2015 1:21pm UTC</time></a></li>                              

</ul>

http://acegiak.net/

<div id="comments" class="comments-area">

  
  <h2 class="comments-title">Responses</h2>

  <ul class="webmention-list">
  </ul><!-- .webmention-list -->
  <ul class="comment-list">
    <li id="comment-977" class="comment even thread-even depth-1 p-comment h-cite h-as-reply">
      <article id="div-comment-977" class="comment-body">
        <header class="comment-metadata">
          <span class="comment-author vcard h-card p-author">
            <img alt='' src='https://kylewm.com/static/img/users/kyle.jpg' srcset='https://kylewm.com/static/img/users/kyle.jpg 2x' class='avatar avatar-50 photo avatar-default u-photo avatar-semantic-linkbacks' height='50' width='50' />           <b class="fn"><a href='https://kylewm.com' rel='external nofollow' class='url'>Kyle Mahan</a></b>         </span><!-- .comment-author -->
            <small> @ <cite><a class="u-url" href="https://kylewm.com/2015/07/posting-an-empty-video-tag-is-so-cruel-like-posting">kylewm.com</a></cite></small>        </header>
            <p class="comment-content e-content p-name">
              posting an empty video tag is so cruel! like posting a gif that isn’t animated with the caption “wait for it.”        </p><!-- .comment-content -->

              <footer class="comment-metadata">
                <span class="reply">
                  <a href="" class="in-reply-to"></a>
                  <a rel="nofollow" class="comment-reply-login" href="http://acegiak.net/wp-login.php?redirect_to=http%3A%2F%2Facegiak.net%2F2015%2F07%2F03%2Fhug-medic-kale-darkestkale-29%2F">Log in to Reply</a>         </span><!-- .reply -->
                   • 
                  <a class="u-url" href="https://kylewm.com/2015/07/posting-an-empty-video-tag-is-so-cruel-like-posting">
                    <time class="dt-published" datetime="2015-07-04T00:23:36+0930"></time>
                    12:23AM CST on 2015-07-04         </a>
                  </footer><!-- .comment-meta -->


                </article><!-- .comment-body -->
              </li><!-- #comment-## -->
              <li id="comment-981" class="comment odd alt thread-odd thread-alt depth-1 p-comment h-cite h-as-mention">
                <article id="div-comment-981" class="comment-body">
                  <header class="comment-metadata">
                    <span class="comment-author vcard h-card p-author">
                      <img alt='' src='https://acegiak.net/files/2015/03/facesmm.gif' srcset='https://acegiak.net/files/2015/03/facesmm.gif 2x' class='avatar avatar-50 photo avatar-default u-photo avatar-semantic-linkbacks' height='50' width='50' />           <b class="fn"><a href='https://acegiak.net/2015/07/04/posting-an-empty-video-tag-is-so-cruel-like-posting-a-gif-that-isnt-animated-with-the-caption-wait-for-it/' rel='external nofollow' class='url'>Ashton McAllan</a></b>          </span><!-- .comment-author -->
                      <small> @ <cite><a class="u-url" href="https://acegiak.net/2015/07/04/posting-an-empty-video-tag-is-so-cruel-like-posting-a-gif-that-isnt-animated-with-the-caption-wait-for-it/">acegiak.net</a></cite></small>        </header>
                      <p class="comment-content e-content p-name">
                        
                        Oh man the html was supposed to be escaped there. That’s what happens when I post late at night I guess. Fixed now, not that it matters.
                      </p><!-- .comment-content -->

                      <footer class="comment-metadata">
                        <span class="reply">
                          <a href="" class="in-reply-to"></a>
                          <a rel="nofollow" class="comment-reply-login" href="http://acegiak.net/wp-login.php?redirect_to=http%3A%2F%2Facegiak.net%2F2015%2F07%2F03%2Fhug-medic-kale-darkestkale-29%2F">Log in to Reply</a>         </span><!-- .reply -->
                           • 
                          <a class="u-url" href="https://acegiak.net/2015/07/04/posting-an-empty-video-tag-is-so-cruel-like-posting-a-gif-that-isnt-animated-with-the-caption-wait-for-it/">
                            <time class="dt-published" datetime="2015-07-04T18:28:56+0930"></time>
                            6:28PM CST on 2015-07-04          </a>
                          </footer><!-- .comment-meta -->


                        </article><!-- .comment-body -->
                      </li><!-- #comment-## -->
                    </ul><!-- .comment-list -->

                    
                    
                    
                    
                    <br />
                    <form id="webmention-form" action="http://acegiak.net/?webmention=endpoint" method="post">
                      <p>
                        <label for="webmention-source">Respond on your own site:</label>
                        <input id="webmention-source" size="15" type="url" name="source" placeholder="http://example.com/post/100" />

                        <input id="webmention-submit" type="submit" name="submit" value="Send" />

                        <input id="webmention-target" type="hidden" name="target" value="http://acegiak.net/2015/07/03/hug-medic-kale-darkestkale-29/" />
                      </p>
                    </form>
                    <div id="respond" class="comment-respond">
                      <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2015/07/03/hug-medic-kale-darkestkale-29/#respond" style="display:none;">Cancel reply</a></small></h3>
                      <p class="must-log-in">You must be <a href="http://acegiak.net/wp-login.php?redirect_to=http%3A%2F%2Facegiak.net%2F2015%2F07%2F03%2Fhug-medic-kale-darkestkale-29%2F">logged in</a> to post a comment.</p>                        </div><!-- #respond -->
                      
  </div><!-- #comments -->

webmention.herokuapp.com

note lack of mf2 markup - this is generated by js and injected

<div class="webmention-container">
  <ul class="webmention-facepile">
    <li class="webmention-interaction-repost"><a class="webmention-interaction-presentation" data-url="https://twitter.com/jrobertson/status/619818386894286848" title="James Robertson reposted this Yesterday" href="https://twitter.com/jrobertson/status/619818386894286848"><span><img src="https://twitter.com/jrobertson/profile_image?size=original">James Robertson reposted this Yesterday</span></a></li>
    <li class="webmention-interaction-repost"><a class="webmention-interaction-presentation" data-url="https://twitter.com/mal_disposto/status/619820469617864704" title="Paulo Monteiro reposted this Yesterday" href="https://twitter.com/mal_disposto/status/619820469617864704"><span><img src="https://twitter.com/mal_disposto/profile_image?size=original">Paulo Monteiro reposted this Yesterday</span></a></li>
    <li class="webmention-interaction-like"><a class="webmention-interaction-presentation" data-url="https://twitter.com/kevinmarks/status/619817414415388672" title="Paulo Monteiro liked this Yesterday" href="https://twitter.com/mal_disposto"><span><img src="https://twitter.com/mal_disposto/profile_image?size=original">Paulo Monteiro liked this Yesterday</span></a></li>
    <li class="webmention-interaction-repost"><a class="webmention-interaction-presentation" data-url="https://twitter.com/IndieWebCampUK/status/619838611991740416" title="IndieWebCampUK reposted this Yesterday" href="https://twitter.com/IndieWebCampUK/status/619838611991740416"><span><img src="https://twitter.com/IndieWebCampUK/profile_image?size=original">IndieWebCampUK reposted this Yesterday</span></a></li>
    <li class="webmention-interaction-repost"><a class="webmention-interaction-presentation" data-url="https://twitter.com/mshook/status/619840595146706944" title="Michael Shook reposted this Yesterday" href="https://twitter.com/mshook/status/619840595146706944"><span><img src="https://twitter.com/mshook/profile_image?size=original">Michael Shook reposted this Yesterday</span></a></li>
    <li class="webmention-interaction-like"><a class="webmention-interaction-presentation" data-url="https://twitter.com/kevinmarks/status/619817414415388672" title="Robin Taylor liked this Yesterday" href="https://twitter.com/badgermind"><span><img src="https://twitter.com/badgermind/profile_image?size=original">Robin Taylor liked this Yesterday</span></a></li>
    <li class="webmention-interaction-like"><a class="webmention-interaction-presentation" data-url="https://twitter.com/kevinmarks/status/619817414415388672" title="jon r liked this Yesterday" href="https://twitter.com/almereyda"><span><img src="https://twitter.com/almereyda/profile_image?size=original">jon r liked this Yesterday</span></a></li>
    <li class="webmention-interaction-like"><a class="webmention-interaction-presentation" data-url="https://twitter.com/kevinmarks/status/619817414415388672" title="Rudiger Meyer liked this Yesterday" href="https://twitter.com/RudigerMeyer"><span><img src="https://twitter.com/RudigerMeyer/profile_image?size=original">Rudiger Meyer liked this Yesterday</span></a></li>
    <li class="webmention-interaction-like"><a class="webmention-interaction-presentation" data-url="https://twitter.com/kevinmarks/status/619817414415388672" title="Lewis Nyman liked this 19 hours ago" href="https://twitter.com/lewisnyman"><span><img src="https://twitter.com/lewisnyman/profile_image?size=original">Lewis Nyman liked this 19 hours ago</span></a></li>
  </ul>
  <div class="webmention-mention">
    <div class="webmention-author"><a href="https://twitter.com/mal_disposto"><img src="https://twitter.com/mal_disposto/profile_image?size=original">Paulo Monteiro</a></div>
    <div class="webmention-summary">@kevinmarks thank you, Kevin :)</div>
    <a class="webmention-published" data-published="1436611772000" href="https://twitter.com/mal_disposto/status/619820815559868416">Yesterday</a>
  </div>
</div>

werd.io

<div class="interactions">
	<span class="annotate-icon">
                    <a class="stars" href="http://werd.io/2015/two-years-of-being-on-the-indieweb#comments"><i class="fa fa-star-o"></i> 7 stars</a></span>
            	    <span class="annotate-icon"><a class="comments" href="http://werd.io/2015/two-years-of-being-on-the-indieweb#comments"><i class="fa fa-comments"></i> 3 comments</a></span>
    <a class="shares" href="http://werd.io/2015/two-years-of-being-on-the-indieweb#comments"><i class="fa fa-retweet"></i> 2</a>
    <a class="rsvps" href="http://werd.io/2015/two-years-of-being-on-the-indieweb#comments"></a>
</div>
<br clear="all"/>

            <div class="annotations">

                <a name="comments"></a>
                                        <div class="idno-annotation row p-comment h-cite">
            <div class="idno-annotation-image col-md-1 hidden-sm">
                <p>
                    <a href="http://about.me/jeremymonroe" class="icon-container"><img src="http://werd.io/file/55a173dbbed7de01726cf5f0" /></a>
                </p>
            </div>
            <div class="idno-annotation-content col-md-9">
                <div class="p-summary e-content">
<p>@benwerd Are you using convoy from your known site? And are you including hashtags in the original posting? I am wanting the same. Thanks</p>
</div>
                <div class="h-card">
                    <p><small><a href="http://about.me/jeremymonroe" class="p-author p-name">Jeremy Monroe</a>,
                            <a href="https://brid-gy.appspot.com/comment/twitter/benwerd/619938499429466112/619945225432207360">Jul 11 2015</a>
                            on <a href="https://brid-gy.appspot.com/comment/twitter/benwerd/619938499429466112/619945225432207360" class="u-url">brid-gy.appspot.com</a></small> <img src="http://werd.io/file/55a173dbbed7de01726cf5f0" class="u-photo" style="display:none"/></p></small></p>
                </div>
            </div>
                    </div>
        <div class="idno-annotation row p-comment h-cite">
            <div class="idno-annotation-image col-md-1 hidden-sm">
                <p>
                    <a href="http://stream.tinokremer.nl/profile/tinokremer" class="icon-container"><img src="http://werd.io/file/55a181c5bed7de937a3affa8" /></a>
                </p>
            </div>
            <div class="idno-annotation-content col-md-9">
                <div class="p-summary e-content">
<p>Nice Ben and thank you for offering Known Pro. I'm just two weeks on the IndieWeb, though I have had my own site for years and actually I started with my own site when social media was still in its infancy.<br />I have also been on an exclusive Google+ diet recently and found that is not working for me. I like my friends that are on other networks to be able to follow along. Now that's actually possible and easy for me at the same time.<br />I have always believed in federated networks, though I do not expect that to happen with the big commercial providers. POSSE is the solution.<br />Will Known to Known syndication be available for us users as well? I would welcome such a feature for highly niche content.<br />Cheers, on to the next two years!</p>
</div>
                <div class="h-card">
                    <p><small><a href="http://stream.tinokremer.nl/profile/tinokremer" class="p-author p-name">Tino Kremer</a>,
                            <a href="http://stream.tinokremer.nl/2015/nice-ben-and-thank-you-for-offering-known-pro-im">Jul 11 2015</a>
                            on <a href="http://stream.tinokremer.nl/2015/nice-ben-and-thank-you-for-offering-known-pro-im" class="u-url">stream.tinokremer.nl</a></small> <img src="http://werd.io/file/55a181c5bed7de937a3affa8" class="u-photo" style="display:none"/></p></small></p>
                </div>
            </div>
                    </div>
        <div class="idno-annotation row p-comment h-cite">
            <div class="idno-annotation-image col-md-1 hidden-sm">
                <p>
                    <a href="http://about.me/markwaters" class="icon-container"><img src="http://werd.io/gfx/users/default-02.png" /></a>
                </p>
            </div>
            <div class="idno-annotation-content col-md-9">
                <div class="p-summary e-content">
<p>Thank you (and all the other contributors) for writing Known , it has reignited my love of blogging and reading on the open web.</p>
</div>
                <div class="h-card">
                    <p><small><a href="http://about.me/markwaters" class="p-author p-name">Mark Waters</a>,
                            <a href="http://werd.io/2015/two-years-of-being-on-the-indieweb/annotations/5509bca02ea1d7028b961647d6183ca2">Jul 12 2015</a>
                            on <a href="http://werd.io/2015/two-years-of-being-on-the-indieweb/annotations/5509bca02ea1d7028b961647d6183ca2" class="u-url">werd.io</a></small> <img src="http://werd.io/gfx/users/default-02.png" class="u-photo" style="display:none"/></p></small></p>
                </div>
            </div>
                    </div>
            <div class="idno-annotation row">
                <div class="idno-annotation-image col-md-1 hidden-sm">
                    <p>
                        <a href="http://tantek.com/" class="icon-container"><img src="http://werd.io/file/55a162eebed7dec9093d5645" /></a>
                    </p>
                </div>
                <div class="idno-annotation-content col-md-6">
                    <p>
                        <a href="http://tantek.com/">Tantek Çelik</a>
                        liked this post
                    </p>
                    <p><small><a href="http://tantek.com/2015/192/f4">Jul 11 2015</a> on <a href="http://tantek.com/2015/192/f4">tantek.com</a></small></p>
                </div>
            </div>

waterpigs.co.uk

<div class="compact-mentions clearfix">
		<article class="h-entry p-comment clearfix like-relation">
		<img class="compact-mention-icon" src="/img/icons/like-icon.svg" alt="">
		<a class="p-author h-card" href="https://twitter.com/tungufoss">
					<img class="u-photo photo" src="https://twitter.com/tungufoss/profile_image?size=original" alt="">
				Helga Ingimundard.		</a>
		
				<div class="e-content p-summary p-name like-content">
			
  
  
<a class="u-mention" href="https://waterpigs.co.uk/notes/4c7J8D/"></a>
  		</div>
				
		<span class="published-datetime">
			<a class="u-url url" href="https://twitter.com/BarnabyWalters/status/619985522774147072">			<time class="dt-published" datetime="2015-07-12T00:02:24+00:00">2015-07-12 00:02</time>
			</a>		</span>
		
			</article>
		<article class="h-entry p-comment clearfix reply-relation">
		<img class="compact-mention-icon" src="/img/icons/reply-icon.svg" alt="">
		<a class="p-author h-card" href="https://twitter.com/w03_">
					<img class="u-photo photo" src="https://twitter.com/w03_/profile_image?size=original" alt="">
				(╯°□°)╯︵ ┻━┻		</a>
		
				
		<span class="published-datetime">
			<a class="u-url url" href="https://twitter.com/w03_/status/619991370376343553">			<time class="dt-published" datetime="2015-07-11T22:07:16+00:00">2015-07-11 22:07</time>
			</a>		</span>
		
				<div class="e-content p-summary p-name reply-content">
			
  
  <a href="https://twitter.com/BarnabyWalters">@BarnabyWalters</a> yes
<a class="u-mention" href="https://waterpigs.co.uk/notes/4c7J8D/"></a>
  		</div>
			</article>
	</div>

https://kylewm.com/

    <div class="p-comment h-cite comment">
      <a name="ben_werdmüller-4907"></a>
      <div class="container">
            <a class="p-author h-card" href="http://werd.io/">
        <data class="u-photo" value="https://twitter.com/benwerd/profile_image?size=original">
          <img class="avatar" src="/imageproxy?url=https%3A%2F%2Ftwitter.com%2Fbenwerd%2Fprofile_image%3Fsize%3Doriginal&size=64&sig=dc7562eaaa559bfd65502855938f68a4"/>
        </data>
        <span class="p-name">Ben Werdmüller</span>
    </a>

        <div class="e-content">
          <a href="https://twitter.com/kylewmahan">@kylewmahan</a> <a href="https://twitter.com/mapkyca">@mapkyca</a> It'd be cool if there was an open, real-time tool that you could use though, right?
        </div> <!-- .e-content -->
        <div class="meta">
          on <a class="u-url" href="https://twitter.com/benwerd/status/619228263605477377">twitter.com</a>

          <time class="dt-published" datetime="2015-07-09T12:34:57-07:00"></time>
        </div> <!-- .meta -->
      </div> <!-- .container -->
    </div>
    <div class="p-comment h-cite comment">
      <a name="kylo_riley-4905"></a>
      <div class="container">
            <a class="p-author h-card" href="https://kylewm.com">
        <data class="u-photo" value="https://twitter.com/kylewmahan/profile_image?size=original">
          <img class="avatar" src="/imageproxy?url=https%3A%2F%2Ftwitter.com%2Fkylewmahan%2Fprofile_image%3Fsize%3Doriginal&size=64&sig=cd3b41edaec7186c597acff6967c917f"/>
        </data>
        <span class="p-name">Kylo Riley</span>
    </a>

        <div class="e-content">
          <a href="https://twitter.com/mapkyca">@mapkyca</a> <a href="https://twitter.com/benwerd">@benwerd</a> of course!
        </div> <!-- .e-content -->
        <div class="meta">
          on <a class="u-url" href="https://twitter.com/kylewmahan/status/619229650191953920">twitter.com</a>

          <time class="dt-published" datetime="2015-07-09T12:40:27-07:00"></time>
        </div> <!-- .meta -->
      </div> <!-- .container -->
    </div>


add yours here

copy this whole section

… paste in HTML