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:
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="belgium.html">Belgium</a></span> <span class="tag s8"><a href="china.html">China</a></span> <span class="tag s2"><a href="egypt.html">Egypt</a></span> <span class="tag s2"><a href="france.html">France</a></span> <span class="tag s2"><a href="ireland.html">Ireland</a></span> <span class="tag s0"><a href="somalia.html">Somalia</a></span> <span class="tag s5"><a href="uk.html">UK</a></span> </div></div> </body> </html>
Resources
- tagcloudbase https://rubygems.org/gems/tagcloudbase
tagcloudbase gem tagcloud