JSFiddle - React, Tailwind, and code Playground

by Jodiel Fabricio

HTML

<!--Fora do post-->
<a href=http://github.com>GitHub</a>
<a href=http://jsfiddle.net>JSFIDDLE</a>
<!--Este é o post-->
<article>
   <!--Imagem-->
    <a href=http://lh3.googleusercontent.com/--dtkNU27rsQ/AAAAAAAAAAI/AAAAAAAAAAA/S9aUDwOUswk/s96-c/photo.jpg>imagem</a>
   <a href=http://jsfiddle.net>JSFIDDLE</a>
   <a href=http://css-tricks.com>CSS-Tricks</a>
   <a href=http://www.google.com.br>Google</a>
   <a href=http://www.bloggermin.com.br>Bloggermin</a>
   <a href=http://gerenciandoblog.com.br>Gerenciando Blog</a>
   <a href=http://ferramentasblog.com.br>Ferramentas Blog</a>  

</article>
<!--Isso não-->
<a href=//dicassbloggers.com.br>DicasBlogger</a>
<!--Outro post-->
<article>
    <a href=//criarsites.com>CriaSites</a>
    <a href=//dicasblogger.org/>DicasBlogger.org</a>
</article>

CSS

/*
Orig via http://jsfiddle.net/csswizardry/yqdFe/
*/
/*
Baseado em http://css-tricks.com/favicons-next-to-external-links/
*/
a { display: block; text-decoration: none; padding: 5px; }

JavaScript

(function(){
   function getDomain(url) {
      return url.match(/:\/\/(.[^\/\?]+)/)[1];
   }
   function forEach( collection, fn ){
       for (var i = 0, len = collection.length; i < len ; i++){
          fn.call( null, collection[i], i)
       }
   }
   function externalFavicon(){
      var posts = document.getElementsByTagName('article'),
          links = [],
          notInThisHost = new RegExp(window.location.hostname),
          href;
       forEach(posts,function(post){
           // Concatenar sem transformar em array(matriz)
           Array.prototype.push.apply(links,post.getElementsByTagName('a') )
       })
       forEach(links, function(link){
           href = link.href;
           // Vemos que é um link externo (se ele começa com http e não neste domínio), e se isso não é uma imagem
           if( /^(http|\/\/)/.test(href) && ! notInThisHost.test(href) && ! /\.(jpe?g|png|gif)/i.test(href) && (link.firstChild && link.firstChild.tagName !== "IMG" )){
               // Nós usamos o favicon como plano de fundo e adicionamos um padding para visibilidade
               link.style.background = "url(http://" + getDomain(href) + "/favicon.ico) no-repeat 1px center"
               link.style.paddingLeft = "18px"
               link.style.backgroundSize = "16px"
           }
       })
   }
   // Executar a função após a conclusão do carregamento da página para não consumir recursos desnecessários durante o carregamento
   window.addEventListener ? window.addEventListener('load',externalFavicon,false): window.attachEvent('onload',externalFavicon)
})()