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
Related
I'm creating an express app and my CSS code stops working whenever i add an ":ID" parameter to the URL. I know it's a filepath issue because bootstrap still comes in fine, but on the page with the ID parameter it shows this: "Refused to apply style from 'https://XXXXXX.c9users.io/unapproved/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
main.css is in my /public folder, but it looks like it's looking in a folder titled "unapproved".
I've tried changing the routing order, i've tried changing my app.use(express.static(__dirname)) code.
here's my app.get:
app.get("/unapproved/:id/", function(req, res){
var invoiceID = mongoose.mongo.ObjectId(req.params.id);
InvoiceObj.findById(invoiceID,function(err,foundInvoice){
if(err){
console.log(err);
}else{
res.render("invoiceScreen",{invoice:foundInvoice});
}
});
here's my html:
<% include partials/header %>
<h1><image src="<%= invoice.imageUrl %>"</h1>
<% include partials/footer %>
here's my header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice system</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src='https://code.jquery.com/jquery-2.1.4.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
I think change to css path absolute path will solve your problem
<link rel="stylesheet" href="/main.css">
In this kind of situation, it's better to use virtual path for your static files because relative path doens't work very well; like:
Assuming folder structure:
app.js
public
| +-- main.css
app.use('/static', express.static(__dirname + "/public"))
And in you html, make path absolute
<link rel="stylesheet" href="/static/main.css">
instead of using ./ or ../ before your assest(images / css / js ) for example.
./css/style.css or css/bootstrap.css ../images/example.png
you can use / for example
/css/style.css or /css/bootraps.css /images/example.png
/ will tell your app to look from root dir.
I am making a CRUD app in Nodejs/Expressjs, templating engine is EJS.
The idea for the update is display user_id from a database and when admin clicks on user_id it should redirect to edit_team.ejs page.
It is working fine but when it is redirecting to edit_team.ejs page, the css files are not getting load. I am getting below error
For every other .ejs files, all css files are loaded.
I have included 'public' folder in app.js file.
Code:
Folder Directory:
app.js:
app.use(express.static('app/public'));
view_team.ejs
<a class="button" href='/edit_team/<%= team[i].team_id %>'>
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</a>
edit_team.js:
var express = require('express');
var path = require('path');
const { Client } = require('pg')
const connectionString = 'postgresql://localhost:5432/idid';
//router object
var router = express.Router();
router.get('/edit_team/:id', function(req, res){
res.render('login/edit_team');
});
module.exports = router;
edit_team.ejs (pasting only head section):
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
can someone please help me trying to figure out what is wrong here?
A URL such as /edit_team/23 serves up edit_team.ejs, which contains the relative path css/bootstrap.min.css. This is relative to the /edit_team path, so it'll be edit_team/css/bootstrap.min.css, which probably isn't what you want.
You should be able to confirm this using your browser's dev tools. Look in the Network tab and check the paths for the files that aren't loading.
Try using paths that aren't relative to the current path, such as:
<link href="/css/bootstrap.min.css" rel="stylesheet">
Note the extra /.
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'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
I write it in aspx like this:
<link type="text/css" href='/theme<%=theme%>/top.css' rel="stylesheet" />
but result is this:
<link type="text/css" href="/theme<%=theme%>/top.css" rel="stylesheet" />
surprising is that using in js is no problem.
It's because your link is inside a <head> tag which is runat server. The head tag is "smart", in that when it sees a <link> tag it lets you actually use the application relative path syntax: ~/. So if you do (inside your head tag):
<link href="~/Content/Site.css" rel="stylesheet" />
You'll see it will actually work (that is, it will expand the tilde to the proper location of your site), even though nowhere did you say runat server. The downside of course is when you DON'T want it to do that. :) Probably the easiest solution is to just manually build the tag yourself like this:
<%= "<link type=\"text/css\" href='/theme" + theme + "/top.css' rel=\"stylesheet\" />" %>
You can't use expressions with <head runat="server"> instead you have to write following code in Page_Load event to insert <link/>
HtmlLink link = new HtmlLink();
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "Stylesheet");
link.Attributes.Add("href", "/theme" + theme + "/top.css");
Header.Controls.Add(link);