egardner/mash_app.rb

## mash_app.rb
require "sinatra"
require "httparty"
require "time"

url = "http://mashable.com/stories.json"
mash_stories = HTTParty.get(url)		# returns a hash


get '/' do
	# If url is root: ----------------------------------------------------------------------------- #
	erb :home
end

get '/:channel/:id?' do

	# If channel and article ID are specified: ---------------------------------------------------- #

	@channel = params['channel']			# set @channel equal to the first segment of url
	@id = params['id']				# set @id equal to the second segment of url
	@stories = mash_stories[@channel]		# create a @stories array for easier manipulation of data


	# Sort by query string: ----------------------------------------------------------------------- #

	@sort = params['sort'] 				# if no sort action has been taken, this is nil

	unless @sort == nil
		@stories = @stories.sort_by { |hsh| hsh["#{@sort}"]} 	# this is probably not safe
	end

	# Control content display: -------------------------------------------------------------------- #

	@story_select = @stories[0]			# by default, show content of first story

	@stories.each do |story|			# iterate through chosen channel's array of stories
		if story["_id"] == @id		       #  if _id field matches :id params
			@story_select = story 		# set that story to display in the main area
			break 				# break loop, because our work is done
		end
	end

	# use .split to convert story text into multiple paragraphs for nicer reading
	@paragraphs = @story_select["content"]["plain"].split("\n")

	erb :page					# now we can call the view
end


get '/:channel' do

	# If only channel is specified: --------------------------------------------------------------- #
	# There must be some way to avoid repeating all this code, but I don't know what that is
	# Lack of DRY makes me feel dirty... is this where Sinatra's "helpers" come in?

	@channel = params['channel']		# set @channel equal to the first segment of url
	@stories = mash_stories[@channel]	# create a @stories array for easier manipulation of data


	# Sort by query string: ----------------------------------------------------------------------- #

	@sort = params['sort'] 				# if no sort action has been taken, this is nil

	unless @sort == nil
		@stories = @stories.sort_by { |hsh| hsh["#{@sort}"]} 	# this is probably not safe
	end

	# Control content display: -------------------------------------------------------------------- #

	@story_select = @stories[0]			# show content of first story in array

	# use .split to convert story text into multiple paragraphs for nicer reading
	@paragraphs = @story_select["content"]["plain"].split("\n")

	erb :page	# call the view
end

## page.erb
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a responsive email layout.">
<title>Email &ndash; </title>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure//pure.css">
<link rel="stylesheet" href="/css/layouts/email.css">
<link rel="stylesheet" href="/css/layouts/custom.css">

</head>
<body>
<div id="layout" class="content pure-g">
    <div id="nav" class="pure-u">
        <a href="#" class="nav-menu-button">Menu</a>

        <div class="nav-inner">
            <div class="pure-menu pure-menu-open">
                <ul>
                    <li><a href="/new">New</a></li>
                    <li><a href="/hot">Hot</a></li>
                    <li><a href="/rising">Rising</a></li>
                </ul>
            </div>
            <div class="sortmenu">
                <form action="?" method="get">
                    <select name="sort">
                        <option value="author">Sort by Author</option>
                        <option value="title">Sorty by Title</option>
                        <option value="link">Sort by Link</option>
                    </select>
                <input type="submit" value="Submit">
                </form>

            </div>
        </div>
    </div>

    <div id="list" class="pure-u-1">
            <% @stories.each do |story| %>
            <% story_link = "/#{@channel}/#{story['_id']}" %>
                <div class="email-item email-item-selected pure-g">
                    <div class="pure-u-3-4">
                        <h5 class="email-name"><%= story["author"] %></h5>
                        <a href='<%= story_link %>'><h4 class="email-subject"><%= story["title"] %></h4></a>
                        <p class="email-desc">
                            <%= story["content"]["plain"].split[0...25].join(" ") + "..." %>
                        </p>
                    </div>
                </div>
            <% end %>

    </div>

    <div id="main" class="pure-u-1">
        <div class="email-content">
            <div class="email-content-header pure-g">
                <div class="pure-u-1-2">
                    <h1 class="email-content-title"><%= @story_select["title"] %></h1>
                    <p class="email-content-subtitle">
                        By <%= @story_select["author"] %>
                    </p>
                </div>
            </div>

            <div class="email-content-body">
                <% unless @story_select["image"] == nil %>
                    <img class="pure-img" src="<%= @story_select['image'] %>">
                <% end %>
                <% @paragraphs.each do |paragraph| %>
                    <p><%= paragraph %></p>
                <% end %>


            </div>
        </div>
    </div>
</div>

<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>

<script>
    YUI().use('node-base', 'node-event-delegate', function (Y) {

        var menuButton = Y.one('.nav-menu-button'),
            nav        = Y.one('#nav');

        // Setting the active class name expands the menu vertically on small screens.
        menuButton.on('click', function (e) {
            nav.toggleClass('active');
        });

        // Your application code goes here...

    });
</script>


</body>
</html>
	require "sinatra"
	require "httparty"
	require "time"

	url = "http://mashable.com/stories.json"
	mash_stories = HTTParty.get(url) # returns a hash


	get '/' do
	# If url is root: ----------------------------------------------------------------------------- #
	erb :home
	end

	get '/:channel/:id?' do

	# If channel and article ID are specified: ---------------------------------------------------- #

	@channel = params['channel'] # set @channel equal to the first segment of url
	@id = params['id'] # set @id equal to the second segment of url
	@stories = mash_stories[@channel] # create a @stories array for easier manipulation of data


	# Sort by query string: ----------------------------------------------------------------------- #

	@sort = params['sort'] # if no sort action has been taken, this is nil

	unless @sort == nil
	@stories = @stories.sort_by { \|hsh\| hsh["#{@sort}"]} # this is probably not safe
	end

	# Control content display: -------------------------------------------------------------------- #

	@story_select = @stories[0] # by default, show content of first story

	@stories.each do \|story\| # iterate through chosen channel's array of stories
	if story["_id"] == @id # if _id field matches :id params
	@story_select = story # set that story to display in the main area
	break # break loop, because our work is done
	end
	end

	# use .split to convert story text into multiple paragraphs for nicer reading
	@paragraphs = @story_select["content"]["plain"].split("\n")

	erb :page # now we can call the view
	end


	get '/:channel' do

	# If only channel is specified: --------------------------------------------------------------- #
	# There must be some way to avoid repeating all this code, but I don't know what that is
	# Lack of DRY makes me feel dirty... is this where Sinatra's "helpers" come in?

	@channel = params['channel'] # set @channel equal to the first segment of url
	@stories = mash_stories[@channel] # create a @stories array for easier manipulation of data


	# Sort by query string: ----------------------------------------------------------------------- #

	@sort = params['sort'] # if no sort action has been taken, this is nil

	unless @sort == nil
	@stories = @stories.sort_by { \|hsh\| hsh["#{@sort}"]} # this is probably not safe
	end

	# Control content display: -------------------------------------------------------------------- #

	@story_select = @stories[0] # show content of first story in array

	# use .split to convert story text into multiple paragraphs for nicer reading
	@paragraphs = @story_select["content"]["plain"].split("\n")

	erb :page # call the view
	end
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="A layout example that shows off a responsive email layout.">
	<title>Email – </title>
	<link rel="stylesheet" type="text/css" href="/css/normalize.css">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure//pure.css">
	<link rel="stylesheet" href="/css/layouts/email.css">
	<link rel="stylesheet" href="/css/layouts/custom.css">

	</head>
	<body>
	<div id="layout" class="content pure-g">
	<div id="nav" class="pure-u">
	<a href="#" class="nav-menu-button">Menu</a>

	<div class="nav-inner">
	<div class="pure-menu pure-menu-open">
	<ul>
	<li><a href="/new">New</a></li>
	<li><a href="/hot">Hot</a></li>
	<li><a href="/rising">Rising</a></li>
	</ul>
	</div>
	<div class="sortmenu">
	<form action="?" method="get">
	<select name="sort">
	<option value="author">Sort by Author</option>
	<option value="title">Sorty by Title</option>
	<option value="link">Sort by Link</option>
	</select>
	<input type="submit" value="Submit">
	</form>

	</div>
	</div>
	</div>

	<div id="list" class="pure-u-1">
	<% @stories.each do \|story\| %>
	<% story_link = "/#{@channel}/#{story['_id']}" %>
	<div class="email-item email-item-selected pure-g">
	<div class="pure-u-3-4">
	<h5 class="email-name"><%= story["author"] %></h5>
	<a href='<%= story_link %>'><h4 class="email-subject"><%= story["title"] %></h4></a>
	<p class="email-desc">
	<%= story["content"]["plain"].split[0...25].join(" ") + "..." %>
	</p>
	</div>
	</div>
	<% end %>

	</div>

	<div id="main" class="pure-u-1">
	<div class="email-content">
	<div class="email-content-header pure-g">
	<div class="pure-u-1-2">
	<h1 class="email-content-title"><%= @story_select["title"] %></h1>
	<p class="email-content-subtitle">
	By <%= @story_select["author"] %>
	</p>
	</div>
	</div>

	<div class="email-content-body">
	<% unless @story_select["image"] == nil %>
	<img class="pure-img" src="<%= @story_select['image'] %>">
	<% end %>
	<% @paragraphs.each do \|paragraph\| %>
	<p><%= paragraph %></p>
	<% end %>


	</div>
	</div>
	</div>
	</div>

	<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>

	<script>
	YUI().use('node-base', 'node-event-delegate', function (Y) {

	var menuButton = Y.one('.nav-menu-button'),
	nav = Y.one('#nav');

	// Setting the active class name expands the menu vertically on small screens.
	menuButton.on('click', function (e) {
	nav.toggleClass('active');
	});

	// Your application code goes here...

	});
	</script>






	</body>
	</html>