I'm trying to follow along with this Sinatra tutorial (from 2008): http://devver.wordpress.com/2008/11/25/building-a-iphone-web-app-in-under-50-lines-with-sinatra-and-iui/
But ran into some problems with the code, for me the files aren't listed under the main heading currently. When I change dir to "./public/files/" the list is shown, but clicking a file's link results in an error page ("Sinatra doesn't know this ditty"). If I remove the public from the URL it will in this case work. How can I resolve the two?
Also, I get an error if with the line "use_in_file_template!", which I just comment out.
And I'm not familiar with CSS, so could someone tell me where I can the color of the text?
require 'rubygems'
require 'sinatra'
require 'pathname'
get "/" do
dir = "./files/"
#links = Dir[dir+"*"].map { |file|
file_link(file)
}.join
erb :index
end
helpers do
def file_link(file)
filename = Pathname.new(file).basename
"<li><a href='#{file}' target='_self'>#{filename}</a></li>"
end
end
use_in_file_templates!
__END__
## index
<html>
<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">#import "/stylesheets/iui.css";</style>
<script type="application/x-javascript" src="/javascripts/iui.js"></script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
</div>
<ul id="home" title="Your files, sir." selected="true">
<%= #links %>
</ul>
</body>
</html>
Well, sinatra (as many other web servers) assumes that public is a root directory for static files and it just does not use it when accessing files/dirs in it. So, in your case, you could change (add public to path when get list of files and remove it when generate links to them) some lines in your code:
get "/" do
dir = "public/files/"
#links = Dir[dir+"*"].map { |file|
file_link(file)
}.join
erb :index
end
helpers do
def file_link(file)
filename = Pathname.new(file).basename
"<li><a href='#{file.sub('public','')}' target='_self'>#{filename}</a></li>"
end
end
Related
How to add title and favicon in meteor 1.3, using iron router and blaze ?
In js you can set the page title anytime with:
document.title = "Foo";
This is much more flexible than including a static title in the <head> section as you generally want the title to change on a route-by-route basis.
In i-r you can do this in an onAfterAction hook ex:
onAfterAction() {
document.title = 'mySiteName:' + Router.current().route.getName();
}
The icon can also be set dynamically, see this question
In the default layout template of iron router add the following lines in the starting of the html file.
<head>
<link rel='icon' sizes="16x16 32x32" href='/favicon.ico' >
</head>
Save the /favicon.ico in public directory in the meteor root app. Don't forget the / in /favicon.ico
For favicon, add the following code in your main.html page in the head tag
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
For title per page, you can add in each html template the following code
{{documentTitle 'Document Title'}}
And add the following code in a js file
//global template helper
Template.registerHelper('documentTitle', function(title){
document.title = title;
});
You can use head tag inside the client/main.html file.
This will allow you to add title and favicon icon.
<head>
<meta charset="utf-8" />
<title>MY Title</title>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/ >
</head>
I am downloading part of an HTML page by:
require 'nokogiri'
require 'open-uri'
doc = Nokogiri::HTML(open('https://example.com/index.html'))
wiki = doc./('//*[#id="wiki"]/div[1]')
and I need the stylesheets in order to display it correctly. They are included in the header like so:
<!DOCTYPE html>
<html lang="en" class="">
<head>
...
<link href="https://example.com/9f40a.css" media="all" rel="stylesheet" />
<link href="https://example.com/4e5fb.css" media="all" rel="stylesheet" />
...
</head>
...
and their naming can be changed. How do I parse/download local copies of the stylesheets?
Something like this:
require 'open-uri'
doc.css("head link").each do |tag|
link = tag["href"]
next unless link && link.end_with?("css")
File.open("/tmp/#{File.basename(link)}", "w") do |f|
content = open(link) { |g| g.read }
f.write(content)
end
end
I'm not a ruby expert but you can go over following steps
You can use .scan(...) method provided with String type to parse and get the .css file names. The scan method will return you an array stylesheet file names. Find more info on scan here
Then download and store the files with Net::HTTP.get(...) an example is here
I was under the impression that if you had file named application.html.erb in your layouts directory that this layout would be applied automatically to all views without having to explicitly refer to it.
This doesn't appear to be the case.
I have one 'home' controller and it has one 'index' method:
class HomeController < ActionController::Base
def index
end
end
and the related home.html.erb view page:
<h2>Welcome!</h2>
<div>Stay tuned for basic functions to start arriving on this site.</div>
<div>The site will not look very stylish until one of the bounties gets done about writing the Style guide.</div>
and finally the application.html.erb file located in layouts:
<!DOCTYPE html>
<html>
<head>
<title>App Title</title>
<%= stylesheet_link_tag "application", media: "all" %>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
Categories
</div>
</div>
<%= yield %>
<div class="footer">Michael</div>
</body>
</html>
The above file was ignored until I added an explicit reference to the layout in my home controller like this:
class HomeController < ActionController::Base
layout 'application'
def index
end
end
What gives? I don't want to have to name the layout I am using in every controller. That was the point of having it at the application level.
The issue is you are inhering from ActionController::Base. You need to subclass from ApplicationController to ask Rails to use "application" layout as the default.
class HomeController < ApplicationController
def index
end
end
Since I'm using Web Application having NuGet Package's Microsoft.AspNet.Razor installed.
In WebForm pages (.aspx), I can use ResolveUrl() but in Razor pages (.cshtml), I get this error -->
"x:\Source\Foo.Dealer\Foo.Dealer.WebApp.Mobile\Member\DmsDashboard.cshtml(103): error CS0103: The name 'Url' does not exist in the current context"
Source-Code here..
#section HeadJavascriptLibraryFile
{
<script type="text/javascript" src="#Url.Content("~/scripts/webpages/setting-dmsdashboard.js")"></script>
}
and
<img src="#(Url.Content("~/images/miscellaneous/reportandpiechart2.png"))" alt="" />
Source Code as requested...
//LayoutMembmerGeneral.cshtml
#using Foo.Dealer.WebApp.Mobile.Infrastructure;
#{
if (LoginManagementTools.DealerUserLoginValidation_BrowsingPage(HttpContext.Current.Request, HttpContext.Current.Response, HttpContext.Current.Session) == false) { }
}<!DOCTYPE html>
<html>
<head>
<title>#Page.Title</title>
#RenderSection("HeadJavascriptLibraryFile", false)
</head>
<body>
#RenderBody()
</body>
</html>
//DmsDashboard.cshtml...
#using Foo.Dealer.WebApp.Mobile.Infrastructure
#using System.Web.Mvc;
#{
Page.Title = "A New Dawn In Auto Pricing";
Layout = "LayoutMemberGeneral.cshtml";
}
#section HeadJavascriptLibraryFile
{
}
<div id="WebLayout1">
<img src="#Url.Content("images/miscellaneous/reportandpiechart2.png")" alt="" />
</div>
The URL helper doesn't seem to exist in ASP.Net Web Pages (which is essentially what you are attempting to do), but you can simply use the following code to achieve the same effect:
<img src="~/images/miscellaneous/reportandpiechart2.png" alt="" />
The tilde (~) references the application root and is transformed when the page is compiled and sent to the client.
The tilde (~) is not transformed as part of any data- attributes and likely, other places also, though I haven't researched extensively.
If you happen to need this information in a place where the automatic transofmration isn't working, you can use the tilde equivalent, HttpContext.Current.Request.ApplicationPath.
In most Razor views, you should be able to shorten it to the following:
#Request.ApplicationPath
Reference: http://msdn.microsoft.com/en-us/library/system.web.httprequest.applicationpath.aspx
Another alternative in some situations is to use the VirtualPathUtility such as:
#VirtualPathUtility.ToAbsolute("~/")
I'm creating extension using crossrider. In this extension I want to open a new tab with html from resources. Its opening page in new tab without issues. Now I want to add js & css to that, that to available in resources. Kindly help in adding css & js.
code in background.js
appAPI.openURL({
resourcePath: "troubleShooter.html",
where: "tab",
focus: true
});
in troubleShooter.html
<html>
<head>
<link media="all" rel="stylesheet" type="text/css" href="css/ie.css" />
<script type="text/javascript" src="js/ie.js"></script>
</head>
<body>
</body>
</html>
Crossrider recently introduced the ability to open a new tab with HTML from resources. However, such pages cannot directly access other resource file using link and script tags embedded in the HTML.
Though in it's early release, one of the features of the HTML page is the crossriderMain function that runs once the page is ready. In this early release, the function supports the following Crossrider APIs: appAPI.db.async, appAPI.message, and appAPI.request.
Hence, even though in this early release there isn't a direct method to add resource CSS & script files to the resource HTML page, you can workaround the issue by loading the resources into the asynchronous local database and applying it to the HTML page using standard jQuery. For example:
background.js:
appAPI.ready(function() {
// load resource file 'style.css' in to local database
appAPI.db.async.set('style-css', appAPI.resources.get('style.css'));
// load resource file 'script.js' in to local database
appAPI.db.async.set('script-js', appAPI.resources.get('script.js'));
// open resource html
appAPI.openURL({
resourcePath: "troubleShooter.html",
where: "tab",
focus: true
});
});
troubleShooter.html:
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
appAPI.db.async.get('style-css', function(rules) {
$('<style type="text/css">').text(rules).appendTo('head');
});
appAPI.db.async.get('script-js', function(code) {
// runs in the context of the extension
$.globalEval(code.replace('CONTEXT','EXTN'));
// Alternatively, run in context of page DOM
$('<script type="text/javascript">')
.html(code.replace('CONTEXT','PAGE DOM')).appendTo('head');
});
}
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
style.css:
h1 {color:red;}
script.js
console.log('CONTEXT:: script.js running');
Disclaimer: I am a Crossrider employee