Generating a web page using the TagCloudBase gem

require 'tagcloudbase'

all_tags = {
  Egypt:   ['egypt.html',   45], 
  UK:      ['uk.html',     103], 
  France:  ['france.html',  56], 
  Belgium: ['belgium.html', 53], 
  Ireland: ['ireland.html', 49], 
  China:   ['china.html',  256], 
  Somalia: ['somalia.html', 21]
}.to_a

tagcloudbase = TagCloudBase.new(all_tags)
h = tagcloudbase.to_webpage

html =<<EOF
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Countries by value (tag cloud)</title>
    <meta charset="utf-8" />
    <style type="text/css">
      #{h[:css]}
    </style>
  </head>
  <body>
    #{h[:html].to_html}
  </body>
</html>
EOF

File.write 'tagcloud.html', html

Below is a screenshot of the generated tag cloud in the web page:

Screenshot of the tag cloud in the web browser

Here's the HTML source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Countries by value (tag cloud)</title>
    <meta charset="utf-8" />
    <style type="text/css">
      /* file: tag_cloud.css */

.tag {
  font-family: Arial,'Luxi Sans', Helvetica, Impact; line-height: 2em
}
  .tag a {background-color: #444; padding: 0.3em; margin: 0.9em 0.2em;}
  .tag a:link {background-color: #000; color: #fff; text-decoration: none}
  .tag a:visited {background-color: #555;}
  .tag a:hover {background-color: #000; text-decoration: none; color: #ccc}
  .tag a:active {background-color: #666;}
  .tag a:focus {background-color: #666;}

  .s1 { background-color: transparent; color: #123; font-size: 1.13em }
  .s2 { background-color: transparent; color: #123; font-size: 1.36em }
  .s3 { background-color: transparent; color: #123; font-size: 1.59em }
  .s4 { background-color: transparent; color: #123; font-size: 1.82em; font-weight: 300 }
  .s5 { background-color: transparent; color: #123; font-size: 2.05em; font-weight: 400 }
  .s6 { background-color: transparent; color: #123; font-size: 2.28em; font-weight: 500 }
  .s7 { background-color: transparent; color: #123; font-size: 2.51em; font-weight: 600 }
  .s8 { background-color: transparent; color: #123; font-size: 2.74em; font-weight: 700 }
  .s9 { background-color: transparent; color: #123; font-size: 2.9em; font-weight: 800 }
  .s10 { background-color: transparent; color: #123; font-size: 3.2em; font-weight: 900}

    </style>
  </head>
  <body>
    <h1></h1><div id="articles"><div id="records">
<span class="tag s2"><a href="https://github.com/jrobertson/tagcloudbase/blob/master/belgium.html">Belgium</a></span>
 <span class="tag s8"><a href="https://github.com/jrobertson/tagcloudbase/blob/master/china.html">China</a></span>
 <span class="tag s2"><a href="https://github.com/jrobertson/tagcloudbase/blob/master/egypt.html">Egypt</a></span>
 <span class="tag s2"><a href="https://github.com/jrobertson/tagcloudbase/blob/master/france.html">France</a></span>
 <span class="tag s2"><a href="https://github.com/jrobertson/tagcloudbase/blob/master/ireland.html">Ireland</a></span>
 <span class="tag s0"><a href="https://github.com/jrobertson/tagcloudbase/blob/master/somalia.html">Somalia</a></span>
 <span class="tag s5"><a href="https://github.com/jrobertson/tagcloudbase/blob/master/uk.html">UK</a></span> </div></div>

  </body>
</html>

Resources

tagcloudbase https://rubygems.org/gems/tagcloudbase

jrobertson / tagcloudbase

readme

Generating a web page using the TagCloudBase gem

Resources