CustomTag allows you to use custom HTML tags in your Rails project and have them be replaced with standard HTML tags and attributes. Brought on by jealousy of extracting TailwindCSS classes to simple components in frontend frameworks.
This gem allows you write custom HTML tags in your HTML output and have them replaced with other tags. For example you could do the following:
<my-card>
<h3>Your name here</h3>
<div>Job title</div>
</my-card>
And it can be replaced with:
<div class="p-4 bg-white border border-gray-200 shadow-lg">
<h3>Your name here</h3>
<div>Job title</div>
</div>
This keeps your TailwindCSS classes from being repeated all over your codebase, while not using @apply
(https://tailwindcss.com/docs/reusing-styles). It's a middleground between full template systems like Phlex and ViewComponent and just having lists of classes everywhere.
To define your tags is nice and easy. Have one or more classes that are loaded early (maybe in config/initializers
in Rails, or directly required if you're using Sinatra or some other lightweight framework) that define the tags you're creating, and how to replace the matching content with HTML. For example, to define a class that performs a single replacement, you could do:
class MyCard < CustomTag::Base
register :my_card, self
def self.build(_, attrs, content)
attrs["class"] = "p-4 bg-white border border-gray-200 shadow-lg #{attrs["class"]}".strip
super("div", attrs, content)
# The super will simply build an HTML tag from the details given
end
end
You can call the register
method with any of under_scored
, hyphen-ated
or CamelCased
tags names and it will automatically convert between them to accept any one of them as the same thing.
If you wish you can have multiple tags defined in a single class and use the first parameters of build
to distinguish between them:
class ApplicationCustomTags < CustomTag::Base
register :my_card, self
def self.build(tag_name, attrs, content)
case tag_name
when "my_card"
my_card(attrs, content)
when "..."
# ...
end
end
def self.my_card(attrs,content)
attrs["class"] = "p-4 bg-white border border-gray-200 shadow-lg #{attrs["class"]}".strip
"<div #{attrs.map { |k, v| "#{k}=\"#{v}\"" }.join(" ")}>#{content}</div>"
end
end
If you're using Rails, the CustomTag Middleware will be automatically registered for you as the last middleware to be called. If you want to use it yourself in a non-Rails app, you can use it like this:
require 'sinatra'
require 'custom_tag'
use CustomTag::Middleware
get '/hello' do
'<some HTML here... />'
end
Install the gem and add to the application's Gemfile by executing:
bundle add custom_tag
Or adding gem "custom_tag"
to your Gemfile
and running bundle install
.
If bundler is not being used to manage dependencies, install the gem by executing:
gem install custom_tag
After checking out the repo, run bin/setup
to install dependencies. Then, run bundle exec rake spec
to run the tests. You can also run bin/console
for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, run bundle exec rake install
.
To release a new version, update the version number in version.rb
, edit the CHANGELOG.md
file to explain the new release and then run bundle exec rake release
, which will create a git tag for the version, push git commits and the created tag, and push the .gem
file to rubygems.org.
Bug reports and pull requests are welcome on GitHub at https://github.com/andyjeffries/custom_tag.