7 ms·

Adding Breadcrumbs to a Rails Application

64 points by flow-flow 11mo ago

lixtra 11mo ago
Somehow this code lacks the magic I‘m used from rails: class BooksController < ApplicationController def show @book = Book.find(params[:id]) add_breadcrumb("Home", path: root_path) add_breadcrumb("Books", path: books_path) add_breadcrumb(@book.title) end end Only the title is specific to the show method. Home should be set by the application controller and Books by the books controller code.
- gls2ro 11mo ago
  I think it depends on how you look at things. Here is what I like about this code: 1. It is explicit 2. Breadcrumbs are information that this action needs to set. You can set them in the views or in the controller via these helpers. But no matter where you put the data it is custom data that you as developer set and it is specific to this controller. The information about how to navigate from homepage to this show method is something that either: you can use meta-programming to try to get it if you would for example scope controllers based on paths (not sure it is a good idea) or you have to provided as Rails cannot know if your controllers/views are in the top namespace.
hakunin 11mo ago
Here's my preferred approach, with breadcrumbs kept in erb views: Make this view helper. def breadcrumb(&) render(layout: 'common/breadcrumb', &) end Add this partial 'common/_breadcrumb.html.erb' (do whatever html you want): <li class="breadcrumb-item"> <%= yield %> </li> Add this to your layout: <% if content_for?(:breadcrumbs) %> <ol class="breadcrumbs"> <%= yield :breadcrumbs %> </ol> <% else %> Then this is how you use it in your views: <% content_for :breadcrumbs do %> <%= breadcrumb { link_to 'Foo', foo_url } %> <%= breadcrumb { link_to 'Bar', bar_url } %> <%= breadcrumb { 'you are here' } %> <% end %> For minitest tests I add this helper: module AssertBreadcrumbs Crumb = Struct.new(:text, :href) # Note: the block must have 1 argument per breadcrumb. It asserts their count. def assert_breadcrumbs(&blk) assert_select '.breadcrumb-item', blk.parameters.size do |items| structs = items.map { |item| if (link = item.css('a')[0]) Crumb.new(link.text, link['href']) else Crumb.new(item.text.strip) end } yield(*structs) end end end Which you can use in tests like this: assert_breadcrumbs do |item1, item2, item3| assert_equal 'Foo', item1.text assert_equal foo_url, item1.href assert_equal 'Bar', item2.text assert_equal bar_url, item2.href assert_equal 'you are here', item3.text assert_nil item3.href end
interstice 11mo ago
Idk if there’s something wrong with me but I just can’t look at tailwind classes like that and think yep that looks good to me. Reminds me of the inline php days
- padjo 11mo ago
  There’s nothing wrong with you, it’s obviously terrible. Tailwind folks will tell you you’re holding it wrong, but every tailwind codebase I’ve seen winds up like this.
  - ervine 11mo ago
    I mean the use of tailwind in the article is not good. Shows a lack of CSS understanding. Why are they applying `text-base` instead of just setting that on the root element? Why are they setting text color on the <a> tag and then overriding it on the <span> inside? This person would write bad CSS, let's not put the blame on tailwind. Also so much repetition instead of pulling each breadcrumb link out into a shared component. I understand it's just demo code for an article, but if all code bases end up like this that you've seen, the issue isn't tailwind.
    - zdragnar 11mo ago
      My limited experience is that it's a fair bit harder to do a good job of reviewing PRs with tailwind versus CSS. So many classes tend to blur together in the markup. Might just be me, but I'd rather just see clean(er) markup and styles in a css file.
    - padjo 11mo ago
      I don’t think they would write CSS that was as bad. And even if they did, I’d rather look at bad CSS than bad tailwind.
- fredrikholm 11mo ago
  I find the design aspect of stringing (primarily) defaults together very pleasing over the alternative of authoring ad hoc CSS/SASS/SCSS for every project. Inlining it however, I'm with you.
nwhnwh 11mo ago
Thank God I stopped using Rails.

64 points by flow-flow 11mo ago

lixtra 11mo ago

Somehow this code lacks the magic I‘m used from rails: class BooksController < ApplicationController def show @book = Book.find(params[:id]) add_breadcrumb("Home", path: root_path) add_breadcrumb("Books", path: books_path) add_breadcrumb(@book.title) end end Only the title is specific to the show method. Home should be set by the application controller and Books by the books controller code.

gls2ro 11mo ago
I think it depends on how you look at things. Here is what I like about this code: 1. It is explicit 2. Breadcrumbs are information that this action needs to set. You can set them in the views or in the controller via these helpers. But no matter where you put the data it is custom data that you as developer set and it is specific to this controller. The information about how to navigate from homepage to this show method is something that either: you can use meta-programming to try to get it if you would for example scope controllers based on paths (not sure it is a good idea) or you have to provided as Rails cannot know if your controllers/views are in the top namespace.

hakunin 11mo ago

Here's my preferred approach, with breadcrumbs kept in erb views: Make this view helper. def breadcrumb(&) render(layout: 'common/breadcrumb', &) end Add this partial 'common/_breadcrumb.html.erb' (do whatever html you want): <li class="breadcrumb-item"> <%= yield %> </li> Add this to your layout: <% if content_for?(:breadcrumbs) %> <ol class="breadcrumbs"> <%= yield :breadcrumbs %> </ol> <% else %> Then this is how you use it in your views: <% content_for :breadcrumbs do %> <%= breadcrumb { link_to 'Foo', foo_url } %> <%= breadcrumb { link_to 'Bar', bar_url } %> <%= breadcrumb { 'you are here' } %> <% end %> For minitest tests I add this helper: module AssertBreadcrumbs Crumb = Struct.new(:text, :href) # Note: the block must have 1 argument per breadcrumb. It asserts their count. def assert_breadcrumbs(&blk) assert_select '.breadcrumb-item', blk.parameters.size do |items| structs = items.map { |item| if (link = item.css('a')[0]) Crumb.new(link.text, link['href']) else Crumb.new(item.text.strip) end } yield(*structs) end end end Which you can use in tests like this: assert_breadcrumbs do |item1, item2, item3| assert_equal 'Foo', item1.text assert_equal foo_url, item1.href assert_equal 'Bar', item2.text assert_equal bar_url, item2.href assert_equal 'you are here', item3.text assert_nil item3.href end

interstice 11mo ago

Idk if there’s something wrong with me but I just can’t look at tailwind classes like that and think yep that looks good to me. Reminds me of the inline php days

padjo 11mo ago
There’s nothing wrong with you, it’s obviously terrible. Tailwind folks will tell you you’re holding it wrong, but every tailwind codebase I’ve seen winds up like this.
- ervine 11mo ago
  I mean the use of tailwind in the article is not good. Shows a lack of CSS understanding. Why are they applying `text-base` instead of just setting that on the root element? Why are they setting text color on the <a> tag and then overriding it on the <span> inside? This person would write bad CSS, let's not put the blame on tailwind. Also so much repetition instead of pulling each breadcrumb link out into a shared component. I understand it's just demo code for an article, but if all code bases end up like this that you've seen, the issue isn't tailwind.
  - zdragnar 11mo ago
    My limited experience is that it's a fair bit harder to do a good job of reviewing PRs with tailwind versus CSS. So many classes tend to blur together in the markup. Might just be me, but I'd rather just see clean(er) markup and styles in a css file.
  - padjo 11mo ago
    I don’t think they would write CSS that was as bad. And even if they did, I’d rather look at bad CSS than bad tailwind.
fredrikholm 11mo ago
I find the design aspect of stringing (primarily) defaults together very pleasing over the alternative of authoring ad hoc CSS/SASS/SCSS for every project. Inlining it however, I'm with you.

nwhnwh 11mo ago

Thank God I stopped using Rails.