Debugging https://github.com/jch/html-pipeline/issues/109

Gemfile

# A sample Gemfile
source "https://rubygems.org"

gem "html-pipeline"
gem "github-markdown"
gem "github-linguist"

pipeline.rb

require "html/pipeline"
require "github/markdown"
require "linguist"
require "open-uri"

gist_file = "https://gist.github.com/josephzidell/8816548/raw/1fbeb74b33587b28638922e9a00e1826c39ad833/gistfile1.md"

markdown = open(gist_file).read

pipeline = HTML::Pipeline.new [
  HTML::Pipeline::MarkdownFilter,
  HTML::Pipeline::SyntaxHighlightFilter
]

result = pipeline.call(markdown)

File.open("post.html", "w") do |file|
  file.puts result[:output].to_s
end

puts "post written."

post.html

<p>A <a href="https://www.google.com/#q=javascript+email+address+obfuscation">quick search</a> for "javascript email address obfuscation" yielded a <a href="http://stackoverflow.com/a/748804/2483765">stackoverflow answer</a> to URL encode it, along with comments about how that doesn't work.<br>
The next result in Google was an <a href="http://www.albionresearch.com/misc/obfuscator.php%E2%80%8E">Email Address Obfuscator</a>, which in my experience caused issues on mobile devices.</p>

<p>Another idea which is pretty common, is to use <code>myemailaddress at example dot com</code>. I don't like it because robots are smarter than that.</p>

<p>The next best thing is an image. Just type the email address into your favorite image processing program and voilà, you have an image to use instead of your email address.<br>
Then you have to deal with <code>:hover</code> effects of links. In my case, a color change as well as a slight background change. No sweat, put both versions in the image, and use the CSS <code>:hover</code> property to move the image up. </p>

<p><img src="/assets/blog/quick-hide-the-email-address/email.png" alt="double-email-address-image" title="Double Email Address Image"></p>

<p>Now, what do you put into the actual link? Either you can put <code>href="#"</code>, but sometimes clicking it brings the user to the top of the page, which may not be what you want. So you need to put <em>something</em> in there. What?</p>

<p>I put this:</p>

<div class="highlight highlight-html"><pre><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"mailto:404-Not-Found@example.com?subject=Hi!&amp;amp;amp;body=Either type the email address or use the form. Thanks!"</span><span class="nt">&gt;&lt;/a&gt;</span>
</pre></div>

<p>Opening this link shows the following:</p>

<p><img src="/assets/blog/quick-hide-the-email-address/404-email-address.jpg" alt="404-email-address" title="404 Email Address"></p>

<p>Great! So far so good. The last piece is the text <em>in</em> the link. I used "404 Not Found".</p>

<p>One potential issue I realized is that on mobile devices, when users click the email link, they think it'll open up their email app using my real email address. It'll be a pain to go back to the browser, memorize the email address, go back to the mail app and type it in. The solution: hide the link on mobile devices (they can use the form).</p>

<h3>Full source code:</h3>

<p><em>HTML</em></p>

<div class="highlight highlight-html"><pre><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"mailto:404-Not-Found@example.com?subject=Hi!&amp;amp;body=Either type the email address or use the form. Thanks!"</span> <span class="na">id=</span><span class="s">"contact_email"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span&gt;</span>404 Not Found<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
</pre></div>

<p><em>CSS</em></p>

<div class="highlight highlight-css"><pre><span class="k">@media</span> <span class="o">(</span><span class="nt">max-width</span><span class="o">:</span> <span class="nt">992px</span><span class="o">)</span> <span class="p">{</span>
    <span class="nf">#contact_email</span><span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span>
<span class="p">}</span>
<span class="nf">#contact_email</span> <span class="nt">span</span><span class="p">{</span>
    <span class="k">background-image</span><span class="o">:</span> <span class="sx">url("email.png")</span><span class="p">;</span>
    <span class="k">background-repeat</span><span class="o">:</span> <span class="k">no-repeat</span><span class="p">;</span>
    <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
    <span class="k">height</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
    <span class="k">text-indent</span><span class="o">:</span> <span class="m">-10000px</span><span class="p">;</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">100</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#contact_email</span><span class="nd">:hover</span> <span class="nt">span</span><span class="p">{</span>
    <span class="k">background-position</span><span class="o">:</span> <span class="m">0</span> <span class="m">-20px</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>