Output comparisons

This page shows the output of the original, official Quotebacks browser extension versus quotebacks-mdx.

ORIGINAL: Official Quotebacks extension

Example embed:

The text renaissance is an actual renaissance. It’s a story of history-inspired renewal in a very fundamental way: exciting recent developments are due in part to a new generation of young product visionaries circling back to the early history of digital text, rediscovering old, abandoned ideas, and reimagining the bleeding edge in terms of the unexplored adjacent possible of the 80s and 90s.
@ribbonfarm https://www.ribbonfarm.com/2020/02/24/a-text-renaissance/

Example embed (HTML source):

<blockquote
  class="quoteback"
  data-title="A Text Renaissance"
  data-author="@ribbonfarm"
  cite="https://www.ribbonfarm.com/2020/02/24/a-text-renaissance/">
The text renaissance is an actual <em>renaissance. </em>It’s a story of 
history-inspired renewal in a very fundamental way: exciting recent developments are due 
in part to a new generation of young product visionaries circling back to the early 
history of digital text, rediscovering old, abandoned ideas, and reimagining the bleeding 
edge in terms of the unexplored adjacent possible of the 80s and 90s.
<footer>
  @ribbonfarm
  <cite>
  <a href="https://www.ribbonfarm.com/2020/02/24/a-text-renaissance/">
    https://www.ribbonfarm.com/2020/02/24/a-text-renaissance/
  </a>
  </cite>
</footer>
</blockquote>
<script note="" src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/quotebacks@1/quoteback.js"></script>

COMPARISON: this Markdown extension

Using Python-Markdown and this extension, quotebacks-mdx

Markdown source:

The embed is generated from Markdown following a specific format: the citation must be the last line of the blockquote, be preceded by a blank line, and follow the format below.

> The text renaissance is an actual _renaissance._ It's a story of history-inspired 
> renewal in a very fundamental way: exciting recent developments are due in part to a new
> generation of young product visionaries circling back to the early history of digital 
> text, rediscovering old, abandoned ideas, and reimagining the bleeding edge in terms of 
> the unexplored adjacent possible of the 80s and 90s.
>
> -- @ribbonfarm, [A Text Renaissance](https://www.ribbonfarm.com/2020/02/24/a-text-renaissance/)

Generated embed:

The embed is generated by converting the Markdown to HTML and using this extension. It looks the same as the official embed.

The text renaissance is an actual renaissance. It’s a story of history-inspired renewal in a very fundamental way: exciting recent developments are due in part to a new generation of young product visionaries circling back to the early history of digital text, rediscovering old, abandoned ideas, and reimagining the bleeding edge in terms of the unexplored adjacent possible of the 80s and 90s.

— @ribbonfarm A Text Renaissance

Generated embed, without Javascript:

Without Javascript (i.e. when not including quoteback.js), the blockquote appears in the browser like this.

The text renaissance is an actual renaissance. It’s a story of history-inspired renewal in a very fundamental way: exciting recent developments are due in part to a new generation of young product visionaries circling back to the early history of digital text, rediscovering old, abandoned ideas, and reimagining the bleeding edge in terms of the unexplored adjacent possible of the 80s and 90s.

— @ribbonfarm, A Text Renaissance

Generated embed (HTML source):

The HTML source of the generated embed differs from the official embed.

These changes:

the blockquote tag now wraps child p tags
the script is not included automatically, but isincluded by the containing page
the footer/cite has been reformatted to avoid raw URLs in the case of the no-script fallback

<blockquote
  class="quoteback"
  data-title="A Text Renaissance"
  data-author="@ribbonfarm"
  cite="https://www.ribbonfarm.com/2020/02/24/a-text-renaissance/">
<p>
The text renaissance is an actual <em>renaissance. </em>It’s a story of 
history-inspired renewal in a very fundamental way: exciting recent developments are due 
in part to a new generation of young product visionaries circling back to the early 
history of digital text, rediscovering old, abandoned ideas, and reimagining the bleeding 
edge in terms of the unexplored adjacent possible of the 80s and 90s.
</p>
<footer>
  —@ribbonfarm,
  <cite>
  <a href="https://www.ribbonfarm.com/2020/02/24/a-text-renaissance/">
    https://www.ribbonfarm.com/2020/02/24/a-text-renaissance/
    A Text Renaissance
  </a>
  </cite>
</footer>
</blockquote>
<script note="" src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/quotebacks@1/quoteback.js"></script>

Generated HTML without using this extension (HTML source):

If this extension is no longer used (for example, the content is ported to another system that doesn't use Quotebacks), the Markdown source still converts to an attractive and readable blockquote with a text citation at the bottom. When viewed in the browser, it appears identical to the "Generated embed, without Javascript" above.

<blockquote>
  <p>
  The text renaissance is an actual <em>renaissance.</em> It's a story 
  of history-inspired renewal in a very fundamental way: exciting recent developments 
  are due in part to a new generation of young product visionaries circling back to the 
  early history of digital text, rediscovering old, abandoned ideas, and reimagining
  the bleeding edge in terms of the unexplored adjacent possible of the 80s and 90s.
  </p>
  <p>
  -- @ribbonfarm,
  <a href="https://www.ribbonfarm.com/2020/02/24/a-text-renaissance/">
  A Text Renaissance
  </a>
  </p>
</blockquote>