I'm doing my first website with middleman and it's raising up some questions for me. One of which is if this is acceptable or/and the right approach.
My site ir organized like so:
data
about.yml
carrer.yml
...
source
en
about
index.html.erb
career
index.html.erb
...
config.rb
GemFile
Gemfile.lock
I wish to consume the .yml from my html.erb file so inside my yaml have this:
pt:
slides:
- url: "/images/url.png"
markdown: "#Heading One"
- url: "/images/url.png"
markdown: "#Heading One"
- url: "/images/url.png"
markdown: "#Heading One"
en:
slides:
- url: "/images/nocturna_new_lisbon_bridge_2.jpg"
---
markdown:
#Heading Oness
####Heading Four
---
- url: "/images/url.png"
markdown: "#Heading One"
- url: "/images/url.png"
markdown: "#Heading One"
No problem on my pt version but how can I get to make a more complicated markdown like on the en version? It doesn't work...
Finally on my index.html.erb I have somewhere in the page:
<% data.homepage_carousel.en.slides.each_with_index do |f, index| %>
<div class="item <%='active' if index == 0 %>" style="background-image:url(<%= f.url %>)">
<div class="carousel-caption">
<%= markdown f.markdown %><!-- CALLING HELPER-->
</div>
</div>
<% end %>
And that is ok...
Looks like this would do it:
en:
slides:
- url: "/images/nocturna_new_lisbon_bridge_2.jpg"
markdown: >
#Heading Oness
####Heading Four
...
The extra-lines ad spaces were what I was looking for as well as the > at the beginning of the var.
Related
I have a form I want to submit automatically whenever any input field is changed. I am using Turbo Streams, and if I use onchange: "this.form.submit()" it isn't captured by Turbo Streams and Rails uses a standard HTML response. It works fine when clicking the submit button. How can I work around this?
There is a discussion on the hotwire forum, where Mark Godwin figured out why form.submit() isn't working with turbo:
Turbo intercepts form submission events, but weirdly, the JS formElement.submit() method does not trigger the submit event.
And Jacob Daddario figures out that you can use form.requestSubmit() instead:
It turns out that the turbo-stream mechanism listens for form submission events, and for some reason the submit() function does not emit a form submission event. That means that it’ll bring back a normal HTML response. That said, it looks like there’s another method, requestSubmit() which does issue a submit event.
So you can change your code slightly, and use requestSubmit() if a browser supports it, and use submit() if not:
onchange: "this.form.requestSubmit ? this.form.requestSubmit() : this.form.submit()"
Update:
As BenKoshy pointed out, in Turbo 7.1.0, a polyfill was added so you can use form.requestSubmit() without checking for browser support, so you can add this to your input field:
onchange: "this.form.requestSubmit()"
I need to implement this for an app with lots of forms. I wound up using Stimulus. Below is the whole controller:
import { Controller } from "stimulus"
const _ = require("lodash")
export default class extends Controller {
connect() {
let that = this;
that.element.addEventListener('change', _.debounce(that.handleChange, 500))
}
handleChange(event) {
event.preventDefault()
// event.target.name // => "user[answer]"
// event.target.value // => <user input string>
event.target.form.requestSubmit()
}
}
and here it's used in a form with a single text input. NOTE the controller is attached to the form, not to the inputs.
<%= turbo_frame_tag dom_id(form_model) do %>
<%= form_with model: form_model,
format: :turbo_stream,
html: { data: { controller: "buttonless-form" } } do |f| %>
<%= f.hidden_field :question_id, value: question.id %>
<%= f.text_field :answer_value, class: "input shadow wide", placeholder: "Enter your answer here" %>
<% end %>
<div id=<%= "question_#{question.id}_output" %>>
<p> <!-- feedback to the user shows up here via Turbo -->
</div>
<% end %> <!-- end turbo frame -->
I have spent ample time researching this without finding a solution that worked. I would love it if someone could help me figure this out.
I’m trying to use Dynamic Pages in my setup, but need to include dynamic Frontmatter with this. But I can’t use Frontmatter in the template file, so I was thinking I could use a YAML data file instead? I tried various approaches, but none were successful. The dynamic pages load just fine, but every one of them will use the same Frontmatter unless I can pull in dynamic data instead.
My config includes:
["england", "france"].each do |team|
proxy "/teams/#{team}/index.html", "/teams/team.html", :locals => { :team_name => team }, :ignore => true
end
And my directory structure in this section looks like this:
teams
- index.html.erb
- team.html.erb
I began a YAML data file that includes:
england:
title: "Teams/England"
description: "England"
headline: "England"
addclass: "england cols"
france:
title: "Teams/France"
description: "France"
headline: "France"
addclass: "france cols"
When I use the aforementioned data in the template file as Frontmatter, it works just fine:
---
title: Teams/France
description: France
headline: France
addclass: france cols
---
One example of how I am using the data:
<%= current_page.data.addclass %>
My questions are as follows:
How can I use a YAML data file to serve unique data to each Dynamic Page?
Can I use the final URI segment ( “england” from /teams/england/, “france” from /teams/france/, etc.) to define which data set to use?
Can I do this without impacting other non-dynamic-pages (/matches/, /groups/, etc.) on the site?
Thank you so very much in advance.
I'd suggest changing your data format slightly. It'll allow you to pass the entire local data item to the template so you can use the data without needing to first "load it" into Frontmatter.
Adjust your teams.yml file (I've added the 'slug' value here):
items:
- title: "England"
slug: "england"
description: "England"
headline: "England"
addclass: "england cols"
- title: "France"
slug: "france"
description: "France"
headline: "France"
addclass: "france cols"
Change your config.rb block to (assuming teams.yml is at /data/teams.yml) - note the check to prevent errors if data is missing:
if File.exist?("data/teams.yml")
data.teams.items.each do |item|
p = item
proxy "teams/#{p.slug}.html", "teams/team.html", locals: { item: p }, ignore: true
end
end
This will pass all the data from the team item into the template. You won't have to "define which data set to use", since the template context will refer just to that data item.
Now, in your team.html.erb template, you can reference the data like this (in the template body, not in the Frontmatter):
<h1 class="<%= item.addclass %>"><%= item.title %></h1>
<h2><%= item.description %></h2>
<h3><%= item.headline %></h3>
This should give you two separate pages for England and France with their own unique data.
Unfortunately, Frontmatter doesn't like to be overwritten after a dynamic page is generated in Middleman. For overwriting Frontmatter that you use for metadata, specifically "title", I've had success with gem 'middleman-meta-tags' [ https://github.com/tiste/middleman-meta-tags ] which allows you to override page titles in the template body after it's been defined, sourced from the YAML data.
I need to get a relative url in the data-original attribute of img tag like this:
<img data-original="../imf/72932.png" src="../i/72932.jpg" />
But I'm getting
<img data-original="/imf/10163.jpg" src="../i/10163.jpg" />
As you can see, by setting set :relative_links, true in config.rb I can get a relative link in img's src but not in the data-original attribute with:
<%= image_tag img_url, { "data-original" => original_path } %>
where original-path is defined like this
<% original-path = "/imf/#{ wiz.file }" %>
It works of course when the site is generated dynamically in development but not when it is built statically. Is there any way to make original_path work like a relative path?
Elixir version: 1.3.2
Phoenix version: 1.2.1
NodeJS version: 4.4.6
NPM version: 3.10.6
Brunch version: 2.7.4
Operating system: Mac OSX
I am trying to create what suppose to be a simple link using Phoenix's link helper function.
<li><%= link "Logout", to: session_path(#conn, :delete, user), method: :delete %></li>
renders
<form action="/logout/1" class="link" method="post">
<input name="_method" type="hidden" value="delete">
<input name="_csrf_token" type="hidden" value="VhxiLApJElIS...removed for clarity">
<a data-submit="parent" href="#" rel="nofollow">Logout</a>
</form>
The button works fine and the user logs out but the styling of the button isn't being applied. See below:
The "logout" button should be aligned with and contain hover effects like the "Home" button . What is removing the styling of the logout button?
When a user logs out the styling returns:
Here are other related issues on the delete link functionality.
Delete link not working phoenix
https://github.com/phoenixframework/phoenix/issues/1204
https://github.com/phoenixframework/phoenix/issues/1408
https://github.com/phoenixframework/phoenix/issues/1319
Here's what I've tried based on the other issues I've found:
run brunch build- compilation succeeds
change the link function to button
Hopefully this is enough information to get some input.
The delete links do create a form and this is expected. If you look at what the generators create, its something like below:
<%= link "Delete", to: schedule_path(#conn, :delete, schedule), method: :delete, data: [confirm: "Are you sure?"], class: "btn btn-danger btn-xs" %>
You cannot call a delete or post method from a anchor directly, so Phoenix makes a form for you. It's a convenience feature, but can be confusing at first. So if the form is not working the problem may be in your controller not with the form itself.
I know that there are options to do this manually, such as here : How do you make the entire DIV clickable to go to another page?
However, in Rails 3 we make links like this:
<%= link_to "name", url %>
And I am wondering -- is there a proper Rails way to make a whole div a button. I realize I could make a button. However, let's say I want to fill it with content like text and a picture - then how would I make that whole div clickable in a rails way?
For example:
<%= #story.title %>
<%= #story.blurb %>
In this example, I would want to make #story clickable, with the rails generated content that I specified.. Any ideas?
For those interested, the answer is:
<div class="class_name">
<%= link_to content_tag(:span, "Text for the LInk"), route %>
</div>
And then, in the CSS set .class_name to position:relative; and:
.class_name span {
width:100%;
height:100%;
position:absolute;
z-index:2;
top:0px;
left:0px;
}
The link will now assume the size of its parent container, and thus give the impression the whole container is a link.
I think that button_to is what you need :
http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to
I might use jquery if you really wanted to do this
$(document).ready(function() {
$('#somediv').click(function(event){
document.location = 'http://someplace.com';
});
});
You can't make a "clickable" raw div like that in a rails way... the concept doesn't make any sense. That's just not how it works
(added missing close parens for click)
not tested