I found a layout at https://github.com/evenwu/pinterest-clone-layout that I would like to try. However, I have no idea how to integrate this with my existing rails project. My current layout looks like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
How do I use the layout from the github link?
Add gem 'haml' to your Gemfile and run bundle install.
Copy layout and stylesheets, etc. to your project.
Remember to remove your .erb layout; Rails gives .erb precedence over .haml by default.
Related
I just started a new rails 7 project with TailwindCSS using the new rails new my-app --css tailwind syntax. Tailwind CSS is working properly. I wanted to add a navbar from tailwind elements, and I followed the steps from https://tailwind-elements.com/quick-start/. The css in the navbar works, but the opening and closing of submenus (which I presume is all run by javascript) does not.
When digging into the details, I am seeing these lines in the rails s logs
Started GET "/TW-ELEMENTS-PATH/dist/js/index.min.js" for 127.0.0.1 at 2023-02-02 09:13:48 -0600
ActionController::RoutingError (No route matches [GET] "/TW-ELEMENTS-PATH/dist/js/index.min.js"):
I did the npm install tw-elements install and the tailwind.config.cs edits, what am I missing? Is there some conflict that with Ruby on Rails that I am not aware of? Do I really need to create a route, or is that a sign that something is not installed correctly?
Here is the application.html.erb where I am inserting my <script> line
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind" , "inter-font" , "data-turbo-track" : "reload" %>
<%= stylesheet_link_tag "application" , "data-turbo-track" : "reload" %>
<%= javascript_importmap_tags %>
<!--here is the line I added -->
<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>
</head>
<body>
<%= render 'layouts/navigation' %>
<main class="container mx-auto mt-28 px-5 flex">
<%= yield %>
</main>
</body>
</html>
I did try the alternate step 4 by putting import 'tw-elements'; in app/javascript/controllers.index.js but nothing is working.
I am using ember-cli-rails gem. I installed ember-cli-foundation-sass as an addon for ember. Everything works fine but Foundation Js module. I made a layout just for Ember like this:
<!doctype html>
<html dir="ltr" lang="<%= I18n.locale %>">
<head>
<meta charset="UTF-8">
<title>Ember</title>
<%= stylesheet_link_tag 'frontend/frontend' %>
<%= include_ember_script_tags :frontend %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I tried different settings, but none of them worked. Any help would be appreciated.
I solved the problem. I just forgot to put what it supposed to be put in Brocfile.js
I'm new to web development, so I'm sorry if this is basic stuff. I'm not sure how to connect the code in my application.html.erb or crop.hmtl.erb to the actual files I downloaded. Specifically, I downloaded the files for Jquery UI and Jcrop(which is reliant on Jquery UI) and moved both of them into my application's vendor file (home/website/vendor). I then followed a Jcrop tutorial to install the plugin,but it doesn't work. I think my application isn't successfuly accessing one or both of the downloaded files. The Jcrop guide gave me a suggestion for what to put in my application.html.erb but said I might have to adjust the code according the actual paths. I don't know how to do this or even what to look up to research it. Can anyone help?
Application.html.erb: this is what the Jquery UI guide (http://learn.jquery.com/jquery-ui/getting-started/) told me to put
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
This is what the Jcrop guide (http://deepliquid.com/content/Jcrop_Manual.html) suggested I put into my application.html.erb, but said I may have to adjust:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
crop.html.erb
<% content_for(:head) do %>
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#cropbox").Jcrop();
});
</script>
<% end %>
<%= image_tag #thing.avatar.url(:large), :id => "cropbox" %>
Asset files (such as Javascript and CSS) should go in their respective folders inside of app/assets. For instance, if you place your files at the following locations within your application:
assets/javascripts/jquery.Jcrop.min.js
assets/stylesheets/jquery.Jcrop.css
You can then reference these files within your application.html.erb file (or crop.html.erb, using content_for) using the rails asset helpers:
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
Additionally, there is a jcrop-rails-v2 which may make the inclusion of JCrop assets easier.
Im just looking for a little clarity to better my understanding of the Rails asset pipeline. I have placed my stylesheets and javascripts within app/assets/javascripts and app/assets/stylesheets. Now i am trying to get these views to render on my page but so far nothing is showing.. I wanted to see if someone could confirm if the following looks correct
In my layouts/application i have
<%= stylesheet_link_tag "fullcalendar" %>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "jquery.js" %>
<%= javascript_include_tag "jquery.rest.js" %>
<%= javascript_include_tag "rails.js" %>
<%= javascript_include_tag "application.js" %>
<!-- these are needed for the calendar. -->
<%= javascript_include_tag "jquery-ui-1.8.11.custom.min.js" %>
<%= javascript_include_tag "fullcalendar.js" %>
<%= javascript_include_tag "calendar.js" %>
And my index.html.erb looks like
<html>
<head>
<link href="/stylesheets/fullcalendar.css" media="screen" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='/javascripts/jquery.js'></script>
<script type='text/javascript' src='/javascripts/fullcalendar.js'></script>
<script type='text/javascript' src='/javascripts/calendar.js'></script>
<script type='text/javascript' src='/javascripts/jquery-ui-1.8.9.custom.min.js'></script>
<script type='text/javascript' src='/javascripts/jquery.rest.js'></script>
Am I missing something or just being a real novice ( All constructive criticism welcome)
in Your layouts/application you just need this:
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "application", media: "all" %>
and in app/assets/stylesheets/application.css
you just need:
*=require_self
*=require_tree .
and in app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
And there's o need to include all the files
You'll have some problems in production if you include js files, to avoid it, you should add such files, ex: "fullcalendar.js" in config/production.rb, config.assets.precompile += %W(fullcalendar.js), and then run rake asset:precompile
You can see a quick overview in Ryan Bates Video: #279 Understanding the Asset Pipeline.
For more info go to the RailsGuide: Asset Pipeline.
Both helped me a lot.
I'm working through the Ruby on Rails Tutorial at http://railstutorial.org/, chapter 4, listing 4.4. I've inserted the two lines that have calls to stylesheet_link_tag, but the links aren't being inserted into the final page. Here's my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<% stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<% stylesheet_link_tag 'blueprint/print', :media => 'print' %>
</head>
<body>
<%= yield %>
</body>
</html>
Here's the output of http://localhost:3000/pages/home
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | Home</title>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="D8xx1zqWM5qqwqdabyjy5eHLPvLY/Sxe5vEFJ816fMY="/>
</head>
<body>
<h1>Sample App</h1>
<p>
This is the home page for the
Ruby on Rails Tutorial
sample application
</p>
</body>
</html>
I've copied and pasted and typed on my own, and I'm getting the same results. Suggestions?
Thanks,
Chuck
This is producing output so it needs to be in an erb block that outputs into the template:
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
the type of block you are using:
<% stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
does not have its result printed into the template.