I've been trying out Sinatra on my local Windows machine. I want to include some local CSS and JS files. This is how the code looks in layout.erb
<script src="jquery.js" type="text/javascript">
</script>
<link rel="stylesheet" href="reset.css" type="text/css" />
All my files are in the same folder as app.rb
This is my app.rb
require 'rubygems'
require 'sinatra'
get '/' do
erb :index
end
For some reason, I cant see these files included in my pages. When I view the source code and click on the file(JS/CSS) I see that - "Sinatra doesn't know this ditty"- error.
What am I doing wrong here?
Move your static files(css/js) into a folder named public. Sinatra looks there with default settings.
If you want to change that behaviour have a look at this: Static Files
By default Sinatra will look for static files in your public folder. You just need to make a folder called public in the same directory as your Ruby file, and place your JS and CSS files there.
Related
Im including the google cast external javascript library. When I run with ionic serve it works good, but when I run the app in the phone, the library is not loaded. Debugging can see that :
https://cdn-enterprise.discourse.org/ionicframework/uploads/default/original/3X/a/d/ad4c985f45c1c538bdfbfbb02d10141b6929e1d5.png
The "http" is replaced by "file"!
I tried to include the libraries with that code:
script src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1">
and with type="text/javascript" added; but all codes replaces http by file, and the library is not loaded.
Any suggestions?
When you run the app do not add cdn files starting with "//:", add them like "http://".
If its possible download those files and keep them in directory, after that give directory path to file.
e.g. <script type="text/javascript" src="assets/js/library.js">
I'm trying to host my jekyll static website at github pages and almost everything is working fine. I tried everything to make my CSS generated file (from SASS) to work. But could not do it.
My website is on this URL: http://pedromarins.github.io/
My github repo is here: https://github.com/pedromarins/pedromarins.github.io/
My _config.yml is setted up as
baseurl: ""
and
url: "http://pedromarins.github.io"
also my sass folder is setted up as
sass:
sass_dir: assets/_sass
style: compressed
I can't see what is wrong. If someone could help and point what is wrong I appreciate!
UPDATE 1 - 18h37 29-April-2017
Installed ghpages gem. Now my Gemfile looks like this:
source "https://rubygems.org"
require 'json'
require 'open-uri'
gem 'jekyll'
gem 'github-pages'
gem "json", "2.0.2"
group :jekyll_plugins do
gem 'jekyll-livereload'
end
Ok, after some hours trying to make your site work I found a solution.
What I figured out was that Jekyll only looks for the css directory at root level, so in order to make your site to work properly you need to add the css directory at root level and place in there your style.sass file.
After that, the Jekyll build process will generate the style.css file in that directory, so you just need to include that file in the head.html partial.
<link rel="stylesheet" href="/css/style.css">
And your site will just work as expected, no css rendering problems at all, you can leave your sass dir as assets/_sass with no problem, that directory is just to tell the css/style.sass file that the sass #imports are found in there.
So you can reference them just like you are doing:
---
---
#import "layout"
#import "components/header"
#import "components/now"
...
Now, another workaround is to have your style.sass file in your assets folder, but not in the css folder, just leave it in the assets folder, and access it from your head.html partial as:
<link rel="stylesheet" href="/assets/style.css">
And it will work too.
Just remember to set the correct path for your other non-css assets like images, icons or fonts.
Description
Trying out github pages with a project that files are organized like this:
/index.html
/landingpage/css/styles.css
/vendor/bootstrap/css/bootstrap.css
in index.html including the project's specific css file works:
<link href="landingpage/css/styles.css" rel="stylesheet">
but including vendor's css file doesn't:
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.css">
When loading the page, I get a 200 http response to:
GET https://loicjaouen.github.io/landingpage/landingpage/css/styles.css
and a 404 to:
GET https://loicjaouen.github.io/landingpage/vendor/bootstrap/css/bootstrap.css
Question
What's wrong with including a vendor subdir that prevents github pages from serving files inside vendor?
Reference
https://github.com/loicjaouen/landingpage/tree/original-brokenlinks
first attempt
Move subdir vendor inside existing landingpage.
See code at https://github.com/loicjaouen/landingpage/tree/brokenlinks
That worked... but it was not quite satisfactory to guess that only one subdir could be included.
second attempt
Leave subdir vendor at root level and rename it to other.
See code at: https://github.com/loicjaouen/landingpage/tree/non-vendor-subdir
That worked too: apparently including a subdir named vendor is not allowed
I'd like to build a static website based on the styling of a Wordpress template, Inovado. I downloaded the website using HTTrack (in Linux) with the following command:
httrack http://inovado.hellominti.com
The resulting index.html contains several stylesheets such as the following:
<link rel='stylesheet' id='basic-css' href='http://inovado.hellominti.com/wp-content/themes/inovado/framework/css/basic.css?ver=1' type='text/css' media='all' />
These links are 'absolute' links to http://inovado.hellominti.com. However, I'd like to download those files to a local directory, and adjust the index.html file accordingly.
I've seen that httrack has options such as --get_files which seem like they might enable this, but I wasn't able to figure out how from the documentation. Any ideas? (I'd also be interested in implementing this with wget if that's possible).
I found that the recursive option of HTTrack does this: httrack -r http://inovado.hellominti.com.
(Incidentally, however, I found a simpler bootstrap template at http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp).
This is what my file structure looks like in Play:
- public
- bower_components
- images
- stylesheets
This is my <head>:
<head>
<title>#title</title>
<link rel="shortcut icon" href='#routes.Assets.at("images/favicon.png")'>
<link rel="stylesheet" media="screen" href='#routes.Assets.at("bower_components/bootstrap/dist/css/bootstrap.min.css")'>
<link rel="stylesheet" media="screen" href='#routes.Assets.at("stylesheets/main.css")'>
<script src='#routes.Assets.at("bower_components/jquery/dist/jquery.min.js")'></script>
<script src='#routes.Assets.at("bower_components/bootstrap/dist/js/bootstrap.min.js")'></script>
</head>
The routes:
GET / controllers.Application.index
GET /public controllers.Application.public
GET /assets/*file controllers.Assets.at(path="/public", file)
It works on development I am getting 200s. When I deploy to Heroku, I get 404s for all bower components except for the stylesheets and images directories.
I'm under the assumption that it may be because Play is not able to recognize the bower components directory. Does anyone know how to add a new directory for play to build from for the assets?
When using bower with play, be mindful that the assets that you will use are stored within the /dist folder. Now, you may not think this is a big deal, but if you check the default .gitignore file, you'll discover that on one single line it has these four characters:
dist
That is enough to ignore all dists within your application. Just delete the line, run git status, and you'll discover you'll have some new files to add to your repo.
Commit and push to Heroku. You should be good to go by now.